/* ============================================================================
   header.css — shared site header / navigation
   ----------------------------------------------------------------------------
   Styles includes/redtape_header.html. Designed as the footer's counterpart:

     footer                                  header
     ─────────────────────────────────────   ──────────────────────────────────
     white surface, 1px #dde5ef hairline  →  white surface, 1px #dde5ef hairline
     bold navy headings (#07366c)         →  bold navy brand name + CTA
     slate body text (#334155)            →  slate nav links
     pill buttons on #f8fafc (socials)    →  pill account buttons + menu toggle
     navy → red → orange gradient bar     →  the same gradient as a top strip

   The gradient stops are sampled from the footer itself, so the two bookend
   the page in exactly the same colours.

   SELF-CONTAINED: every rule is anchored on #site-header / #primary-nav and
   sets the properties it depends on explicitly, so it renders the same on
   every page — including ones whose stylesheets still carry the old
   `.site-header` rules or their own `.btn` styles. Nothing here relies on
   `.home-page`, except the one clearly marked override near the top.

   BEHAVIOUR (not in this file): the mobile menu toggle (.is-open on
   #primary-nav, aria-expanded on #nav-toggle) and the shadow-on-scroll state
   (.is-scrolled on #site-header) are set by JavaScript. Without it the header
   is fully usable on desktop; below the collapse breakpoint the menu stays
   closed.
   ============================================================================ */


/* ============================================================================
   1. TOKENS — scoped to the header, so they can't collide with page tokens
   ============================================================================ */
#site-header {
    --hdr-h:          76px;         /* keep in sync with --nav-height in index.css
                                       (the home page uses it for the About sidebar's
                                       sticky offset, so it clears this header) */

    --hdr-navy:       #07366c;      /* footer headings / logo navy            */
    --hdr-navy-deep:  #052a55;      /* hover / pressed                        */
    --hdr-red:        #aa241d;      /* footer gradient, ~60%                  */
    --hdr-orange:     #ff8a2a;      /* footer gradient, 100%                  */
    --hdr-ink:        #334155;      /* footer body text                       */
    --hdr-muted:      #64748b;
    --hdr-border:     #dde5ef;      /* footer hairline                        */
    --hdr-divider:    #eef2f7;      /* lighter separators inside the menu     */
    --hdr-pill:       #f8fafc;      /* footer social-pill fill                */
    --hdr-surface:    #ffffff;
    --hdr-online:     #16a34a;      /* matches --success in index.css         */
    --hdr-shadow:     0 12px 32px rgba(7, 54, 108, 0.16);

    /* The footer's bottom bar, stop for stop (sampled from the rendered footer) */
    --hdr-gradient: linear-gradient(90deg,
        #072f63 0%, #06376d 15%, #193b6b 30%, #623044 45%,
        #aa241d 60%, #c83f1d 72%, #e26223 85%, #ff8a2a 100%);

    /* Read by index.js's sliding "active link" underline */
    --nav-underline: linear-gradient(90deg, var(--hdr-red), var(--hdr-orange));
}


/* ============================================================================
   2. SHELL
   ----------------------------------------------------------------------------
   Sticky on every page (in normal flow, so it never covers page content or the
   dashboard nav below it). Everything the old `.site-header` rules might have
   set is restated here so none of it leaks through.
   ============================================================================ */
#site-header {
    position: sticky;
    top: 0;
    z-index: 300;

    display: block;
    height: var(--hdr-h);
    min-height: 0;
    margin: 0;
    padding: 0;

    background: var(--hdr-surface);
    background-image: none;
    color: var(--hdr-ink);
    border: 0;
    border-bottom: 1px solid var(--hdr-border);
    border-radius: 0;
    box-shadow: none;

    font-family: inherit;
    transition: box-shadow 200ms ease;
}
#site-header.is-scrolled {
    box-shadow: 0 8px 26px rgba(7, 54, 108, 0.08);
}

/* Footer bookend: the same gradient, as a thin strip along the top edge */
#site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--hdr-gradient);
    pointer-events: none;
}

