/* ================================================================
   homepage.css — Homepage + site-shell CSS
   Translates inline-style decisions from designs/homepage/direction-joyful-refined.jsx
   into CSS rules keyed on the class names used by the WP theme templates.

   Load order: after components.css + sections.css (imported last in theme.css)
   Tokens: all values use var(--token) from tokens.css — no new tokens introduced.
   Scope: desktop 1440px frame. No responsive breakpoints.
   ================================================================ */


/* ================================================================
   Site shell — .site-header, .site-nav, .site-footer (used on every page)
   ================================================================ */

/* Sticky top header — taller than the original 64px to give the trademark
   mark some room (logo is 80px square + breathing room). */
.site-header {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 24px;
}

/* Logo lockup anchor (set by logo-lockup.php) — single trademark image
   (book + stars + wordmark baked in) */
.site-logo {
  display: inline-flex;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo-mark {
  display: block;
  flex-shrink: 0;
  height: auto;
}

/* Primary nav — centred between logo and right-side actions */
.site-nav {
  display: flex;
  flex: 1;
  justify-content: center;
}

.site-nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-list a {
  color: var(--text-base);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity var(--motion-fast);
}

.site-nav-list a:hover,
.site-nav-list a[aria-current="page"] {
  opacity: 1;
  color: var(--accent-primary);
}

/* Right-side Aa + Nominate CTA */
.site-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* .header-cta already defined in components.css — no duplicate */

/* Footer outer wrapper — matches .footer in sections.css but under the new class name */
.site-footer {
  background: var(--surface-base);
  color: var(--text-base);
  padding: 64px 80px 48px;
}

/* Footer brand column (left side) */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 32ch;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.5;
  margin: 24px 0 16px;
  opacity: 0.85;
  max-width: 32ch;
}

/* Eli credit line — italic, paper at 70% opacity */
.eli {
  font-size: 14px;
  font-style: italic;
  opacity: 0.7;
  margin: 0 0 16px;
}

.footer-brand a {
  color: var(--text-base);
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer column eyebrow heading — "The Awards" / "Legal" labels.
   Theme-aware ember text (--accent-warm-text), tuned per palette to
   clear AA on each --surface-base. */
.footer-col-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm-text);
  margin: 0 0 16px;
}


/* ================================================================
   Buttons & utility — .btn-ember, .btn-outline (variants of .btn in components.css)
   ================================================================ */

/* Ember CTA — primary nomination button. Ember bg is theme-invariant;
   text uses --ember-text (near-black) to clear AA 4.5:1 on the orange. */
.btn-ember {
  background: var(--ember);
  color: var(--ember-text);
  border-color: transparent;
  transition: filter var(--motion-fast);
}
.btn-ember:hover {
  filter: brightness(1.08);
}

/* Outline / ghost button — text + border follow page text colour */
.btn-outline {
  background: transparent;
  color: var(--text-base);
  border-color: var(--text-base);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.btn-outline:hover {
  background: rgba(125, 125, 125, 0.10);
}

/* Shared eyebrow label — 12px, uppercase, accent, used across all sections */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
}


/* ================================================================
   Hero — parts/hero.php  |  JSX: D4Hero, D4HeroText, D4HeroVisual
   ================================================================ */

/* Two-column hero grid — text left, photo right */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding: 96px var(--section-pad-x) 80px;
  max-width: var(--frame-max);
  margin: 0 auto;
}

/* When the hero-visual column has no photo (ACF options unpopulated),
   collapse to a single-column layout so the headline gets room to breathe.
   The right-hand visual returns automatically once content is added. */
.hero:not(:has(.hero-photo)):not(:has(.hero-logo-overlay)) {
  grid-template-columns: minmax(0, 1100px);
  padding-bottom: 96px;
}
.hero:not(:has(.hero-photo)):not(:has(.hero-logo-overlay)) .hero-visual {
  display: none;
}

/* Hero text column */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* h1.h-hero inside .hero-text — typography handled by .h-hero in typography.css */
.hero-text h1 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

/* Override the global em colour only inside the hero so it picks up the
   deeper accent (slightly more saturated than the default eyebrow blue) */
.hero-text h1 em {
  color: var(--accent-deep);
}

/* Lede paragraph */
.hero-lede {
  font-size: 20px;
  line-height: 1.5;
  max-width: 52ch;
  margin: 0;
  opacity: 0.92;
}

