/* ==========================================================================
   TSS Adana Yardım Merkezi — Design Prototype Stylesheet
   Static, dependency-free CSS (no build step). Tokens sourced from
   design-system/tss-adana-yardim-merkezi/MASTER.md
   ========================================================================== */

:root {
  /* Color tokens */
  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0369A1;
  --color-on-accent: #FFFFFF;
  --color-background: #F8FAFC;
  --color-foreground: #020617;
  --color-card: #FFFFFF;
  --color-card-foreground: #020617;
  --color-muted: #E8ECF1;
  --color-muted-foreground: #475569;
  --color-border: #E2E8F0;
  --color-destructive: #DC2626;
  --color-ring: #0F172A;
  --color-amber: #B45309;
  --color-amber-surface: #FEF3E2;

  /* Text roles.
     --color-primary / --color-secondary / --color-accent are GROUND/brand roles:
     they fill the hero, the audience band, pressed chips and solid buttons, and
     therefore keep the same value in both themes. The three tokens below are the
     TEXT counterparts of the same hues. Splitting them lets dark mode lighten
     type without inverting a ground that must stay navy. Use these for `color:`
     and for hover/border affordances; use the ground tokens for fills. */
  --color-heading: #0F172A;
  --color-label: #334155;
  --color-link: #0369A1;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --shadow-md: 0 4px 6px rgba(2, 6, 23, 0.1);
  --shadow-lg: 0 10px 15px rgba(2, 6, 23, 0.12);
  --shadow-xl: 0 20px 25px rgba(2, 6, 23, 0.16);

  /* Type */
  --font-heading: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Atkinson Hyperlegible', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --container-max: 1200px;
}

/* Dark-mode token overrides (system default; explicit toggle can add [data-theme] later) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0B1220;
    --color-foreground: #F1F5F9;
    --color-card: #131C2E;
    --color-card-foreground: #F1F5F9;
    --color-muted: #1E293B;
    --color-muted-foreground: #94A3B8;
    --color-border: #263248;
    --color-amber-surface: #2A1B0A;
    --color-amber: #FBBF24;

    /* Text roles only. Verified against the dark grounds (#0B1220 page,
       #131C2E card, #1E293B muted): heading ~17:1, label ~10:1, link ~10:1. */
    --color-heading: #F1F5F9;
    --color-label: #CBD5E1;
    --color-link: #7DD3FC;
  }
  /* --color-primary / --color-secondary / --color-accent are deliberately NOT
     overridden here: they are the hero / audience-band / pressed-chip / solid-
     button grounds and must stay navy in both themes, which is also why
     --color-on-primary and --color-on-accent stay light. Anything that needs a
     readable *hue on the page ground* uses --color-heading/-label/-link above. */
}

/* ---------- Reset-lite ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
  font-weight: 700;
}
p { margin: 0 0 var(--space-md); color: var(--color-muted-foreground); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* Focus visibility (WCAG) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -60px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--space-md); }

/* ---------- Draft banner ---------- */
.draft-banner {
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-align: center;
  font-size: 0.875rem;
  padding: var(--space-sm) var(--space-md);
}
.draft-banner strong { color: #FCD34D; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-heading);
}
.logo .logo-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.primary-nav {
  display: flex;
  gap: var(--space-lg);
}
.primary-nav a {
  font-weight: 600;
  color: var(--color-label);
  padding: var(--space-sm) 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--color-link); border-color: var(--color-link); }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-label);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.icon-btn:hover { background: var(--color-muted); color: var(--color-heading); }

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
  min-height: 44px;
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--color-heading);
  border: 2px solid var(--color-heading);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm { padding: 8px 16px; font-size: 0.875rem; min-height: 36px; }
/* AUTH is frozen/deferred project-wide: this control is intentionally inert. */
.btn-inert { background: var(--color-muted); color: var(--color-muted-foreground); }

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--color-primary) 0%, #16213A 60%, var(--color-background) 100%);
  color: var(--color-on-primary);
  padding-block: var(--space-3xl) var(--space-2xl);
}
.hero-inner { max-width: 760px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #FCD34D;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-lg);
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-on-primary);
  max-width: 18ch;
}
.hero p.lead {
  color: rgba(255,255,255,0.82);
  font-size: 1.125rem;
  max-width: 56ch;
}
.search-form {
  display: flex;
  gap: var(--space-sm);
  background: var(--color-card);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  margin-block: var(--space-xl);
  max-width: 560px;
}
.search-form input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 10px var(--space-md);
  color: var(--color-foreground);
  background: transparent;
  min-height: 44px;
}
.search-form input::placeholder { color: var(--color-muted-foreground); }
/* `.search-form input { outline: none }` above ties on specificity with the global
   `input:focus-visible` rule and, being later in the source, was silently winning —
   the search field had no focus ring at all. The input is borderless inside the pill,
   so the ring belongs on the pill itself. The pill always sits on the navy hero, so
   the ring colour is fixed rather than themed: #7DD3FC on #0F172A is ~10.8:1, well
   past the 3:1 that WCAG 2.4.11 asks of a focus indicator. */
