/* =====================================
   Header
   显科WEB统一头部
===================================== */


.header{

    width:100%;

    height:68px;

    background: #0d1a2a;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;

    border-bottom: 1px solid rgba(255,255,255,.06);

    transition: background .35s ease, box-shadow .35s ease;

}


/* ==========================
   Scrolled State
========================== */

.header.is-scrolled{

    background: #ffffff;

    box-shadow:
    0 1px 0 rgba(0,0,0,.06);

    border-bottom: 1px solid #e5e7ea;

}

.header.is-scrolled .nav__link{
    color: #2d333b;
}

.header.is-scrolled .nav__link:hover{
    color: #1a3a5c;
}

.header.is-scrolled .header__menu span{
    background: #2d333b;
}




.header__container{

    max-width:1320px;

    height:100%;

    margin:0 auto;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}




/* Logo */

.header__logo img{

    height:46px;

    display:block;

}





/* ==========================
   Navigation
========================== */


.header__nav{

    height:100%;

}



.nav__list{

    height:100%;

    display:flex;

    align-items:center;

    gap:42px;

}




.nav__item{

    height:100%;

    display:flex;

    align-items:center;

    position:relative;

}




.nav__link{

    font-size:16px;

    color:#ffffff;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:6px;

    transition:.25s;

}



.nav__link:hover{

    color:#4a8ab5;

}





.arrow{

    font-size:12px;

}






/* ==========================
   Dropdown
========================== */


.nav__dropdown{

    position:absolute;

    top:72px;

    left:50%;

    transform:translateX(-50%);


    width:210px;


    background:#ffffff;


    padding:12px 0;


    border-radius:8px;


    box-shadow:

    0 12px 30px rgba(0,0,0,.15);


    opacity:0;

    visibility:hidden;


    transition:.25s;

}



.nav__item:hover .nav__dropdown{

    opacity:1;

    visibility:visible;

}




.nav__dropdown--large{

    width:360px;

}



.nav__dropdown a{

    display:block;

    padding:12px 22px;

    color:#333;

    font-size:14px;

}


.nav__dropdown a:hover{


    background:#f4f8fc;

    color:#1a3a5c;


}





/* ==========================
   Mobile Menu Button
========================== */


.header__menu{


    display:none;

    width:35px;

    border:0;

    background:none;

}


.header__menu span{

    display:block;

    height:2px;

    margin:7px 0;

    background:#fff;

}







/* ==========================
   Mobile (≤900px)
========================== */


@media(max-width:900px){


.header__nav{

    display:none;

    position: absolute;

    top: 80px;

    left: 0;

    width: 100%;

    height: auto;

    max-height: calc(100vh - 80px);

    overflow-y: auto;

    background: #fff;

    box-shadow: 0 8px 30px rgba(0,0,0,.12);

    padding: 12px 0;

    z-index: 999;

}


/* ---- Open State ---- */

.header__nav.is-open{

    display: block !important;

    animation: navSlideDown .3s ease;

}


@keyframes navSlideDown{

    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }

}


/* ---- Vertical Links ---- */

.header__nav .nav__list{

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    height: auto;

}


.header__nav .nav__item{

    height: auto;

    flex-direction: column;

}


.header__nav .nav__link{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 30px;

    color: #333;

    font-size: 16px;

    border-bottom: 1px solid #f2f4f7;

}


.header__nav .nav__link:hover{

    color: #1a3a5c;

    background: #f8fafc;

}


/* ---- Dropdown — collapsed by default, expand on click ---- */

.header__nav .nav__dropdown{

    position: static;

    transform: none;

    width: 100%;

    box-shadow: none;

    border-radius: 0;

    opacity: 0;

    visibility: hidden;

    max-height: 0;

    overflow: hidden;

    background: #f8fafc;

    padding: 0;

    transition: max-height .3s ease, opacity .3s ease;

}


/* Override desktop hover — use click on mobile */

.header__nav .nav__item:hover .nav__dropdown{

    opacity: 0;

    visibility: hidden;

    max-height: 0;

}


/* Expanded state */

.header__nav .nav__item.is-expanded .nav__dropdown{

    opacity: 1;

    visibility: visible;

    max-height: 500px;

    overflow: visible;

}


.header__nav .nav__dropdown a{

    padding: 12px 30px;

    font-size: 14px;

    color: #555;

    text-align: center;

    border-bottom: 1px solid #eef1f5;

}


.header__nav .nav__dropdown a:hover{

    background: #eef3f8;

    color: #1a3a5c;

}


/* Arrow indicator on parent links */

.header__nav .nav__item--has-menu > .nav__link .arrow{

    transition: transform .3s;

}


.header__nav .nav__item--has-menu.is-expanded > .nav__link .arrow{

    transform: rotate(180deg);

}


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

.header__menu{

    display: block;

    position: relative;

    z-index: 1001;

    cursor: pointer;

}


.header__menu span{

    transition: .3s;

}


/* Hamburger → X */

.header__menu.is-open span:nth-child(1){

    transform: rotate(45deg) translate(6px, 6px);

}


.header__menu.is-open span:nth-child(2){

    opacity: 0;

}


.header__menu.is-open span:nth-child(3){

    transform: rotate(-45deg) translate(6px, -6px);

}


/* Prevent body scroll when menu is open */

body.menu-open{

    overflow: hidden;

}


}
/* Language Switch */
.nav__item--lang .nav__link{
    display:inline-flex !important;align-items:center;height:32px;padding:0 14px;
    border:1px solid rgba(255,255,255,.5);border-radius:4px;color:#fff;
    font-weight:600;font-size:13px;letter-spacing:.5px;transition:.25s;
}
.nav__item--lang .nav__link:hover{background:rgba(255,255,255,.15);border-color:#fff;}
.header.is-scrolled .nav__item--lang .nav__link{color:#1a3a5c;border-color:#1a3a5c;}
.header.is-scrolled .nav__item--lang .nav__link:hover{background:rgba(26,58,92,.08);}