/* Sticky on EVERY page, the home page included. It used to be `fixed` on the
   home page so the hero could slide underneath it — but the header is a solid
   white bar, so that showed nothing, and a fixed header lifts out of the page
   flow and covers whatever sits directly below it (the dashboard nav bar).
   Sticky keeps it in flow: the nav sits under it, the hero starts under that. */

#site-header,
#site-header *,
#site-header *::before,
#site-header *::after { box-sizing: border-box; }

#site-header a { text-decoration: none; }

#site-header :focus-visible {
    outline: 2px solid var(--hdr-navy);
    outline-offset: 2px;
    border-radius: 6px;
}


/* ============================================================================
   3. INNER LAYOUT
   ----------------------------------------------------------------------------
   Full-width with generous side padding, not a narrow centred container — the
   footer's content sits at the same left edge, so logo and footer logo line up.
   ============================================================================ */
#site-header .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 4px clamp(16px, 3.4vw, 64px) 0;   /* 4px = the gradient strip */
}


/* ============================================================================
   4. BRAND — logo, hairline divider, name
   ============================================================================ */
#site-header .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 14px;
    color: var(--hdr-navy);
}

/* The real logo is a wide lock-up (mark + wordmark), not a square: keep its
   proportions instead of forcing it into a box. */
#site-header .brand__mark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
}
#site-header .brand__logo {
    display: block;
    width: auto;
    height: 42px;
    max-width: none;
    padding: 0;
    background: none;
    object-fit: contain;
}

#site-header .brand__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 14px;
    border-left: 1px solid var(--hdr-border);
    line-height: 1.15;
    white-space: nowrap;
}
#site-header .brand__name {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--hdr-navy);
}
/* The logo already spells out the organisation; if this line feels
   redundant next to it, `display: none` here is all it takes. */
#site-header .brand__sub {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hdr-muted);
}


/* ============================================================================
   5. NAV LINKS
   ----------------------------------------------------------------------------
   Plain bold slate text like the footer's links. The active-section
   underline is drawn by index.js as a sliding <span> inside .nav__list
   (coloured by --nav-underline above), so there's deliberately no
   ::after underline here — the two would double up.
   ============================================================================ */
#primary-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 0;
}
#primary-nav .nav__list {
    position: relative;         /* anchors the sliding underline */
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#primary-nav .nav__list li { margin: 0; padding: 0; list-style: none; }

#primary-nav .nav__link {
    position: relative;
    display: inline-block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--hdr-ink);
    white-space: nowrap;
    transition: color 160ms ease, background 160ms ease;
}
#primary-nav .nav__link:hover {
    color: var(--hdr-navy);
    background: #f1f5f9;
}
#primary-nav .nav__link.is-active {
    color: var(--hdr-navy);
    font-weight: 700;
}


/* ============================================================================
   6. CTA — solid navy pill; the footer's gradient fades in on hover
   ============================================================================ */
#primary-nav .nav__cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 10px;
    padding: 10px 20px;

    background: var(--hdr-navy);
    color: #ffffff;
    border: 1px solid var(--hdr-navy);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(7, 54, 108, 0.22);

    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease,
                border-color 180ms ease;
}
#primary-nav .nav__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hdr-gradient);
    opacity: 0;
    transition: opacity 260ms ease;
}
#primary-nav .nav__cta:hover {
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(7, 54, 108, 0.28);
}
#primary-nav .nav__cta:hover::before { opacity: 1; }


/* ============================================================================
   7. ACCOUNT — pills, like the footer's social buttons
   ----------------------------------------------------------------------------
   Signed out: [Register] [Login]. Signed in: name | [Logout]. Login and
   Logout share .nav__account-logout in the markup, so they look the same.
   ============================================================================ */
#primary-nav .nav__account {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0 16px;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 1px solid var(--hdr-border);
}

#primary-nav .nav__account-user {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--hdr-navy);
    white-space: nowrap;
}
#primary-nav .nav__account-divider {
    width: 1px;
    height: 16px;
    background: var(--hdr-border);
}
#primary-nav .nav__account-logout-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

