/*
 * Main navbar breakpoint rules
 * Desktop navigation: 992px and above
 * Mobile hamburger: below 992px
 */

.st-nav-shell,
.st-navbar,
.st-nav-inner,
.st-brand,
.st-nav-desktop,
.st-nav-links,
.st-nav-actions {
    min-width: 0;
}

.st-nav-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: none !important;
    padding-inline: clamp(8px, 1.5vw, 22px) !important;
}

.st-brand {
    overflow: hidden;
}

.st-brand img {
    flex: 0 0 auto;
    width:108px;
    max-width: 100%;
  
}

.st-brand-copy,
.st-brand-copy span,
.st-nav-desktop,
.st-nav-links,
.st-navlink {
    min-width: 0;
}

.st-brand-copy span,
.st-navlink span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-header .st-navlink::after {
    bottom: 6px !important;
}

.st-nav-actions {
    min-width: max-content;
}

/* Use the full navigation only where its labels remain comfortably readable. */
@media (min-width: 992px) {
    .st-topbar.st-desktop-only {
        display: flex !important;
    }

    .st-nav-desktop.st-desktop-only,
    .st-nav-actions.st-desktop-only {
        display: flex !important;
    }

    .st-brand-copy.st-desktop-only {
        display: none !important;
    }

    .st-header .st-mobile-only {
        display: none !important;
    }

    .st-header .st-navbar {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        background: rgb(255 202 202 / 62%) !important;
    }

    .st-nav-inner {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        justify-content: normal !important;
    }

    .st-nav-desktop {
        overflow: visible;
    }

    .st-nav-links {
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: center;
        width: 100%;
    }
}

/* Compact desktop navigation for laptops. */
@media (min-width: 1200px) and (max-width: 1306.98px) {
    .st-header .st-navbar,
    .st-nav-inner {
        height: 60px !important;
        min-height: 60px !important;
    }

    .st-nav-inner {
        gap: 8px !important;
        padding-inline: 14px !important;
    }

    .st-header .st-navlink {
        align-items: center !important;
        gap: 4px !important;
        height: 54px !important;
        padding: 0 4px !important;
        font-size: 12.8px !important;
        line-height: 1.15 !important;
    }

    .st-header .st-navlink::after {
        bottom: 7px !important;
    }

    .st-navlink-icon {
        width: 18px !important;
        height: 18px !important;
        flex-basis: 18px !important;
        font-size: 17px !important;
    }

    .st-iconbtn {
        width: 35px !important;
        height: 35px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .st-mobile-profile-btn {
        width: 35px !important;
        height: 35px !important;
        flex-basis: 35px !important;
        border-radius: 50% !important;
    }

    .st-cta {
        min-height: 35px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
    }
}

/* Compact desktop mode without turning labels and icons into tiny text. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .st-topbar-inner {
        max-width: none !important;
        padding-inline: 12px !important;
    }

    .st-topbar-link,
    .st-utility-link {
        font-size: 10.5px !important;
    }

    .st-topbar-cluster,
    .st-topbar-actions {
        gap: clamp(5px, 0.8vw, 10px) !important;
    }

    .st-header .st-navbar {
        height: 58px !important;
        min-height: 58px;
        border-radius: 18px !important;
        background: rgb(255 202 202 / 62%) !important;
    }

    .st-nav-inner {
        min-height: 58px !important;
        grid-template-columns: clamp(58px, 7vw, 82px) minmax(0, 1fr) auto !important;
        gap: clamp(3px, 0.55vw, 7px) !important;
        padding-inline: clamp(6px, 0.9vw, 11px) !important;
    }

  

    .st-navlink {
        gap: clamp(2px, 0.3vw, 4px) !important;
        padding: 17px clamp(1px, 0.28vw, 3px) !important;
        font-size: clamp(7.2px, 1.84vw, 12px) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
    }

    .st-navlink-icon {
        width: 14px !important;
        height: 14px !important;
        display: inline-flex !important;
        flex: 0 0 14px !important;
        font-size: 14px !important;
    }

    .st-dropdown-indicator {
        width: 5px !important;
        height: 5px !important;
        margin-left: 1px !important;
    }

    .st-nav-actions {
        gap: clamp(2px, 0.4vw, 5px) !important;
        margin-left: 0 !important;
    }

    .st-iconbtn {
        width: clamp(27px, 3.1vw, 33px) !important;
        height: clamp(27px, 3.1vw, 33px) !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    .st-mobile-profile-btn {
        width: clamp(27px, 3.1vw, 33px) !important;
        height: clamp(27px, 3.1vw, 33px) !important;
        flex-basis: clamp(27px, 3.1vw, 33px) !important;
        border-radius: 50% !important;
    }

    .st-iconbtn svg {
        width: 15px !important;
        height: 15px !important;
    }

    .st-cta {
        min-height: 30px !important;
        padding: 0 clamp(6px, 0.8vw, 10px) !important;
        font-size: 9.5px !important;
        display: inline-flex !important;
        white-space: nowrap;
    }

    .st-megamenu {
        min-width: min(680px, calc(100vw - 32px)) !important;
        max-width: min(680px, calc(100vw - 32px)) !important;
    }
}

/* At the narrowest desktop widths, save space without hiding nav links. */
@media (min-width: 768px) and (max-width: 899.98px) {
    .st-header .st-navbar,
    .st-nav-inner {
        height: 54px !important;
        min-height: 54px !important;
    }

    .st-topbar-link span:last-child,
    .st-utility-link span:last-of-type,
    .st-sep,
    .st-badge {
        display: none !important;
    }

    .st-nav-inner {
        grid-template-columns: 48px minmax(0, 1fr) auto !important;
        gap: 2px !important;
        padding-inline: 4px !important;
    }

  

    .st-navlink {
        gap: 1px !important;
        padding: 17px 0 !important;
        font-size: clamp(11.2px, 13.82vw, 11.3px) !important;
        line-height: 1 !important;
    }

    .st-navlink-icon {
        width: 8px !important;
        height: 8px !important;
        flex-basis: 8px !important;
        font-size: 8px !important;
    }

    .st-dropdown-indicator {
        width: 4px !important;
        height: 4px !important;
    }

    .st-iconbtn {
        width: 23px !important;
        height: 23px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    .st-mobile-profile-btn {
        width: 23px !important;
        height: 23px !important;
        flex-basis: 23px !important;
        border-radius: 50% !important;
    }

    .st-iconbtn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .st-cta {
        min-height: 25px !important;
        padding: 0 5px !important;
        border-radius: 9px !important;
        font-size: 6.3px !important;
    }
}

/* Mobile navigation uses the compact controls below 992px. */
@media (max-width: 991.98px) {
    .st-desktop-only {
        display: none !important;
    }

    .st-mobile-only {
        display: flex !important;
    }

    .st-mobile-nav-actions {
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
    }

    .st-nav-inner {
        grid-template-columns: auto auto !important;
        justify-content: space-between !important;
        min-height: 64px !important;
        padding-inline: 12px !important;
    }

    .st-brand {
        max-width: calc(100vw - 120px) !important;
    }

    .st-mobile-toggle {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .st-nav-inner {
        min-height: 64px !important;
    }

    .st-brand {
        max-width: calc(100vw - 104px) !important;
    }
}

@media (max-width: 575.98px) {
    .st-nav-inner {
        min-height: 58px !important;
        padding-inline: 8px !important;
    }

 

    .st-mobile-toggle {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
    }

    .st-mobile-search-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
    }

    .st-mobile-profile-btn {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
}