/*
 * Unified IOR logo treatment for every public page with a dark hero.
 *
 * Applies to the premium homepage and to inner pages that expose dark
 * breadcrumbs inside catalog, category, and product-detail heroes. The logo
 * remains part of the navigation instead of appearing on a separate white
 * card, while an ivory monochrome treatment keeps it legible on navy/green.
 */

body:has(.ior-premium-hero) .site-header--navigation,
body:has(.ior-breadcrumb--dark) .site-header--navigation {
    isolation: isolate;
}

body:has(.ior-premium-hero) .site-header--navigation::before,
body:has(.ior-breadcrumb--dark) .site-header--navigation::before {
    background: linear-gradient(
        90deg,
        rgba(4, 18, 43, 0.44) 0%,
        rgba(4, 18, 43, 0.19) 48%,
        rgba(4, 18, 43, 0) 100%
    );
    content: "";
    inset: 0 auto 0 0;
    pointer-events: none;
    position: absolute;
    width: min(34vw, 430px);
    z-index: -1;
}

body:has(.ior-premium-hero) .header-brand-lockup,
body:has(.ior-breadcrumb--dark) .header-brand-lockup {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-flex;
    min-height: 0;
    overflow: visible;
    padding: 4px 18px 4px 0;
    position: relative;
}

body:has(.ior-premium-hero) .header-brand-lockup::after,
body:has(.ior-breadcrumb--dark) .header-brand-lockup::after {
    display: none !important;
}

body:has(.ior-premium-hero) .header-brand-logo,
body:has(.ior-breadcrumb--dark) .header-brand-logo {
    filter:
        grayscale(1)
        brightness(0)
        invert(1)
        sepia(0.08)
        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.34)) !important;
    height: auto !important;
    max-width: 188px !important;
    opacity: 0.98;
    width: clamp(150px, 11.8vw, 188px) !important;
}

/* Keep the complete navigation visually consistent on dark inner-page heroes. */
body:has(.ior-breadcrumb--dark) .site-header--navigation {
    background: linear-gradient(
        90deg,
        rgba(4, 18, 43, 0.995) 0%,
        rgba(6, 30, 57, 0.985) 72%,
        rgba(5, 43, 50, 0.96) 100%
    );
    border-bottom-color: rgba(222, 169, 46, 0.5);
}

body:has(.ior-breadcrumb--dark) .gateway-header-menu .nav-link {
    color: rgba(255, 255, 255, 0.92);
}

body:has(.ior-breadcrumb--dark) .gateway-header-menu .nav-link:hover,
body:has(.ior-breadcrumb--dark) .gateway-header-menu .nav-link:focus-visible {
    color: #fff;
}

body:has(.ior-breadcrumb--dark) .language-toggle-group {
    background: rgba(4, 18, 43, 0.58);
    border-color: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

body:has(.ior-breadcrumb--dark) .language-option {
    color: rgba(255, 255, 255, 0.84);
}

body:has(.ior-breadcrumb--dark) .language-option.is-active {
    background: var(--ior-green-deep);
    color: #fff;
}

@media (max-width: 1199.98px) {
    body:has(.ior-premium-hero) .site-header--navigation::before,
    body:has(.ior-breadcrumb--dark) .site-header--navigation::before {
        background: linear-gradient(
            90deg,
            rgba(4, 18, 43, 0.62) 0%,
            rgba(4, 18, 43, 0.22) 64%,
            rgba(4, 18, 43, 0) 100%
        );
        width: min(60vw, 410px);
    }

    body:has(.ior-premium-hero) .header-brand-lockup,
    body:has(.ior-breadcrumb--dark) .header-brand-lockup {
        padding-right: 12px;
    }

    body:has(.ior-premium-hero) .header-brand-logo,
    body:has(.ior-breadcrumb--dark) .header-brand-logo {
        max-width: 158px !important;
        width: clamp(136px, 23vw, 158px) !important;
    }

    body:has(.ior-breadcrumb--dark) .gateway-header-collapse {
        background: #071c42;
        border-color: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 767.98px) {
    body:has(.ior-premium-hero) .site-header--navigation::before,
    body:has(.ior-breadcrumb--dark) .site-header--navigation::before {
        width: min(72vw, 330px);
    }

    body:has(.ior-premium-hero) .header-brand-logo,
    body:has(.ior-breadcrumb--dark) .header-brand-logo {
        max-width: 145px !important;
        width: clamp(124px, 35vw, 145px) !important;
    }
}

@media (max-width: 390px) {
    body:has(.ior-premium-hero) .header-brand-lockup,
    body:has(.ior-breadcrumb--dark) .header-brand-lockup {
        padding-right: 8px;
    }

    body:has(.ior-premium-hero) .header-brand-logo,
    body:has(.ior-breadcrumb--dark) .header-brand-logo {
        max-width: 132px !important;
        width: clamp(116px, 36vw, 132px) !important;
    }
}