/* 
 * Mobile Menu Final Fix
 * This CSS will be included last to override all other styles
 * and ensure the mobile menu works correctly
 */

/* Mobile menu special override */
@media screen and (max-width: 768px) {
    /* Ensure other elements don't block the menu */
    .hero-slider,
    .slider-container,
    .slider-slide {
        transform: translateZ(0);
        z-index: 5 !important; /* Lower z-index to prevent overlapping */
    }
    
    /* When menu is active, specifically adjust stacking context */
    body:has(.menu.active) .hero-slider,
    body:has(.menu.active) .slider-container,
    body:has(.menu.active) .slider-wrapper {
        z-index: 1 !important;
    }
    
    /* Force menu to be visible and on top */
    .menu.active {
        position: fixed !important;
        top: var(--navbar-height, 80px) !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - var(--navbar-height, 80px)) !important;
        background-color: rgba(0, 20, 64, 0.98) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
        transform: translateZ(999px) !important;
        pointer-events: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Make menu content highly visible */
    .menu.active li {
        opacity: 1 !important;
        visibility: visible !important;
        color: white !important;
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        z-index: 999999 !important;
        position: relative !important;
        transform: none !important;
    }
    
    .menu.active li a,
    .menu.active li span,
    .menu.active li button,
    .menu.active .language-switch,
    .menu.active .language-switch button {
        color: white !important;
        font-size: 18px !important;
        display: block !important;
        padding: 15px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 999999 !important;
        position: relative !important;
        transform: none !important;
    }
    
    /* Additional visual distinction */
    .menu.active {
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8) !important;
        border-bottom: 2px solid var(--secondary-color, #D4AF37) !important;
    }
    
    /* Menu items should be clickable */
    .menu.active li,
    .menu.active li a,
    .menu.active .language-switch,
    .menu.active .reservation-button {
        pointer-events: auto !important;
    }
    
    /* Fixed menu styles (from JavaScript fallback) */
    .fixed-menu {
        position: fixed !important;
        top: var(--navbar-height, 80px) !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - var(--navbar-height, 80px)) !important;
        background-color: rgba(0, 20, 64, 0.98) !important;
        z-index: 9999999 !important; /* Even higher z-index */
        overflow-y: auto !important;
    }
    
    .fixed-menu .menu {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: transparent !important;
    }
    
    .fixed-menu li,
    .fixed-menu a,
    .fixed-menu .language-switch,
    .fixed-menu .reservation-button {
        display: block !important;
        color: white !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-align: center !important;
        margin: 15px 0 !important;
        pointer-events: auto !important;
    }
    
    /* Prevent all content below header from receiving events when menu is open */
    body:has(.menu.active) .hero-slider,
    body:has(.menu.active) .slider-container,
    body:has(.menu.active) .slider-wrapper,
    body:has(.fixed-menu[style*="flex"]) .hero-slider,
    body:has(.fixed-menu[style*="flex"]) .slider-container,
    body:has(.fixed-menu[style*="flex"]) .slider-wrapper {
        pointer-events: none !important;
    }
}