/* ==========================================================
   SonSec Header
   Sprint 2
========================================================== */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:#ffffff;

    box-shadow:var(--sonsec-shadow-xs);

    transition:
        background var(--sonsec-transition),
        box-shadow var(--sonsec-transition);
}

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:88px;

    gap:40px;
}

/* -----------------------------
   Branding
------------------------------ */

.site-branding{

    display:flex;

    align-items:center;

    gap:18px;

    color:inherit;

    text-decoration:none;
}

.site-logo{

    width:72px;

    height:72px;

    object-fit:contain;

    flex-shrink:0;
}

.branding-text{

    display:flex;

    flex-direction:column;
}

.company-name{

    font-size:1.2rem;

    font-weight:700;

    color:#0F172A;
}

.company-name__mobile{

    display:none;
}

.company-tagline{

    margin-top:4px;

    font-size:.88rem;

    color:#64748B;
}

/* -----------------------------
   Desktop Navigation
------------------------------ */

.desktop-navigation{

    margin-left:auto;
}

.main-menu{

    display:flex;

    gap:34px;

    list-style:none;

    margin:0;

    padding:0;
}

.main-menu li{

    margin:0;
}

.main-menu .menu-item-has-children{

    position:relative;
}

.main-menu a{

    position:relative;

    display:inline-flex;

    align-items:center;

    min-height:44px;

    color:#1E293B;

    text-decoration:none;

    font-weight:600;

    transition:
        color var(--sonsec-transition),
        background-color var(--sonsec-transition);
}

.main-menu a::after{

    content:"";

    position:absolute;

    right:0;

    bottom:4px;

    left:0;

    height:3px;

    border-radius:999px;

    background:linear-gradient(90deg,#0057B8,#39B54A);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .2s ease;
}

.main-menu a:hover,
.main-menu a:focus-visible,
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a,
.main-menu .current-menu-ancestor > a,
.main-menu .current_page_ancestor > a{

    color:#0057B8;

    text-decoration:none;
}

.main-menu a:hover::after,
.main-menu a:focus-visible::after,
.main-menu .current-menu-item > a::after,
.main-menu .current_page_item > a::after,
.main-menu .current-menu-ancestor > a::after,
.main-menu .current_page_ancestor > a::after{

    transform:scaleX(1);
}

.main-menu .sub-menu{

    position:absolute;

    top:calc(100% + 10px);

    left:0;

    display:flex;

    flex-direction:column;

    gap:2px;

    min-width:240px;

    margin:0;

    padding:8px;

    list-style:none;

    border:1px solid rgba(15,23,42,.10);

    border-radius:var(--sonsec-radius-sm);

    background:#ffffff;

    box-shadow:var(--sonsec-shadow-lg);

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:
        opacity var(--sonsec-transition),
        transform var(--sonsec-transition),
        visibility var(--sonsec-transition);
}

.main-menu > .menu-item-has-children > .sub-menu::before{

    content:"";

    position:absolute;

    top:-10px;

    right:0;

    left:0;

    height:10px;
}

.main-menu .sub-menu .menu-item-has-children{

    position:relative;
}

.main-menu .sub-menu .sub-menu{

    top:-8px;

    left:calc(100% + 8px);

    min-width:250px;

    transform:translateX(-8px);
}

.main-menu .sub-menu .menu-item-has-children > .sub-menu::before{

    content:"";

    position:absolute;

    top:0;

    right:100%;

    width:8px;

    height:100%;
}

.main-menu > .menu-item-has-children:last-child > .sub-menu{

    left:auto;

    right:0;
}

.main-menu > .menu-item-has-children:last-child > .sub-menu .sub-menu{

    left:auto;

    right:calc(100% + 8px);

    transform:translateX(8px);
}

.main-menu .menu-item-has-children:not(.sonsec-menu-item--keyboard-closed):hover > .sub-menu,
.main-menu .menu-item-has-children:not(.sonsec-menu-item--keyboard-closed):focus-within > .sub-menu,
.main-menu .menu-item-has-children.sonsec-menu-item--open > .sub-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.main-menu .sub-menu .menu-item-has-children:not(.sonsec-menu-item--keyboard-closed):hover > .sub-menu,
.main-menu .sub-menu .menu-item-has-children:not(.sonsec-menu-item--keyboard-closed):focus-within > .sub-menu,
.main-menu .sub-menu .menu-item-has-children.sonsec-menu-item--open > .sub-menu{

    transform:translateX(0);
}

.main-menu .sub-menu a{

    display:flex;

    width:100%;

    min-height:40px;

    padding:9px 12px;

    border-radius:6px;

    white-space:nowrap;
}

.main-menu .sub-menu .menu-item-has-children > a{

    justify-content:space-between;

    gap:18px;

    padding-right:34px;
}

.main-menu .sub-menu .menu-item-has-children > a::before{

    content:">";

    position:absolute;

    right:12px;

    color:#64748B;

    font-size:1.2rem;

    line-height:1;
}

.main-menu .sub-menu a::after{

    display:none;
}

.main-menu .sub-menu a:hover,
.main-menu .sub-menu a:focus-visible,
.main-menu .sub-menu .current-menu-item > a,
.main-menu .sub-menu .current-menu-ancestor > a{

    background:#F0F7FF;

    color:#0057B8;
}

/* -----------------------------
   Hamburger
------------------------------ */

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

    flex-shrink:0;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;
}

