/* ==========================================================================
   Country Car Show — stylesheet (multi-page, mobile-first)
   --------------------------------------------------------------------------
   AUTHORING APPROACH: mobile-first.
     - The "base" rules (no @media query) describe the PHONE layout.
     - Larger screens are enhanced UPWARD with three min-width breakpoints:
         tablet   ≥ 48em  (~768px)
         desktop  ≥ 64em  (~1024px)   ← full horizontal nav appears here
         large    ≥ 90em  (~1440px)
     - The desktop design is deliberate, NOT a stretched-up phone layout.

   Organized in this order:
     1.  Custom properties (colors, fonts, spacing)
     2.  Reset & base
     3.  Typography & links
     4.  Layout containers
     5.  Skip link & accessibility helpers
     6.  Header, brand, contact email
     7.  Navigation + hamburger toggle
     8.  Hero
     9.  Generic sections
    10.  Cards / about / meeting info
    11.  Events list
    12.  Buttons
    13.  Registration form
    14.  Form success / error panels
    15.  Photo gallery (responsive image grid)
    16.  Sponsors
    17.  Contact section
    18.  Footer
    19.  TABLET breakpoint   (min-width: 48em)
    20.  DESKTOP breakpoint  (min-width: 64em)
    21.  LARGE breakpoint    (min-width: 90em)
    22.  Reduced motion + print

   Older audience considerations (do NOT regress these):
     - Body text 18–20 px (fluid via clamp, never below 18px)
     - Line-height 1.6
     - High-contrast text on cream/white backgrounds (no gray on white)
     - Visible focus rings on every interactive element
     - In-content links underlined
     - Buttons ≥ 48 px tall, form submit ≥ 56 px, tap targets ≥ 44 px
     - Form inputs ≥ 16px font so iOS Safari does not zoom on focus (we use 19px)
   ========================================================================== */


/* 1. Custom properties --------------------------------------------------- */
:root {
  /* Colors (pulled from the Country Car Show poster: navy / gold / white,
     with a red accent reserved for the primary call-to-action button.) */
  --color-bg:               #F8F6EE;   /* faint cream — gives subtle rhythm between alternating sections */
  --color-bg-alt:           #FFFFFF;
  --color-surface:          #FFFFFF;
  --color-text:             #1A1A1A;
  --color-text-muted:       #3A3A3A;
  --color-accent:           #1A2A5C;   /* deep navy — primary identity color (poster headline + border) */
  --color-accent-dark:      #0F1A3D;
  --color-accent-light:     #2C3F75;
  --color-accent-secondary: #F2B705;   /* warm gold — poster sun + "12th Annual" banner */
  --color-accent-secondary-dark: #B98700;
  --color-cta:              #C8102E;   /* red — poster "$25 / $20" bursts; reserved for primary CTA only */
  --color-cta-dark:         #9B0B23;
  --color-border:           #D8D4C5;
  --color-border-strong:    #B8B19E;
  --color-error:            #A02830;
  --color-error-bg:         #FBEDEE;
  --color-success:          #3A6B35;
  --color-success-bg:       #EDF4EC;

  /* Typography */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type — clamp(min, preferred, max). Mins keep body ≥ 18px for the
     older audience; maxes match the previous desktop sizes. */
  --fs-base:   clamp(18px, 1rem + 0.25vw, 20px);   /* body */
  --fs-small:  clamp(16px, 0.9rem + 0.2vw, 17px);  /* footnotes / hints (≥16px so iOS won't zoom) */
  --fs-h1:     clamp(34px, 5vw + 1rem, 46px);
  --fs-h2:     clamp(26px, 3vw + 1rem, 34px);
  --fs-h3:     clamp(22px, 1.5vw + 1rem, 26px);

  /* Spacing */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  48px;    /* base (mobile) — grows to 64px at the desktop breakpoint */
  --space-xxl: 96px;

  /* Layout */
  --width-content: 720px;    /* prose: keeps ~60–75 characters per line */
  --width-wide:    1080px;   /* grids / wide content */
  --radius:        4px;

  /* Used by anchor scrolling so headings don't hide under the sticky header.
     Mobile (stacked header) is taller; the desktop breakpoint shrinks it. */
  --header-offset: 132px;
}


