/* ─────────────────────────────────────────────────────────────────────────
   Zeraphos site header — the single header used by every page.

   Two archetypes:
     .site-header               navigational — nav links + CTA, collapses to
                                the burger + drawer at the mobile breakpoint
     .site-header--focus        conversion pages (apply / caremate) — a single
                                CTA and an optional back link, never a burger

   Two surfaces:
     .site-header--overlay      transparent over a hero, frosts once scrolled
     .site-header--solid        frosted from the top (content pages)

   Colours fall back to literals so this file also works on pages that don't
   define the full token set (e.g. the legal pages).
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --site-header-h: 80px;
    --site-header-pad-x: 48px;
}

/* One breakpoint governs the whole header: the nav collapses below 900px, and
   also on tablet portrait up to 1024px (iPad Pro 12.9" portrait is 1024px wide
   and cannot fit the full nav). Everything else keys off these two queries. */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
    :root {
        --site-header-h: 68px;
        --site-header-pad-x: 20px;
    }
}

/* ── shell ── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    max-width: 100vw;
    padding: 0 var(--site-header-pad-x);
    transition: background-color .4s ease, box-shadow .3s ease;
}

/* Three columns rather than flex growth: the nav sits on the true centre line,
   and each slot is only as wide as its content — so the logo link's tap area
   is the lockup, not half the bar. */
.site-header__inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    min-height: var(--site-header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.site-header--solid,
.site-header.is-scrolled {
    background: rgba(246, 241, 235, .94);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.site-header--solid.is-scrolled {
    box-shadow: 0 4px 24px rgba(44, 34, 20, .06);
}

.site-header--overlay.is-scrolled {
    box-shadow: 0 1px 0 var(--border, rgba(90, 122, 98, .14));
}

/* ── lockup ── */
.site-header__logo {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--brown, #2c2214);
}

.site-header__logo img {
    width: 34px;
    height: 40px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

.site-header__wordmark {
    font-weight: 700;
    font-size: .97rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    white-space: nowrap;
    color: inherit;
}

/* /caremate wears the teal wordmark over its own hero gradient. It takes the
   page's --teal-deep, not --teal: at 15.5px bold the wordmark is normal text by
   WCAG, so it needs 4.5:1 — the brighter --teal only reaches 3.38:1 on the warm
   strip the header sits on. Pages adding this modifier must define --teal-deep. */
.site-header--teal .site-header__wordmark {
    color: var(--teal-deep, #216d61);
}

/* ── nav + actions ── */
.site-header__nav {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-header__nav a {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text, #2c2a25);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.site-header__nav a:hover {
    color: var(--sage-deep, #3d5a44);
}

.site-header__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-mid, #6b655b);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.site-header__back:hover {
    color: var(--teal, #2a8a7a);
}

/* Uppercase to echo the caps wordmark. Casing is done in CSS, not in the markup,
   so screen readers still get normal-cased text rather than spelling it out. */
.site-header__cta {
    padding: 10px 28px;
    background: var(--sage-deep, #3d5a44);
    color: #fff;
    border-radius: var(--r-md, 16px);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.site-header__cta:hover {
    background: #2f4835;
}

/* ── burger ──
   44x44 tap target; the three 22x2 bars sit 7px apart, which is what the
   open-state translate values are derived from. */
.site-header__burger {
    grid-column: 3;
    justify-self: end;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.site-header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--brown, #2c2214);
    border-radius: var(--r-pill, 999px);
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
}

.site-header__burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header__burger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.site-header__burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── drawer ── */
.site-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    max-width: 100vw;
    flex-direction: column;
    gap: 6px;
    padding: calc(var(--site-header-h) + 12px) 28px 28px;
    background: rgba(246, 241, 235, .97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.site-drawer.is-open {
    transform: translateY(0);
}

.site-drawer a {
    padding: 12px 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-mid, #6b655b);
    text-decoration: none;
    border-bottom: 1px solid var(--border, rgba(90, 122, 98, .14));
    transition: color .2s;
}

.site-drawer a:last-child {
    border-bottom: none;
}

.site-drawer a:hover {
    color: var(--sage-deep, #3d5a44);
}

/* Typed against `a` so it outranks the `.site-drawer a` link colour above. */
.site-drawer a.site-drawer__cta,
.site-drawer a.site-drawer__cta:hover {
    margin-top: 8px;
    padding: 14px 28px;
    text-align: center;
    background: var(--sage-deep, #3d5a44);
    color: #fff;
    border-radius: var(--r-md, 16px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none;
}

/* ── skip link ── */
.site-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--sage-deep, #3d5a44);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--r-md, 16px) 0;
}

.site-skip-link:focus {
    left: 0;
}

/* ── tight desktop ──
   The home nav carries seven items, and the caps wordmark is wide, so the row
   gets close between the collapse breakpoint and ~1150px. Tighten the spacing
   rather than collapsing to the burger earlier — the breakpoints below are
   fixed site-wide and must not move. */
@media (min-width: 901px) and (max-width: 1150px) {
    .site-header__inner { gap: 16px; }
    .site-header__nav { gap: 12px; }
    .site-header__nav a { font-size: .84rem; }
}

/* ── mobile ── */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
    .site-header__nav,
    .site-header:not(.site-header--focus) .site-header__actions {
        display: none;
    }

    .site-header:not(.site-header--focus) .site-header__burger {
        display: flex;
    }

    .site-drawer {
        display: flex;
    }

    /* Focus pages keep their CTA instead of a burger, so the back link gives
       way to it. Where the back link is the only action (the legal pages) it
       stays — and browsers without :has() also keep it, which is the safe miss. */
    .site-header--focus:has(.site-header__cta) .site-header__back {
        display: none;
    }
}

/* Phone: the wordmark leaves the lockup and centres in the bar. */
@media (max-width: 600px) {
    .site-header__wordmark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.05rem;
        letter-spacing: 2px;
        pointer-events: none;
    }

    /* Focus pages still show a CTA on the right, so the centred wordmark has
       less room — scale it down rather than let the two collide. */
    .site-header--focus .site-header__wordmark {
        font-size: clamp(.8rem, 4vw, 1.05rem);
        letter-spacing: clamp(1.1px, .45vw, 2px);
    }

    .site-header--focus .site-header__cta {
        padding: 8px 14px;
        font-size: .74rem;
    }

    /* The wordmark takes the centre line from 600px down, so from 600px down the
       side slots must give up their optional words too ("Apply Now" -> "Apply",
       "Back to Home" -> "Back"). Shortening them any later leaves a band —
       361-420px, i.e. most phones — where the centred wordmark runs under the
       CTA. Keep this breakpoint tied to the centring one above. */
    .site-header__more {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .site-drawer,
    .site-header__burger span {
        transition: none;
    }
}