.menu-toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:0;

    flex:0 0 auto;

    background:#111827;

    border-radius:20px;

    transform-origin:center;

    transition:
        opacity var(--sonsec-transition),
        transform var(--sonsec-transition);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1){

    transform:translateY(9px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2){

    opacity:0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);
}

/* -----------------------------
   Mobile Drawer
------------------------------ */

.mobile-navigation{

    position:fixed;

    top:0;

    right:-340px;

    width:320px;

    max-width:90vw;

    height:100vh;

    height:100dvh;

    background:#fff;

    box-shadow:var(--sonsec-shadow-md);

    z-index:2000;

    visibility:hidden;

    transition:
        right 250ms ease,
        visibility 250ms ease;

    padding:120px 30px 40px;

    overflow:auto;

    overscroll-behavior:contain;
    pointer-events:none;
}

.mobile-navigation.open{

    visibility:visible;

    right:0;
    pointer-events:auto;

}

.mobile-menu-close{

    position:absolute;

    top:24px;

    right:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    padding:0;

    border:0;

    background:transparent;

    color:#111827;

    font-size:2rem;

    line-height:1;

    cursor:pointer;
}

.mobile-menu{

    list-style:none;

    margin:0;

    padding:0;
}

.mobile-menu li{

    margin-bottom:22px;
}

.mobile-menu .menu-item-has-children{

    display:grid;

    grid-template-columns:minmax(0,1fr) 44px;

    column-gap:6px;

    align-items:start;
}

.mobile-menu .sub-menu{

    grid-column:1 / -1;

    margin:10px 0 0 14px;

    padding:0 0 0 12px;

    list-style:none;

    border-left:1px solid #D9E3EE;
}

.mobile-menu .sub-menu[hidden]{

    display:none;
}

.mobile-menu .sub-menu li{

    margin-bottom:10px;
}

.mobile-menu .sub-menu a{

    min-height:42px;

    font-size:.98rem;
}

.mobile-menu a{

    display:flex;

    align-items:center;

    min-height:48px;

    padding:10px 14px;

    border-left:3px solid transparent;

    border-radius:0 8px 8px 0;

    color:#111827;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:600;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible{

    color:#0057B8;

    background:#F0F7FF;

    border-left-color:#39B54A;

    text-decoration:none;
}

.mobile-menu .submenu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:48px;

    margin:0;

    padding:0;

    border:1px solid transparent;

    border-radius:8px;

    background:transparent;

    color:#334155;

    cursor:pointer;

    font-size:1.35rem;

    line-height:1;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.mobile-menu .submenu-toggle:hover,
.mobile-menu .submenu-toggle:focus-visible{

    color:#0057B8;

    background:#F0F7FF;

    border-color:#B7D7F5;
}

.mobile-menu .submenu-toggle[aria-expanded="true"]{

    transform:rotate(90deg);
}

.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a,
.mobile-menu .current-menu-ancestor > a,
.mobile-menu .current_page_ancestor > a{

    color:#0057B8;

    background:#E8F3FF;

    border-left-color:#0057B8;

    text-decoration:none;
}

/* -----------------------------
   Overlay
------------------------------ */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1500;

    cursor:pointer;
}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;
}

/* -----------------------------
   Accessibility
------------------------------ */

.skip-link{

    position:absolute;

    left:-9999px;
}

.skip-link:focus{

    left:20px;

    top:20px;

    background:#fff;

    padding:12px 18px;

    z-index:9999;
}

.menu-toggle:focus-visible,

.mobile-menu-close:focus-visible,

.main-menu a:focus-visible,

.mobile-menu a:focus-visible,

.mobile-menu .submenu-toggle:focus-visible{

    outline:3px solid #0057B8;

    outline-offset:3px;
}

/* ==========================================================
   HEADER POLISH - RC7.18.57
========================================================== */

.header-container{
    min-height:82px;
    gap:30px;
}

.main-menu{
    align-items:center;
    gap:26px;
}

.main-menu a{
    min-height:42px;
    padding-inline:2px;
    font-size:.96rem;
}

.main-menu a:focus-visible,
.menu-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu .submenu-toggle:focus-visible{
    outline:3px solid rgba(57,255,20,.45);
    outline-offset:4px;
    border-radius:6px;
}

@media (max-width:1280px){

    .header-container{
        gap:22px;
    }

    .main-menu{
        gap:18px;
    }

    .main-menu a{
        font-size:.92rem;
    }

    .company-name{
        font-size:1.08rem;
    }

}

@media (max-width:1024px){

    .header-container{
        min-height:78px;
    }

}