/* ================================================================
   Components — UI atoms and molecules
   Extracted from designs/inner-pages-preview.html with token
   substitution applied (hex → var(--token) where a match exists).
   ================================================================ */

/* ----- Header (legacy classic header — superseded by .site-header) ----- */
.header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--section-pad-x);
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-logo { display: flex; align-items: center; gap: 12px; color: var(--accent-primary); }
.header-logo svg { display: block; flex-shrink: 0; }
.header-logo-wordmark {
  font-family: inherit; font-weight: 700;
  color: var(--text-base);
  line-height: 0.95; letter-spacing: -0.01em;
  font-size: 24px;
}
.header-nav { display: flex; gap: 28px; font-size: 15px; }
.header-nav a { color: var(--text-base); text-decoration: none; opacity: 0.85; }
.header-nav a[aria-current] { color: var(--accent-primary); font-weight: 700; opacity: 1; }
.header-right { display: flex; align-items: center; gap: 16px; }

/* The reading-aids entry point lives outside the header now — see
   `.aa-tab` in reading-aids.css (left-edge tab on desktop, FAB on mobile).
   The previous header `.aa-pill` was removed when the slide-out tab was
   introduced, so users coming from theddc.org.uk find a familiar control
   at the page edge. */

/* Ember CTA — bg is theme-invariant. Text is near-black (not pure paper)
   so contrast clears AA 4.5:1 on the orange (--ember-text resolves to
   #0A0805 → 4.96:1 vs ember). */
.header-cta {
  display: inline-flex;
  align-items: center;
  /* Larger + nudged in from the right edge per client feedback — the
     Nominate CTA is the primary action, so it gets more presence and a
     little breathing room from the corner. */
  height: 50px; padding: 0 26px; border-radius: 8px;
  margin-right: 8px;
  background: var(--ember); color: var(--ember-text); border: none;
  font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  text-decoration: none;
  transition: filter var(--motion-fast);
}
.header-cta:hover,
.header-cta:focus-visible {
  filter: brightness(1.08);
}

/* ----- Breadcrumb ----- */
.breadcrumb {
  padding: 16px var(--section-pad-x);
  font-size: 14px;
  color: var(--text-base);
}
.breadcrumb a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb .sep { opacity: 0.4; padding: 0 8px; }
.breadcrumb .current { opacity: 0.7; }

/* ----- Editorial hero — 2-column + text-only variant ----- */
.editorial {
  padding: 48px var(--section-pad-x) 72px;
  background: var(--surface-base);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.editorial-text { display: flex; flex-direction: column; color: var(--text-base); }
.editorial-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-primary); opacity: 0.85;
  margin-bottom: 16px;
}
.editorial h1 {
  font-size: 72px; font-weight: 700; line-height: 1.0;
  letter-spacing: -0.02em; margin: 0 0 24px;
  max-width: 14ch;
  color: var(--text-base);
}
.editorial h1 em {
  font-style: italic;
  color: var(--accent-primary);
}
.editorial-lede {
  font-size: 22px; line-height: 1.5;
  max-width: 38ch;
  margin: 0;
  color: var(--text-base);
  opacity: 0.92;
}
.editorial-photo {
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-section);
}
.editorial-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Editorial — single-column variant */
.editorial--text-only {
  grid-template-columns: 1fr;
  padding: 64px var(--section-pad-x) 56px;
}
.editorial--text-only h1 {
  font-size: 80px;
  max-width: 16ch;
}
.editorial--text-only .editorial-lede {
  max-width: 52ch;
}


/* ================================================================
   Responsive overrides — stack 2-col layouts and reduce padding so
   content reflows without horizontal scroll at 320px (WCAG 1.4.10).
   ================================================================ */

@media (max-width: 1023px) {
  .editorial { padding: 48px var(--section-pad-x) 56px; gap: 32px; }
  .editorial h1 { font-size: 56px; }
  .editorial--text-only h1 { font-size: 60px; }
  .judges-grid { grid-template-columns: repeat(3, 1fr); }
  .header { padding: 0 24px; }
  .breadcrumb { padding: 16px var(--section-pad-x); }
  .printable-band { padding: 24px var(--section-pad-x); }
}

