/* ============================================================================
   Healing Space UK — public website foundation (H2.1)
   ============================================================================
   The shared shell every public page is built from: header, navigation, footer,
   layout primitives and content sections.

   DESIGN LANGUAGE: this file INVENTS NOTHING. Every colour, space, radius and
   type size is a token from theme-variables.css (the canonical set established
   in Horizon 1, I-5). Where a value is not yet tokenised it is derived from one
   that is. That is what keeps the website and the application looking like one
   product rather than two.

   SINGLE PUBLIC SHELL (H2.2): this is now the ONLY stylesheet for the public
   website. public-pages.css (`pp-` prefix) has been retired and its components
   ported here under the `site-` namespace; the landing page's inline styles moved
   to landing-sections.css (content sections only). Every public page — home, trust,
   the legal pages and the H2.1 scaffolds — renders through templates/site/base.html.

   NAMING: every class is prefixed `site-`, so a website style can never collide
   with an application style. Layout code lives here once; page templates
   compose it and add no layout CSS of their own.
   ========================================================================== */

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

body.site-body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
}

/* Dark mode follows the same signal the rest of the product uses. */
[data-theme="dark"] {
    body.site-body {
        color: #f1f1f8;
        background: #0e0e24;
    }
    .site-header, .site-footer { background: #14142e; border-color: rgba(255,255,255,0.08); }
    .site-card { background: #14142e; border-color: rgba(255,255,255,0.08); }
    .site-nav-panel { background: #14142e; }
    .site-lede, .site-section-intro, .site-card p { color: #a0a0c8; }
}

/* --------------------------------------------------------- typography --- */
.site-body h1, .site-body h2, .site-body h3, .site-body h4 {
    font-family: var(--font-family-heading);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 var(--space-4);
}
/* Fluid scale: readable on a 320px phone, generous on a desktop, without
   media-query steps that jump. Mobile-first by construction. */
.site-body h1 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem); }
.site-body h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.site-body h3 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }
.site-body p  { margin: 0 0 var(--space-4); }

.site-lede {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 62ch;   /* measure, not pixels — stays readable at any zoom */
}
/* Prose links.
   :not([class]) is load-bearing, not tidiness. As a bare descendant selector this rule
   has specificity (0,1,1) and beats ANY single-class button rule (0,1,0) anywhere on the
   site — including stylesheets loaded before it. It has now defeated three separate
   buttons: the Login button (indigo-on-indigo, 1.11:1), the dark-theme primary button,
   and the landing page's sticky CTA. Each was fixed individually by adding an `a.`
   qualifier, which treats the symptom and leaves the trap armed for the next button
   someone writes. Limiting the rule to anchors with no class of their own means it
   styles prose links — which is all it was ever for — and cannot reach a component. */
.site-body a:not([class]) { color: var(--text-link); font-weight: 600; }
.site-body a:not([class]):hover { color: var(--text-link-hover); }

/* Visible focus everywhere. WCAG 2.4.7, and the first thing a keyboard user
   loses when a site is styled carelessly. */
.site-body :focus-visible {
    outline: 3px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.site-skip-link {
    position: absolute; left: var(--space-4); top: -3rem;
    background: var(--bg-surface); color: var(--text-link);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-base); font-weight: 700;
    z-index: 100; transition: top 0.15s ease;
}
.site-skip-link:focus { top: var(--space-4); }

.site-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;
}

/* -------------------------------------------------------- crisis bar --- */
/* First in the DOM on every page, as in Horizon 1: someone in crisis must not
   have to navigate to find help. */
.site-crisis-bar {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
/* Crisis links carry a class deliberately.
   These are the highest-consequence links on the site, so they must not depend on
   winning a specificity contest with generic prose styling to stay visible. Giving
   them a class both removes them from the a:not([class]) prose rule and states that
   they are a component. Scoping the prose rule without this turned 999, 116 123 and
   85258 indigo-on-dark-red at 1.03:1 — legible crisis contacts are a safety property,
   not a style preference. */
.site-crisis-bar a, .site-crisis-link {
    color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap;
}

/* ------------------------------------------------------------ header --- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-primary);
}
.site-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    /* wrap so the open nav panel drops to its own full-width row on mobile instead of
       sitting inline and squeezing the brand into a three-line column */
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: 1200px; margin: 0 auto;
    padding: var(--space-3) var(--space-4);
}
.site-brand { flex: 0 1 auto; min-width: 0; }
.site-brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-family-heading);
    font-weight: 800; font-size: var(--font-size-lg);
    color: var(--text-primary); text-decoration: none;
}
.site-brand img { width: 32px; height: 32px; }

