/* Navigation stays on screen; only its footprint changes on scroll. */
html { scroll-padding-top:100px; }
html body #mainMasthead {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    position:fixed !important;
    top:0;
    height:82px;
    padding:0 20px;
    background:rgba(0,0,0,.82);
    overflow:visible;
    transition:height .2s ease, background-color .2s ease;
}
html body #mainMasthead.is-compact { height:62px; background:rgba(0,0,0,.96); }
html body #mainMasthead #mainHeader { float:none; width:312px; height:82px; padding:0; flex:0 0 auto; transition:width .2s ease,height .2s ease; }
html body #mainMasthead #mainLogo { float:none; width:100%; height:100%; background-size:contain; background-position:left center; }
html body #mainMasthead.is-compact #mainHeader { width:246px; height:60px; }
html body #mainMasthead #mega-menu-wrap-main-menu { flex:1 1 auto; min-width:0; }
html body:has(#wpadminbar) #mainMasthead { top:32px; }
@media(max-width:1080px) {
    html body #mainMasthead { height:76px; padding:0 16px; }
    html body #mainMasthead #mainHeader { width:min(240px,65vw); height:70px; }
    html body #mainMasthead.is-compact { height:64px; }
    html body #mainMasthead.is-compact #mainHeader { width:min(205px,60vw); height:60px; }
    html body #mainMasthead #mega-menu-wrap-main-menu { position:static; }
    html body #mainMasthead #mega-menu-wrap-main-menu #mega-menu-main-menu { position:absolute; top:100%; left:0; right:0; width:100%; max-height:calc(100dvh - 122px); overflow-y:auto; background:#111; }
    html body #mainMasthead #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link,
    html body #mainMasthead #mainMenu li a { font-size:20px; line-height:1.5; min-height:48px; padding:12px 20px; }
    html body #mainMasthead #mega-menu-wrap-main-menu #mega-menu-main-menu .mega-sub-menu a.mega-menu-link { font-size:18px; line-height:1.5; min-height:44px; padding:10px 24px; }
    html body #mainMasthead #mega-menu-wrap-main-menu .mega-menu-toggle { background:transparent; }
    html body #mainMasthead #mainMenu { position:absolute; top:100%; }
}
@media(max-width:782px) { html body:has(#wpadminbar) #mainMasthead { top:46px; } }
@media(prefers-reduced-motion:reduce) { html body #mainMasthead,html body #mainMasthead #mainHeader { transition:none; } }

/* The former stacked header lifted Max Mega Menu by 40px. Flex alignment replaces it. */
html body #mainMasthead #mega-menu-wrap-main-menu #mega-menu-main-menu { bottom:auto; }
html body #mainMasthead #mainHeader { margin:0; }