/* ── Header v2 ──────────────────────────────────────────────── */

.hdr.v2 {
    --hdr-nv-sp: 50;
    --hdr-nv-sp-lpt: 20;

    --hdr-lg-mx-wd: 400;
    --hdr-lg-mx-wd-clc: calc((var(--hdr-lg-mx-wd-mbl) * 1px) + (var(--hdr-lg-mx-wd) - var(--hdr-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

    /* v2 has no inner .bg-bx panel — the .hdr.v2 element is the visible header,
       painted with --background by [data-colors]. Expose that as --hdr-pnl-bg
       so descendant flyouts always match the header bg, regardless of the
       configured `colors` value. */
    --hdr-pnl-bg: var(--background);

    border-top-left-radius: 0;
    border-top-right-radius: 0;

    /* Top hat band — full-width alternate surface (light blue on primary-light).
       The .hdr.v2 root paints --background; this band uses --inner-theme, the
       palette's alternate surface color, so it stays in sync with the theme. */
    .hdr-top {
        background-color: #ACCDFD;
    }

    .tp-lg {
        margin-right: 0;
    }

    .btn.v1.alt {
        --btn-bg: var(--btn-hvr-pry);
        --btn-clr: var(--btn-hvr-pry-txt);

        @media (hover: hover) and (pointer: fine) {
            &:is(a:hover, a:focus-visible) {
                --btn-bg: var(--btn-pry);
                --btn-clr: var(--btn-pry-txt);
			    border-color: var(--btn-bg);
			    background-color: var(--btn-bg);
            }
        }
    }

    @media screen and (width >= 1280px) {
        .hdr-row {
            display: flex;
        }

        /* Align last flyout to the right to prevent overflow */
        .nv > ul > li:last-child .fly-nv {
            left: auto;
            right: 0;
        }
    }
}

.overlap:has(.hdr.v2) {
    z-index: 2;

    + section {
        margin-bottom: calc(-1 * var(--bdr-rds));
    }
}