/* =========================================================
   MILLERTECH HEADER & NAVIGATION
========================================================= */

.site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    width:100%;
    background:rgba(7,17,31,.76);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.site-header.scrolled{
    background:rgba(7,17,31,.96);
    border-color:rgba(57,196,255,.12);
    box-shadow:0 14px 40px rgba(0,0,0,.30);
}

.nav-wrap{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.brand{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
}

.header-logo{
    display:block;
    width:auto;
    height:54px;
}

.site-nav{
    display:flex;
    align-items:center;
    gap:30px;
    margin-left:auto;
}

.site-nav > a,
.nav-dropdown > button{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:44px;
    padding:0;
    border:0;
    background:none;
    color:#f5f8fc;
    font:inherit;
    font-size:14px;
    font-weight:650;
    cursor:pointer;
    transition:color .25s ease;
}

.site-nav > a::after,
.nav-dropdown > button::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:3px;
    height:2px;
    border-radius:999px;
    background:#39c4ff;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.site-nav > a:hover,
.site-nav > a:focus-visible,
.nav-dropdown > button:hover,
.nav-dropdown > button:focus-visible,
.site-nav .active{
    color:#39c4ff;
}

.site-nav > a:hover::after,
.site-nav > a:focus-visible::after,
.nav-dropdown > button:hover::after,
.nav-dropdown > button:focus-visible::after,
.site-nav .active::after{
    transform:scaleX(1);
}

.nav-dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    width:360px;
    padding:14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    background:rgba(12,26,45,.98);
    box-shadow:0 28px 70px rgba(0,0,0,.42);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,10px);
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
    pointer-events:auto;
}

.dropdown-menu a{
    display:block;
    padding:13px 15px;
    border-radius:13px;
    transition:background .22s ease,transform .22s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible{
    background:rgba(57,196,255,.09);
    transform:translateX(3px);
}

.dropdown-menu b{
    display:block;
    margin-bottom:3px;
    color:#fff;
    font-size:14px;
}

.dropdown-menu small{
    display:block;
    color:#91a5bf;
    font-size:12px;
    line-height:1.45;
}

.desktop-cta{
    flex-shrink:0;
}

.menu-toggle{
    display:none;
    position:relative;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.04);
    cursor:pointer;
}

.menu-toggle span{
    position:absolute;
    left:12px;
    width:23px;
    height:2px;
    border-radius:999px;
    background:#fff;
    transition:transform .25s ease,opacity .25s ease,top .25s ease;
}

.menu-toggle span:nth-child(1){top:15px;}
.menu-toggle span:nth-child(2){top:22px;}
.menu-toggle span:nth-child(3){top:29px;}
.menu-toggle em{display:none;}

.menu-toggle[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg);}

.skip-link{
    position:fixed;
    top:10px;
    left:10px;
    z-index:2000;
    padding:10px 14px;
    border-radius:10px;
    background:#fff;
    color:#07111f;
    transform:translateY(-150%);
}

.skip-link:focus{transform:translateY(0);}

@media(max-width:1100px){
    .nav-wrap{min-height:78px;}
    .header-logo{height:48px;}
    .menu-toggle{display:block;margin-left:auto;}
    .desktop-cta{display:none;}

    .site-nav{
        position:fixed;
        top:78px;
        left:16px;
        right:16px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        max-height:calc(100vh - 96px);
        margin:0;
        padding:18px;
        overflow:auto;
        border:1px solid rgba(255,255,255,.09);
        border-radius:20px;
        background:rgba(8,20,37,.98);
        box-shadow:0 28px 70px rgba(0,0,0,.48);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        pointer-events:none;
        transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
    }

    .site-nav.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .site-nav > a,
    .nav-dropdown > button{
        width:100%;
        min-height:50px;
        padding:0 14px;
        justify-content:space-between;
        border-radius:12px;
    }

    .site-nav > a::after,
    .nav-dropdown > button::after{display:none;}

    .site-nav > a:hover,
    .nav-dropdown > button:hover,
    .site-nav .active{
        background:rgba(57,196,255,.08);
    }

    .dropdown-menu{
        position:static;
        width:100%;
        max-height:0;
        padding:0 8px;
        border:0;
        background:transparent;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
        overflow:hidden;
        pointer-events:none;
        transition:max-height .3s ease,padding .3s ease;
    }

    .nav-dropdown.open .dropdown-menu{
        max-height:620px;
        padding:6px 8px 10px;
        pointer-events:auto;
    }

    .dropdown-menu a{padding:12px 14px;}
    body.menu-open{overflow:hidden;}
}