#primary-nav .nav__account-link,
#primary-nav .nav__account-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 15px;

    background: var(--hdr-pill);
    color: var(--hdr-navy);
    border: 1px solid var(--hdr-border);
    border-radius: 999px;

    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease;
}
#primary-nav .nav__account-link:hover,
#primary-nav .nav__account-logout:hover {
    background: #ffffff;
    border-color: var(--hdr-navy);
    box-shadow: 0 2px 8px rgba(7, 54, 108, 0.10);
    text-decoration: none;
}


/* ============================================================================
   8. AUTHENTICATED EXTRAS — flag chip, notifications, profile dropdown
   ----------------------------------------------------------------------------
   Replaces the plain "name + Logout" text for signed-in users. All of it
   sits inside the existing #primary-nav .nav__account cluster (see section 7
   above for its base flex/divider rules), so it inherits the same spacing
   and left border as the signed-out Register/Login pair.
   ============================================================================ */

/* --- RSA flag chip --- */
#primary-nav .nav__flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--hdr-border);
    border-radius: 999px;
    background: var(--hdr-pill);
    flex-shrink: 0;
    transition: background 160ms ease, border-color 160ms ease;
}
#primary-nav .nav__flag-btn:hover { background: #ffffff; border-color: var(--hdr-navy); }
#primary-nav .nav__flag {
    display: inline-flex;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(7, 54, 108, 0.14);
    flex-shrink: 0;
}
#primary-nav .nav__flag svg { width: 100%; height: 100%; display: block; }

/* --- Round icon button (used by the notifications bell) --- */
#site-header .nav__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--hdr-border);
    border-radius: 999px;
    background: var(--hdr-pill);
    color: var(--hdr-navy);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 160ms ease, border-color 160ms ease;
}
#site-header .nav__icon-btn:hover { background: #ffffff; border-color: var(--hdr-navy); }
#site-header .nav__icon-btn[aria-expanded="true"] { background: #ffffff; border-color: var(--hdr-navy); }
#site-header .nav__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Notification badge --- */
#primary-nav .nav__notif { position: relative; flex-shrink: 0; }
#primary-nav .nav__notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hdr-red);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--hdr-surface);
    pointer-events: none;
}
#primary-nav .nav__notif-badge--dot {
    min-width: 9px; width: 9px; height: 9px; padding: 0; top: 0; right: 0; font-size: 0;
}

/* --- Dropdown panel shell (shared by notifications and profile) --- */
#primary-nav .nav__notif-panel,
#primary-nav .nav__profile-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--hdr-surface);
    border: 1px solid var(--hdr-border);
    border-radius: 14px;
    box-shadow: var(--hdr-shadow);
    z-index: 320;
}
#primary-nav .nav__notif-panel[hidden],
#primary-nav .nav__profile-panel[hidden] { display: none; }

#primary-nav .nav__notif-panel { width: 320px; max-width: calc(100vw - 32px); overflow: hidden; }
#primary-nav .nav__notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--hdr-divider);
    font-size: 0.86rem; color: var(--hdr-navy);
}
#primary-nav .nav__notif-count {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--hdr-navy); background: var(--hdr-pill); padding: 3px 9px; border-radius: 999px;
}
#primary-nav .nav__notif-list { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto; }
#primary-nav .nav__notif-item a {
    display: flex; flex-direction: column; gap: 3px; padding: 10px 10px; border-radius: 8px;
    color: var(--hdr-ink); transition: background 140ms ease;
}
#primary-nav .nav__notif-item a:hover { background: var(--hdr-pill); }
#primary-nav .nav__notif-title { font-size: 0.86rem; font-weight: 600; line-height: 1.35; }
#primary-nav .nav__notif-time { font-size: 0.72rem; color: var(--hdr-muted); }
#primary-nav .nav__notif-empty { margin: 0; padding: 22px 16px; font-size: 0.86rem; color: var(--hdr-muted); text-align: center; }
#primary-nav .nav__notif-footer {
    display: block; padding: 12px 16px; border-top: 1px solid var(--hdr-divider);
    font-size: 0.82rem; font-weight: 700; color: var(--hdr-navy); text-align: center;
    transition: background 140ms ease;
}
#primary-nav .nav__notif-footer:hover { background: var(--hdr-pill); }