/* -------------------------------------------------------- navigation --- */
/* Mobile-first: the panel is a stacked list by default and becomes a horizontal
   bar at the breakpoint. The toggle exists only below that breakpoint. */
.site-nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: transparent; color: var(--text-primary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-base);
    padding: var(--space-2) var(--space-3);
    font: inherit; font-weight: 600; cursor: pointer;
    min-height: 44px;   /* WCAG 2.5.5 target size */
}
.site-nav-panel { display: none; }
/* Full width on its own row below the brand/toggle row (see flex-wrap above). */
.site-nav-panel.is-open { display: block; flex: 1 0 100%; }

.site-nav-list {
    list-style: none; margin: 0; padding: var(--space-2) 0;
    display: flex; flex-direction: column; gap: var(--space-1);
}
.site-nav-list a {
    display: block; padding: var(--space-3) var(--space-4);
    color: var(--text-primary); text-decoration: none; font-weight: 600;
    border-radius: var(--radius-base);
    min-height: 44px;
}
.site-nav-list a:hover { background: var(--bg-hover); }
/* Current page is marked with weight and a rule, never colour alone (1.4.1). */
.site-nav-list a[aria-current="page"] {
    color: var(--text-link);
    box-shadow: inset 3px 0 0 var(--border-focus);
    background: var(--bg-hover);
}

/* Between a phone and the desktop row there is room for the account actions on the
   first line, but the markup order (brand, menu button, panel, actions) with
   space-between strands the menu button in the middle of the bar. Brand left; actions
   then the menu button together on the right; the open panel on its own row below.
   On phones the markup order is kept — actions do not fit beside the brand there. */
@media (min-width: 37.5rem) and (max-width: 74.99rem) {
    .site-header-actions { order: 1; margin-left: auto; }
    .site-nav-toggle { order: 2; }
    .site-nav-panel { order: 3; }
}

/* 75rem, not the 60rem the rest of the layout uses. The header's own breakpoint is set
   by what the row actually needs, measured: brand + seven nav items + account actions
   is ~1,085px, and ~1,175px with the dev-only Demo shortcut. At 60rem the bar switched
   to its desktop layout 125px before it fitted, and between 960px and ~1,100px the nav
   was clipped mid-word ("Why He…"). Below 75rem the menu button is used instead — a
   tidy disclosure beats a crushed row. site-nav.js mirrors this value
   (DESKTOP_QUERY); the two must change together. */
@media (min-width: 75rem) {
    .site-nav-toggle { display: none; }

    /* One row, and it has to stay one row.
       The header's three children measured 196 + 858 + 127 plus gaps = 1217px inside a
       1168px container at 1280 viewport, so the theme toggle and Login button wrapped
       onto a second line below the brand — the "visual hierarchy has regressed" part of
       HV-001. min-width:0 lets the navigation be the thing that gives way (it is the
       only child that can), while the brand and the account actions keep their size.
       tests/backend/test_site_theme_parity.py asserts the header is a single row, so a
       future nav item that no longer fits fails the build instead of the layout. */
    .site-header-inner { flex-wrap: nowrap; }
    /* `min-width: 0` lets the panel BOX shrink, but the links inside are nowrap, so
       without an overflow rule the content simply paints outside that box — straight
       over the theme toggle and the Login button. That is invisible to a "one row"
       assertion (every child is still on one row) and to a document-overflow
       assertion (the page does not widen), which is exactly how it reached a
       screenshot. Scrolling the row inside its own box makes overlap structurally
       impossible: the labels stay reachable, the account actions stay clickable, and
       a nav item added in future degrades into a scroll rather than into a collision.
       tests/backend/test_site_theme_parity.py::TestHeaderIsOneRowOnDesktop now
       measures the overlap directly. */
    .site-nav-panel {
        display: block !important; flex: 0 1 auto; min-width: 0;
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;            /* the row is short; a bar would crowd it */
    }
    .site-nav-panel::-webkit-scrollbar { display: none; }
    .site-brand, .site-header-actions { flex-shrink: 0; }
    .site-nav-list { flex-direction: row; align-items: center; gap: 0; padding: 0; }
    .site-nav-list a {
        padding: var(--space-2) 0.4375rem; white-space: nowrap;
        font-size: 0.9375rem;
    }
    .site-nav-list a[aria-current="page"] {
        box-shadow: inset 0 -3px 0 var(--border-focus);
    }
}

