/* =========================================================================
   Main site header: full-width bar at the top, frosted floating pill once the page scrolls,
   brand name folds into the logo, and a pill that glides between the menu items.
   Desktop only (>= 992px); phones keep the existing header. Loaded from Views/Shared/_Header.cshtml.
   ========================================================================= */
@media (min-width: 992px) {
    .header-wrapper { --hf-ease: cubic-bezier(.22, 1, .36, 1); }

    .header-wrapper .header {
        border: 1px solid transparent;
        border-radius: 999px;
        transition: max-width .45s var(--hf-ease), transform .45s var(--hf-ease), padding .35s, background-color .35s, border-color .35s, box-shadow .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s;
    }

    .header-wrapper.is-float {
        background-color: transparent;
        border-bottom-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* translate, not margin: moving the pill must never shift the page */
    .header-wrapper.is-float .header {
        max-width: 1180px;
        padding-inline: 18px;
        transform: translateY(10px);
        background: rgba(255, 255, 255, .62);
        border-color: rgba(255, 255, 255, .75);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 44px -16px rgba(15, 80, 130, .35);
        -webkit-backdrop-filter: blur(24px) saturate(170%);
        backdrop-filter: blur(24px) saturate(170%);
    }

    [data-bs-theme="dark"] .header-wrapper.is-float .header {
        background: rgba(8, 24, 44, .6);
        border-color: rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 44px -16px rgba(0, 0, 0, .7);
    }

    /* the name folds away so only the logo is left */
    .header-wrapper .logo-text {
        max-width: 12rem;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width .45s var(--hf-ease), opacity .25s;
    }

    .header-wrapper.is-float .logo-text { max-width: 0; opacity: 0; }

    /* sliding pill behind the top-level menu items */
    .desktop-navigation-wrapper { position: relative; }
    .desktop-navigation-wrapper .tutorial-button { position: relative; z-index: 1; }
    .desktop-navigation-wrapper .tutorial-button:hover { background-color: transparent; }

    .nh-pill {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: var(--w, 0);
        height: var(--h, 0);
        border-radius: 999px;
        background: rgba(8, 145, 178, .14);
        box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .32);
        transform: translate3d(var(--x, 0), var(--y, 0), 0);
        opacity: 0;
        transition: transform .3s var(--hf-ease), width .3s var(--hf-ease), height .3s var(--hf-ease), opacity .2s;
        pointer-events: none;
    }

    [data-bs-theme="dark"] .nh-pill { background: rgba(47, 184, 214, .16); box-shadow: inset 0 0 0 1px rgba(47, 184, 214, .25); }
    .nh-pill.on { opacity: 1; }
    .nh-pill.snap { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .header-wrapper .header, .header-wrapper .logo-text, .nh-pill { transition: none; }
}

@supports not (backdrop-filter: blur(1px)) and (not (-webkit-backdrop-filter: blur(1px))) {
    .header-wrapper.is-float .header { background: #fff; }
}

/* stretchy glass (Chromium): the content behind the floating bar bends near its edges, blur on top */
@media (min-width: 992px) {
    .header-wrapper.is-float .header.gs-liquid {
        -webkit-backdrop-filter: var(--gs-f) blur(10px) saturate(170%);
        backdrop-filter: var(--gs-f) blur(10px) saturate(170%);
    }
}