/* ── Header v2 ──────────────────────────────────────────────── */
:root.overlap:has(.hdr.v2) {
    --hdr-nv-sp: 50;
    --hdr-nv-sp-lpt: 20;
}

.hdr.v2 {
    z-index: 4;
    position: relative;
    &[data-colors="primary-dark"]{
        .bg-bx.lk-bg{
            .fly-nv.bg-bx{
                background-color: var(--dk-alt-bg);
            }
        }
    }
    > .bg-bx {
        /* Capture the inner panel's bg so descendants (e.g. flyouts) can
           reference it without the .bg-bx .bg-bx --inner-theme reset. */
        --hdr-pnl-bg: var(--inner-theme);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

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

    /* Logo now sits inline on the far left of the top nav (not the old
       full-width centered block that overlapped the mainstage). */
    .hdr-v2-lg {
        margin-right: var(--hdr-nv-sp-clc);
    }

    @media screen and (width >= 1280px) {
        /* Constrain the inline logo to a nav-bar height; the site logo max
           (--hdr-lg-mx-ht) was tuned for the old centered placement. */


        /* Align last flyout to the right to prevent overflow */
        .nv > ul > li:last-child .fly-nv {
            left: auto;
            right: 0;
        }
    }
    @media screen and (width < 1280px) {
        .mn_{
            max-width: 90%;
        }
    }

    @media screen and (width >= 1024px) {
        .sw-1280[class*="flx-at-1280"] {
            display: flex;
        }
        .hd-1280{
            display: none !important
        }
        .sw-1280{
            display: block;
        }
        [class*='flx'][class*="-at-1280"]:not([class*="sw-"]) {
            display: flex;
        }
        [class*="flx"][class*="-at-1280"] {
            > :not(svg, .full-mbl, .btn, .max-cnt) {
                width: unset !important;
                max-width: unset !important;
                margin-inline: 0;
                margin-left: var(--hdr-nv-sp-clc);
            }
        }
        .ta_l-1280 {
            text-align: left;
        }
        [class*="flx"][class*="-at-1280"] {
            &[class*="gp_sp"] > * + * {
                margin-top: 0;
            }
        }
    }
}

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

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