/* ── Public site header ──
   A thin blue service bar (phone, distributor link, language) above the main
   row (logo, menus, search, Get a Quote). The main row tightens in steps as
   the screen narrows so it never runs wider than the screen, and at 1024 px
   and below it becomes logo, search, a short quote button and Menu, which
   opens the existing #mobileNavbar. Uses its own sh- classes so the legacy
   .navbarContainer rules (still used by the 404 page and navbar-dash) stay
   untouched. */

.site-header {
    --sh-blue: var(--primary-Color, #293C95);
    --sh-gold: #c9a227;
    --sh-ink: #1b2147;
    --sh-muted: #646c8f;
    --sh-line: #e3e6f3;
    --sh-line-strong: #c9cee4;
    --sh-tint: #f2f2ff;
    --sh-shadow: 0 18px 36px -12px rgba(41, 60, 149, 0.28);
    position: relative;
    z-index: 900;
    background: #fff;
    color: var(--sh-ink);
    font-size: 16px;
    line-height: 1.3;
}

.sh-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
}

.sh-row > * {
    flex-shrink: 0;
}

.sh-row > .sh-spacer {
    flex: 1 1 0;
    min-width: 0;
}

.site-header :focus-visible {
    outline: 2px solid var(--sh-gold);
    outline-offset: -2px;
}

.sh-chev {
    flex-shrink: 0;
    transition: transform 0.15s;
}

[aria-expanded="true"] > .sh-chev {
    transform: rotate(180deg);
}

/* ── Service bar ── */
.sh-util {
    background: var(--sh-blue);
    color: #fff;
}

.sh-util__row {
    height: 36px;
    gap: 22px;
    font-size: 13.5px;
}

.sh-util__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.92;
}

.sh-util__link:hover {
    opacity: 1;
    text-decoration: underline;
}

.sh-lang {
    height: 100%;
}

.sh-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 6px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.sh-util :focus-visible {
    outline-color: #fff;
}

/* ── Main row ── */
.sh-main {
    position: relative;
    background: #fff;
    border-bottom: 1px solid var(--sh-line);
}

.sh-main__row {
    height: 72px;
}

.sh-logo {
    display: block;
}

.sh-logo img {
    display: block;
    width: auto;
    height: 40px;
}

.sh-nav {
    align-self: stretch;
}

.sh-menu {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
}

.sh-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* The products panel spans the whole header, so it is placed against .sh-main */
.sh-item--mega {
    position: static;
}

.sh-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 12px;
    color: var(--sh-blue);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.sh-top:hover {
    box-shadow: inset 0 -3px 0 var(--sh-line-strong);
}

.sh-top[aria-expanded="true"] {
    box-shadow: inset 0 -3px 0 var(--sh-gold);
}

/* ── Dropdowns (menus and language) ── */
.sh-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 250px;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sh-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: var(--sh-shadow);
}

.sh-drop--right {
    left: auto;
    right: 0;
    min-width: 180px;
}

.sh-item.is-open > .sh-drop {
    display: block;
}

.sh-drop a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--sh-ink);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.sh-drop a:hover {
    background: var(--sh-tint);
    color: var(--sh-blue);
}

.sh-drop a[aria-current] {
    color: var(--sh-blue);
    font-weight: 600;
}

/* ── Products panel ── */
.sh-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    grid-template-columns: minmax(0, 1fr) 270px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    /* keep the wheel inside the panel once it bottoms out */
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid var(--sh-line);
    box-shadow: var(--sh-shadow);
}

.sh-item.is-open > .sh-mega {
    display: grid;
    animation: shPanelIn 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes shPanelIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.sh-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
    align-content: start;
    margin: 0;
    padding: 24px 32px 28px;
}

.sh-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none;
}

.sh-card:hover {
    background: var(--sh-tint);
}

.sh-card img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    padding: 6px;
    object-fit: contain;
    background: var(--sh-tint);
    border-radius: 8px;
}

.sh-card b {
    display: block;
    color: var(--sh-blue);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.sh-card small {
    display: block;
    margin-top: 3px;
    color: var(--sh-muted);
    font-size: 13.5px;
    line-height: 1.3;
}

/* A brand with a single product gets one larger card */
.sh-mega__grid--one {
    grid-template-columns: minmax(0, 520px);
}

.sh-mega__grid--one .sh-card img {
    width: 120px;
    height: 120px;
}

.sh-mega__grid--one .sh-card b {
    font-size: 20px;
}

.sh-mega__side {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 28px;
    background: var(--sh-tint);
}

.sh-mega__side p {
    margin: 0 0 6px;
    color: var(--sh-muted);
    font-size: 13.5px;
}

.sh-mega__side a {
    padding: 9px 0;
    color: var(--sh-blue);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--sh-line-strong);
}