/* ------------------------------------------------------------ layout --- */
.site-main { min-height: 50vh; }
.site-container {
    width: 100%; max-width: 1200px;
    margin: 0 auto; padding: 0 var(--space-4);
}
.site-container-narrow { max-width: 780px; }

.site-section { padding: var(--space-12) 0; }
.site-section-tight { padding: var(--space-8) 0; }
.site-section-alt { background: var(--bg-secondary); }
[data-theme="dark"] .site-section-alt { background: #11112a; }

.site-section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.site-section-intro { color: var(--text-secondary); }

/* Auto-fit grid: one column on a phone, more as space allows, with no
   per-page breakpoints to maintain. */
.site-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site-grid-2, .site-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .site-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.site-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}
.site-card h3 { margin-bottom: var(--space-2); }
.site-card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- hero --- */
.site-hero { padding: var(--space-12) 0; }
@media (min-width: 60rem) { .site-hero { padding: var(--space-20) 0; } }
.site-hero-inner { max-width: 62ch; }

/* ------------------------------------------------------------ button --- */
.site-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    min-height: 44px;
    border-radius: var(--radius-full);
    font-weight: 700; text-decoration: none; cursor: pointer;
    border: 2px solid transparent;
}
/* --border-focus (#5457d6) is the accessible primary adopted in I-5: white text
   on it clears AA, which #6366f1 did not. */
/* NOTE the `a.` qualifiers below: see H2.2 — a bare class lost to `.site-body a`,
   producing indigo-on-indigo text at 1.11:1 on every page with a Login button. */
.site-btn-primary, a.site-btn-primary { background: var(--border-focus); color: #fff; }
.site-btn-primary:hover, a.site-btn-primary:hover { background: var(--text-link-hover); color: #fff; }

/* Dark theme inverts the primary button, and it has to.
   --border-focus is a DARK indigo (#5457d6) in light theme and a LIGHT one (#818cf8)
   in dark theme, so the hardcoded white label above drops to ~2.6:1 the moment the
   theme flips — white text on a pale button. This is what "several buttons have
   incorrect appearance" meant in H2.2 human validation, and it also matches the
   production design, where the hero CTA is a light pill with dark text. */
[data-theme="dark"] .site-btn-primary,
[data-theme="dark"] a.site-btn-primary { background: var(--border-focus); color: #10102a; }
[data-theme="dark"] .site-btn-primary:hover,
[data-theme="dark"] a.site-btn-primary:hover { background: var(--text-link-hover); color: #10102a; }
.site-btn-secondary, a.site-btn-secondary {
    background: transparent; color: var(--text-link);
    border-color: var(--border-secondary);
}

/* --------------------------------------------------------- scaffold --- */
/* Marks a page as structure-only. H2.1 delivers the foundation, NOT content —
   this makes that unmistakable in the browser so no placeholder is ever
   mistaken for production copy. */
.site-scaffold-note {
    background: var(--bg-secondary);
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-8);
}
[data-theme="dark"] .site-scaffold-note { background: #11112a; }

/* ------------------------------------------------------------ footer --- */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-primary);
    padding: var(--space-10) 0 var(--space-8);
    margin-top: var(--space-16);
}
.site-footer-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
/* Four children: the brand cell plus the three link groups (SITE_FOOTER_GROUPS in
   api.py). The old 2fr 1fr 1fr template was one column short, so the About group —
   the tallest — wrapped onto a lonely second row beneath the brand (HV-S2-003). */
@media (min-width: 48rem) { .site-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--font-size-sm); text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--text-link); text-decoration: underline; }
.site-footer-legal {
    margin-top: var(--space-8); padding-top: var(--space-6);
    border-top: 1px solid var(--border-primary);
    /* --text-secondary, not --text-muted: the latter is 2.87:1 on white and clears
       AA only at large sizes, which this is not. */
    color: var(--text-secondary); font-size: var(--font-size-sm);
}

/* ================================================== audience family (S3) ===
   Components for the shared audience template (H2.3-S3). Tokens only, as ever. */

