/*
 * Final mobile drawer layer shared by the public site, student dashboard,
 * administrator area and organisation portal. Keep this stylesheet last.
 */
html {
    overflow-x: clip;
}

body {
    min-width: 0;
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.drawer-close {
    display: none;
}

@media (min-width: 769px) {
    .site-header .nav-links {
        position: static;
        height: auto;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .site-header,
    .admin-header,
    .dash-header,
    .portal-header {
        position: sticky;
        top: 0;
    }

    .site-header {
        z-index: 1450;
    }

    .site-header .nav {
        position: static;
    }

    .menu-toggle {
        position: relative;
        z-index: 3;
        flex: 0 0 44px;
    }

    .nav-links,
    .admin-sidebar,
    .dash-sidebar,
    .portal-sidebar {
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        will-change: transform;
    }

    .nav-links {
        width: min(88vw, 360px) !important;
        max-width: calc(100vw - 48px);
        padding-top: 82px !important;
    }

    .nav-links.open,
    .admin-sidebar.open,
    .dash-sidebar.open,
    .portal-sidebar.open {
        visibility: visible;
    }

    .admin-sidebar,
    .dash-sidebar,
    .portal-sidebar {
        z-index: 1420 !important;
    }

    .admin-backdrop,
    .dashboard-backdrop,
    .portal-backdrop {
        z-index: 1410 !important;
    }

    .menu-backdrop {
        z-index: 1200 !important;
    }

    .drawer-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 8;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .24);
        border-radius: 10px;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
    }

    .nav-links .drawer-close {
        color: var(--primary);
        border-color: #d9e2ef;
        background: #fff;
    }

    .drawer-close:hover,
    .drawer-close:focus-visible {
        background: rgba(255, 255, 255, .22);
        outline: 3px solid rgba(142, 177, 232, .38);
        outline-offset: 2px;
    }

    .nav-links .drawer-close:hover,
    .nav-links .drawer-close:focus-visible {
        background: var(--primary-light);
    }
}

@media (max-width: 380px) {
    .nav-links,
    .admin-sidebar,
    .dash-sidebar,
    .portal-sidebar {
        width: calc(100vw - 42px) !important;
        max-width: calc(100vw - 42px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .menu-backdrop,
    .admin-sidebar,
    .admin-backdrop,
    .dash-sidebar,
    .dashboard-backdrop,
    .portal-sidebar,
    .portal-backdrop {
        transition: none !important;
    }
}