/**
 * Mobile Menu Fix
 * 
 * Additional CSS to ensure the mobile menu works properly across all devices
 */

/* Ensure proper z-index for menu elements */
.menu-toggle {
    z-index: 10001 !important; /* Higher than the menu */
    -webkit-appearance: none;
    appearance: none;
}

/* Fix for iOS devices */
@media (max-width: 991px) {
    #primary-menu {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }
    
    #primary-menu.active {
        -webkit-transform: translateX(0) !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure menu is properly hidden when not active */
    #primary-menu:not(.active) {
        display: none !important;
    }
    
    /* Ensure menu toggle is always visible and clickable */
    .menu-toggle {
        display: block !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    /* Prevent body scrolling when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* Fix for Android devices */
@media (max-width: 991px) and (-webkit-min-device-pixel-ratio: 0) {
    #primary-menu {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    
    #primary-menu.active {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Ensure menu items are properly styled */
@media (max-width: 991px) {
    .main-navigation li {
        width: 100%;
        margin: 0 0 10px 0;
    }
    
    .main-navigation a {
        padding: 12px 15px;
        display: block;
        width: 100%;
        text-align: left;
    }
}