/* Boundary statement — the canonical "supports between sessions, does not replace
   therapy" component. Quietly prominent: a tinted panel with the brand accent as a
   left rule, not a warning banner — it states identity, not danger. */
.site-boundary {
    background: var(--bg-secondary);
    border-left: 4px solid var(--border-focus);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    max-width: 72ch;
}
.site-boundary p { margin: 0; color: var(--text-secondary); }
.site-boundary strong { color: var(--text-primary); }
[data-theme="dark"] .site-boundary { background: #11112a; }

/* Peer navigation — the other three perspectives, as a plain horizontal set. */
.site-audience-peers ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.site-audience-peers a {
    display: inline-flex; align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    color: var(--text-link); font-weight: 600; text-decoration: none;
}
.site-audience-peers a:hover { background: var(--bg-hover); }

/* ==================================================== enquiry form (S4) ===
   The shared action-page form (/contact, /book-a-demo). Tokens only. */
.site-enquiry-form { max-width: 640px; }
.site-enquiry-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site-enquiry-row { grid-template-columns: 1fr 1fr; } }
.site-enquiry-field { margin-bottom: var(--space-4); }
.site-enquiry-field label {
    display: block; font-weight: 600; margin-bottom: var(--space-1);
    color: var(--text-primary); font-size: var(--font-size-sm);
}
.site-enquiry-field input, .site-enquiry-field textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font: inherit; color: var(--text-primary);
    background: var(--bg-card);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-base);
    min-height: 44px;
}
.site-enquiry-field textarea { resize: vertical; }
.site-enquiry-field input:focus-visible, .site-enquiry-field textarea:focus-visible {
    border-color: var(--border-focus);
}
/* Invalid state carries a border AND aria-invalid — never colour alone (1.4.1),
   and the JS moves focus to the first invalid field. */
