/* MOBILE MENU FIX - MAXIMUM PRIORITY Z-INDEX */
/* This file ensures the mobile menu is ALWAYS on top */

@media (max-width: 768px) {
    /* Reset any problematic styles */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Header must be on top */
    .header {
        position: fixed !important;
        z-index: 999999 !important;
        background: white !important;
    }
    
    /* Mobile toggle button - highest z-index */
    .mobile-toggle,
    #mobileToggle {
        z-index: 9999999 !important;
        position: relative !important;
        display: flex !important;
        background: transparent !important;
    }
    
    /* Mobile menu overlay - BELOW the menu */
    .mobile-overlay,
    #mobileMenuOverlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 999995 !important;
        display: block !important;
        pointer-events: auto !important;
    }
    
    /* Navigation menu container - ABOVE overlay */
    .nav-menu,
    #navMenu {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 80px) !important;
        background: white !important;
        background-color: white !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        pointer-events: auto !important;
    }
    
    /* When menu is open */
    .nav-menu.mobile-open,
    .nav-menu.active,
    #navMenu.mobile-open,
    #navMenu.active {
        transform: translateX(0) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }
    
    /* Navigation list */
    .nav-menu .nav-list,
    #navMenu .nav-list {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        margin: 0 !important;
        background: white !important;
        background-color: white !important;
        list-style: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Navigation links - HIGHEST z-index */
    .nav-menu .nav-link,
    #navMenu .nav-link,
    .nav-menu a,
    #navMenu a {
        display: block !important;
        padding: 15px 20px !important;
        color: #333 !important;
        background: white !important;
        background-color: white !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 9999999 !important;
        border-bottom: 1px solid #eee !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .nav-menu .nav-link:hover,
    #navMenu .nav-link:hover {
        background: #f5f5f5 !important;
        color: #0066CC !important;
    }
    
    /* Override any conflicting styles */
    * {
        max-z-index: 999998 !important;
    }
    
    .header *,
    .nav-menu *,
    #navMenu * {
        max-z-index: none !important;
    }
    
    /* Ensure no element can go above our menu */
    .hero,
    .hero-content,
    .hero-overlay,
    .hero-background,
    main,
    section,
    .container {
        z-index: auto !important;
        position: relative !important;
    }
    
    /* Force lower z-index on content */
    .hero,
    .hero-content {
        z-index: 1 !important;
    }
}

/* Additional specificity for problematic elements */
@media (max-width: 768px) {
    body > *:not(.header):not(#navMenu):not(.nav-menu):not(#mobileMenuOverlay):not(.mobile-overlay):not(script):not(style) {
        z-index: 1 !important;
        position: relative !important;
    }
}