/* Shared responsive header and mobile menu */
:root{
    --mobile-primary:#002B5B;
    --mobile-secondary:#F7941D;
}

.site-header,
.header,
.department-header{
    width:100%;
}

.site-header{
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.site-header .container,
.header .container,
.department-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.site-header .container{
    width:90%;
    max-width:1300px;
    margin:auto;
    min-height:86px;
}

.site-header .logo,
.header .logo,
.department-header .logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    min-width:0;
}

.site-header .logo img,
.header .logo img,
.department-header .logo img{
    width:64px;
    height:64px;
    object-fit:contain;
    flex:0 0 auto;
}

.site-header .logo-text h2,
.header .logo-text h2{
    margin:0;
    color:var(--mobile-primary);
    font-size:26px;
    line-height:1;
}

.site-header .logo-text span,
.header .logo-text span{
    display:block;
    margin-top:4px;
    color:#4b5563;
    font-size:13px;
    line-height:1.3;
}

.mobile-nav{
    margin-left:auto;
}

.mobile-nav ul{
    display:flex;
    align-items:center;
    gap:28px;
    list-style:none;
    margin:0;
    padding:0;
}

.mobile-nav li{
    position:relative;
}

.mobile-nav a{
    display:flex;
    align-items:center;
    gap:8px;
    color:#1f2937;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    padding:10px 0;
    transition:color .25s ease, background .25s ease, padding .25s ease;
}

.mobile-nav a:hover,
.mobile-nav a.active{
    color:var(--mobile-secondary);
}

.mobile-nav .dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:240px;
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    background:#fff;
    border-radius:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    padding:10px 0;
    transition:.25s ease;
    z-index:1002;
}

.mobile-nav .dropdown:hover .dropdown-menu,
.mobile-nav .dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mobile-nav .dropdown-menu a{
    color:#243447;
    padding:11px 18px;
    white-space:nowrap;
}

.mobile-nav .dropdown-menu a:hover{
    background:#f4f8ff;
    color:var(--mobile-primary);
    padding-left:24px;
}

.header-right{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;
}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:0;
    border-radius:10px;
    background:var(--mobile-primary);
    color:#fff;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    transition:background .25s ease, transform .25s ease;
    z-index:10001;
}

.menu-toggle span{
    display:block;
    width:24px;
    height:3px;
    border-radius:999px;
    background:currentColor;
    transition:transform .3s ease, opacity .3s ease;
}

.menu-toggle i{
    font-size:20px;
    line-height:1;
}

.menu-toggle:hover{
    background:var(--mobile-secondary);
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.48);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
    z-index:9998;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}

body.menu-open{
    overflow:hidden;
}

