/* DIDC shared header guard
   Keep this file last in header.php. The site contains legacy page styles that
   otherwise override the logo's HTML dimensions and destabilise navigation. */

.fusion-header-wrapper {
    position: relative;
    z-index: 10010;
    width: 100%;
    min-height: 80px;
    background: #fff;
}

.fusion-header-wrapper .fusion-header.globalNav {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    margin-top: 20px;
    padding: 0 30px;
    overflow: visible;
    background: #fff;
}

.fusion-header-wrapper .globalNav > .container-lg {
    width: 100%;
    max-width: 1440px;
    height: 60px;
    margin: 0 auto;
    padding: 0;
}

.fusion-header-wrapper .globalNav .navRoot {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
}

.fusion-header-wrapper .globalNav .navSection.logo {
    position: absolute;
    top: 0;
    /* Desktop brand rail: the page narratives begin on an inset content grid,
       so the logo follows the same rail instead of floating at the viewport
       edge. The clamp keeps the relationship balanced on larger displays. */
    left: clamp(128px, 12vw, 180px);
    display: flex;
    align-items: center;
    height: 60px;
}

.fusion-header-wrapper .globalNav .navSection.logo .fusion-logo {
    float: none;
    width: 170px;
    max-width: 170px;
    height: 49px;
    margin: 0 !important;
}

.fusion-header-wrapper .globalNav .fusion-logo-link {
    display: flex;
    align-items: center;
    width: 170px;
    height: 49px;
}

.fusion-header-wrapper .globalNav .fusion-logo img {
    display: block;
    width: 170px !important;
    min-width: 170px;
    max-width: 170px !important;
    height: auto !important;
    max-height: 49px !important;
    margin: 0 !important;
    object-fit: contain;
}

.fusion-header-wrapper .globalNav .fusion-mobile-logo,
.fusion-header-wrapper .globalNav .fusion-sticky-logo {
    display: none !important;
}

.fusion-header-wrapper .globalNav .navSection.primary,
.fusion-header-wrapper .globalNav .navSection.secondary {
    align-items: center;
    height: 60px;
}

/* Keep the desktop navigation as one balanced group. Because navRoot is
   right-aligned, this end margin shifts Home–Ask SOL left together without
   changing link gaps or disturbing dropdown positioning. */
@media (min-width: 1280px) {
    .fusion-header-wrapper .globalNav .navSection.secondary {
        margin-right: clamp(72px, 6vw, 120px);
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .fusion-header-wrapper .globalNav .navSection.secondary {
        margin-right: 24px;
    }
}

.fusion-header-wrapper .globalNav .rootLink {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    /* Desktop mega-menu geometry must not affect the mobile document width.
       The mobile navigation has its own accessible popup and product list. */
    .fusion-header-wrapper .globalNav .dropdownRoot,
    .fusion-header-wrapper .globalNav .dropdownContainer,
    .fusion-header-wrapper .globalNav .dropdownSection {
        display: none !important;
    }

    .fusion-header-wrapper,
    .fusion-header-wrapper .fusion-header.globalNav {
        min-height: 72px;
    }

    .fusion-header-wrapper .fusion-header.globalNav {
        height: 52px;
        margin-top: 20px;
        padding: 0 22px;
    }

    .fusion-header-wrapper .globalNav > .container-lg,
    .fusion-header-wrapper .globalNav .navRoot,
    .fusion-header-wrapper .globalNav .navSection.logo {
        height: 52px;
    }

    .fusion-header-wrapper .globalNav .navSection.logo {
        left: 4px;
    }

    .fusion-header-wrapper .globalNav .navSection.logo .fusion-logo,
    .fusion-header-wrapper .globalNav .fusion-logo-link {
        width: 150px;
        max-width: 150px;
        height: 44px;
    }

    .fusion-header-wrapper .globalNav .fusion-logo img {
        width: 150px !important;
        min-width: 150px;
        max-width: 150px !important;
        max-height: 44px !important;
    }

    .fusion-header-wrapper .globalNav .fusion-standard-logo {
        display: none !important;
    }

    .fusion-header-wrapper .globalNav .fusion-mobile-logo {
        display: block !important;
    }

    .fusion-header-wrapper .globalNav .navSection.mobile {
        display: flex;
        align-items: center;
        height: 52px;
    }

    .fusion-header-wrapper .globalNav .navSection.mobile .rootLink {
        height: 52px;
        line-height: 52px;
    }

    /* Only the modern white popup may participate in mobile layout. */
    .fusion-header-wrapper + .mobile-menu-drawer,
    .fusion-header-wrapper .mobile-menu-drawer,
    #mobileMenuDrawer,
    #mobileMenuDrawer .fusion-menu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Every mobile submenu option receives the same compact wayfinding icon.
       Product-specific artwork remains in the richer desktop mega-menu. */
    .fusion-header-wrapper .globalNav .mobileProductsList a {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .fusion-header-wrapper .globalNav .mobileProductsList a::before {
        content: "\f105";
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(237, 20, 64, 0.08);
        color: #ED1440;
        font-family: "Font Awesome 6 Free";
        font-size: 11px;
        font-weight: 900;
        transition: color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .fusion-header-wrapper .globalNav .mobileProductsList a:hover::before,
    .fusion-header-wrapper .globalNav .mobileProductsList a:focus-visible::before {
        color: #fff;
        background: #ED1440;
        transform: translateX(2px);
    }
}

@media (max-width: 480px) {
    .fusion-header-wrapper .fusion-header.globalNav {
        padding: 0 16px;
    }

    .fusion-header-wrapper .globalNav .navSection.logo {
        left: 0;
    }

    .fusion-header-wrapper .globalNav .navSection.logo .fusion-logo,
    .fusion-header-wrapper .globalNav .fusion-logo-link {
        width: 136px;
        max-width: 136px;
    }

    .fusion-header-wrapper .globalNav .fusion-logo img {
        width: 136px !important;
        min-width: 136px;
        max-width: 136px !important;
    }
}