/**
 * MODAL & NAVIGATION SCROLL GAP FIX - PRODUCTION SAFE
 * 
 * PURPOSE: Fix bottom scroll gap on mobile for Buy Now modal and Navigation menu
 * PATTERN: Desktop locks body, mobile keeps body scrollable with scroll containment
 * 
 * ROOT CAUSE:
 * - Mobile browsers (iOS Safari, Chrome) have dynamic viewport height
 * - Using 100vh doesn't account for address bar show/hide
 * - Position fixed + overflow without containment creates scroll gap
 * 
 * SOLUTION:
 * - Desktop: Lock body scroll (traditional modal behavior)
 * - Mobile: Keep body scrollable but add overscroll containment
 * - Use 100dvh (dynamic vh) to account for mobile browser chrome
 * - Add overscroll-behavior: contain to prevent bounce into body
 */

/* ============================================================================
   BUY NOW MODAL - MOBILE SCROLL FIX
   ============================================================================ */

/**
 * Desktop: Lock body scrolling when modal is open
 * This is the traditional modal pattern and works perfectly on desktop
 */
@media (min-width: 769px) {
    body.wrickx-modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/**
 * Mobile: Keep body scrollable, but add scroll containment to modal
 * 
 * WHY: iOS Safari and Chrome have collapsing address bars
 * - 100vh includes the address bar space
 * - When address bar hides/shows, viewport height changes
 * - Fixed positioning without containment reveals body underneath
 * 
 * SOLUTION: Let body stay scrollable, contain modal scroll
 */
@media (max-width: 768px) {
    /* Allow body to scroll naturally on mobile */
    body.wrickx-modal-open {
        overflow: auto !important;
        position: relative !important;
    }
    
    /**
     * Modal content scroll containment
     * - Use dynamic viewport height (dvh) for mobile browser chrome
     * - Contain overscroll to prevent bouncing into body
     * - Enable touch scrolling for iOS
     */
    .wrickx-modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        
        /* Account for mobile browser chrome (address bar) */
        max-height: 90vh !important;
        max-height: 90dvh !important; /* Dynamic viewport height - modern browsers */
    }
    
    /**
     * Modal body scroll containment
     * Prevents the "rubber band" bounce effect from revealing body
     */
    .wrickx-modal-body {
        overscroll-behavior: contain !important;
    }
}

/* ============================================================================
   ELEMENTSKIT NAVIGATION MENU - MOBILE SCROLL FIX
   ============================================================================ 
   
   ElementsKit plugin controls the mobile off-canvas menu.
   It adds body classes when menu opens:
   - body.ekit-menu-open
   - body.ekit-offcanvas-open  
   - body.elementskit-menu-active
   
   By default, ElementsKit locks the body on ALL devices.
   We override this on mobile only, using the same pattern as the modal.
   ============================================================================ */

/**
 * Desktop: Keep ElementsKit's default body lock
 * Works perfectly on desktop, don't touch it
 */
@media (min-width: 1025px) {
    body.ekit-menu-open,
    body.ekit-offcanvas-open,
    body.elementskit-menu-active {
        overflow: hidden !important;
    }
}

/**
 * Mobile: Override ElementsKit's body lock
 * 
 * IMPORTANT: These selectors MUST match what ElementsKit actually uses.
 * Inspect the body element when menu is open to verify class names.
 */
@media (max-width: 1024px) {
    /* Allow body to scroll on mobile */
    body.ekit-menu-open,
    body.ekit-offcanvas-open,
    body.elementskit-menu-active {
        overflow: auto !important;
        position: relative !important;
    }
    
    /**
     * Off-canvas menu scroll containment
     * - Ensure menu itself is scrollable
     * - Prevent scroll from escaping to body
     * - Use dynamic viewport height
     */
    .elementskit-menu-offcanvas-elements,
    .elementskit-menu-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    
    /**
     * Active menu height constraint
     * Prevents menu from extending beyond viewport
     * Uses both 100vh (fallback) and 100dvh (modern browsers)
     */
    .elementskit-menu-offcanvas-elements.active,
    .elementskit-menu-container.active {
        max-height: 100vh !important;
        max-height: 100dvh !important; /* Dynamic viewport - accounts for mobile chrome */
    }
}

/* ============================================================================
   FALLBACK FOR OLDER BROWSERS
   ============================================================================ */

/**
 * Browsers without dvh support (older iOS, Android)
 * The vh fallback is declared first and will be used
 * 
 * Browsers with dvh support will use the second declaration
 * This is called "progressive enhancement"
 */

/* Already handled above with dual declaration:
   max-height: 100vh !important;      <- Fallback
   max-height: 100dvh !important;     <- Modern browsers */

/* ============================================================================
   PRODUCTION SAFETY NOTES
   ============================================================================
   
   ✅ WHAT THIS FIX DOES:
   - Prevents scroll gap on mobile (both iOS and Android)
   - Preserves desktop body lock behavior (no regression)
   - Adds scroll containment to prevent overscroll bounce
   - Uses modern viewport units with fallbacks
   
   ❌ WHAT THIS FIX DOES NOT DO:
   - Does NOT modify WooCommerce core
   - Does NOT change Astra theme behavior
   - Does NOT affect other plugins
   - Does NOT break desktop functionality
   
   🧪 REQUIRED TESTING:
   CRITICAL (Must Test):
   - iPhone Safari (iOS 15+) - Primary target
   - Android Chrome (Latest) - Primary target
   - Desktop Chrome - Verify no regression
   - Desktop Safari - Verify no regression
   
   OPTIONAL (Nice to Have):
   - Samsung Internet Browser
   - Firefox Mobile
   - iPad Safari (landscape + portrait)
   
   🎯 TEST SCENARIOS:
   1. Open mobile navigation menu
      - Scroll to bottom of menu
      - ✅ Should NOT see blank space below
      - ✅ Should NOT scroll into body content
      
   2. Open Quick Checkout modal
      - Scroll to bottom of modal
      - ✅ Should NOT see blank space below
      - ✅ Should NOT scroll into body content
      
   3. Desktop navigation menu
      - Open menu on desktop
      - ✅ Should work exactly as before
      - ✅ Body should be locked (not scrollable)
      
   4. Desktop Quick Checkout
      - Open modal on desktop
      - ✅ Should work exactly as before
      - ✅ Body should be locked (not scrollable)
   
   🔄 ROLLBACK PROCEDURE:
   If this fix causes ANY issues:
   1. Delete this file: css/mobile-scroll-gap-fix.css
   2. Clear cache (browser + server + CDN if applicable)
   3. Test again
   
   The enqueue function in functions.php already checks for file existence,
   so deleting the file will automatically disable it.
   
   📝 KNOWN EDGE CASES:
   - iOS Safari <15: May not support dvh, will fall back to vh
   - Very tall modals: May need max-height adjustment
   - Custom CSS conflicts: Check for !important rules that override this
   
   ============================================================================ */