@media(max-width:992px){
    .top-bar{
        display:none;
    }

    .site-header .container,
    .header .container,
    .department-header .container{
        min-height:76px;
        padding-top:10px;
        padding-bottom:10px;
    }

    .site-header .logo img,
    .header .logo img,
    .department-header .logo img{
        width:54px;
        height:54px;
    }

    .site-header .logo-text h2,
    .header .logo-text h2{
        font-size:22px;
    }

    .site-header .logo-text span,
    .header .logo-text span{
        max-width:190px;
        font-size:12px;
    }

    .menu-toggle{
        display:flex;
        flex:0 0 auto;
    }

    .admission-btn,
    .apply-btn{
        display:none !important;
    }

    .mobile-nav,
    .department-header nav,
    .site-header nav,
    .header nav,
    nav.navbar{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        width:min(86vw,340px) !important;
        height:100vh !important;
        margin:0 !important;
        padding:96px 24px 32px !important;
        background:#fff !important;
        box-shadow:-18px 0 42px rgba(0,0,0,.18) !important;
        overflow-y:auto !important;
        transform:translateX(105%) !important;
        transition:transform .35s ease !important;
        z-index:10000 !important;
        display:block !important;
    }

    .mobile-nav.active,
    .department-header nav.active,
    .site-header nav.active,
    .header nav.active,
    nav.navbar.active{
        transform:translateX(0) !important;
        right:0 !important;
    }

    .mobile-nav ul,
    .department-header nav ul,
    .site-header nav ul,
    .header nav ul,
    nav.nav ul,
    nav.navbar ul{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:6px !important;
        width:100% !important;
        list-style:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    .mobile-nav li,
    .department-header nav li,
    .site-header nav li,
    .header nav li,
    nav.nav li,
    nav.navbar li{
        width:100% !important;
    }

    .mobile-nav a,
    .department-header nav a,
    .site-header nav a,
    .header nav a,
    nav.nav a,
    nav.navbar a{
        width:100% !important;
        min-height:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        color:#1f2937 !important;
        padding:12px 12px !important;
        border-radius:9px !important;
        font-size:15px !important;
        font-weight:600 !important;
        text-decoration:none !important;
    }

    .mobile-nav a:hover,
    .mobile-nav a.active,
    .department-header nav a:hover,
    .department-header nav a.active,
    .site-header nav a:hover,
    .site-header nav a.active,
    .header nav a:hover,
    .header nav a.active,
    nav.nav a:hover,
    nav.nav a.active,
    nav.navbar a:hover,
    nav.navbar a.active{
        color:var(--mobile-primary) !important;
        background:#f4f8ff !important;
    }

    .mobile-nav a::after,
    .department-header nav a::after,
    .site-header nav a::after,
    .header nav a::after,
    nav.nav a::after,
    nav.navbar a::after{
        display:none !important;
    }

    .mobile-nav .dropdown-menu,
    .department-header .dropdown-menu,
    .site-header .dropdown-menu,
    .header .dropdown-menu,
    nav.nav .dropdown-menu,
    nav.navbar .dropdown-menu{
        position:static !important;
        display:none !important;
        width:100% !important;
        min-width:0 !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        padding:6px 0 6px 12px !important;
        margin:4px 0 8px !important;
        background:#f8fbff !important;
        box-shadow:none !important;
        border-radius:10px !important;
    }

    .mobile-nav .dropdown.open .dropdown-menu,
    .department-header .dropdown.open .dropdown-menu,
    .site-header .dropdown.open .dropdown-menu,
    .header .dropdown.open .dropdown-menu,
    nav.nav .dropdown.open .dropdown-menu,
    nav.navbar .dropdown.open .dropdown-menu{
        display:block !important;
    }

    nav.nav{
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
    }

    nav.nav ul{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        width:min(86vw,340px) !important;
        height:100vh !important;
        padding:96px 24px 32px !important;
        background:#fff !important;
        box-shadow:-18px 0 42px rgba(0,0,0,.18) !important;
        overflow-y:auto !important;
        transform:translateX(105%) !important;
        transition:transform .35s ease !important;
        z-index:10000 !important;
    }

    nav.nav.active ul{
        transform:translateX(0) !important;
    }
}

@media(max-width:560px){
    .site-header .container,
    .header .container,
    .department-header .container{
        width:92%;
        gap:10px;
    }

    .site-header .logo-text span,
    .header .logo-text span{
        display:none;
    }

    .site-header .logo-text h2,
    .header .logo-text h2{
        font-size:20px;
    }
}

/* Final header behavior polish */
#header > .header-right{
    display:none;
}

@media(max-width:992px){
    #header > .header-right{
        display:flex;
        position:absolute;
        top:16px;
        right:7%;
        z-index:10002;
    }
}

/* Home page mobile header and hero fixes */
@media(max-width:992px){
    body.home-page #header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        min-height:0;
        background:transparent;
        box-shadow:none;
    }

    body.home-page #header nav{
        display:flex;
        min-height:68px;
        height:68px;
        padding:8px 18px;
        background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,0));
        border:0;
        align-items:center;
    }

    body.home-page #header .logo{
        display:flex;
        align-items:center;
        gap:10px;
        max-width:calc(100% - 82px);
        min-width:0;
        padding:4px 8px 4px 4px;
        border-radius:8px;
        background:rgba(255,255,255,.86);
    }

    body.home-page #header .logo img{
        width:40px;
        height:40px;
        flex:0 0 40px;
        object-fit:contain;
    }

    body.home-page #header .logo h2{
        display:block;
        color:#002B5B;
        font-size:21px;
        line-height:1.1;
        margin:0;
    }

    body.home-page #header .logo p{
        display:block;
        color:#4b5563;
        font-size:10px;
        line-height:1.25;
        max-width:210px;
        white-space:normal;
    }

    body.home-page #header > .header-right{
        top:8px;
        right:18px;
    }

    body.home-page #header .admission-btn{
        display:none;
    }

    body.home-page .menu-toggle{
        width:52px;
        height:52px;
        border-radius:10px;
    }
}

