/* Shared site navbar — NEO BRUTALIST.
 *
 * Plain Bootstrap dropdowns, no mega menu: a compact bordered panel under the
 * trigger on >=1200px, inline expansion inside the offcanvas drawer below.
 * Mark-up contract: .uwh-site-header / .offcanvas-collapse / ul.dropdown-menu.
 *
 * z-index: header 1036, dropdowns above content but below modals (1040).
 */

:root {
    /* height of the sticky header; synced from the DOM by js/theme.js so the
       offcanvas drawer top always matches the real bar (incl. topbar) */
    --neo-header-h: 56px;
}

.uwh-site-header {
    background-color: var(--neo-surface, #fff);
    border-bottom: var(--neo-border-width, 2px) solid var(--neo-border, #141414);
    box-shadow: 0 4px 0 rgba(20, 20, 20, .12);
    z-index: 1036;
}

.uwh-site-header.sticky-top { top: 0 !important; }

/* ---- brand + links -------------------------------------------------------- */

.uwh-site-header .navbar { padding: .3rem 0; }

.uwh-site-header .navbar-brand img,
.uwh-site-header .navbar-brand .logo-img {
    height: 26px;
    width: auto;
}

.uwh-site-header .navbar .nav-link {
    font-size: .68rem;
    padding: .3rem .5rem;
    color: var(--neo-ink, #141414);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    outline: none;
    box-shadow: none;
    border-color: transparent;
    position: relative;
}

.uwh-site-header .navbar .nav-link:hover,
.uwh-site-header .navbar .nav-link:focus,
.uwh-site-header .navbar .nav-link:active {
    outline: none;
    box-shadow: none;
    border-color: transparent;
    color: var(--neo-ink, #141414);
}

/* hard 3px underline that grows on hover / when open */
.uwh-site-header .navbar .nav-link::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .2rem;
    height: 3px;
    background-color: var(--neo-primary, #4d7cff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.uwh-site-header .navbar .nav-link:hover::after,
.uwh-site-header .navbar .nav-item.show > .nav-link::after,
.uwh-site-header .navbar .nav-link.active::after {
    transform: scaleX(1);
}

/* Keyboard focus stays visible (WCAG 2.4.7). */
.uwh-site-header .navbar .nav-link:focus-visible {
    outline: 3px solid var(--neo-primary, #4d7cff);
    outline-offset: 1px;
    box-shadow: none;
    border-color: transparent;
}

/* open item gets a small filled plate — reads as "you are here" */
.uwh-site-header .navbar .nav-item.show > .nav-link {
    background-color: var(--neo-primary, #4d7cff);
    color: var(--neo-ink, #141414) !important;
}

/* ---- toggler --------------------------------------------------------------- */

.uwh-site-header .navbar .navbar-toggler {
    border: var(--neo-border-width, 2px) solid var(--neo-border, #141414) !important;
    border-radius: var(--neo-radius, 0) !important;
    box-shadow: var(--neo-shadow-sm, 3px 3px 0 #141414);
    padding: .25rem .45rem;
}

.uwh-site-header .navbar .navbar-toggler:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--neo-border, #141414);
}

.uwh-site-header .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23141414' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ---- dropdowns: desktop (>=1200px) ---------------------------------------- */

@media (min-width: 1200px) {
    .uwh-site-header .navbar .nav-link { color: var(--neo-ink, #141414); }

    .uwh-site-header .navbar-nav .dropdown { position: relative; }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px;
        display: block;
        margin-top: 6px;
        padding: .4rem;
        background-color: var(--neo-surface, #fff);
        border: var(--neo-border-width, 2px) solid var(--neo-border, #141414);
        border-radius: var(--neo-radius, 0);
        box-shadow: var(--neo-shadow-lg, 8px 8px 0 #141414);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        z-index: 1037;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu.dropdown-menu-right {
        left: auto;
        right: 0;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .16s ease, transform .18s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item {
        width: 100%;
        white-space: normal;
        color: var(--neo-ink, #141414);
        font-size: .82rem;
        font-weight: 700;
        padding: .5rem .7rem;
        margin-bottom: .3rem;
        border: var(--neo-border-width, 2px) solid transparent;
        border-radius: var(--neo-radius-sm, 4px);
        transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:last-child {
        margin-bottom: 0;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:focus {
        background-color: var(--neo-secondary, #ffe14d) !important;
        color: var(--neo-ink, #141414) !important;
        border-color: var(--neo-border, #141414);
        transform: translate(-1px, -1px);
        box-shadow: var(--neo-shadow-sm, 3px 3px 0 #141414);
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:active {
        transform: translate(1px, 1px);
        box-shadow: none;
        background-color: var(--neo-bg, #f3f1e8) !important;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-divider {
        border-top: var(--neo-border-width, 2px) solid var(--neo-border, #141414);
        margin: .35rem 0;
    }
}

/* ---- dropdowns: mobile drawer (<1200px) ----------------------------------- */

@media (max-width: 1199.98px) {
    .uwh-site-header .navbar .navbar-nav {
        margin-top: 0;
        margin-bottom: 0;
    }

    .uwh-site-header .navbar .navbar-nav.mr-auto { margin-right: 0 !important; }

    .uwh-site-header .navbar .navbar-nav.ml-auto {
        margin-top: 0;
        margin-left: 0 !important;
        padding-top: 0;
    }

    .uwh-site-header .navbar .navbar-nav .nav-item {
        border-bottom: 1px solid #e3dfd2;
    }

    .uwh-site-header .navbar .navbar-nav:nth-of-type(2) .nav-item:last-child {
        border-bottom: 0;
    }

    .uwh-site-header .navbar .navbar-nav .nav-link {
        padding: .7rem 0;
        font-size: .78rem;
    }

    .uwh-site-header .navbar .navbar-nav .nav-link::after {
        left: 0;
        right: auto;
        width: 24px;
    }

    .uwh-site-header .navbar .navbar-nav .nav-item.show > .nav-link {
        background-color: transparent !important;
        color: var(--neo-ink, #141414) !important;
    }

    /* dropdown panels expand inline inside the drawer */
    .uwh-site-header .navbar .navbar-nav .dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        margin-top: 0;
        padding: .15rem 0 .5rem .75rem;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu.show {
        display: block;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item {
        font-size: .82rem;
        font-weight: 700;
        padding: .5rem .7rem;
        margin-bottom: .4rem;
        color: var(--neo-ink, #141414);
        background-color: var(--neo-surface, #fff);
        border: var(--neo-border-width, 2px) solid var(--neo-border, #141414);
        border-radius: var(--neo-radius, 0);
        box-shadow: var(--neo-shadow-sm, 3px 3px 0 #141414);
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:active,
    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item.active {
        background-color: var(--neo-secondary, #ffe14d) !important;
        transform: none;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu .dropdown-item:focus-visible {
        outline: 3px solid var(--neo-primary, #4d7cff);
        outline-offset: -3px;
    }

    /* the drawer: slides in from the right, paper with a hard left rule */
    .uwh-site-header .offcanvas-collapse {
        position: fixed;
        top: var(--neo-header-h, 56px);
        bottom: 0;
        left: 100%;
        width: 40%;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: var(--neo-surface, #fff);
        border-left: var(--neo-border-width, 2px) solid var(--neo-border, #141414);
        box-shadow: -8px 0 0 rgba(20, 20, 20, .16);
        transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), visibility .28s ease-in-out, -webkit-transform .28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .uwh-site-header .offcanvas-collapse.open {
        visibility: visible;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@media (max-width: 991.98px) {
    .uwh-site-header .offcanvas-collapse { width: 50%; }
}

@media (max-width: 575.98px) {
    .uwh-site-header .offcanvas-collapse { width: 100%; }
}

/* ---- caret ---------------------------------------------------------------- */

.uwh-site-header .navbar .dropdown .dropdown-toggle::after {
    transition: transform .2s ease;
    transform-origin: 50% 45%;
    vertical-align: .15em;
}

.uwh-site-header .navbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(-180deg);
}

/* ---- cart icon + badge ---------------------------------------------------- */

.uwh-site-header .navbar .uwh-nav-icon {
    display: inline-flex;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.25em;
}
.uwh-site-header .navbar .uwh-nav-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.uwh-site-header .navbar .badge {
    border: var(--neo-border-width, 2px) solid var(--neo-border, #141414) !important;
    background-color: var(--neo-secondary, #ffe14d) !important;
    color: var(--neo-ink, #141414) !important;
    box-shadow: 2px 2px 0 var(--neo-border, #141414);
    font-weight: 800;
}

/* ---- account dropdown (compact, right aligned) --------------------------- */

@media (min-width: 1200px) {
    .uwh-site-header .navbar .navbar-nav .dropdown.uwh-acct-menu-wrapper {
        position: relative;
    }

    .uwh-site-header .navbar .navbar-nav .dropdown-menu.uwh-acct-menu {
        min-width: 240px;
        left: auto;
        right: 0;
        margin-top: 6px;
    }
}

/* ---- scrollbar gutter ----------------------------------------------------- */

/* Cross-surface lockstep: short pages otherwise lose the scrollbar and the
 * centred header shifts ~15px vs scrolling pages. */
html { overflow-y: scroll; }

@supports (scrollbar-gutter: stable) {
    html {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

/* ---- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .uwh-site-header .navbar .navbar-nav .dropdown-menu,
    .uwh-site-header .offcanvas-collapse,
    .uwh-site-header .navbar .nav-link::after,
    .uwh-site-header .navbar .dropdown .dropdown-toggle::after {
        transition: none !important;
    }
}