/* Hero action buttons row */
.hero-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero visual column — extra bottom padding to clear both the trademark
   overlay overhang (bottom-right) and the four-cell countdown (bottom-left). */
.hero-visual {
  position: relative;
  padding-bottom: 104px;
}

/* Photo wrapper — aspect ratio + overflow clip */
.hero-photo {
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-section);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Trademark overlay — bottom-right of the hero photo, no card; the logo
   itself carries a drop-shadow that follows the artwork (transparent PNG). */
.hero-logo-overlay {
  position: absolute;
  bottom: -24px;
  right: -24px;
}

.hero-logo-overlay img {
  display: block;
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30));
}

/* Countdown — four compact units in the bottom-left of the .hero-visual
   column, opposite the trademark overlay at bottom-right. Deliberately
   small and low-contrast so it supports the hero rather than competing
   with the Nominate CTA. Card fill + border use theme-aware tokens so it
   reads correctly on every reading-aid colour scheme. */
.hero-countdown {
  position: absolute;
  bottom: 8px;
  left: 4px;
  margin: 0;
}

.countdown-caption {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-base-muted);
}

.countdown-grid {
  display: flex;
  gap: 6px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--border-subtle);
  border: 1px solid var(--border-medium);
}

.countdown-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-base-muted);
}

/* Once nominations open, JS adds .is-open — hide the grid, leave the
   caption ("Nominations are now open") standing on its own. */
.hero-countdown.is-open .countdown-grid {
  display: none;
}


/* ================================================================
   Stats band — JSX: D4Stats (line 659–673)
   ================================================================ */

/* Compact stats ticker — narrow padding, centred */
.stats-band {
  background: var(--surface-section);
  padding: 24px var(--section-pad-x);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 16px;
  color: var(--text-section);
  opacity: 0.92;
  letter-spacing: 0.04em;
  text-align: center;
}


/* ================================================================
   Section header — reusable eyebrow + h2 block (categories, sponsors)
   ================================================================ */

.section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 var(--section-pad-x);
  margin-bottom: 48px;
}

.section-header h2 {
  margin: 0;
  letter-spacing: -0.02em;
}


/* ================================================================
   Categories — front-page.php section#categories
   JSX: D4Categories (line 620–657), D4CategoryCard (line 589–618)
   ================================================================ */

.categories {
  padding: 120px 0 96px;
  background: var(--surface-base);
}

/* Section header for categories uses a two-column header layout in JSX;
   here we keep the single-column .section-header pattern used in the PHP
   template but give the section room */
.categories .section-header {
  max-width: var(--frame-max);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 56px;
}

/* Cards grid — 3-up with tight gap (JSX gap: 16) */
/* 8 categories laid out 4 × 2 on desktop, 2 × 4 tablet, 1 × 8 mobile */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 var(--section-pad-x);
  max-width: var(--frame-max);
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* Individual category card — is an <a> tag in the PHP template.
   Tone-N colours are brand-locked swatches paired with always-light /
   always-ink text — they don't follow the theme palette so each card
   keeps its designed contrast against its fixed blue bg. */
.cat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 5 / 4;
  padding: 28px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--always-light);
  box-sizing: border-box;
  transition: transform var(--motion-fast);
}

.cat-card:hover {
  transform: translateY(-4px);
}

/* Invert variant — Supportive Employer card (paper bg, ink-blue border).
   Brand-locked. */
.cat-card-invert {
  background: var(--always-light);
  color: var(--ink-blue-deep);
  border: 2px solid var(--ink-blue-deep);
}

/* Tone → b-palette mapping from D4_CATEGORIES (JSX lines 46–56)
   Tone assignment per card-category.php: index 1–9 = tone-1 … tone-9 */

/* tone-1 = Amazing Artist → b3, light fg */
.tone-1 { background: var(--b3); color: var(--always-light); }

/* tone-2 = Community Shining Star (13–19) → b4, light fg */
.tone-2 { background: var(--b4); color: var(--always-light); }

/* tone-3 = Community Shining Star (20+) → b8, ink fg (light bg) */
.tone-3 { background: var(--b8); color: var(--always-ink); }

/* tone-4 = Entrepreneur → b5 with ink fg.
   Paper-on-b5 contrast was 3.49:1 (fails WCAG 1.4.3 AA). Switching to ink fg
   gives 5.0:1 and breaks visual repetition with the dark-bg tones. */
.tone-4 { background: var(--b5); color: var(--always-ink); }

