/* Production header presentation, scoped to the public website basis so it
   remains separate from Admin, learning and placeholder hosts. */
body.test-website-basis .site-header {
    position: relative;
    z-index: 150;
    isolation: isolate;
    overflow: visible;
    min-height: 132px;
    padding-bottom: clamp(2.35rem, 3.25vw, 3rem);
    background-color: #080872;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 52' preserveAspectRatio='none'%3E%3Cpath d='M0 25C230 4 493 45 765 22S1192 5 1440 25V52H0Z' fill='%23006ce0' fill-opacity='.46'/%3E%3Cpath d='M0 34C278 12 535 50 825 28S1195 11 1440 32V52H0Z' fill='%2311bfcd' fill-opacity='.68'/%3E%3Cpath d='M0 43C315 22 605 54 905 38S1218 24 1440 40V52H0Z' fill='%230ffd9a' fill-opacity='.72'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% clamp(2.55rem, 3.6vw, 3.25rem);
}

body.test-website-basis .site-header > * {
    position: relative;
    z-index: 1;
}

body.test-website-basis .site-header > .nav-backdrop {
    position: absolute;
    z-index: 2;
}

body.test-website-basis .site-header > .structured-nav {
    z-index: 3;
}

@media (min-width: 1201px) {
    body.test-website-basis .site-header > .structured-nav {
        position: static;
    }
}

body.test-website-basis .site-header .brand img {
    filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
}

@media (max-width: 680px) {
    body.test-website-basis .site-header {
        min-height: 112px;
        gap: .5rem;
        padding-bottom: 2.15rem;
        background-size: 100% 2.4rem;
    }
}

/* Preserve the no-JavaScript navigation fallback at the production header's
   collapse point. */
@media (max-width: 1200px) {
    html:not(.js) body.test-website-basis .site-header .menu-toggle,
    html:not(.js) body.test-website-basis .site-header .submenu-toggle {
        display: none;
    }

    html:not(.js) body.test-website-basis .site-header .structured-nav {
        display: flex;
    }

    html:not(.js) body.test-website-basis .site-header .submenu {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.test-website-basis .site-header {
        animation: none;
        scroll-behavior: auto;
        transition: none;
    }
}