/* 2. Reset & base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Belt-and-suspenders against horizontal scroll at narrow widths. */
  overflow-x: hidden;
}

img,
svg { max-width: 100%; height: auto; display: block; }

ol, ul { padding-left: 1.4em; }


/* 3. Typography & links -------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.25;
  margin: 0 0 var(--space-md);
  /* Long single words (e.g. emails, URLs) shouldn't force horizontal scroll. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
/* h3 gets a generous top margin so it breathes after cards/lists above it;
   first-child resets it (e.g. ".meeting-info h3" already overrides). */
h3 { font-size: var(--fs-h3); color: var(--color-accent); margin-top: var(--space-lg); }
h3:first-child { margin-top: 0; }

p { margin: 0 0 var(--space-md); }

p + p { margin-top: 0; }

strong { font-weight: 700; }
em     { font-style: italic; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}

a:hover,
a:focus-visible {
  color: var(--color-accent-dark);
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: 3px solid var(--color-accent-secondary-dark);
  outline-offset: 3px;
  border-radius: var(--radius);
}


/* 4. Layout containers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container-wide {
  max-width: var(--width-wide);
}


/* 5. Skip link & accessibility helpers ---------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
  text-decoration: underline;
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

/* Visually hidden but available to screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.required {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85em;
  white-space: nowrap;
}
.optional {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.85em;
  white-space: nowrap;
}

/* Honeypot field: invisible to humans, picked up by bots. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 6. Header, brand, contact email ---------------------------------------- */
/* The header is sticky on every page. On mobile it stacks: a top bar (brand +
   hamburger), then the contact-email link, then the collapsible nav. The
   desktop breakpoint re-lays these into a single horizontal row + full nav
   bar. (The .header-phone class names are historical: the button held a phone
   number through v2.0.2 and shows the club email since v2.0.3.) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-alt);
  border-bottom: 4px solid var(--color-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  /* Respect the iOS notch / rounded corners on the sticky bar. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Logged-in users (e.g. the maintainer) see the fixed WordPress admin bar;
   without this offset the sticky header slides underneath it when scrolling.
   WP's admin bar is only position:fixed at ≥600px — below that it scrolls
   away, so no offset is needed (or wanted) there. Visitors are unaffected. */
@media (min-width: 600px) {
  .admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

.header-top {
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.brand-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.brand-link:hover,
.brand-link:focus-visible { color: inherit; }

.brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
}
.brand-tagline {
  display: block;
  font-size: clamp(15px, 3vw, 18px);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.header-phone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  background: var(--color-bg);
  padding: var(--space-xs) var(--space-md);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  line-height: 1.2;
  min-height: 48px;
  justify-content: center;
}
.header-phone:hover,
.header-phone:focus-visible {
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
}
.header-phone-label {
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: inherit;
}
.header-phone-number {
  /* Sized for the club email address (~24 characters, twice the old phone
     number). clamp() shrinks it on narrow phones (<=350px) so the address
     stays on one line, like .brand-tagline does; 18px everywhere else.
     overflow-wrap is a safety net should a longer address ever be set. */
  font-size: clamp(15px, 4.7vw, 18px);
  font-family: var(--font-body);
  overflow-wrap: anywhere;
}

/* On mobile the email link is a full-width band beneath the top bar so the
   address stays large and tappable. The desktop breakpoint moves it inline. */
.header-phone-wrap {
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-sm);
  display: flex;
  justify-content: center;
}
.header-phone-wrap .header-phone {
  width: 100%;
  max-width: 420px;
}

/* On mobile, ONLY the full-width email band (.header-phone-wrap) is shown.
   The inline email link inside .header-top is desktop-only — it is re-shown at
   the desktop breakpoint (section 20). Hiding it here keeps the top row
   (brand + hamburger) from overflowing narrow phones down to 320px. */
.header-top .header-phone { display: none; }


/* 7. Navigation + hamburger toggle -------------------------------------- */
/* PROGRESSIVE ENHANCEMENT: with no JS the nav is simply visible (stacked).
   script.js adds the .js-nav class to <body>, which collapses the nav behind
   the hamburger on small screens. So if JS is off, everything still works. */