/* tone-5 = Innovation → b6, ink fg (light-ish mid-blue) */
.tone-5 { background: var(--b6); color: var(--always-ink); }

/* tone-6 = STEMM → b2, light fg (very dark) */
.tone-6 { background: var(--b2); color: var(--always-light); }

/* tone-7 = Young Entrepreneur → b7, ink fg (light blue) */
.tone-7 { background: var(--b7); color: var(--always-ink); }

/* tone-8 = Young Innovator → b9, ink fg (very light blue) */
.tone-8 { background: var(--b9); color: var(--always-ink); }

/* tone-9 = Supportive Employer → paper bg, ink-blue-deep fg (invert card).
   The .cat-card-invert rules above carry the matching colour. Original
   ink-blue (#1F8FB0) gave 3.49:1 on paper — fails 1.4.3 AA. */
.tone-9 { background: var(--always-light); color: var(--ink-blue-deep); }

/* Card internals — colours run at full strength (no opacity dimming):
   on tone-2 / tone-4 the blended colours fell below AA 4.5:1, at full
   strength every tone-card pair clears AA cleanly. */
.cat-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.cat-elig {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.cat-cta {
  font-size: 14px;
  font-weight: 500;
}


/* ================================================================
   About — front-page.php section.about
   JSX: D4About (line 524–587)
   Two-column: .about-card (Eli quote) left, .about-prose (copy) right
   Background: ink (not ink-blue-deep) per JSX line 529
   ================================================================ */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface-base);
  max-width: var(--frame-max);
  margin: 0 auto;
  box-sizing: border-box;
}

/* The about section itself should span full width */
section.about {
  max-width: none;
}
section.about > * {
  max-width: none;
}

/* Eli card — section-tinted panel wrapping headshot + quote + attrib */
.about-card {
  background: var(--surface-section);
  color: var(--text-section);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* Eli headshot — circular, 96 × 96 */
.about-headshot {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 24px;
}

/* Large quote from Eli */
.about-quote {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-section);
  font-weight: 400;
  font-style: normal;
}

/* Wrap the homepage pull-quote in curly quotation marks, inline at the
   start and end of the text. Scoped to the <blockquote> — the About page
   reuses `.about-quote` on a <figure> whose inner quote already carries
   its own marks, so a bare `.about-quote` selector would double them.
   `display: block` is needed because sections.css styles the shared
   `.about-quote` class as a flex column (for that About-page <figure>);
   without this override the ::before/::after marks become flex items and
   stack above and below the quote instead of hugging the text. */
blockquote.about-quote { display: block; }
blockquote.about-quote::before { content: "\201C"; }
blockquote.about-quote::after  { content: "\201D"; }

/* Attribution line — full text-section (no opacity dim). 14px size +
   the visual context already separates it from the 22px quote, so we
   don't need a colour fade on top. Dropping the dim takes contrast on
   Charcoal's deep teal section bg from 4.8:1 (just AA) up to 7.2:1 (AAA),
   which reads cleanly on mobile screens where small dimmed text was
   feeling washed out. */
.about-attrib {
  font-size: 14px;
  color: var(--text-section);
}

/* Prose column */
.about-prose {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-prose .eyebrow {
  margin-bottom: 16px;
}

.about-prose h2 {
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.about-prose p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-base);
  opacity: 0.92;
  margin: 0 0 16px;
}


/* ================================================================
   Past winners — front-page.php section.past-winners
   JSX: D4PastWinners (line 447–468), D4WinnerCard (line 470–522)
   Background: ink-blue-deep
   ================================================================ */

.past-winners {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface-soft);
  color: var(--text-soft);
}

/* Eyebrow inside past-winners sits on --surface-soft (always a light
   surface) so the brand-teal --accent-primary fails AA on the dark
   themes (1.84:1 on charcoal). Use ink-blue-deep — passes ≥5.6:1 on
   every palette's --surface-soft. */
.past-winners .eyebrow {
  color: var(--ink-blue-deep);
}

.past-winners .section-header {
  padding: 0;
  margin-bottom: 56px;
}

.past-winners .section-header h2 {
  letter-spacing: -0.02em;
}

/* 3-column winners grid */
.winners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--frame-max);
  margin: 0 auto;
}

/* Individual winner card — paper bg with subtle ink border so it reads
   against the surface-soft section bg. Border tint is dark-on-light
   regardless of theme since the card surface is always pale. */
