/* ============================================================
   VIDYA VIKAS THEME v5.0
   FINAL RESPONSIVE HEADER FIX
   ------------------------------------------------------------
   Fixes:
   - Mobile screen horizontal overflow
   - Admission button hidden on tablet/mobile
   - Admission button cropped outside screen
   - Logo/name/menu/button fitting
   - Does NOT modify homepage section designs
   ============================================================ */


/* ------------------------------------------------------------
   TABLET / SMALL DESKTOP
   Existing theme hides CTA below 1120px.
   This override keeps it visible.
   ------------------------------------------------------------ */

@media (max-width:1120px){

    .vv-nav{
        display:none;
    }

    .vv-menu-toggle{
        display:block;
    }

    .vv-header__cta{
        display:inline-flex !important;
    }
}


/* ------------------------------------------------------------
   MOBILE HEADER
   ------------------------------------------------------------ */

@media (max-width:767px){

    /* Prevent horizontal page scrolling */
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }


    /* ---------------- HEADER ---------------- */

    .vv-header{
        width:100%;
        max-width:100%;
        overflow:visible;
    }

    .vv-header .vv-container{
        width:100%;
        max-width:100%;

        margin-left:auto;
        margin-right:auto;

        padding-left:10px;
        padding-right:10px;

        box-sizing:border-box;
    }


    /* ---------------- HEADER ROW ---------------- */

    .vv-header__inner{
        width:100%;
        max-width:100%;

        min-height:72px;

        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;

        align-items:center;

        gap:6px;

        box-sizing:border-box;
    }


    /* ---------------- BRAND AREA ---------------- */

    .vv-brand{
        display:flex;
        align-items:center;

        flex:1 1 0;

        width:auto;
        min-width:0;
        max-width:none;

        gap:7px;
    }


    /* Logo */

    .vv-brand img,
    .vv-brand .custom-logo{
        display:block;

        width:46px;
        max-width:46px;
        height:auto;
        max-height:52px;

        flex:0 0 46px;

        object-fit:contain;
    }


    /* Institution name container */

    .vv-brand__text{
        flex:1 1 0;

        width:auto;
        min-width:0;

        overflow:hidden;
    }


    /* Institution Name */

    .vv-brand__text strong{
        display:block;

        width:100%;

        margin:0;

        color:var(--vv-navy);

        font-size:12px;
        font-weight:700;
        line-height:1.18;

        white-space:normal;

        overflow:visible;

        text-overflow:clip;

        overflow-wrap:normal;
        word-break:normal;
    }


    /* Hide subtitle on mobile */

    .vv-brand__text span{
        display:none;
    }


    /* ---------------- NAVIGATION ---------------- */

    .vv-nav{
        display:none;

        position:absolute;

        top:100%;
        left:0;
        right:0;

        width:100%;
        max-width:100%;

        background:#fff;

        border-top:1px solid var(--vv-line);

        box-shadow:var(--vv-shadow);

        padding:12px 20px;

        max-height:72vh;

        overflow-y:auto;
        overflow-x:hidden;

        z-index:100;
    }


    /* Open mobile navigation */

    .vv-nav.is-open{
        display:block;
    }


    .vv-nav ul{
        display:block;
        width:100%;
    }


    .vv-nav a{
        display:block;

        width:100%;

        padding:12px 6px;

        white-space:normal;
    }


    .vv-nav .sub-menu{
        position:static;

        display:block !important;

        width:auto;

        border:0;

        box-shadow:none;

        padding:0 0 0 16px;
    }


    /* ---------------- MENU BUTTON ---------------- */

    .vv-menu-toggle{
        display:flex !important;

        align-items:center;
        justify-content:center;

        flex:0 0 38px;

        width:38px;
        min-width:38px;
        max-width:38px;

        height:38px;
        min-height:38px;

        margin:0;

        padding:0;

        border:1px solid var(--vv-line);

        border-radius:9px;

        background:#fff;

        color:var(--vv-navy);

        font-size:18px;

        box-sizing:border-box;
    }


    /* ---------------- ADMISSION BUTTON ---------------- */

    .vv-header__cta{
        display:inline-flex !important;

        align-items:center;
        justify-content:center;

        flex:0 0 90px;

        width:90px;
        min-width:90px;
        max-width:90px;

        min-height:42px;

        margin:0;

        padding:6px 7px;

        box-sizing:border-box;

        color:#fff;

        background:var(--vv-magenta);

        border-radius:9px;

        font-size:11px;
        font-weight:800;

        line-height:1.15;

        text-align:center;

        white-space:normal;

        overflow:visible;

        box-shadow:0 7px 16px rgba(189,31,88,.18);

        transform:none;
    }


    .vv-header__cta:hover{
        color:#fff;

        background:#9f1648;

        transform:none;
    }
}


/* ============================================================
   SMALL MOBILE
   iPhone / Android around 360px - 420px
   ============================================================ */

@media (max-width:420px){

    .vv-header .vv-container{
        padding-left:7px;
        padding-right:7px;
    }


    .vv-header__inner{
        gap:4px;

        min-height:68px;
    }


    /* Smaller logo */

    .vv-brand img,
    .vv-brand .custom-logo{
        width:40px;
        max-width:40px;
        max-height:46px;

        flex-basis:40px;
    }


    /* Smaller institution name */

    .vv-brand{
        gap:5px;
    }


    .vv-brand__text strong{
        font-size:10.5px;

        line-height:1.15;
    }


    /* Menu */

    .vv-menu-toggle{
        flex-basis:35px;

        width:35px;
        min-width:35px;
        max-width:35px;

        height:35px;
        min-height:35px;

        font-size:17px;
    }


    /* Admission button */

    .vv-header__cta{
        flex-basis:80px;

        width:80px;
        min-width:80px;
        max-width:80px;

        min-height:39px;

        padding:5px;

        font-size:10px;

        line-height:1.1;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   320px - 360px
   ============================================================ */

@media (max-width:360px){

    .vv-header .vv-container{
        padding-left:5px;
        padding-right:5px;
    }


    .vv-header__inner{
        gap:3px;
    }


    .vv-brand img,
    .vv-brand .custom-logo{
        width:36px;
        max-width:36px;

        flex-basis:36px;
    }


    .vv-brand__text strong{
        font-size:9.5px;

        line-height:1.12;
    }


    .vv-menu-toggle{
        flex-basis:33px;

        width:33px;
        min-width:33px;
        max-width:33px;

        height:34px;
        min-height:34px;
    }


    .vv-header__cta{
        flex-basis:73px;

        width:73px;
        min-width:73px;
        max-width:73px;

        min-height:38px;

        padding:4px;

        font-size:9.5px;
    }
}