/* Mobile Navigation Fix for Tablets and Mobile Devices
   This file fixes navbar visibility issues on tablets and mobile screens
   Add this CSS file AFTER style.css in your HTML */

/* Overlay for mobile menu */
body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
    backdrop-filter: blur(2px);
}

/* Force mobile menu to work on all devices up to 1024px (tablets and mobile) */
@media screen and (max-width: 1024px) {
    
    /* Override any conflicting tablet styles - Force hamburger menu icon to show */
    .menu-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide desktop navigation by default on tablets/mobile */
    .navigation {
        position: fixed !important;
        right: -100% !important;
        top: 0 !important;
        width: min(400px, 85vw) !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.96) !important;
        backdrop-filter: blur(25px) !important;
        padding-top: 80px !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        transition: right 0.3s ease !important;
    }
    
    /* CRITICAL: Show navigation when active class is added */
    .header .navigation.active,
    nav.navigation.active,
    #mainNav.active {
        right: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .navigation.active {
        right: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force navigation ul to be vertical on tablets/mobile */
    .navigation ul {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: flex-start !important;
        padding: 0 20px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navigation.active ul {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Override any tablet-specific nav-link styles */
    .navigation .nav-link {
        font-size: 16px !important;
        display: block !important;
        width: 100% !important;
    }
    
    .navigation ul li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 15px 0 !important;
    }
    
    /* Mega dropdown mobile styles */
    .mega-dropdown {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        margin-top: 10px !important;
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    
    .mega-dropdown.mobile-open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
    }
    
    /* Hamburger menu animation */
    .menu-icon.active span:nth-child(1) {
        transform: rotate(45deg) translate(9px, 9px) !important;
    }
    
    .menu-icon.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .menu-icon.active span:nth-child(3) {
        transform: rotate(-45deg) translate(9px, -9px) !important;
    }
}

/* Larger tablets - still use mobile menu */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navigation {
        width: min(450px, 90vw) !important;
    }

    .navigation.active {
        width: min(450px, 90vw) !important;
    }
}

/* NUCLEAR OPTION - Maximum specificity override for active state */
@media screen and (max-width: 1024px) {
    body .header .navigation.active,
    body nav#mainNav.active,
    body .navigation.active {
        right: 0 !important;
        left: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }
}