.winner-card {
  background: var(--surface-card);
  color: var(--text-card);
  border: 1px solid rgba(26, 24, 20, 0.10);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Photo wrapper — 3:2 aspect, overflow clip */
.winner-photo {
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-blue-tint);
  margin-bottom: 20px;
}

.winner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Category + year eyebrow — ink-blue-deep is the only teal that meets AA
   on a paper card (3.49 → 5.3) so it's used as a literal here. */
.winner-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-blue-deep);
  margin-bottom: 8px;
}

/* Winner name — h-block scale */
.winner-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--text-card);
}

/* Judges' quote — italic, dark text at 85% opacity */
.winner-quote {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-card);
  opacity: 0.85;
}

/* Attribution — opacity bumped 0.65 → 0.78 to clear 7:1 (AAA) on the
   white winner card. The earlier 0.65 hit 5.5:1 which is fine for
   desktop but reads weakly at 14px on mobile screens. */
.winner-attrib {
  font-size: 14px;
  color: var(--text-card);
  opacity: 0.78;
}


/* ================================================================
   Press — front-page.php section.press
   JSX: D4Press (line 393–416)
   Centred, ink background, italic list of outlet names
   ================================================================ */

.press {
  padding: 64px var(--section-pad-x);
  background: var(--surface-base);
  text-align: center;
}

.press .eyebrow {
  display: block;
  margin-bottom: 24px;
}

/* Italic list of outlet names separated by · dots */
.press-list {
  font-size: 18px;
  font-style: italic;
  color: var(--text-base);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

/* Separator dot between outlet names */
.press-list .dot {
  margin: 0 16px;
  opacity: 0.4;
  font-style: normal;
}


/* ================================================================
   Sponsors — front-page.php section.sponsors-panel
   JSX: D4Sponsors (line 200–276), D4SponsorCard, D4SponsorAvailableCard, D4TierLabel
   Background: ink-blue-deep
   ================================================================ */

.sponsors-panel {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--surface-section);
  color: var(--text-section);
}

/* Sponsors section header — same pattern as .section-header */
.sponsors-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.sponsors-header .eyebrow {
  /* Full text-section rather than --text-section-muted: the muted token
     only sits 5.0:1 above Charcoal's deep teal panel and reads weakly on
     mobile. The eyebrow is already small + uppercase + tracked, so the
     hierarchy is typographic — no colour-mute needed on top. */
  color: var(--text-section);
}

.sponsors-header h2 {
  font-size: var(--fs-h2-section);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Tier sub-labels: "Award Sponsors" / "Official Partners" / "Table Sponsors" etc.
   Full text-section colour (was --text-section-muted, only 5.0:1 on
   Charcoal's deep teal panel). 12px + uppercase + tracking provides the
   hierarchy; the colour-mute was making this feel washed on mobile. */
.sponsors-tier-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-section);
  margin: 0 0 16px;
}

/* 3-column sponsor grid (JSX uses repeat(3, 1fr) at gap: 20) */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--frame-max);
  margin: 0 auto 64px;
}

/* Real sponsor card — soft tinted background (less bright than paper),
   keeping the inner logo plate as paper so the logos feel framed */
.sponsor-card {
  background: var(--surface-soft);
  color: var(--text-soft);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(26, 24, 20, 0.05);
  min-height: 280px;
  justify-content: space-between;
}

/* Logo block — fixed height, contain */
.sponsor-card-logo {
  width: 100%;
  height: 140px;
  background: var(--surface-card);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.sponsor-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Sponsor name */
.sponsor-card-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-soft);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Role / award subhead */
.sponsor-card-role {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  /* 0.7 only got us to 5.8:1 on the cool grey-blue soft surface; 0.85
     pulls that to ~10:1 which feels solid on mobile. */
  opacity: 0.85;
  line-height: 1.4;
}

/* CTA link inside card — ink-blue-deep is the only teal that meets AA
   on the soft surface (3.49 → 5.3) so it's a literal here. */
.sponsor-card-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 8px;
}

/* Available card — transparent bg, dashed border (sits on sponsors-panel
   surface-section bg, so text/border follow the section text colour) */
.sponsor-card-available {
  background: transparent;
  color: var(--text-section);
  border: 1.5px dashed var(--border-medium);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  min-height: 280px;
  box-sizing: border-box;
}

/* Available-sponsor card eyebrow — full text-section (was muted) so it
   stays prominent against the deep teal panel on mobile. */
