/**
 * Mobile Menu Fix CSS
 * Version: 1.0.4 (2025-06-21)
 * 
 * This stylesheet contains minimal styles to ensure mobile menu 
 * functionality works properly across all pages with special fixes for the homepage.
 * Important: These styles only affect mobile view (< 768px)
 */

/* Hide mobile menu by default */
@media (min-width: 769px) {
    .mobile-menu-open {
        overflow: auto !important;
    }
}

@media (max-width: 768px) {
    /* Mobile Menu Button Styling */
    .mobile-menu-btn,
    #mobile-menu-btn,
    .menu-toggle {
        display: block !important;
        cursor: pointer;
        z-index: 10000 !important; /* Extra high z-index */
        position: relative;
        padding: 10px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: none;
    }

    /* Icon styling */
    .mobile-menu-btn i,
    #mobile-menu-btn i,
    .menu-toggle i {
        transition: all 0.3s ease-in-out;
    }
    
    /* Make the button clickable with a larger tap target */
    .mobile-menu-btn::before,
    #mobile-menu-btn::before,
    .menu-toggle::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        z-index: -1;
    }
    
    /* Mobile Navigation Styling - Basic */
    nav,
    .mobile-nav,
    #mobile-menu {
        position: fixed !important;
        top: 80px; /* Default - will be overridden by JS if needed */
        left: -100% !important;
        width: 100% !important;
        height: calc(100vh - 80px) !important;
        background-color: #fff !important;
        z-index: 9999 !important;
        transition: left 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
        overflow-y: auto !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        max-width: 100% !important; /* Ensure no max-width is limiting it */
        transform: translateX(0) !important; /* Reset any transforms */
        min-width: 100% !important; /* Force full width */
        right: auto !important; /* Ensure no right property is set */
        overflow-x: visible !important; /* Prevent horizontal clipping */
        -webkit-transform: none !important; /* Reset for Safari */
    }
    
    /* Force header container to allow full-width items */
    header .container {
        overflow: visible !important;
        min-height: 80px !important;
    }
    
    /* Override any potential clipping from parent elements */
    body header,
    header {
        overflow: visible !important;
    }
    
    /* Active state for the menu */
    nav.active,
    .mobile-nav.active,
    #mobile-menu.active {
        left: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        display: block !important;
        -webkit-transform: none !important; /* Reset for Safari */
    }
    
    /* Mobile Nav List */
    nav ul,
    .mobile-nav ul,
    #mobile-menu ul {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: none !important; /* Remove any max-width limitations */
        margin: 0 !important;
        list-style: none !important;
    }
    
    /* Mobile Nav Items */
    nav ul li,
    .mobile-nav ul li,
    #mobile-menu ul li {
        width: 100% !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        padding: 0 0 10px 0 !important;
        max-width: none !important;
        position: static !important; /* Remove absolute positioning if present */
    }
    
    /* Mobile Nav Links */
    nav ul li a,
    .mobile-nav ul li a,
    #mobile-menu ul li a {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 16px !important;
        color: inherit !important;
        text-decoration: none !important;
        width: 100% !important;
        position: static !important; /* Remove absolute positioning if present */
    }
    
    /* Homepage specific fix */
    body.mobile-menu-open {
        overflow: hidden !important; /* Prevent scrolling when menu is open */
    }
    
    /* Overlay styling */
    #mobile-menu-overlay {
        display: block !important;
    }
    
    /* Fix for browsers with transform support */
    .translateX-reset {
        transform: none !important;
    }
    
    /* Special homepage fixes - HIGHEST SPECIFICITY */
    body[class*="home"] header nav,
    body[class*="index"] header nav,
    body.is-homepage header nav,
    body:not([class]) header nav, 
    body.index header nav,
    body.home header nav {
        position: fixed !important;
        top: 80px !important;
        height: calc(100vh - 80px) !important;
        width: 100% !important;
        max-width: 100% !important;
        left: -100% !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        min-height: 300px !important;
        box-sizing: border-box !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 9999 !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: white !important;
    }
    
    body[class*="home"] header nav.active,
    body[class*="index"] header nav.active,
    body.is-homepage header nav.active,
    body:not([class]) header nav.active,
    body.index header nav.active,
    body.home header nav.active {
        left: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Ensure header container doesn't clip the menu */
    body[class*="home"] header .container,
    body[class*="index"] header .container,
    body.is-homepage header .container,
    body:not([class]) header .container,
    body.index header .container,
    body.home header .container {
        overflow: visible !important;
        position: static !important;
    }
}

/* Critical: Ensure hardware acceleration for smoother animations */
nav,
.mobile-nav,
#mobile-menu,
.mobile-menu-btn,
#mobile-menu-btn,
.menu-toggle {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Homepage class added by script in case body has no class */
.is-homepage nav {
    z-index: 9999 !important;
}

/* Fix for Safari mobile */
@supports (-webkit-touch-callout: none) {
    /* Force menu to use left instead of transform on iOS */
    @media (max-width: 768px) {
        nav, 
        .mobile-nav,
        #mobile-menu {
            left: -100% !important;
            transform: none !important;
            -webkit-transform: none !important;
        }
        
        nav.active,
        .mobile-nav.active,
        #mobile-menu.active {
            left: 0 !important;
            transform: none !important;
            -webkit-transform: none !important;
        }
        
        /* Force nav container to allow full width */
        body[class*="home"] header .container,
        body[class*="index"] header .container,
        body.index header .container,
        body.home header .container {
            max-width: 100vw !important;
            width: 100% !important;
        }
    }
}