.sh-mega__side a:last-child {
    border-bottom: 0;
}

.sh-mega__side a:hover {
    color: var(--sh-ink);
    text-decoration: underline;
}

/* ── Search: a button that opens a full-width bar, or an open box from 1440 px ── */
.sh-search__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    color: var(--sh-blue);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    background: #fff;
    border: 1px solid var(--sh-line-strong);
    border-radius: 8px;
    cursor: pointer;
}

.sh-search__btn[aria-expanded="true"] {
    border-color: var(--sh-blue);
}

.sh-search__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 16px 32px;
    background: #fff;
    border-top: 1px solid var(--sh-line);
    box-shadow: var(--sh-shadow);
}

.sh-search.is-open .sh-search__panel {
    display: block;
}

.sh-search__box {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.sh-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 12px;
    color: var(--sh-muted);
    background: #fff;
    border: 1px solid var(--sh-line-strong);
    border-radius: 8px;
}

.sh-search__field:focus-within {
    border-color: var(--sh-blue);
    box-shadow: 0 0 0 3px rgba(41, 60, 149, 0.15);
}

/* id selector: beats the legacy #search rules in nav-bar.css */
.site-header #search {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    color: var(--sh-ink);
    font-size: 15px;
    line-height: 1.2;
    background: none;
    border: 0;
    outline: 0;
}

.sh-search .search-results {
    top: calc(100% + 4px);
    left: 0;
    border-color: var(--sh-line-strong);
    border-radius: 8px;
    box-shadow: var(--sh-shadow);
}

/* ── Get a Quote ── */
.sh-quote {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    background: var(--sh-blue);
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}

.sh-quote:hover {
    color: var(--sh-ink);
    background: var(--sh-gold);
}

/* ── Phone and tablet controls (shown at 1024 px and below) ── */
.sh-msearch,
.sh-quote--m,
.sh-menu-btn {
    display: none;
}

.sh-icon-btn {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--sh-blue);
    border-radius: 8px;
    cursor: pointer;
}

.sh-menu-btn {
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    color: var(--sh-blue);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--sh-line-strong);
    border-radius: 8px;
    cursor: pointer;
}

/* ── Wide screens: search becomes an open box ── */
@media (min-width: 1440px) {
    .sh-search {
        position: relative;
    }

    .sh-search__btn {
        display: none;
    }

    .sh-search__panel {
        display: block;
        position: static;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .sh-search__box {
        width: 220px;
    }

    .sh-search__field {
        height: 40px;
    }

    .sh-search .search-results {
        left: auto;
        right: 0;
        width: 340px;
    }
}

/* ── Narrower laptops ── */
@media (max-width: 1279px) {
    .sh-row {
        gap: 16px;
        padding: 0 20px;
    }

    .sh-top {
        padding: 0 8px;
        font-size: 15px;
    }

    .sh-logo img {
        height: 34px;
    }

    .sh-quote {
        padding: 0 14px;
        font-size: 14px;
    }

    .sh-search__label {
        display: none;
    }

    .sh-search__panel {
        padding: 14px 20px;
    }

    .sh-mega__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 20px 20px 24px;
    }
}

@media (max-width: 1180px) {
    .sh-row {
        gap: 12px;
        padding: 0 16px;
    }

    .sh-top {
        padding: 0 7px;
    }

    .sh-quote {
        padding: 0 12px;
    }
}

/* ── Phones and tablets: logo, search, quote, Menu ── */
@media (max-width: 1024px) {
    .sh-util,
    .sh-nav,
    .sh-search,
    .sh-quote:not(.sh-quote--m) {
        display: none;
    }

    .sh-main__row {
        height: 64px;
        gap: 6px;
        padding: 0 12px;
    }

    .sh-logo img {
        height: 28px;
    }

    .sh-msearch,
    .sh-quote--m,
    .sh-menu-btn {
        display: inline-flex;
    }

    .sh-quote--m {
        height: 36px;
        padding: 0 12px;
        font-size: 14px;
    }
}

/* Smallest phones: the Menu button keeps its icon and its accessible name */
@media (max-width: 370px) {
    .sh-menu-btn span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-chev,
    .sh-quote {
        transition: none;
    }

    .sh-item.is-open > .sh-mega {
        animation: none;
    }
}