/* The hamburger button is hidden until JS turns it on, and only shows below
   the desktop breakpoint. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-height: 48px;
  cursor: pointer;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-accent);
  color: #fff;
}
.nav-toggle-bars {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background-color 0.15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

/* When JS is active, reveal the hamburger on small screens. */
.js-nav .nav-toggle { display: inline-flex; }

.site-nav {
  background: var(--color-accent);
}
.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--width-wide);
  display: flex;
  flex-direction: column;   /* mobile: stacked nav */
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 14px 22px;
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-accent-light);
  min-height: 48px;
}
.site-nav li:last-child a { border-bottom: none; }
.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--color-accent-dark);
  color: #fff;
}

/* Active page marker (set with aria-current="page" on the link). */
.site-nav a[aria-current="page"] {
  background: var(--color-accent-dark);
  border-left: 6px solid var(--color-accent-secondary);
  padding-left: 16px;
}

/* "Pre-Register" emphasis nav item — gold pill so it stands out. */
.site-nav a.nav-cta {
  color: var(--color-accent);
  background: var(--color-accent-secondary);
  font-weight: 700;
}
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta:focus-visible {
  background: var(--color-accent-secondary-dark);
  color: var(--color-accent-dark);
}
.site-nav a.nav-cta[aria-current="page"] {
  border-left-color: var(--color-accent);
}

/* COLLAPSED state (JS on, small screens, not expanded): hide the nav list.
   The [hidden]-friendly approach: we toggle .nav-open on the header. */
.js-nav .site-nav {
  display: none;
}
.js-nav .site-header.nav-open .site-nav {
  display: block;
}


/* 8. Hero ---------------------------------------------------------------- */
.hero {
  background: var(--color-bg-alt);
  border-bottom: 4px solid var(--color-accent-secondary);
  padding: var(--space-xl) 0;
  text-align: center;
}
.hero h1 {
  margin-bottom: var(--space-sm);
  letter-spacing: 0.01em;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(18px, 4vw, 22px);
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-secondary);
  padding: 6px 20px;
  margin: 0 0 var(--space-md);
  border-radius: var(--radius);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Playfair Display defaults to old-style figures, which makes "12" look
     smaller and lower than the surrounding caps. Force lining figures so
     the number matches the cap-height of "ANNUAL". */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.hero-date {
  font-family: var(--font-heading);
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}
.hero-message {
  font-size: clamp(19px, 2vw, 22px);
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  color: var(--color-text);
}


/* 9. Generic sections --------------------------------------------------- */
.section {
  padding: var(--space-xl) 0;
}
.section-light {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.section-intro {
  font-size: clamp(18px, 1.5vw, 19px);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* Centered short pages (404, thank-you). */
.section-error,
.section-centered {
  text-align: center;
}
.section-error .hero-message,
.section-centered .hero-message {
  margin-left: auto;
  margin-right: auto;
}


/* 10. Cards / about / meeting info -------------------------------------- */
/* Generic reusable card. Use for any boxed content block. */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Feature grid — a two-up layout for text/detail pages (event, winners,
   youth) so wide screens are used deliberately instead of stranding one
   narrow column in the middle of a 1440px viewport. Single column on
   phones + tablets; two columns from the desktop breakpoint up, where each
   column still keeps a readable measure. Pair with .container.container-wide.
   Use .feature-grid--aside when one side is a narrower complementary panel. */
.feature-grid {
  display: grid;
  gap: var(--space-lg);
}
.feature-grid > * { min-width: 0; }   /* let grid children shrink + wrap */

.meeting-info {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  border-left: 6px solid var(--color-accent-secondary);
  border-radius: var(--radius);
}
.meeting-info h3 {
  margin-top: 0;
  color: var(--color-accent);
}

.meeting-list {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: stacked term/definition */
  gap: var(--space-xxs) var(--space-md);
  margin: 0;
}
.meeting-list dt {
  font-weight: 700;
  color: var(--color-text);
}
.meeting-list dd {
  margin: 0 0 var(--space-xs);
}


/* 11. Events list -------------------------------------------------------- */
.events {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-lg);
}
.event {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.event-name {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-family: var(--font-heading);
}
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}
.event-meta-item {
  display: inline-block;
}
.event-description {
  margin-bottom: var(--space-md);
}


/* 12. Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  min-height: 48px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

.btn-primary {
  background: var(--color-cta);
  color: #fff;
  border-color: var(--color-cta);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-cta-dark);
  border-color: var(--color-cta-dark);
  color: #fff;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-accent);
  color: #fff;
}

.btn-large {
  font-size: 22px;
  padding: 18px 36px;
  min-height: 56px;
}

.btn-submit {
  font-size: 22px;
  padding: 18px 32px;
  min-height: 56px;
  width: 100%;
  max-width: 420px;
}


/* 13. Registration form ------------------------------------------------- */
.registration-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.form-row {
  margin-bottom: var(--space-lg);
}
.form-row label {
  display: block;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;        /* ≥16px so iOS Safari does not zoom on focus */
  line-height: 1.4;
  color: var(--color-text);
  background: #fff;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 14px 14px;
  min-height: 52px;
}

.form-row textarea {
  min-height: 110px;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 3px solid var(--color-accent-secondary-dark);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.form-row select {
  appearance: auto;
  background: #fff;
}

/* Invalid state — applied by script.js after a failed submit attempt. */
.form-row.has-error label {
  color: var(--color-error);
}
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}

.field-hint {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}
.field-error {
  display: block;
  min-height: 1.4em;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-error);
  margin-top: var(--space-xs);
}
.field-error:empty {
  display: none;
}