@media (max-width: 899px) {
  .editorial {
    grid-template-columns: 1fr;
    padding: 32px var(--section-pad-x) 40px;
  }
  .editorial h1 { font-size: 44px; max-width: none; }
  .editorial-lede { font-size: 18px; }
  .editorial-photo { aspect-ratio: 16 / 10; }
  .judges-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 32px; }
  .judge-photo { width: 140px; height: 140px; }
}

@media (max-width: 599px) {
  .editorial { padding: 24px var(--section-pad-x) 32px; }
  .editorial h1 { font-size: 36px; }
  .editorial--text-only h1 { font-size: 40px; }
  .judges-grid { grid-template-columns: 1fr; }
  .form-frame { padding: 8px; }
  .form-frame iframe { height: 880px; }
}

/* Age pill — white text on a deepened orange (client asked for white
   rather than black text here). Pure white on the standard #D9531E ember
   is only ~3:1, so the pill background is deepened to #A8420F where white
   reaches 5.7:1 and clears WCAG AA. Still clearly an orange pill, just a
   richer shade than the Nominate CTA. */
.age-pill {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  height: 36px; padding: 0 16px;
  border-radius: 999px;
  background: #A8420F; color: var(--always-light);
  font-size: 13px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ----- Buttons ----- */
.btn {
  height: 56px; padding: 0 32px;
  border-radius: 8px;
  font-family: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--surface-card); color: var(--ink-blue-deep);
}
.btn-secondary {
  background: transparent; color: var(--text-base);
  border-color: var(--text-base);
}

/* ----- Judges grid ----- */
.judges-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 56px;
}
.judge-card {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.judge-photo {
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-section);
  margin-bottom: 18px;
}
.judge-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.judge-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-base);
  margin: 0;
}
.judge-role {
  font-size: 14px;
  color: var(--text-base);
  opacity: 0.7;
  margin: 4px 0 0;
  max-width: 22ch;
  line-height: 1.4;
}

/* ----- Step card (nominate flow) — b3 is brand-locked deep teal */
.step-card {
  background: var(--b3);
  border-radius: 8px;
  padding: 28px 28px 32px;
  color: var(--always-light);
}

/* ----- Interest-phase notice (nominate page) -----
 * Shown above the form on /nominate/ before nominations open, so it's
 * clear the embedded form registers interest rather than taking a
 * nomination. Hidden automatically once the nominations form goes live.
 * The two paragraphs set text-align explicitly because the global
 * `p { text-align: left }` rule would otherwise override the section. */
.nominate-notice {
  background: var(--surface-section);
  color: var(--text-section);
  padding: 32px var(--section-pad-x);
}
.nominate-notice-lead {
  margin: 0 auto 8px;
  max-width: 40ch;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--text-section);
}
.nominate-notice-body {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-section);
}

/* ----- Form frame ----- *
 * Wraps the embedded Microsoft Forms iframe. The form already has its
 * own visual chrome (blue header, white body), so the outer card is
 * intentionally minimal — thin border, light padding — to avoid a
 * double-card effect. Iframe sizing is controlled here, not on the
 * iframe element itself, so we can size responsively. */
.form-frame {
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(26, 24, 20, 0.10);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-card);
  color: var(--text-card);
  box-sizing: border-box;
}
.form-frame iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 960px;
  border: 0;
  border-radius: 4px;
}

/* ----- Printable band ----- */
.printable-band {
  background: var(--surface-section);
  padding: 36px var(--section-pad-x);
  text-align: center;
  font-size: 17px;
  color: var(--text-section);
}
.printable-band a {
  color: var(--text-section);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ----- Tables — `.wp-block-table` (Gutenberg's table block).
   The editor inserts these as bare `<figure><table>` with no theme styling,
   so cells render as borderless columns. Give them a visible grid with
   theme-token borders so they read as a proper table, with comfortable
   padding for longer cells. Allow horizontal scroll on narrow viewports so
   wide tables don't overflow the measure. ----- */
.wp-block-table {
  margin: 24px 0;
  overflow-x: auto;
  font-size: 17px;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  color: var(--text-card);
}
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--border-medium);
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
  line-height: 1.55;
}
.wp-block-table thead th {
  background: var(--surface-section);
  color: var(--text-section);
  font-weight: 700;
}