.search-form input:focus-visible { outline: none; }
.search-form:focus-within {
  outline: 3px solid #7DD3FC;
  outline-offset: 2px;
}
.search-form button {
  border: none;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-lg);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  transition: opacity 150ms ease;
}
.search-form button:hover { opacity: 0.9; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero-ctas .btn-secondary { border-color: rgba(255,255,255,0.6); color: var(--color-on-primary); }
.hero-ctas .btn-secondary:hover { background: rgba(255,255,255,0.12); color: var(--color-on-primary); }

/* ---------- Section shell ---------- */
section { padding-block: var(--space-3xl); }
.section-head { max-width: 640px; margin-bottom: var(--space-2xl); }
.section-head .kicker {
  color: var(--color-link);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-sm);
}
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-heading); }

/* ---------- Quick access grid ---------- */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.quick-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
  min-height: 44px;
}
.quick-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-link); }
.quick-card .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-amber-surface);
  color: var(--color-amber);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-card .quick-name { font-weight: 600; color: var(--color-card-foreground); }
.quick-card .quick-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
  margin-top: auto;
}

/* ---------- Filter bar ---------- */
.services-section { background: var(--color-card); }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-label);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chip:hover { border-color: var(--color-link); color: var(--color-link); }
.chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.result-summary {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}

/* ---------- Load / error / empty states ---------- */
.state-note {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-muted-foreground);
  font-weight: 600;
}
.state-note[hidden] { display: none; }
.state-error {
  background: color-mix(in srgb, var(--color-destructive) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  color: var(--color-destructive);
}

/* ---------- Catalog ---------- */
.category { padding-block: 0; margin-bottom: var(--space-2xl); }
.category:last-child { margin-bottom: 0; }
.category-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border);
}
.category-title { font-size: 1.375rem; color: var(--color-heading); margin: 0; }
.category-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-amber);
  background: var(--color-amber-surface);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
}

/* ---------- Record card ---------- */
.record-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.record-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-link); }
.record-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.record-type,
.record-risk {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.record-type { background: var(--color-muted); color: var(--color-label); }
.record-risk.risk-low { background: #DCFCE7; color: #166534; }
.record-risk.risk-medium { background: var(--color-amber-surface); color: var(--color-amber); }
.record-title { font-size: 1.125rem; color: var(--color-card-foreground); margin: 0; }
.record-description { margin: 0; color: var(--color-muted-foreground); }

.eligibility-wrap { margin: 0; }
.eligibility-label {
  margin: 0 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
}
.eligibility {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-muted-foreground);
  font-size: 0.9375rem;
}

.record-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-amber-surface);
  border-left: 3px solid var(--color-amber);
  color: var(--color-amber);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.record-warning svg { flex-shrink: 0; margin-top: 2px; }

.resource-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: auto; }
.resource-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.resource-link:hover { border-color: var(--color-link); background: var(--color-muted); }
.resource-link.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.resource-link.primary:hover { opacity: 0.92; background: var(--color-accent); }
.resource-link svg { flex-shrink: 0; }

.record-owner { margin: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); }

.routing-options {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-md);
}
.routing-options-label {
  margin: 0 0 var(--space-sm);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
}
.routing-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.routing-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-link);
  color: var(--color-link);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.routing-link:hover { background: var(--color-accent); color: var(--color-on-accent); }

.record-title-link {
  color: inherit;
  display: inline-block;
  min-height: 24px;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.record-title-link:hover,
.record-title-link:focus-visible { color: var(--color-link); border-color: var(--color-link); }

/* Sits under the official-resource CTA: a quiet, secondary affordance so it never
   competes with the primary "go to the official source" action. */
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 24px;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-link);
}
.detail-link:hover { text-decoration: underline; }

.category-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-link);
  white-space: nowrap;
}
.category-link:hover { text-decoration: underline; }

/* ---------- Official-source index ---------- */
.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.source-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.source-type {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-muted);
  color: var(--color-label);
}
.source-title { font-size: 1rem; margin: 0; color: var(--color-card-foreground); }
.source-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 24px;
  color: var(--color-link);
}
.source-link:hover { text-decoration: underline; }
.source-owner { margin: 0; font-size: 0.9375rem; color: var(--color-muted-foreground); }
.source-checked {
  margin: auto 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}