.form-actions {
  margin-top: var(--space-lg);
  text-align: center;
}


/* 14. Form success / error panels -------------------------------------- */
.form-success,
.form-error {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius);
  border-left: 6px solid;
}
.form-success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}
.form-success h3 {
  color: var(--color-success);
  margin-top: 0;
}
.form-error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}
.form-error h3 {
  color: var(--color-error);
  margin-top: 0;
}


/* 15. Photo gallery (responsive image grid) ----------------------------- */
/* The gallery is a reusable responsive image grid: single column on phones,
   auto-filling multi-column from tablet up. Each .gallery-event block can
   carry its own subheading. Placeholder tiles (no <img> inside) keep their
   dashed border + diagonal stripes so the maintainer can see which slots
   still need real photos. Real photos use .gallery-item-photo. */
.gallery-event {
  margin-top: var(--space-lg);
}
.gallery-event:first-of-type {
  margin-top: var(--space-md);
}
.gallery-event-name {
  font-family: var(--font-heading);
  color: var(--color-accent);
  font-size: 1.6rem;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-accent);
}
.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: var(--space-md);
}
.gallery-item {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      45deg,
      #FFFFFF 0,
      #FFFFFF 10px,
      #EFE9D4 10px,
      #EFE9D4 20px
    );
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  overflow: hidden;
}
/* When a real photo is added, the <li> gets the .gallery-item-photo class
   so the dashed-stripe placeholder treatment is dropped and the image fills
   the tile cleanly. */
.gallery-item-photo {
  background: none;
  border: 1px solid var(--color-border);
  padding: 0;
}
.gallery-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-placeholder-label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 19px;
  line-height: 1.3;
}


/* 16. Sponsors ---------------------------------------------------------- */
.sponsors {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: var(--space-md);
}
.sponsor {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent-secondary);
  border-radius: var(--radius);
  padding: var(--space-md);
  font-weight: 700;
  font-size: 19px;
  text-align: center;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* Logos are block images (see the base reset); when a tile is wider than the
   logo (single-column phones, large desktops) they'd otherwise hug the left
   edge while the name + link below are centered. */
.sponsor img {
  margin-inline: auto;
}


/* 17. Contact section --------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: var(--space-lg);
}
.contact-block h3 {
  color: var(--color-accent);
  margin-top: 0;
}

.contact-list {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: stacked label / value (matches .meeting-list) */
  gap: var(--space-xxs) var(--space-md);
  margin: 0;
}
.contact-list dt {
  font-weight: 700;
}
.contact-list dd {
  margin: 0 0 var(--space-xs);
  /* Long emails should wrap rather than push the page wide. */
  overflow-wrap: anywhere;
}

.executives {
  list-style: none;
  padding: 0;
  margin: 0;
}
.executives li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 19px;
}
.executives li:last-child { border-bottom: none; }
.exec-role {
  color: var(--color-text-muted);
}


