/* SKNAU mobile menu as a side drawer (same pattern as exams.sknau.ac.in).
   Everything is scoped to html.drawer-v2 and phones/tablets (< 1024px), so the desktop menu and
   visitors without the flag are untouched. Motion (assets/motion/mobile-drawer.js) adds the
   cascade and the springy accordion; without it the drawer still slides with these CSS transitions. */
@media (max-width: 1023px) {
    .drawer-v2 .main-nav {
        display: flex !important; flex-direction: column;
        position: fixed !important; top: 0; right: 0; bottom: 0; left: auto;
        width: min(88vw, 360px); max-height: none; height: 100%; overflow: hidden;
        background: #fff; box-shadow: -12px 0 40px rgba(0, 20, 50, 0.22);
        z-index: 10001; padding-bottom: env(safe-area-inset-bottom);
        transform: translateX(104%); visibility: hidden;
        transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
    }
    .drawer-v2 .main-nav.active { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.22, 1, .36, 1); }
    .drawer-v2 .drawer-scrim {
        position: fixed; inset: 0; z-index: 10000; background: rgba(7, 31, 61, .5);
        opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
    }
    .drawer-v2 body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
    .drawer-v2 body.drawer-open { overflow: hidden; }

    /* head: logo + Hindi-first title + close */
    .drawer-v2 .drawer-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
        padding: 10px 12px 10px 16px; border-bottom: 1px solid #e6edf5; min-height: 64px; }
    .drawer-v2 .drawer-head img { height: 38px; width: auto; }
    .drawer-v2 .drawer-title { flex: 1; min-width: 0; line-height: 1.2; }
    .drawer-v2 .drawer-title strong { display: block; font-size: 1.12rem; font-weight: 700; color: var(--primary-color, #003366); }
    .drawer-v2 .drawer-title span { display: block; font-size: .78rem; color: #6b7a8c; }
    .drawer-v2 .drawer-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; cursor: pointer;
        background: #f1f5fa; border-radius: 12px; color: var(--primary-color, #003366); font-size: 1.1rem; }

    /* body: the existing menu list, restyled */
    .drawer-v2 .main-nav > .container { width: 100%; max-width: none; flex: 1; overflow-y: auto; overscroll-behavior: contain;
        padding: 8px 12px 16px; margin: 0; }
    .drawer-v2 .main-nav ul li { border-bottom: 0; }
    .drawer-v2 .main-nav > .container > ul > li > a {
        display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border-radius: 12px;
        color: #1d2b3a; font-weight: 600; white-space: normal; background: transparent;
    }
    .drawer-v2 .main-nav > .container > ul > li > a i { width: 22px; margin: 0; color: var(--primary-color, #003366); }
    .drawer-v2 .main-nav ul li:hover > a { background: transparent; }
    .drawer-v2 .main-nav > .container > ul > li > a:active,
    .drawer-v2 .main-nav > .container > ul > li.open > a { background: #eef5ff; color: var(--primary-color, #003366); }
    .drawer-v2 .has-megamenu > a::after {
        content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .72rem;
        float: none; margin-left: auto; color: #8a99ab; transition: transform .25s;
    }
    .drawer-v2 .has-megamenu.open > a::after { transform: rotate(180deg); }

    /* accordion: always in the layout, height animated by Motion (instant without it) */
    .drawer-v2 .main-nav ul .mega-menu {
        display: block !important; width: auto !important; height: 0; overflow: hidden;
        padding: 0 0 0 14px; margin-left: 20px; background: transparent; border-left: 2px solid #e6edf5; visibility: hidden;
    }
    .drawer-v2 .main-nav ul .has-megamenu.open > .mega-menu { height: auto; visibility: visible; }
    .drawer-v2 .mega-menu-column { flex: none !important; }
    .drawer-v2 .mega-menu-column h4 {
        margin: 12px 0 2px; padding: 0; border: 0; font-size: .74rem; font-weight: 700;
        letter-spacing: .06em; text-transform: uppercase; color: #6b7a8c;
    }
    .drawer-v2 .main-nav ul .mega-menu a {
        display: block; padding: 9px 8px; border: 0; border-radius: 8px; font-size: .94rem; font-weight: 500; color: #2b3a4a;
    }
    .drawer-v2 .main-nav ul .mega-menu a:active { background: #eef5ff; color: var(--primary-color, #003366); }
    .drawer-v2 .mega-menu-column:last-child { padding-bottom: 8px; }

    /* foot: portal logins + contact (the top bar is hidden on phones) */
    .drawer-v2 .drawer-foot { flex-shrink: 0; border-top: 1px solid #e6edf5; padding: 12px 14px 14px; background: #f8fafc; }
    .drawer-v2 .drawer-portals { display: flex; flex-wrap: wrap; gap: 8px; }
    .drawer-v2 .drawer-portals { gap: 6px; }
    .drawer-v2 .drawer-portals a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        min-height: 38px; padding: 6px 8px; border-radius: 10px; background: var(--primary-color, #003366); color: #fff;
        font-size: .76rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .drawer-v2 .drawer-portals a i { font-size: .9em; }
    .drawer-v2 .drawer-close:focus-visible { outline: 2px solid var(--primary-color, #003366); outline-offset: 2px; }
    /* floating chat / back-to-top buttons step aside while the drawer is open */
    .drawer-v2 body.drawer-open .chat-btn-floating, .drawer-v2 body.drawer-open .to-top { opacity: 0 !important; pointer-events: none !important; }
    .drawer-v2 .drawer-contact { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: .8rem; }
    .drawer-v2 .drawer-contact a { color: #4a5b6d; text-decoration: none; }
    .drawer-v2 .drawer-contact i { color: var(--primary-color, #003366); margin-right: 4px; }
}
@media (min-width: 1024px) {
    .drawer-v2 .drawer-head, .drawer-v2 .drawer-foot, .drawer-v2 .drawer-scrim { display: none !important; }
}