/* ==================================================
   HEADER - MEDICORP
================================================== */

.site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(14,75,135,.10);
}

.header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-height:88px;
}

/* LOGO */

.site-logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.site-logo img{
    width:auto;
    max-height:58px;
}

/* NAV */

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
}

.nav-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}

.nav-menu > li{
    position:relative;
}

.nav-menu > li > a{
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--black);
    font-size:.95rem;
    font-weight:600;
    padding:34px 0;
}

.nav-menu > li > a:hover,
.nav-menu > li > a.active{
    color:var(--primary-color);
}

.nav-menu > li > a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:26px;
    width:0;
    height:2px;
    background:var(--primary-color);
    border-radius:999px;
    transition:var(--transition);
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after{
    width:100%;
}

/* SUBMENU */

.has-submenu > a::before{
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-left:4px;
    order:2;
    margin-top:-4px;
}

.submenu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%) translateY(16px);
    min-width:330px;
    background:var(--white);
    border:1px solid rgba(14,75,135,.10);
    border-radius:20px;
    box-shadow:0 25px 70px rgba(8,52,95,.15);
    padding:14px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:var(--transition);
}

.has-submenu:hover .submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.submenu li{
    width:100%;
}

.submenu a{
    display:block;
    padding:13px 16px;
    border-radius:14px;
    color:var(--text-color);
    font-size:.94rem;
    font-weight:500;
}

.submenu a:hover{
    background:var(--primary-light);
    color:var(--primary-color);
}

/* HEADER CTA */

.header-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:var(--primary-color);
    color:var(--white);
    padding:14px 24px;
    border-radius:999px;
    font-size:.95rem;
    font-weight:700;
    box-shadow:0 12px 28px rgba(14,75,135,.20);
}

.header-cta:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

/* MOBILE BUTTON */

.mobile-menu-toggle{
    display:none;
    width:46px;
    height:46px;
    border-radius:14px;
    background:var(--primary-light);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
}

.mobile-menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    background:var(--primary-color);
    border-radius:999px;
    transition:var(--transition);
}

/* RESPONSIVE */

@media (max-width:1100px){

    .nav-menu{
        gap:22px;
    }

    .nav-menu > li > a{
        font-size:.9rem;
    }

    .header-cta{
        padding:13px 20px;
    }

}

@media (max-width:991px){

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

    .site-logo img{
        max-height:52px;
    }

    .main-nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        display:none;
        background:var(--white);
        border-top:1px solid var(--border-color);
        box-shadow:0 25px 50px rgba(0,0,0,.08);
    }

    .site-header.menu-open .main-nav{
        display:block;
    }

    .nav-menu{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:15px 20px 25px;
    }

    .nav-menu > li > a{
        padding:15px 0;
        border-bottom:1px solid var(--border-color);
    }

    .nav-menu > li > a::after{
        display:none;
    }

    .has-submenu > a::before{
        margin-left:auto;
    }

    .submenu{
        position:static;
        transform:none;
        min-width:100%;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        box-shadow:none;
        border:none;
        padding:0 0 10px 12px;
        display:none;
    }

    .has-submenu:hover .submenu{
        transform:none;
    }

    .has-submenu.submenu-open .submenu{
        display:block;
    }

    .submenu a{
        padding:11px 14px;
        font-size:.92rem;
    }

    .header-cta{
        display:none;
    }

    .mobile-menu-toggle{
        display:flex;
    }

    .site-header.menu-open .mobile-menu-toggle span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .site-header.menu-open .mobile-menu-toggle span:nth-child(2){
        opacity:0;
    }

    .site-header.menu-open .mobile-menu-toggle span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

}

@media (max-width:576px){

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

    .site-logo img{
        max-height:46px;
    }

}