/**
 * Hamburger Menu Z-Index Fix
 * Fixes mobile navigation dropdown being hidden behind liquid glass container
 */

/* Ensure hamburger menu and dropdown have higher z-index than liquid glass effects */
@media (max-width: 1024px) {
    /* Fix for EAEL Simple Menu container */
    .elementor-element-c303849 {
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Fix for menu container specifically */
    .elementor-element-c303849 .eael-simple-menu-container {
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Fix for the responsive menu dropdown */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive {
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Fix for hamburger toggle button */
    .elementor-element-c303849 .eael-simple-menu-toggle {
        position: relative !important;
        z-index: 999999 !important;
    }
    
    /* Fix for dropdown menu items */
    .elementor-element-c303849 .eael-simple-menu li ul {
        position: absolute !important;
        z-index: 999999 !important;
    }
    
    /* Reduce z-index of liquid glass container to allow menu to appear above */
    .elementor-element-c213b0b.eael_liquid_glass-effect1 {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Ensure liquid glass shadow effect doesn't interfere */
    .elementor-element-c213b0b.eael_liquid_glass_shadow-effect1 {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Fix stacking context issues with backdrop-filter */
    .eael_liquid_glass-effect1 {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
}

/* Additional fix for very small screens */
@media (max-width: 767px) {
    /* Ensure menu is always on top */
    .elementor-element-c303849,
    .elementor-element-c303849 * {
        z-index: 999999 !important;
    }
    
    /* Make sure the menu doesn't get clipped */
    .elementor-element-c303849 .eael-simple-menu-container {
        overflow: visible !important;
    }
    
    /* Fix for dropdown positioning */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #E5EEFF !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 0 0 8px 8px !important;
        margin-top: 5px !important;
    }
    
    /* Style dropdown menu items with blue background */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li > a {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
        color: #333 !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    /* Style dropdown menu item hover - remove purple */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li:hover > a {
        background-color: #D1E2FF !important;
        background: #D1E2FF !important;
        color: #333 !important;
    }
    
    /* Style submenu items if any */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li ul li a {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
        color: #333 !important;
        padding-left: 30px !important;
    }
    
    /* Override any purple theme colors */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li > a.eael-item-active {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
        color: #333 !important;
    }
    
    /* Override current menu item purple */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li.current-menu-item > a {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
        color: #333 !important;
    }
}

/* Tablet and mobile dropdown styling */
@media (max-width: 1024px) {
    /* Fix dropdown positioning for tablets */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: #E5EEFF !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 0 0 8px 8px !important;
        margin-top: 3px !important;
    }
    
    /* Style dropdown menu items - force blue background */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li > a {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
        color: #333 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    /* Style dropdown menu item hover - force blue */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li:hover > a {
        background-color: #D1E2FF !important;
        background: #D1E2FF !important;
        color: #333 !important;
    }
    
    /* Override any active/current menu purple colors */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li > a.eael-item-active,
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li.current-menu-item > a,
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li.current-menu-ancestor > a {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
        color: #333 !important;
    }
}

/* Hide hamburger menu toggle text on mobile */
@media (max-width: 1024px) {
    .elementor-element-c303849 .eael-simple-menu-toggle-text {
        display: none !important;
    }
    
    /* Hide toggle text specifically */
    .eael-simple-menu-container .eael-simple-menu-toggle-text {
        display: none !important;
    }
    
    /* Ensure only the hamburger icon shows */
    .elementor-element-c303849 .eael-simple-menu-toggle {
        justify-content: center !important;
        align-items: center !important;
    }
}

/* General z-index hierarchy fix */
.eael-simple-menu-container {
    isolation: isolate !important;
}

/* Ensure proper stacking for all EAEL menu elements */
.eael-simple-menu-container,
.eael-simple-menu-container *,
.eael-simple-menu,
.eael-simple-menu * {
    z-index: inherit !important;
}

/* Global override for any purple colors in mobile menu */
@media (max-width: 1024px) {
    /* Force blue background on all responsive menu elements */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive,
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li,
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li > a,
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li:hover > a,
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li.current-menu-item > a.eael-item-active {
        background-color: #E5EEFF !important;
        background: #E5EEFF !important;
    }
    
    /* Override hover states to slightly darker blue */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive li:hover > a {
        background-color: #D1E2FF !important;
        background: #D1E2FF !important;
    }
    
    /* Remove any purple variable references */
    .elementor-element-c303849 .eael-simple-menu.eael-simple-menu-responsive * {
        --e-global-color-9954978: #E5EEFF !important;
        --e-global-color-dbc0f74: #E5EEFF !important;
        --e-global-color-accent: #333 !important;
    }
}