@media(max-width:768px){
    body.home-page{
        padding-top:0;
    }

    body.home-page .about-hero{
        height:auto;
        min-height:0;
        padding-top:0;
        background:#f7f9fc;
    }

    body.home-page .hero-slider,
    body.home-page .hero-track{
        height:auto;
    }

    body.home-page .hero-slide{
        height:280px;
        min-height:0;
    }

    body.home-page .hero-slide img{
        height:280px;
        object-fit:cover;
        object-position:center top;
    }

    body.home-page .admission-marquee{
        top:0;
        z-index:20;
    }

    body.home-page .hero-color-blink{
        top:274px;
        bottom:auto;
        height:6px;
        z-index:20;
    }

    body.home-page .hero-overlay{
        display:none;
    }

    body.home-page .hero-content{
        position:relative;
        inset:auto;
        transform:none;
        width:100%;
        max-width:none;
        padding:24px 20px 22px;
        text-align:center;
        color:#002B5B;
        background:#f7f9fc;
    }

    body.home-page .hero-tag,
    body.home-page .hero-content h1,
    body.home-page .hero-content p{
        display:none;
    }

    body.home-page .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:14px;
        margin:0;
    }

    body.home-page .hero-buttons .btn{
        width:auto;
        min-width:210px;
        min-height:44px;
        padding:10px 18px;
        color:#4b0082;
        background:transparent;
        border:0;
        box-shadow:none;
        font-size:18px;
    }

    body.home-page .hero-buttons .btn-outline{
        border:0;
        color:#4b0082;
    }

    body.home-page .hero-prev,
    body.home-page .hero-next{
        top:150px;
        bottom:auto;
        transform:translateY(-50%);
        width:38px;
        height:38px;
        background:rgba(255,255,255,.35);
        color:#fff;
        box-shadow:none;
    }

    body.home-page .hero-prev{
        left:14px;
    }

    body.home-page .hero-next{
        right:14px;
    }

    body.home-page .hero-dots{
        display:none;
    }

    body.home-page .stats{
        margin-top:0;
        padding-top:0;
    }
}

@media(max-width:480px){
    body.home-page #header nav{
        min-height:64px;
        height:64px;
        padding:7px 12px;
    }

    body.home-page #header .logo{
        max-width:calc(100% - 70px);
    }

    body.home-page #header .logo img{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    body.home-page #header .logo h2{
        font-size:19px;
    }

    body.home-page #header .logo p{
        font-size:9px;
        max-width:160px;
    }

    body.home-page #header > .header-right{
        top:7px;
        right:12px;
    }

    body.home-page .menu-toggle{
        width:50px;
        height:50px;
    }

    body.home-page .hero-slide,
    body.home-page .hero-slide img{
        height:280px;
    }

    body.home-page .hero-prev,
    body.home-page .hero-next{
        top:150px;
    }
}

/* Mobile home top contact strip */
@media(max-width:768px){
    body.home-page{
        padding-top:40px;
    }

    body.home-page .top-bar{
        position:fixed;
        top:0;
        left:0;
        z-index:10050;
        display:flex;
        width:100%;
        height:40px;
        padding:0 12px;
        background:#003b73;
        color:#fff;
        align-items:center;
        justify-content:flex-start;
        gap:18px;
        overflow-x:auto;
        overflow-y:hidden;
        white-space:nowrap;
        scrollbar-width:none;
    }

    body.home-page .top-bar::-webkit-scrollbar{
        display:none;
    }

    body.home-page .top-left,
    body.home-page .top-right{
        display:flex;
        align-items:center;
        gap:18px;
        flex:0 0 auto;
        font-size:13px;
    }

    body.home-page .top-right a{
        color:#fff;
        font-size:13px;
    }

    body.home-page #header{
        top:40px;
    }

    body.home-page #header nav{
        background:transparent;
    }

    body.home-page #header .logo{
        display:none;
    }

    body.home-page #header > .header-right{
        top:8px;
    }

    body.home-page .hero-slide,
    body.home-page .hero-slide img{
        height:280px;
    }

    body.home-page .hero-prev,
    body.home-page .hero-next{
        top:140px;
    }
}

@media(max-width:480px){
    body.home-page{
        padding-top:38px;
    }

    body.home-page .top-bar{
        height:38px;
        padding:0 10px;
        gap:16px;
    }

    body.home-page .top-left,
    body.home-page .top-right,
    body.home-page .top-right a{
        font-size:12px;
    }

    body.home-page #header{
        top:38px;
    }

    body.home-page #header > .header-right{
        top:7px;
    }
}