/* --- Avatar --- */
#primary-nav .avatar {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--hdr-navy), var(--hdr-navy-deep));
    color: #ffffff; font-weight: 800; letter-spacing: 0.02em;
}
#primary-nav .avatar--sm { width: 30px; height: 30px; font-size: 0.68rem; }
#primary-nav .avatar--lg { width: 42px; height: 42px; font-size: 0.9rem; }
#primary-nav .avatar__img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }

/* --- Profile trigger + dropdown --- */
#primary-nav .nav__profile { position: relative; flex-shrink: 0; }
#primary-nav .nav__profile-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border: 1px solid var(--hdr-border); border-radius: 999px;
    background: var(--hdr-pill); cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
#primary-nav .nav__profile-trigger:hover,
#primary-nav .nav__profile-trigger[aria-expanded="true"] { background: #ffffff; border-color: var(--hdr-navy); }
#primary-nav .nav__profile-name {
    max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.84rem; font-weight: 700; color: var(--hdr-navy);
}
#primary-nav .nav__profile-caret { width: 14px; height: 14px; color: var(--hdr-muted); transition: transform 160ms ease; }
#primary-nav .nav__profile-trigger[aria-expanded="true"] .nav__profile-caret { transform: rotate(180deg); }

#primary-nav .nav__profile-panel { min-width: 260px; padding: 8px; }
#primary-nav .nav__profile-header {
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px;
    border-bottom: 1px solid var(--hdr-divider); margin-bottom: 6px;
}
#primary-nav .nav__profile-header-meta { display: flex; flex-direction: column; min-width: 0; }
#primary-nav .nav__profile-header-name {
    font-size: 0.9rem; font-weight: 700; color: var(--hdr-navy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#primary-nav .nav__profile-header-email {
    font-size: 0.76rem; color: var(--hdr-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#primary-nav .nav__profile-menu { list-style: none; margin: 0; padding: 0; }
#primary-nav .nav__profile-menu a,
#primary-nav .nav__profile-logout {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px; border: 0; border-radius: 8px; background: transparent;
    color: var(--hdr-ink); font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer;
    transition: background 140ms ease;
}
#primary-nav .nav__profile-menu a:hover,
#primary-nav .nav__profile-logout:hover { background: var(--hdr-pill); }
#primary-nav .nav__profile-menu .nav__icon { color: var(--hdr-muted); }
#primary-nav .nav__profile-menu a[aria-current="page"] { background: rgba(7, 54, 108, 0.06); color: var(--hdr-navy); }
#primary-nav .nav__profile-menu a[aria-current="page"] .nav__icon { color: var(--hdr-navy); }
#primary-nav .nav__profile-logout-form { border-top: 1px solid var(--hdr-divider); margin-top: 6px; padding-top: 6px; }
#primary-nav .nav__profile-logout { color: var(--hdr-red); }
#primary-nav .nav__profile-logout:hover { background: rgba(170, 36, 29, 0.08); }


/* ============================================================================
   9. MENU TOGGLE — hidden on desktop
   ============================================================================ */
#site-header .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    background: var(--hdr-pill);
    border: 1px solid var(--hdr-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}
#site-header .nav-toggle:hover {
    background: #ffffff;
    border-color: var(--hdr-navy);
}
#site-header .nav-toggle__bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#site-header .nav-toggle__bars i {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--hdr-navy);
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}
#site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
#site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================================
   10. TIGHTER DESKTOP — between the full layout and the collapse point
   ============================================================================ */
@media (max-width: 1420px) {
    #primary-nav .nav__link { padding: 9px 10px; }
    #primary-nav .nav__account { margin-left: 12px; padding-left: 12px; }
    #primary-nav .nav__cta { margin-left: 6px; padding: 10px 16px; }
    #site-header .brand__sub { display: none; }
}


/* ============================================================================
   11. COLLAPSED NAV — slide-down panel
   ----------------------------------------------------------------------------
   --collapse-at is documented here rather than as a variable (media queries
   can't read custom properties): the breakpoint below is 1240px, the width
   under which the brand, six links, CTA and account pills no longer fit on
   one row. Change it in this one place.
   ============================================================================ */
