/**
 * NUCLEAR MOBILE MENU SOLUTION - THIRD ATTEMPT
 * CSS-only primary solution with JavaScript progressive enhancement
 * 
 * This file implements a bulletproof mobile menu that works even when:
 * - JavaScript fails to load
 * - JavaScript is disabled
 * - Mobile browsers throttle scripts
 * - There are CSP issues
 * - Ad blockers interfere
 * 
 * CONSTRAINTS MET:
 * - Preserves Tor browser functionality
 * - Maintains visual design
 * - Works in all mobile browsers
 * - No layout changes
 */

/* ===== CSS-ONLY MENU SOLUTION (PRIMARY) ===== */
@media (max-width: 768px) {
    
    /* Hidden checkbox for CSS-only functionality */
    #nuclear-menu-toggle {
        display: none !important;
        position: absolute !important;
        left: -9999px !important;
        opacity: 0 !important;
    }
    
    /* HAMBURGER BUTTON - ENHANCED FOR TOUCH */
    .nav__toggle {
        /* Core functionality */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        
        /* Touch-optimized sizing (minimum 44x44px for accessibility) */
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        
        /* Visual styling to match design */
        background: transparent !important;
        border: 1px solid rgba(229, 229, 229, 0.3) !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        padding: 0 !important;
        
        /* Z-index hierarchy */
        z-index: 1010 !important; /* Highest - always accessible */
        
        /* Mobile optimizations for real device compatibility */
        touch-action: manipulation !important; /* Removes 300ms delay */
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        
        /* Hardware acceleration for smooth performance */
        transform: translateZ(0) !important;
        will-change: transform !important;
        
        /* Smooth transitions */
        transition: transform 0.1s ease, background-color 0.2s ease !important;
        
        /* Ensure proper pointer events for real mobile devices */
        pointer-events: auto !important;
    }
    
    /* Hamburger icon using CSS */
    .nav__toggle:before {
        content: "☰" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 18px !important;
        color: #E5E5E5 !important;
        line-height: 1 !important;
        transition: all 0.2s ease !important;
        font-family: Arial, sans-serif !important; /* Ensure icon displays on all browsers */
    }
    
    /* Active state - X icon when menu is open */
    #nuclear-menu-toggle:checked ~ * .nav__toggle:before,
    .nav__toggle.active:before {
        content: "✕" !important;
        font-size: 16px !important;
    }
    
    /* Touch feedback */
    .nav__toggle:active {
        transform: scale(0.95) translateZ(0) !important;
        background-color: rgba(139, 92, 246, 0.1) !important;
    }
    
    /* MOBILE MENU - SLIDE-OUT DESIGN - OVERRIDE RESPONSIVE.CSS */
    .nav__menu {
        /* Core positioning - stronger than responsive.css */
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* Start hidden off-screen */
        left: auto !important; /* Ensure menu anchors to right edge */
        width: 280px !important; /* Fixed width, not percentage */
        max-width: 280px !important; /* Override responsive.css max-width */
        height: 100vh !important;
        
        /* Visual styling to match design */
        background: rgba(20, 20, 20, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(139, 92, 246, 0.2) !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6) !important;
        
        /* Z-index hierarchy */
        z-index: 1005 !important; /* Below hamburger button */
        
        /* Content spacing */
        padding: 100px 30px 30px !important; /* Top padding for header clearance */
        overflow-y: auto !important;
        
        /* Smooth animation */
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        
        /* Mobile performance optimizations */
        transform: translateZ(0) !important;
        will-change: transform, right !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* MENU OVERLAY - CSS-only compatible */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 280px !important; /* Leave space for menu */
        height: 100% !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 1004 !important; /* Below menu */
        
        /* Touch optimization */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        
        /* Smooth transition */
        transition: opacity 0.3s ease !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* CSS-only menu show state - BULLETPROOF fallback with transform fix */
    #nuclear-menu-toggle:checked ~ * .nav__menu,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ * .nav__menu,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ .header .nav__menu,
    .nav__menu.active {
        right: 0 !important; /* Slide in from right */
        left: auto !important; /* Force anchor to right edge */
        transform: translateX(0) translateZ(0) !important; /* Reset any transforms and force to right edge */
        /* Alternative positioning approach - force to right edge */
        margin-left: auto !important;
        /* Ensure menu is exactly 280px from right edge */
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    
    /* CSS-only overlay show state - BULLETPROOF fallback */
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay,
    #nuclear-menu-toggle:checked ~ * .mobile-menu-overlay,
    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* CSS-only toggle active state - BULLETPROOF fallback */
    #nuclear-menu-toggle:checked ~ * .nav__toggle:before,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ * .nav__toggle:before,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ .header .nav__toggle:before,
    #nuclear-menu-toggle:checked ~ .header .nav__toggle:before,
    #nuclear-menu-toggle:checked ~ header .nav__toggle:before,
    .nav__toggle.active:before {
        content: "✕" !important;
        font-size: 16px !important;
    }
    
    /* CSS-only body scroll lock - BULLETPROOF fallback */
    #nuclear-menu-toggle:checked ~ body,
    body.menu-open {
        /* iOS Safari compatible scroll lock */
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        -webkit-overflow-scrolling: auto !important;
    }
    
    /* MENU ITEMS STYLING */
    .nav__list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav__item {
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .nav__item:last-child {
        border-bottom: none !important;
    }
    
    .nav__link {
        /* Layout */
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important; /* Touch-friendly */
        padding: 16px 0 !important;
        
        /* Styling to match design */
        color: #E5E5E5 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        position: relative !important;
        
        /* Touch optimization */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        
        /* Smooth transitions */
        transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
    }
    
    /* Link hover/active states */
    .nav__link:hover,
    .nav__link:focus {
        background-color: rgba(139, 92, 246, 0.1) !important;
        color: #8B5CF6 !important;
    }
    
    .nav__link:active {
        background-color: rgba(139, 92, 246, 0.15) !important;
        transform: translateX(4px) !important;
    }
    
    /* BODY SCROLL LOCK */
    #nuclear-menu-toggle:checked ~ body,
    body.menu-open {
        /* iOS Safari compatible scroll lock */
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        -webkit-overflow-scrolling: auto !important;
    }
}

/* ===== MOBILE BROWSER SPECIFIC FIXES ===== */

/* iOS Safari specific optimizations */
@supports (-webkit-appearance: none) {
    @media (max-width: 768px) {
        .nav__toggle {
            -webkit-appearance: none !important;
            -webkit-touch-callout: none !important;
        }
        
        .nav__menu {
            -webkit-overflow-scrolling: touch !important;
            -webkit-backface-visibility: hidden !important;
        }
        
        /* Prevent zoom on focus for iOS */
        .nav__link {
            font-size: 16px !important; /* Prevents iOS zoom */
        }
    }
}

/* Android browser specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @media (max-width: 768px) {
        .nav__toggle {
            -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
            outline: none !important;
        }
    }
}

/* Samsung Internet browser fixes */
@supports (background: -webkit-named-image(i)) {
    @media (max-width: 768px) {
        .nav__menu {
            transform: translate3d(0, 0, 0) !important;
        }
    }
}

/* ===== LANDSCAPE ORIENTATION ADJUSTMENTS ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .nav__menu {
        height: 100vh !important;
        padding-top: 80px !important;
    }
    
    .nav__link {
        min-height: 40px !important;
        padding: 12px 0 !important;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 768px) and (min-resolution: 192dpi) {
    .nav__toggle:before {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    .nav__toggle,
    .nav__menu,
    .mobile-menu-overlay,
    .nav__link {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    @media (max-width: 768px) {
        .nav__toggle {
            border: 2px solid currentColor !important;
        }
        
        .nav__toggle:active {
            background-color: currentColor !important;
            color: #000000 !important;
        }
        
        .nav__menu {
            border: 2px solid currentColor !important;
        }
    }
}

/* ===== TOUCH-ONLY DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Only touch devices */
    .nav__toggle {
        padding: 8px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    .nav__link {
        padding: 18px 0 !important;
        border-bottom: 1px solid rgba(139, 92, 246, 0.1) !important;
    }
    
    /* Remove hover effects on touch-only devices */
    .nav__link:hover {
        background-color: transparent !important;
    }
}

/* ===== MOUSE/TRACKPAD DEVICES ===== */
@media (hover: hover) and (pointer: fine) {
    @media (max-width: 768px) {
        .nav__link:hover {
            background-color: rgba(139, 92, 246, 0.1) !important;
            color: #8B5CF6 !important;
        }
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (max-width: 768px) {
    /* Focus indicators for keyboard navigation */
    .nav__toggle:focus {
        outline: 2px solid #8B5CF6 !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2) !important;
    }
    
    .nav__link:focus {
        outline: 2px solid #8B5CF6 !important;
        outline-offset: 2px !important;
        background-color: rgba(139, 92, 246, 0.1) !important;
    }
    
    /* Screen reader only text for button */
    .nav__toggle .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    /* General screen reader only class */
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATION FOR LOW-END DEVICES ===== */
@media (max-width: 768px) and (max-height: 640px) {
    /* Reduce effects on smaller/older devices */
    .nav__menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(20, 20, 20, 0.98) !important;
    }
    
    .nav__toggle::after {
        display: none !important; /* Remove any ripple effects */
    }
}

/* ===== DEBUGGING AIDS (REMOVE IN PRODUCTION) ===== */
/*
Uncomment for debugging mobile menu issues:

@media (max-width: 768px) {
    .nav__toggle {
        border: 2px dashed red !important;
    }
    
    .nav__menu {
        border: 2px dashed blue !important;
    }
    
    .mobile-menu-overlay {
        background: rgba(255, 0, 0, 0.3) !important;
    }
    
    #nuclear-menu-toggle:checked ~ * .nav__menu {
        border: 3px solid lime !important;
    }
}
*/

/* ===== DESKTOP DISPLAY NONE ===== */
@media (min-width: 769px) {
    #nuclear-menu-toggle {
        display: none !important;
    }
    
    /* Ensure navigation shows correctly on desktop */
    .nav__menu {
        position: static !important;
        display: flex !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }
    
    .nav__toggle,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ===== FORCE MOBILE MENU BEHAVIOR FOR TABLETS AND LARGE PHONES ===== */
/* This ensures that tablet devices still use mobile navigation */
@media (max-width: 768px) {
    /* CRITICAL: Override any desktop rules that might be interfering */
    .nav__menu {
        /* Force mobile menu positioning - this must override desktop-layout-restore.css */
        display: block !important;
        position: fixed !important;
        right: -100% !important; /* CRITICAL: Hide off-screen by default */
        top: 0 !important;
        left: auto !important;
        width: 280px !important;
        max-width: 280px !important;
        height: 100vh !important;
        background: rgba(20, 20, 20, 0.98) !important;
        padding: 80px 30px 30px !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        border-left: 1px solid rgba(139, 92, 246, 0.3) !important;
        transition: right 0.3s ease !important;
        /* Additional overrides to ensure it stays hidden */
        transform: translateX(0) !important;
        margin-left: 0 !important;
    }
    
    /* Ensure navigation links are hidden in the off-screen menu by default */
    .nav__menu .nav__list {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* Force hamburger toggle to show on mobile */
    .nav__toggle {
        display: flex !important;
    }
    
    /* Show menu when menu is opened (checkbox checked or active class) */
    #nuclear-menu-toggle:checked ~ * .nav__menu,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ * .nav__menu,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ .header .nav__menu,
    .nav__menu.active {
        right: 0 !important; /* Slide in from right */
    }
    
    /* Show navigation links when menu is opened */
    #nuclear-menu-toggle:checked ~ * .nav__menu .nav__list,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ * .nav__menu .nav__list,
    #nuclear-menu-toggle:checked ~ .mobile-menu-overlay ~ .header .nav__menu .nav__list,
    .nav__menu.active .nav__list {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}
    
    .mobile-menu-overlay {
        display: none !important;
    }
}