/**
 * Final Override for Mobile Menu
 * This MUST be loaded LAST to override all other CSS
 */

@media (max-width: 767px) {
    /* Override any conflicting styles from other CSS files */
    
    /* Remove all conflicting display/visibility styles */
    .main-navigation:not(.menu-open) {
        display: none !important;
        visibility: visible !important; /* Keep visible for JS to work */
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    /* When menu is open */
    .main-navigation.menu-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    /* Remove any animations that might break things */
    .main-navigation {
        animation: none !important;
    }
    
    /* Ensure nav-wrapper is properly styled */
    .main-navigation .nav-wrapper {
        position: absolute !important;
        top: 20px !important;
        left: -260px !important;
        width: 260px !important;
        height: auto !important;
        max-height: calc(100vh - 40px) !important;
        background: #fff !important;
        transition: left 0.3s ease !important;
        z-index: 10000 !important;
        border-radius: 0 10px 10px 0 !important;
        box-shadow: 2px 0 15px rgba(0,0,0,0.3) !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }
    
    .main-navigation.menu-open .nav-wrapper {
        left: 0 !important;
    }
    
    /* Remove any body scroll issues */
    body:not(.menu-open) .main-navigation {
        /* Let JS handle this */
    }
    
    /* Ensure hamburger button is visible */
    .mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
    
    /* Fix menu item arrow icon alignment */
    .main-navigation .nav-menu li a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        white-space: nowrap !important;
        text-align: left !important;
    }
    
    /* Remove arrow icon completely */
    .main-navigation .nav-menu li a::before {
        content: none !important;
        display: none !important;
    }
    
    /* Close button - red X, no background */
    .mobile-menu-close {
        background: transparent !important;
        border: none !important;
        color: #e74c3c !important;
        font-weight: bold !important;
        font-size: 26px !important;
        text-shadow: none !important;
        padding: 0 !important;
    }
    
    .mobile-menu-close:hover {
        background: transparent !important;
        color: #c8232c !important;
        transform: rotate(90deg) scale(1.1) !important;
    }
}