@media (max-width: 1240px) {
    #site-header .nav-toggle { display: inline-flex; }

    #primary-nav {
        position: fixed;
        top: var(--hdr-h);
        left: 0;
        right: 0;
        z-index: 299;

        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--hdr-h));
        margin: 0;
        padding: 8px clamp(16px, 4vw, 40px) 24px;
        overflow-y: auto;

        background: var(--hdr-surface);
        border-bottom: 1px solid var(--hdr-border);
        box-shadow: 0 22px 44px rgba(7, 54, 108, 0.14);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 200ms ease, transform 200ms ease,
                    visibility 200ms ease;
    }
    #primary-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #primary-nav .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    #primary-nav .nav__list li { border-bottom: 1px solid var(--hdr-divider); }
    #primary-nav .nav__link {
        display: block;
        padding: 15px 4px;
        border-radius: 0;
        font-size: 1rem;
    }
    #primary-nav .nav__link:hover { background: transparent; }

    #primary-nav .nav__cta {
        width: 100%;
        margin: 18px 0 0;
        padding: 13px 20px;
        font-size: 0.95rem;
    }

    #primary-nav .nav__account {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 14px 0 0;
        padding: 0;
        border: 0;
    }
    #primary-nav .nav__account-link,
    #primary-nav .nav__account-logout { padding: 12px 15px; font-size: 0.9rem; }

    /* signed-in, legacy plain-text markup (kept in case a page still renders
       it instead of the profile dropdown below): name spans the row, Logout
       sits full width beneath it */
    #primary-nav .nav__account-user { grid-column: 1 / -1; max-width: none; text-align: center; }
    #primary-nav .nav__account-divider { display: none; }
    #primary-nav .nav__account-logout-form { grid-column: 1 / -1; display: block; }
    #primary-nav .nav__account-logout-form .nav__account-logout { width: 100%; }

    /* signed-in, profile-dropdown markup: flag + bell + profile trigger sit
       in a row instead of the two-column grid above, which was built for the
       plain Register/Login pair. */
    #primary-nav .nav__account:has(.nav__profile) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 14px 0 0;
        padding: 0;
        border: 0;
    }
    #primary-nav .nav__profile-name { display: none; }   /* avatar + caret only: saves width */
    #primary-nav .nav__profile-trigger { padding: 4px; }

    /* Both dropdowns become fixed bottom sheets so they can never overflow
       the narrow slide-down nav — the same treatment the dashboard nav's
       category dropdowns use on phones. */
    #primary-nav .nav__notif-panel,
    #primary-nav .nav__profile-panel {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ============================================================================
   6b. PLATFORM NAV — return-to-public-site control
   ----------------------------------------------------------------------------
   The platform header (signed-in, inside admin / an app) replaces the four
   marketing links with platform links, and adds this "Public site" button
   at the end. Outlined pill rather than a filled CTA: it's an escape hatch,
   not the primary action. Sibling of .nav__cta in the markup.
   ============================================================================ */
#primary-nav .nav__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 10px;
    padding: 8px 14px;

    background: transparent;
    color: var(--hdr-navy);
    border: 1px solid var(--hdr-border);
    border-radius: 999px;

    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease;
}
#primary-nav .nav__back:hover {
    background: #ffffff;
    border-color: var(--hdr-navy);
    box-shadow: 0 2px 8px rgba(7, 54, 108, 0.10);
    text-decoration: none;
}
#primary-nav .nav__back-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Platform list uses the same rules as .nav__list. This block only exists
   so a later tweak (e.g. tighter gaps) has an obvious place to live. */
#primary-nav .nav__list--platform {
    /* inherits from #primary-nav .nav__list */
}

@media (max-width: 480px) {
    #site-header .brand__text { display: none; }   /* logo alone on phones */
    #site-header .brand__logo { height: 38px; }
}


/* ============================================================================
   12. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    #site-header,
    #site-header *,
    #site-header *::before,
    #site-header *::after {
        transition-duration: 0.001ms !important;
    }
}