@media(max-width:650px){
    .nav-wrap{min-height:72px;}
    .header-logo{height:43px;max-width:220px;object-fit:contain;}
    .site-nav{top:72px;left:10px;right:10px;max-height:calc(100vh - 84px);}
}

@media(prefers-reduced-motion:reduce){
    .site-header,.site-nav,.dropdown-menu,.menu-toggle span{transition:none;}
}

/* =========================================================
   V5.1 HEADER LOGO CORRECTION
========================================================= */

.nav-wrap{
    min-height:94px;
}

.brand{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    width:260px;
    min-width:0;
    height:auto;
    overflow:visible;
}

.header-logo{
    position:static;
    display:block;
    width:100%;
    max-width:260px;
    height:auto;
    object-fit:contain;
}

@media(max-width:1100px){
    .nav-wrap{
        min-height:84px;
        gap:16px;
    }

    .brand{
        width:215px;
    }

    .header-logo{
        max-width:215px;
    }

    .site-nav{
        top:84px;
    }

    .desktop-cta{
        display:inline-flex;
        min-height:46px;
        padding:11px 20px;
        font-size:13px;
    }
}

@media(max-width:650px){
    .nav-wrap{
        min-height:78px;
        gap:10px;
    }

    .brand{
        flex:1 1 auto;
        width:auto;
        max-width:178px;
        min-width:0;
    }

    .header-logo{
        width:100%;
        max-width:178px;
    }

    .menu-toggle{
        width:46px;
        height:46px;
        flex:0 0 46px;
        margin-left:auto;
    }

    .desktop-cta{
        flex:0 0 auto;
        min-height:46px;
        padding:11px 16px;
        border-radius:16px;
        font-size:12px;
        white-space:nowrap;
    }

    .site-nav{
        top:78px;
        max-height:calc(100vh - 90px);
    }
}

@media(max-width:430px){
    .nav-wrap{
        gap:8px;
    }

    .brand{
        max-width:148px;
    }

    .header-logo{
        max-width:148px;
    }

    .desktop-cta{
        padding:10px 12px;
        font-size:11px;
    }
}

@media(max-width:380px){
    .brand{
        max-width:126px;
    }

    .header-logo{
        max-width:126px;
    }

    .desktop-cta{
        padding:10px 10px;
        font-size:10px;
    }
}

/* =========================================================
   V5.2 MOBILE SOLUTIONS DROPDOWN FIX
========================================================= */
@media(max-width:1100px){
    .nav-dropdown{
        width:100%;
        min-width:0;
    }

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu,
    .nav-dropdown.open .dropdown-menu{
        position:static;
        left:auto;
        right:auto;
        width:100%;
        max-width:100%;
        margin:0;
        transform:none !important;
    }

    .dropdown-menu{
        box-sizing:border-box;
        min-width:0;
    }

    .dropdown-menu a{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow-wrap:anywhere;
        transform:none !important;
    }

    .dropdown-menu b,
    .dropdown-menu small{
        width:100%;
        max-width:100%;
        overflow-wrap:anywhere;
    }
}

@media(max-width:650px){
    .site-nav{
        overflow-x:hidden;
    }

    .nav-dropdown.open .dropdown-menu{
        padding:8px 4px 10px;
    }

    .dropdown-menu a{
        padding:13px 12px;
    }
}


/* =========================================================
   V6 MOBILE NAVIGATION LOCK
========================================================= */
@media(max-width:1100px){
    .site-nav{
        left:max(12px,env(safe-area-inset-left));
        right:max(12px,env(safe-area-inset-right));
        width:auto;
        overflow-x:hidden;
        overscroll-behavior:contain;
    }

    .nav-dropdown,
    .nav-dropdown.open,
    .nav-dropdown .dropdown-menu,
    .nav-dropdown.open .dropdown-menu{
        left:auto !important;
        right:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        transform:none !important;
    }

    .nav-dropdown .dropdown-menu{
        box-sizing:border-box;
        margin:0;
    }

    .nav-dropdown .dropdown-menu a{
        box-sizing:border-box;
        width:100%;
        min-width:0;
        max-width:100%;
        overflow:hidden;
    }

    .nav-dropdown .dropdown-menu b,
    .nav-dropdown .dropdown-menu small{
        display:block;
        max-width:100%;
        overflow-wrap:break-word;
        word-break:normal;
    }
}