.sponsor-card-available .eyebrow {
  color: var(--text-section);
}

/* Named award on an available card — tells visitors which category is
   still open to sponsor. Centred block; text follows the section colour
   (the card sits transparent on the deep-teal sponsors panel). */
.sponsor-card-available-award {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: auto 0;
}
.sponsor-card-available-award .sponsor-card-name {
  color: var(--text-section);
}
.sponsor-card-available-award .sponsor-card-role {
  color: var(--text-section);
  opacity: 0.85;
}

/* "Get in touch" link inside available card */
.sponsor-card-available .sponsor-card-cta,
.sponsor-card-available a {
  color: var(--text-section);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ================================================================
   Responsive — desktop-first overrides
   Desktop is the design baseline. Three step-downs:
     ≤1023px  tablet — multi-col grids → 2-up; type scale step-down
     ≤899px   narrow — header collapses to hamburger; hero/about stack
     ≤599px   phone — single columns + smallest pad/type
   ================================================================ */

/* Hide hamburger by default; tablet/desktop use the inline nav */
.nav-toggle { display: none; }

/* Desktop only: header + hero fill the viewport on first paint, so the
   "Awards" categories section is revealed only after the user scrolls.
   Header is 112px sticky → hero takes the remaining viewport height. */
@media (min-width: 900px) {
  .hero {
    min-height: calc(100vh - 112px);
    align-items: center;
  }
}

@media (max-width: 1023px) {
  :root {
    --section-pad-x: 48px;
    --section-pad-y: 72px;
    --fs-h1-hero:    64px;
    --fs-h1-page:    52px;
    --fs-h2-section: 44px;
    --fs-h2-block:   32px;
  }
  .winners-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 899px) {
  /* Header — collapse to hamburger */
  .site-header {
    height: auto;
    min-height: 88px;
    padding: 12px 24px;
    gap: 12px;
    position: relative; /* nav drawer anchors to this */
  }
  .site-logo img.site-logo-mark { width: 64px; height: 64px; }

  /* Hide the inline nav until the hamburger toggles it open */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface-base);
    border-top: 1px solid var(--border-subtle);
    padding: 16px 24px 24px;
    z-index: 5;
  }
  .site-header[data-nav-open="true"] .site-nav { display: flex; }
  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  .site-nav-list a { padding: 12px 0; font-size: 18px; }

  /* Show the hamburger button */
  .nav-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--border-medium);
    border-radius: 8px; cursor: pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block; width: 22px; height: 2px;
    background: var(--text-base); position: relative;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: ""; position: absolute; left: 0;
  }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after  { top:  6px; }
  /* Keep the Nominate CTA visible at every width — it's the primary action,
     so it stays in the header rather than hiding behind the hamburger.
     Slightly more compact here so it sits comfortably beside the menu
     toggle; still a 44px-tall touch target (WCAG 2.5.5). The margin-right
     desktop nudge is dropped — the header's gap handles separation. */
  .header-cta {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
    margin-right: 0;
  }

  /* Hero — stack; tighter bottom space than desktop */
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px var(--section-pad-x) 24px;
  }
  .hero-visual { padding-bottom: 32px; }
  .hero-logo-overlay {
    right: 8px; bottom: -16px;
  }
  .hero-logo-overlay img { width: 96px; height: 96px; }
  /* On narrow viewports the hero stacks; let countdown drop to flow so it
     doesn't fight the smaller logo for horizontal space inside the photo
     column's bottom band. */
  .hero-countdown {
    position: static;
    margin-top: 16px;
  }

  /* Pull the categories section closer to the hero on narrow viewports */
  .categories { padding-top: 56px; }

  /* About — stack */
  .about { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 599px) {
  :root {
    --section-pad-x: 24px;
    --section-pad-y: 56px;
    --fs-h1-hero:    44px;
    --fs-h1-page:    36px;
    --fs-h2-section: 30px;
    --fs-h2-block:   24px;
  }
  /* Single column for everything */
  .winners-grid { grid-template-columns: 1fr; }
  .sponsor-grid { grid-template-columns: 1fr; }
  .footer-cols  { grid-template-columns: 1fr; }
  /* Hero buttons stack full-width */
  .hero-buttons { flex-direction: column; align-items: stretch; }
  /* Smaller header */
  .site-logo img.site-logo-mark { width: 56px; height: 56px; }
  .site-header { padding: 10px 16px; }
}