/*
 * NexusTech Academy — Mobile navigation isolation fix
 * Keeps the drawer viewport-bound and independent of Elementor/page containers.
 */
@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .mobile-drawer-overlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 99998 !important;
    }

    .mobile-drawer,
    #mobile-drawer {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: min(340px, 88vw) !important;
        max-width: 340px !important;
        min-width: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        transform: translate3d(100%, 0, 0) !important;
        transition: transform 280ms ease !important;
        will-change: transform;
        visibility: visible !important;
    }

    .mobile-drawer.is-open,
    .mobile-drawer.open,
    .mobile-drawer.active,
    #mobile-drawer.is-open,
    #mobile-drawer.open,
    #mobile-drawer.active {
        transform: translate3d(0, 0, 0) !important;
    }

    .mobile-drawer * {
        box-sizing: border-box;
    }

    .mobile-drawer img {
        max-width: 100%;
        height: auto;
    }
}

@media (min-width: 768px) {
    .mobile-drawer,
    #mobile-drawer,
    .mobile-drawer-overlay {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body > .mobile-drawer,
    body > #mobile-drawer,
    body > .mobile-drawer-overlay {
        transform: none !important;
    }
}