/**
 * MOBILE NAVIGATION SURGICAL FIX
 * Ensures navigation links are completely hidden on mobile devices
 * and only show when hamburger menu is properly activated
 */

/* Force hide navigation on mobile by default */
@media (max-width: 767px) {
    
    /* NUCLEAR OPTION: Hide the entire nav menu */
    .nav__menu,
    .navbar-collapse,
    .navbar-nav,
    .nav-menu,
    #navbarNav,
    #navbarSupportedContent {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Only show when explicitly opened */
    .nav__menu--open,
    .nav__menu.show,
    .navbar-collapse.show,
    .navbar-collapse.in,
    .navbar-nav.show,
    .nav-menu.show,
    #nuclear-menu-toggle:checked ~ * .nav__menu {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        z-index: 9999 !important;
        padding: 1rem !important;
    }
    
    /* Fix any stray links that might appear */
    .nav__link,
    .navbar-nav a,
    .nav-item a,
    .nav__list .nav__item a {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Show links only when menu is open */
    .nav__menu--open .nav__link,
    .nav__menu.show .nav__link,
    .navbar-collapse.show .nav__link,
    .navbar-collapse.show .navbar-nav a,
    .navbar-collapse.show .nav-item a,
    #nuclear-menu-toggle:checked ~ * .nav__menu .nav__link {
        display: block !important;
        visibility: visible !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: var(--color-text-primary, #ffffff) !important;
        text-decoration: none !important;
    }
    
    /* Ensure hamburger button is always visible */
    .nav__toggle,
    .navbar-toggler {
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10000 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Fix specific Contact link issue mentioned in problem statement */
    a[href="/contact"],
    a[href*="contact"] {
        position: relative !important;
    }
    
    /* Nuclear option for any stubborn navigation elements */
    .navbar:not(.nav__toggle) > *:not(.nav__toggle):not(.container):not(.nav__brand) {
        display: none !important;
    }
    
    /* Force hide any text nodes or elements in top-left */
    body > a:first-child:not([class*="skip"]),
    .navbar > a:first-child:not(.navbar-brand):not(.nav__logo) {
        display: none !important;
    }
    
    /* Additional specificity for Bootstrap/common frameworks */
    .navbar-expand-md .navbar-collapse,
    .navbar-expand-lg .navbar-collapse,
    .navbar-expand-xl .navbar-collapse {
        display: none !important;
    }
    
    .navbar-expand-md .navbar-collapse.show,
    .navbar-expand-lg .navbar-collapse.show,
    .navbar-expand-xl .navbar-collapse.show {
        display: block !important;
    }
}

/* Ensure no layout shift when menu opens/closes */
@media (max-width: 767px) {
    .nav__menu--open {
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* Body scroll lock when mobile menu is open */
@media (max-width: 767px) {
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}

/* Additional CSS to handle any edge cases */
@media (max-width: 767px) {
    /* Remove any ::before or ::after pseudo-elements that might create text */
    .navbar::before,
    .navbar::after,
    .nav__menu::before,
    .nav__menu::after {
        content: none !important;
        display: none !important;
    }
    
    /* Handle flex containers that might show navigation items */
    .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .nav > *:not(.nav__brand):not(.nav__toggle) {
        display: none !important;
    }
}