/*
 * Colors and fonts extracted from the live molivesteamers.org (Astra WP
 * theme), fetched 2026-08-14:
 *   https://molivesteamers.org/prod-wp/wp-content/themes/astra/assets/css/minified/main.min.css
 * The theme's global palette is set as inline CSS custom properties on the
 * live page (--ast-global-color-0 .. -8); values below are copied verbatim
 * from that inline block. Fonts come from the Google Fonts <link> the theme
 * loads (Mulish for body text, DM Sans for headings) plus the same-declared
 * font-family rules in main.min.css.
 */
:root {
  --primary-color: #2a9d8f;   /* --ast-global-color-0: button/link background */
  --accent-color: #097c6e;    /* --ast-global-color-1: darker teal accent */
  --light-bg: #ecf4f3;        /* --ast-global-color-4 */
  --text-color: #000000;      /* --ast-global-color-2 */
  --font-body: 'Mulish', sans-serif;
  --font-heading: 'DM Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  margin: 0;
  background: var(--light-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

header, footer {
  background: var(--primary-color);
  color: #fff;
  padding: 1.5rem;
}

footer {
  text-align: center;
}

footer p {
  max-width: 42em;
  margin: 0 auto 0.5rem;
}

footer p:last-child {
  margin-bottom: 0;
}

/* Solid header on every page except Home (which has its own overlay-nav
   brand+links, styled separately below). Same brand-left/links-right
   row as the overlay nav, just on a solid background instead of a
   photo — logo is deliberately much smaller than the hero's 92px so it
   fits inside the header's existing 1.5rem padding without growing the
   bar itself. */
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

header .brand img {
  height: 48px;
  width: auto;
  display: block;
}

/* The club name filling the wide empty gap that used to sit between
   the logo and the nav links on desktop — img's alt is now empty
   (decorative) since this text carries the brand link's accessible
   name instead of duplicating it. */
header .brand-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* Scoped to the solid header only — the overlay nav on the home page
   hero styles its own links independently (see .overlay-nav .links a
   below) and shouldn't inherit this spacing on top of its own gap. */
header nav a {
  color: #fff;
  margin-right: 1rem;
  text-decoration: none;
}

header nav a:hover {
  color: var(--light-bg);
}

/* Al asked for the current page's nav link to actually look selected —
   .current is set in base.njk (item.url == page.url) but had no visual
   treatment of its own before this. Bare "nav a.current" (not scoped
   to header) so this one rule also covers .overlay-nav's links on the
   home page, which is a <nav> too — one consistent "you are here"
   treatment site-wide instead of two separate rules. */
nav a.current {
  font-weight: 700;
}

/* ---- Hamburger toggle, shared by the solid header nav and the home
   page's overlay nav. Hidden by default; the media query below (same
   800px breakpoint used elsewhere in this file) shows it and collapses
   the link list into a panel it opens/closes. ---- */
.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 800px) {
  .nav-toggle {
    display: flex;
  }

  /* Smaller on mobile so logo + name + hamburger fit on one row
     without wrapping; min-width: 0 overrides flex's default
     min-width: auto (which otherwise ignores overflow/ellipsis and
     just pushes the row wider instead of truncating). Both .brand and
     .brand-name need it — .brand is the shrinking flex item inside
     header nav, .brand-name is the shrinking item inside .brand. */
  header .brand {
    min-width: 0;
  }

  header .brand-name {
    font-size: 1rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  header .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
  }

  header .nav-links.is-open {
    display: flex;
  }

  header .nav-links a {
    margin-right: 0;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ---- Home page: mission/highlights + schedule card, two columns
   (real layout from the old site — a single stacked column previously
   stood in for this). ---- */
.content-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  max-width: 62em;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .content-row {
    grid-template-columns: 1fr;
  }
}

.content-col p {
  margin: 0 0 1rem;
}

.content-col .summary {
  color: var(--text-color);
  opacity: 0.75;
}

.highlights {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.highlights li {
  margin: 0 0 0.6rem;
  padding-left: 1.5rem;
  position: relative;
  font-weight: 600;
}

.highlights li::before {
  content: "\2605";
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

.schedule-card {
  border: 1px solid #d8d8d8;
  border-radius: 28px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: #fff;
}

.schedule-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
}

.schedule-card .time {
  margin: 0 0 1.5rem;
  font-weight: 700;
  color: var(--accent-color);
}

.schedule-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.schedule-card .closing {
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.75;
  margin: 0;
}

/* ---- Home page: location/map section, full-bleed aerial photo of the
   actual park with the address overlaid and a live embedded map. The
   photo/overlay stays full-bleed on .location-photo; the actual content
   (address + map) is centered as a group via .location-inner, the same
   max-width-and-auto-margin pattern used by .content-row/.tiers, rather
   than stretching to the section's full width on wide viewports. ---- */
.location-photo {
  position: relative;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.location-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 15, 0.55);
}

.location-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62em;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
}

@media (max-width: 800px) {
  .location-photo {
    min-height: 0;
  }
  .location-inner {
    grid-template-columns: 1fr;
  }
}

.location-text {
  text-align: center;
  color: #fff;
}

.location-text .addr {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.location-text img {
  height: 42px;
  width: auto;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
}

.map-embed {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  margin: 1.5rem 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (max-width: 800px) {
  /* At the mobile single-column width there's no text to pair with, so
     the map should center in the full-width column rather than default
     to its two-column-desktop left alignment. */
  .map-embed {
    justify-self: center;
  }
}

/* ---- About page: real-photo rotator in the second column of the
   reused .content-row grid — was a single static <img>, now a small
   crossfading carousel (reusing the same .carousel-slide/.carousel-
   pause pieces the home page hero carousel already defines) so the
   column shows more than one real photo. Fixed aspect-ratio + relative
   positioning gives the absolutely-positioned slides something to fill;
   3:4 matches the original about-switch.jpg's own portrait crop most
   closely, and crops the mix of portrait/landscape real photos
   consistently via object-fit: cover, same approach the hero uses. ---- */
.about-photo-rotator {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.about-photo-rotator .carousel-track {
  position: absolute;
  inset: 0;
}

.tier {
  padding: 1.75rem 1.5rem;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14);
}

/* ---- Membership page: tier card title. min-height reserves room for
   the 2-line case (name + .tier-qualifier below it) on every card, not
   just the ones that actually have a qualifier — so the price/
   privileges lines below start at the same vertical position across
   every card in a row, whether or not that particular card's own title
   wraps to 2 lines. ---- */
.tier h2 {
  margin: 0 0 0.5rem;
  min-height: 2.4em;
}

.tier-qualifier {
  font-size: 0.7em;
  font-weight: 400;
  opacity: 0.75;
}

/* Al asked to center everything in each of the 4 membership tier
   cards, the 2 "Ways to Pay" cards, and Donate's 4 benefit cards —
   scoped individually (not a bare .tier rule) in case any future page
   reuses .tier and wants to keep its own left-aligned convention
   instead. (Contact's single card, formerly #contact-card, was removed
   entirely -- redundant once the compose-style message form shipped.) */
#membership-tiers .tier,
.payment-paths .tier,
.donate-benefits .tier {
  text-align: center;
}

/* ---- Generic top-level content wrapper for anything that isn't
   already inside a padded/centered section (.content-row, .tiers,
   .membership-callout, etc.) — those all share this same max-width +
   auto-margin + 1.5rem side-padding convention. Without it, raw
   <h1>/<h2>/<p> straight under <main> run edge-to-edge with zero
   breathing room, which is most visible on narrow phone screens where
   there's no second grid column to imply any margin at all. ---- */
.page-body {
  max-width: 62em;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}

.page-body form {
  text-align: center;
}

/* ---- Donate page: the PayPal Donate SDK button. Centering has needed
   re-fixing twice now as the markup changed (<form> -> <a> link -> this
   SDK-rendered div) -- each swap silently dropped whatever rule
   targeted the previous element, since ".page-body form"/".donate-button"
   no longer matched anything. This targets the actual wrapper div
   PayPal's SDK renders its button into, not the SDK's own inner markup,
   so it should survive future button-config changes from the same
   builder. ---- */
#donate-button-container {
  display: flex;
  justify-content: center;
  /* PayPal's Donate SDK renders a fixed-size image inside an iframe --
     there's no size config to request a bigger button from PayPal
     itself, so it's scaled up here instead. */
  transform: scale(1.33);
  transform-origin: center;
  margin: 0.5rem 0;
}

/* ---- Membership page: short "New members welcome!" pill under the
   h1 — was a full sentence of body copy, Al asked for something
   shorter and set apart as a callout instead of blending into a
   regular paragraph. display: table shrink-wraps to the text (like
   inline-block) while still honoring margin: 0 auto for centering. ---- */
.page-callout {
  display: table;
  margin: 0.75rem auto 0;
  padding: 0.4rem 1.1rem;
  background: var(--light-bg);
  color: var(--accent-color);
  font-weight: 700;
  border-radius: 999px;
}

/* ---- Section-level headings read as centered everywhere else on this
   site (page banners, the schedule card, hero copy) — these were the
   remaining stragglers left at the browser's default left alignment.
   Card titles inside .tier are deliberately left out of this list;
   those follow their own left-aligned card-content convention. ---- */
.page-body h1,
.page-body h2,
.page-body h3,
.content-col h2,
.content-col h3,
.content-col h4,
.payment-paths h2,
.membership-form-section h2,
.donate-body h2,
.donate-benefits h2,
.donate-closing h2 {
  text-align: center;
}

/* ---- Short one-line intro sentences under a page's h1/h2 (currently
   just Contact's) — centered like the heading above them, unlike the
   longer body paragraphs elsewhere in .page-body which stay
   left-aligned for readability. Opt-in via class, not a blanket
   .page-body p rule. ---- */
.page-intro {
  text-align: center;
}

/* ---- Membership thank-you page: a short, self-contained confirmation
   page (not a long-form content page) -- Al asked for the whole thing
   centered, heading and closing text alike, unlike the left-aligned
   body-copy default elsewhere in .page-body. text-align is inherited,
   so setting it once on the wrapper centers the h1, the #mtky-status
   message, and the closing paragraph together -- no child rule
   currently overrides it back to left. ---- */
.membership-thank-you-body {
  text-align: center;
}

/* ---- Contact page: mailto CTA styled to match the site's existing
   button convention (filled primary-color, white text, same subtle
   rounding and padding as button/input[type="submit"]). A separate
   rule because <a> isn't covered by that selector list. ---- */
.button-link {
  display: inline-block;
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 1rem 1.9rem;
  text-decoration: none;
}

.button-link:hover {
  background: var(--accent-color);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  max-width: 62em;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- .tier icon (donate page benefit cards): a real emoji glyph above
   the card title, sized to read as a small icon without overpowering
   the heading. Purely decorative — the title already conveys the
   category — so it's aria-hidden in the markup. ---- */
.tier-icon {
  font-size: 2.25rem;
  line-height: 1;
  margin: 0 0 0.6rem;
}

/* ---- Donate page: small "Est. 1968 · Union, Missouri" eyebrow line
   above the page <h1>. Reuses the existing accent color rather than a
   new token; uppercase + letter-spacing is the only new typographic
   treatment introduced, kept intentionally understated. ---- */
.page-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* ---- Donate page: closing "Make a Donation" section after the PayPal
   form. Deliberately plain — light background, no new color band or
   pill button, matching how .donate-body reads above it rather than
   the live site's dark-teal band/pill-CTA treatment. ---- */
.donate-closing {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d8d8d8;
}

.donate-closing h2 {
  margin: 0 0 0.5rem;
}

.donate-closing p {
  margin: 0;
}

/* ---- Home page hero: full-bleed rotating photo with the nav and title
   overlaid directly on it (heroHeader: true suppresses the normal solid
   <header> in base.njk for this page only). ---- */
.hero-photo {
  position: relative;
  width: 100%;
  /* aspect-ratio (not a viewport-height unit) ties the hero's height to
     its own width, so widening the browser window scales both together
     and the photo's object-fit: cover crop stays consistent. A
     height driven purely by vh is independent of width, so widening the
     window without changing the height forces cover to scale the photo
     up further to fill the extra width — cropping more off the top and
     bottom, which reads as the image "zooming in" as the window grows.
     min/max-height remain as safety rails for extreme viewport shapes. */
  aspect-ratio: 21 / 9;
  min-height: 420px;
  max-height: 640px;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(10, 20, 18, 0.55) 0%,
    rgba(10, 20, 18, 0.05) 30%,
    rgba(10, 20, 18, 0.1) 55%,
    rgba(10, 20, 18, 0.85) 100%
  );
}

.hero-photo .carousel-track {
  position: absolute;
  inset: 0;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-slide.is-active {
  opacity: 1;
}

.overlay-nav {
  position: relative;
  /* Must outrank .hero-copy/.hero-dots/.carousel-pause (all z-index: 2)
     — .overlay-nav establishes its own stacking context, so its open
     dropdown panel (z-index: 3, but only compared *within* that local
     context) is otherwise evaluated from the outside as this element's
     own z-index. Tied at 2, .hero-copy would win the tie-break (later
     in DOM order) and paint over the open panel, hiding it. */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.overlay-nav .brand {
  display: flex;
  align-items: center;
}

.overlay-nav .brand img {
  /* 92px is still within the source logo's native 97px height (see
     extract-assets.mjs) at 1x display density, so this stays crisp —
     going meaningfully bigger than this would start visibly upscaling. */
  height: 92px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.overlay-nav .links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.overlay-nav .links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.overlay-nav .links a:hover,
.overlay-nav .links a.current {
  border-bottom-color: var(--primary-color);
}

@media (max-width: 800px) {
  /* The overlay nav's links become a dropdown panel with a solid
     background — it can't stay transparent like the desktop version,
     since it needs to read clearly against whichever busy photo is
     behind it. */
  .overlay-nav .links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.5rem;
    background: rgba(8, 16, 15, 0.96);
  }

  .overlay-nav .links.is-open {
    display: flex;
  }

  .overlay-nav .links a {
    padding: 0.85rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* .hero-photo's overflow: hidden exists to crop the rotating carousel
     photos, but at this breakpoint the hero is pinned to its 420px
     min-height floor (aspect-ratio never grows it past that below
     ~980px wide) — leaving too little room for all 6 open panel links
     before hitting that same clip. Letting overflow go visible only
     while the panel is open keeps the panel from being cut off, with no
     effect on the photos themselves (object-fit: cover already keeps
     them exactly sized to the box regardless of overflow). */
  .hero-photo:has(.links.is-open) {
    overflow: visible;
  }
}

.hero-copy {
  position: relative;
  z-index: 2;
  /* Push down to the bottom of the flex column instead of landing in
     the middle: the scrim gradient is deliberately darkest at the top
     (behind the nav) and bottom (behind this text + the dots) and
     lightest in the middle, so the title/tagline need to sit in one of
     the protected zones, not between them. */
  margin-top: auto;
  text-align: center;
  padding: 0 1.5rem 1.5rem;
}

.hero-copy h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  text-wrap: balance;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-copy .tagline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #dff5f0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding-bottom: 1rem;
}

.hero-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.hero-dots span.active {
  background: #fff;
}

.carousel-pause {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.carousel-pause:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-pause svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  display: block;
}

/* Only one of the two icons shows at a time, matching the JS-managed
   .is-paused class (set when the slideshow is currently paused, so the
   button now offers Play). */
.carousel-pause .icon-play {
  display: none;
}

.carousel-pause.is-paused .icon-pause {
  display: none;
}

.carousel-pause.is-paused .icon-play {
  display: block;
}

button, input[type="submit"], input[type="image"] {
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 1rem 1.9rem;
}

button:hover, input[type="submit"]:hover {
  background: var(--accent-color);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--primary-color);
}

/* ---- Membership page: PayPal submit button gets the real PayPal mark
   (sourced from paypalobjects.com, PayPal's own asset host — same
   convention as the Donate page's official PayPal button image)
   alongside its existing text. Buttons are inline-block by default, so
   this switches just this one to inline-flex to align the icon and
   text on one baseline instead of the icon's own default alignment. ---- */
.btn-paypal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.btn-paypal img {
  display: block;
}

a {
  color: var(--accent-color);
}

/* ---- Membership page: tier card price/privileges text and the small
   "pay by mail" pointer under each card's PayPal button. ---- */
.tier-price {
  font-weight: 700;
  color: var(--accent-color);
  margin: 0 0 0.5rem;
  text-align: center;
}

.tier-privileges {
  margin: 0 0 1rem;
}

.tier-mail-note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ---- Membership page: was repeated once per tier card (redundant —
   every card said the same thing); now a single shared note under the
   whole .tiers grid instead, same max-width/centering convention as
   the rest of the page's top-level sections. ---- */
.tier-mail-note-shared {
  max-width: 62em;
  margin: 0.75rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
}

/* ---- Membership page: the insurance-requirement and graduated-dues
   callout, deliberately set apart from the tier cards above it (not a
   footnote) with a left accent border and light background, matching
   the site's existing teal palette rather than introducing a warning
   color that isn't otherwise used on this site. ---- */
.membership-callout {
  max-width: 62em;
  margin: 1.5rem auto 0;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-left: 4px solid var(--primary-color);
  border-radius: 4px;
}

.membership-callout p {
  margin: 0 0 0.6rem;
}

.membership-callout p:last-child {
  margin-bottom: 0;
}

/* ---- Membership page: "Ways to Pay" section reusing the .tiers/.tier
   grid pattern for the two payment paths (PayPal vs. mail a check). ---- */
.payment-paths {
  max-width: 62em;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}

.payment-paths h2 {
  margin: 0 0 1rem;
}

.treasurer-address {
  font-weight: 600;
}

/* ---- Membership page: the real registration form. Bordered inputs
   with padding, a border-radius consistent with .tier/.button-link,
   focus states using the existing color tokens rather than a new
   accessibility color. ---- */
.membership-form-section,
.contact-form-section {
  max-width: 42em;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem 3rem;
}

.membership-form-section h2 {
  margin: 0 0 0.5rem;
}

/* ---- Contact page: the "Send Message" form is styled to read as an
   email compose window (shaded To: header bar, borderless Name/Email/
   Message fields with small label rows, shaded Send footer) even
   though it's really a JS fetch() to the contact webhook, not a real
   mailto:. The bordered card + row dividers do the "looks like an
   email client" work; input/textarea keep the site's real focus/border
   styling underneath (just without their own visible border, since the
   card itself already has one). ---- */
#contact-form {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.compose-to {
  padding: 0.75rem 1rem;
  background: var(--light-bg);
  border-bottom: 1px solid #d8d8d8;
  font-size: 0.9rem;
}

#contact-form .form-row {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
  gap: 0.25rem;
}

#contact-form .form-row label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  font-weight: 700;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  border: none;
  padding: 0;
  border-radius: 0;
}

#contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

#contact-form input:focus,
#contact-form textarea:focus {
  box-shadow: none;
}

.contact-form-submit {
  padding: 1rem;
  text-align: center;
  background: var(--light-bg);
}

#membership-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-row label,
.form-row .form-row-label {
  font-weight: 600;
}

.form-row .optional {
  font-weight: 400;
  opacity: 0.7;
}

.form-row-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

@media (max-width: 800px) {
  .form-row-group {
    grid-template-columns: 1fr;
  }
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font: inherit;
  padding: 0.65rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--text-color);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.25);
}

.form-row-radio {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
}

.form-row-radio .form-row-label {
  flex-basis: 100%;
}

.form-row-radio label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.form-row-tier {
  flex-direction: column;
  align-items: flex-start;
}

.form-row-tier label {
  display: flex;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--primary-color);
  width: 1.05rem;
  height: 1.05rem;
}

.form-privacy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--light-bg);
  border-radius: 4px;
}

.form-privacy p {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.form-privacy label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

/* ---- Membership page: the two submit buttons ("Register & Pay via
   PayPal" / "Register (I'll Mail a Check)") share one form so the
   browser can tell us which was actually clicked via event.submitter.
   Laid out as a row that wraps to stacked full-width buttons on narrow
   screens, matching the .form-row-group breakpoint above. Buttons keep
   the site's existing filled button styling — no new visual language. ---- */
.form-submit-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

/* Al asked for these two specifically to read as more rounded than the
   site's default square-corner buttons ("just square boxes") — scoped
   here rather than raising the global button rule above, so the rest
   of the site keeps its deliberate square-corner match to the legacy
   site's own button styling. */
.form-submit-group button {
  border-radius: 10px;
  text-align: center;
}

@media (max-width: 800px) {
  .form-submit-group {
    flex-direction: column;
  }

  .form-submit-group button {
    width: 100%;
  }
}

.form-status {
  max-width: 42em;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-weight: 600;
}

/* The element stays in the DOM (not hidden/display:none) from page
   load so screen readers register it as a live region before its first
   content change — an element that only appears once populated is
   generally not announced. :empty collapses its visual footprint (the
   unconditional padding above) back to nothing until JS actually puts
   a message in it. */
.form-status:empty {
  margin: 0;
  padding: 0;
}

.mf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status-success {
  background: #e3f5f0;
  color: var(--accent-color);
  border: 1px solid var(--primary-color);
}

.form-status-error {
  background: #fbeaea;
  color: #a33a3a;
  border: 1px solid #d98c8c;
}