/* ---------- Inner pages (service detail / category) ---------- */
#landing-view[hidden],
#detail-view[hidden] { display: none; }

.inner-page { display: block; padding-block: var(--space-2xl) var(--space-3xl); }
.page-title { font-size: clamp(1.625rem, 3.4vw, 2.25rem); color: var(--color-heading); }
.page-title:focus-visible { outline: 3px solid var(--color-link); outline-offset: 4px; }

.breadcrumb { margin-bottom: var(--space-lg); }
.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.875rem;
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: var(--space-sm); }
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-weight: 600;
  color: var(--color-link);
}
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-current { color: var(--color-muted-foreground); font-weight: 600; }
.breadcrumb-sep { color: var(--color-muted-foreground); }

.detail-head { margin-bottom: var(--space-2xl); max-width: 68ch; }
.detail-head .record-meta { margin-bottom: var(--space-md); }
.detail-lead { font-size: 1.125rem; color: var(--color-muted-foreground); margin: 0; }

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: var(--space-lg); }
.detail-main .eligibility { font-size: 1rem; }
.detail-actions {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.detail-actions-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
}
.detail-actions .resource-list { margin-top: 0; }

.detail-aside {
  background: var(--color-muted);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  position: sticky;
  top: 96px;
}
.aside-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: var(--space-md);
}
.provenance-list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.provenance-item {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.provenance-item:last-child { border-bottom: none; padding-bottom: 0; }
.provenance-label { margin: 0 0 var(--space-xs); font-weight: 600; color: var(--color-heading); font-size: 0.9375rem; }
.provenance-owner { margin: 0 0 var(--space-xs); font-size: 0.875rem; color: var(--color-muted-foreground); }
.provenance-facts { margin: 0; font-size: 0.8125rem; color: var(--color-muted-foreground); }
.provenance-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted-foreground);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.related { padding-block: 0; margin-top: var(--space-3xl); }
.related-title {
  font-size: 1.25rem;
  color: var(--color-heading);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.back-link { margin-top: var(--space-2xl); }

@media (max-width: 900px) {
  .detail-body { grid-template-columns: 1fr; gap: var(--space-xl); }
  .detail-aside { position: static; }
}

/* ---------- Audience band ---------- */
.audience-band {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* This band's ground is --color-primary in BOTH themes, so its type must use the
   on-primary roles. The generic .section-head rules use --color-heading/--color-link,
   which resolve to navy in light mode and would vanish against this navy ground. */
.audience-band .section-head h2 { color: var(--color-on-primary); }
.audience-band .section-head .kicker { color: #7DD3FC; }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.audience-col h3 { color: var(--color-on-primary); font-size: 1.125rem; }
.audience-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
/* min-height keeps these list links at the WCAG 2.2 (2.5.8) 24px target minimum
   outright, rather than relying on the spacing exception. */
.audience-col a { color: rgba(255,255,255,0.78); transition: color 150ms ease; display: inline-flex; align-items: center; min-height: 24px; }
.audience-col a:hover { color: #fff; }
.audience-col p { color: rgba(255,255,255,0.72); margin: 0; }
.audience-col .icon-wrap {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
  color: #FCD34D;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #0B1220;
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer h4 { color: #fff; font-size: 0.9375rem; margin-bottom: var(--space-md); }
.footer-logo { color: #fff; }
.footer-about { margin-top: var(--space-md); color: rgba(255,255,255,0.6); max-width: 34ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: 0.8125rem;
}
.footer-disclaimer {
  background: rgba(252, 211, 77, 0.12);
  border: 1px solid rgba(252, 211, 77, 0.35);
  color: #FCD34D;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Collapsed into a panel under the header. .site-header is position:sticky, so
     it is the containing block for this absolutely positioned panel. Visibility is
     driven by [data-open], which site.mjs keeps in sync with the toggle's
     aria-expanded — the button is never a dead control. */
  .primary-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
  .primary-nav[data-open="true"] { display: flex; }
  .primary-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: none;
  }
  .nav-toggle { display: inline-flex; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer-grid { grid-template-columns: 1fr; }
  .filter-bar { align-items: flex-start; }
  section { padding-block: var(--space-2xl); }
}
@media (max-width: 480px) {
  .quick-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; }
  .search-form button { justify-content: center; }
  .category-head { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  /* The stacked head has no horizontal room left to push against. */
  .category-link { margin-left: 0; }
}