/**
 * Critical fix for mobile menu being stuck open on page load
 * This ensures the menu is completely hidden until the user clicks the toggle button
 */

/* Force mobile menu to be hidden by default */
.mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    right: auto !important;
    width: 280px !important;
    height: 100% !important;
    background-color: #000000 !important;
    z-index: 2000 !important;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.4) !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Only show when explicitly toggled */
.mobile-menu.show,
.mobile-menu.active {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mobile menu overlay - hidden by default */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important;
}

/* Show overlay when menu is active */
.mobile-menu-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
    overflow: hidden !important;
}

/* Ensure proper stacking context */
.dark-header {
    position: relative !important;
    z-index: 1000 !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Ensure menu starts hidden */
    .mobile-menu:not(.show):not(.active) {
        left: -100% !important;
        right: auto !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Ensure overlay starts hidden */
    .mobile-menu-overlay:not(.show) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .mobile-menu {
        width: 85% !important;
        max-width: 320px !important;
    }
}