/* =================================================================== HEADER section css =================================================================== */

/* Shared band metrics. Measured: brand row and CTA sit in a 70px-tall band,
   15px from the artboard top; the CTA's right edge lands on 1820 = 1920 - gutter. */
.header,
.header-cta {
    --header-pad-top: 30px;
    --header-h: calc(var(--header-pad-top) + var(--btn-h));

    /* STICKY IS OFF by client request (2026-08-19) — the band sits at the top of
       the page and scrolls away with it instead of following the scroll.

       `relative` rather than `static`: z-index only applies to a positioned
       element, and .header / .header-cta are siblings BEFORE <main>, so without
       it the hero's --ink band would paint straight over both marks. It also
       keeps the stacking context the blend needs (§12.2).

       Either way the negative bottom margin cancels the band's flow height, so
       the hero still starts at y0 and its measured 250px top padding keeps
       clearing the header exactly as before.

       Re-enable by restoring these two lines in place of `position: relative`:
         position: sticky;
         inset-block-start: 0;
    */
    position: relative;
    z-index: var(--z-sticky);
    margin-block-end: calc(var(--header-h) * -1);
    padding-block-start: var(--header-pad-top);
}

.header {
    /* No-JS fallback. Both marks ship white, and without header-theme.js there
       is nothing to flip them, so a solid --ink band keeps them legible on
       every colour. The inline head script adds `js` before first paint, so
       this never flashes. */
    background: var(--ink);

    html.js & { background: transparent; }

    & .header__inner {
        display: flex;
        align-items: center;
        min-height: var(--btn-h);
    }

    & .header__brands {
        display: flex;
        align-items: center;
        gap: var(--sp30);
    }

    & .header__brand {
        display: flex;
        align-items: center;
        transition: var(--transition);

        &:hover { opacity: .7; }
    }

    & .header__logo {
        display: block;
        width: auto;
        height: 40px;
    }

    & .header__logo--partner { height: 36px; }

    /* measured: 1px x 40px, white @ .2 — differenced along with the marks, so
       it reads as a faint dark rule on a light band */
    & .header__divider {
        flex: 0 0 auto;
        width: 1px;
        height: 40px;
        background: var(--line-invert-strong);
    }

    /* .is-blend is set by assets/js/global/header-theme.js for every band the
       blend can actually serve — every near-neutral one, light or dark:

         --cream / --white : difference inverts the marks to near-black
         --ink             : difference lands on 243, still reading as white
         --primary         : no blend, the marks stay their own white

       Leaving it on across both neutral extremes is deliberate, and it is
       what fixes a mark straddling the edge of a stepped --ink panel inside a
       light band: the half on the panel reads light, the half on the band
       reads dark, in one pass. Only --primary drops out — difference works
       per channel, and blue's channel is already 255, so a white mark becomes
       |255-255| = 0 in blue and renders yellow.

       It has to sit on the sticky element itself, not on .header__logo:
       position: sticky creates a stacking context and blending is confined to
       it, so a blend on a descendant resolves against the header's own empty
       backdrop and does nothing. Verified in the browser both ways. */
    &.is-blend { mix-blend-mode: difference; }
}

/* The CTA's own sticky layer — same band, one step above, never blended, so
   --primary survives every band. The strip is click-through so the empty width
   beside the button never swallows a click meant for the page underneath. */
.header-cta {
    z-index: calc(var(--z-sticky) + 1);
    pointer-events: none;

    & .container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: var(--btn-h);
    }

    & .header-cta__btn { pointer-events: auto; }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 1199.98px) {
    .header,
    .header-cta {
        --header-pad-top: 10px;
    }
}
@media (max-width: 991.98px) {
    .header {
        & .header__logo { height: 34px; }
        & .header__logo--partner { height: 30px; }
        & .header__divider { height: 34px; }
    }
}

@media (max-width: 767.98px) {
    .header-cta {
        & .header-cta__btn {
            width: auto;
            padding-inline: var(--sp25);
            white-space: nowrap;
        }
    }
}

@media (max-width: 575.98px) {
    .header {
        & .header__brands { gap: var(--sp15); }
        & .header__logo { height: 26px; }
        & .header__logo--partner { height: 23px; }
        & .header__divider { height: 24px; }
    }

    /* No room for it beside the wordmarks at this width, and the hero carries
       an identical CTA immediately below — so it is dropped rather than shrunk
       into something unreadable. */
    .header-cta { display: none; }
}