.site-enquiry-field .is-invalid { border-color: #b91c1c; }
[data-theme="dark"] .site-enquiry-field input,
[data-theme="dark"] .site-enquiry-field textarea {
    background: #14142e; border-color: rgba(255,255,255,0.15); color: #f1f1f8;
}

/* Status messages start hidden; JS reveals exactly one, and moves focus to it. */
.site-enquiry-error, .site-enquiry-success {
    display: none;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-base);
    font-weight: 600;
}
.site-enquiry-error.is-visible, .site-enquiry-success.is-visible { display: block; }
.site-enquiry-error { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.site-enquiry-success { background: rgba(16, 185, 129, 0.16); color: #047857; }
[data-theme="dark"] .site-enquiry-error { color: #fca5a5; }
[data-theme="dark"] .site-enquiry-success { color: #6ee7b7; }

/* ------------------------------------------------------------ motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------- prose pages --- */
/* H2.2: components the legal / trust pages need, ported from public-pages.css
   (`pp-` prefix) so those pages can move onto the shared shell and the second
   public stylesheet can be retired. Visual result is deliberately equivalent —
   this migration changes the SHELL, not the appearance or the wording. */

.site-prose { max-width: 80ch; }
.site-prose h2 { margin: var(--space-8) 0 var(--space-2); font-size: var(--font-size-xl); }
.site-prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--font-size-lg); }
.site-prose p, .site-prose li { color: var(--text-secondary); }
.site-prose ul { padding-left: var(--space-5); }
.site-prose li { margin-bottom: var(--space-2); }

.site-meta { color: var(--text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--space-5); }

/* DRAFT / status callout — the honesty device Horizon 1 established: a document
   that is not approved says so on its face. */
.site-callout {
    background: #fff7e6;
    border: 1px solid #f0c36d;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}
[data-theme="dark"] {
    .site-callout { background: rgba(240, 195, 109, 0.10); border-color: rgba(240, 195, 109, 0.45); color: #f1f1f8; }
}

/* Wide tables scroll inside their own box rather than widening the page. */
.site-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.site-status-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-2); }
.site-status-table th, .site-status-table td {
    text-align: left; padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--font-size-sm); vertical-align: top;
}
.site-status-table th {
    color: var(--text-secondary); font-weight: 700;
    font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em;
}

/* Assurance badges. Text carries the meaning; colour only reinforces it (1.4.1). */
.site-badge {
    display: inline-block; padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs); font-weight: 700; white-space: nowrap;
}
.site-badge-no { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.site-badge-progress { background: rgba(245, 158, 11, 0.16); color: #92400e; }
.site-badge-yes { background: rgba(16, 185, 129, 0.16); color: #047857; }
[data-theme="dark"] {
    .site-badge-no { color: #fca5a5; }
    .site-badge-progress { color: #fcd34d; }
    .site-badge-yes { color: #6ee7b7; }
}

/* Header account actions (H2.2): sign-in, and the gated internal-demo shortcut. */
.site-header-actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header-actions .site-btn { padding: var(--space-2) var(--space-4); min-height: 40px; }

/* Theme toggle + crisis dismiss (H2.2 parity restore). Both existed in the Horizon 1
   production landing page and were lost when its own header was replaced. */
.site-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-height: 40px;
    background: transparent; border: 2px solid var(--border-primary);
    border-radius: var(--radius-full); cursor: pointer; font-size: 1rem;
}
.site-theme-toggle:hover { background: var(--bg-hover); }

.site-crisis-bar { position: relative; padding-right: var(--space-10); }
.site-crisis-dismiss {
    position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: #fff;
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    width: 32px; height: 32px; border-radius: var(--radius-full); opacity: 0.75;
}
.site-crisis-dismiss:hover { opacity: 1; background: rgba(255,255,255,0.15); }

/* ============================================================ over-hero ===
   The home page header, restored to the Horizon 1 design (H2.2 Revision 3).

   Horizon 1's landing nav was `position: fixed` and fully transparent, so the hero
   gradient ran behind it; past 24px of scroll it gained a blurred background, a border
   and a shadow. H2.2 replaced this with the shared opaque sticky bar, which put a solid
   white band between the crisis bar and the hero — the single most visible regression
   in the migrated page, and the one behind "the nav bar is messed up".

   This is a VARIANT of the shared header rather than a second header: the same markup,
   the same component, one extra class on <body>. Only the home page opts in, because it
   is the only public page with a hero behind the nav — on a plain background a
   transparent header would be white text on white. */
.site-over-hero .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-over-hero .site-header-inner { min-height: 74px; padding: 0 28px; }

/* Over the hero: white on the gradient. */
.site-over-hero .site-header .site-brand { color: #fff; }
/* The panel and the links must both be transparent over the hero.
   The panel carries a surface colour in the shared header (and #14142e in dark theme),
   which over the gradient renders as a grey slab floating behind the links — visible in
   the Revision 3 screenshots before this rule. */
.site-over-hero .site-header .site-nav-panel { background: transparent; }
.site-over-hero .site-header .site-nav-list a {
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    box-shadow: none;
}
.site-over-hero .site-header .site-nav-list a:hover,
.site-over-hero .site-header .site-nav-list a[aria-current="page"] { color: #fff; }
/* The current page keeps a non-colour indicator (WCAG 1.4.1), matching Horizon 1's
   2px underline rather than the shared header's inset bar. */
.site-over-hero .site-header .site-nav-list a[aria-current="page"] {
    /* background too: the shared rule tints the current item with --bg-hover, which over
       the hero reads as a stray box around one link rather than as a current-page mark. */
    background: transparent;
    box-shadow: inset 0 -2px 0 #fff;
}
.site-over-hero .site-header .site-theme-toggle {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.site-over-hero .site-header .site-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: rotate(18deg);
}
.site-over-hero .site-header .site-btn-primary,
.site-over-hero .site-header a.site-btn-primary {
    background: #fff; color: #5457d6;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.site-over-hero .site-header a.site-btn-primary:hover {
    background: #f0f0ff; color: #5457d6; transform: translateY(-1px);
}

/* Scrolled, or menu open: the shared header's normal appearance returns, with the blur
   Horizon 1 had. Every rule above is undone explicitly rather than by relying on cascade
   order, because a half-reverted header is exactly the half-and-half failure this package
   is fixing.

   An open menu gets the same surface as a scrolled header: a transparent header lays its
   links directly over the hero copy, which is unreadable (site-nav.js toggles
   .is-menu-open while the menu is open). */
.site-over-hero .site-header.is-scrolled,
.site-over-hero .site-header.is-menu-open {
    background: var(--bg-surface);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom-color: var(--border-primary);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.site-over-hero .site-header.is-scrolled .site-brand,
.site-over-hero .site-header.is-menu-open .site-brand { color: var(--text-primary); }
.site-over-hero .site-header.is-scrolled .site-nav-list a,
.site-over-hero .site-header.is-menu-open .site-nav-list a { color: var(--text-secondary); }
.site-over-hero .site-header.is-scrolled .site-nav-list a:hover,
.site-over-hero .site-header.is-menu-open .site-nav-list a:hover { color: var(--text-link); }
.site-over-hero .site-header.is-scrolled .site-nav-list a[aria-current="page"],
.site-over-hero .site-header.is-menu-open .site-nav-list a[aria-current="page"] {
    color: var(--text-link);
    box-shadow: inset 0 -3px 0 var(--border-focus);
}
.site-over-hero .site-header.is-scrolled .site-theme-toggle,
.site-over-hero .site-header.is-menu-open .site-theme-toggle {
    background: var(--bg-surface); border-color: var(--border-primary);
    color: var(--text-primary);
}
.site-over-hero .site-header.is-scrolled .site-btn-primary,
.site-over-hero .site-header.is-scrolled a.site-btn-primary,
.site-over-hero .site-header.is-menu-open .site-btn-primary,
.site-over-hero .site-header.is-menu-open a.site-btn-primary {
    background: var(--border-focus); color: #fff; box-shadow: none;
}
[data-theme="dark"] .site-over-hero .site-header.is-scrolled .site-btn-primary,
[data-theme="dark"] .site-over-hero .site-header.is-scrolled a.site-btn-primary,
[data-theme="dark"] .site-over-hero .site-header.is-menu-open .site-btn-primary,
[data-theme="dark"] .site-over-hero .site-header.is-menu-open a.site-btn-primary {
    color: #10102a;
}

/* The home header is position:fixed, so an open menu taller than the screen (a phone in
   landscape) could never be scrolled to its last items. Cap the panel to the space below
   the header and let it scroll inside itself. */
.site-over-hero .site-nav-panel.is-open {
    max-height: calc(100vh - var(--site-header-stack, 0px));
    overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
    .site-over-hero .site-header,
    .site-over-hero .site-header .site-theme-toggle { transition: none; }
    .site-over-hero .site-header .site-theme-toggle:hover { transform: none; }
}

/* ===================================================== home secondary nav ===
   H2.3-S2 (owner decision D8): the Horizon 1 in-page section links return as a
   SEPARATE navigation on the home page only. It lives in the flow below the hero
   and sticks beneath the fixed header once reached.

   Its sticky offset is --site-header-stack: the crisis-bar height plus the header
   height, published by the SAME function in site-nav.js that positions the fixed
   header. One measurement, two consumers — the header and this bar cannot disagree
   about where the crisis bar ends, which is the disagreement HV-004 was made of.
   With JS unavailable the variable is unset, the fallback is 0, and the bar simply
   sticks at the viewport top underneath the header (z-index below), obscuring
   nothing — the same graceful degradation the fixed header already has. */
.site-subnav {
    position: sticky;
    top: var(--site-header-stack, 0px);
    z-index: 40;   /* beneath the header (50); above page content */
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-primary);
}
[data-theme="dark"] .site-subnav { background: #14142e; border-color: rgba(255,255,255,0.08); }
.site-subnav-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 var(--space-4);
    /* The INNER scrolls, not the list (HV-S2-001). The list is sized to its content
       and auto-centred, which a scroll container cannot be — centring an overflowing
       flex row puts its leading items beyond the reachable scroll range. When the row
       fits it centres like the primary navigation; when it does not, the auto margins
       resolve to 0 and the row scrolls from its start. One row at every width either
       way: the row scrolls inside its own box rather than wrapping into a block that
       eats the viewport or widening the page. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.site-subnav-list {
    list-style: none; margin: 0 auto; padding: 0;
    width: max-content;
    display: flex; align-items: center; gap: var(--space-1);
}
.site-subnav-list li { flex: 0 0 auto; }
.site-subnav-list a {
    display: inline-flex; align-items: center;
    padding: var(--space-3) var(--space-3);
    min-height: 44px;   /* WCAG 2.5.5 target size */
    color: var(--text-secondary); text-decoration: none;
    font-weight: 600; font-size: var(--font-size-sm);
    white-space: nowrap;
}
.site-subnav-list a:hover {
    color: var(--text-link);
    box-shadow: inset 0 -2px 0 var(--border-secondary);
}