/* 18. Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-lg) 0;
  text-align: center;
  margin-top: var(--space-xl);
  /* Respect the iOS home-bar / safe area at the bottom of the page. */
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
}
.site-footer p { margin: 0 0 var(--space-xs); }
.site-footer a {
  color: #fff;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-bg);
}


/* ======================================================================== */
/* 19. TABLET breakpoint (min-width: 48em ≈ 768px) ------------------------ */
/*     Two-up grids and side-by-side definition lists start here so the      */
/*     ~768px width is handled deliberately, not just the phone/desktop      */
/*     extremes.                                                             */
/* ======================================================================== */
@media (min-width: 48em) {
  .meeting-info {
    padding: var(--space-lg);
  }

  /* Definition lists become two-column (term | value). */
  .meeting-list,
  .contact-list {
    grid-template-columns: max-content 1fr;
  }
  .meeting-list dd,
  .contact-list dd {
    margin-bottom: 0;
  }

  /* Image grid + sponsor grid go multi-column, auto-filling by min tile size. */
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .sponsors {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* Cards / forms can breathe a little more. */
  .card,
  .event,
  .registration-form,
  .form-success,
  .form-error {
    padding: var(--space-lg);
  }

  /* Contact blocks side-by-side once there's room. */
  .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
  }
}


/* ======================================================================== */
/* 20. DESKTOP breakpoint (min-width: 64em ≈ 1024px) --------------------- */
/*     Full horizontal nav (NO hamburger). Header collapses to one row.     */
/*     Sections get more vertical air. This is the deliberate desktop        */
/*     design, not a stretched phone layout.                                 */
/* ======================================================================== */
@media (min-width: 64em) {
  :root {
    --space-xl: 64px;       /* roomier section padding on desktop */
    --header-offset: 150px; /* sticky header is shorter on desktop */
  }

  /* The hamburger is never shown at desktop width, even with JS on. */
  .js-nav .nav-toggle { display: none; }

  /* The email link sits inline in the top bar; hide the mobile email band. */
  .header-phone-wrap { display: none; }
  .header-top .header-phone {
    display: inline-flex;
    align-items: flex-end;
  }

  /* Nav is always visible and horizontal at desktop width, regardless of the
     collapsed/open state used on smaller screens. */
  .js-nav .site-nav,
  .js-nav .site-header.nav-open .site-nav {
    display: block;
  }
  .site-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .site-nav a {
    border-bottom: 4px solid transparent;
  }
  .site-nav li:last-child a { border-bottom: 4px solid transparent; }
  .site-nav a:hover,
  .site-nav a:focus-visible {
    border-bottom-color: var(--color-accent-secondary);
  }
  /* Active marker reverts to an underline tab (not the left bar) on desktop. */
  .site-nav a[aria-current="page"] {
    border-left: 4px solid transparent;
    padding-left: 22px;
    border-bottom-color: var(--color-accent-secondary);
  }
  .site-nav a.nav-cta[aria-current="page"] {
    border-bottom-color: var(--color-accent-dark);
  }

  /* Two-up content layout kicks in on desktop. */
  .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
  }
  /* Variant: a wider main column + narrower complementary panel. */
  .feature-grid--aside {
    grid-template-columns: 1.5fr 1fr;
  }
}


/* ======================================================================== */
/* 21. LARGE breakpoint (min-width: 90em ≈ 1440px) ----------------------- */
/*     Avoid a stranded narrow column / whitespace acres in big viewports:   */
/*     widen the prose measure slightly and give grids a higher tile floor.  */
/* ======================================================================== */
@media (min-width: 90em) {
  :root {
    --width-content: 760px;   /* still ~70–75 chars; not a thin ribbon */
    --width-wide:    1200px;
  }

  .hero {
    padding: var(--space-xxl) 0;
  }

  /* Larger tiles so a 1440px+ grid doesn't feel sparse or over-fragmented. */
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}


/* 22. Reduced motion + print -------------------------------------------- */
/* Honour user "reduced motion" preference: disable smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* Print: a clean printable page. */
@media print {
  .site-header,
  .site-nav,
  .nav-toggle,
  .hero,
  #register,
  #gallery,
  .site-footer { display: none; }
  body { background: #fff; color: #000; }
}