/**
 * GeoFazendas Mobile Menu Component
 * 
 * Mobile-first menu system with:
 * - Body scroll lock when menu is open
 * - Scrollable menu content with touch support
 * - iOS Safari compatibility fixes
 * 
 * Usage: Include this CSS globally via base.html
 * See static/js/mobile-menu.js for JavaScript controller
 * 
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Header height - matches Tailwind h-20 (80px) */
  --gf-header-height: 80px;
  
  /* Mobile menu timing */
  --gf-mobile-menu-transition: 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   Body State - Prevents scroll when mobile menu is open
   ========================================================================== */

body.mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  /* iOS Safari fix for body scroll lock */
  -webkit-overflow-scrolling: none;
}

/* Prevent layout shift from scrollbar disappearing */
body.mobile-menu-open {
  padding-right: var(--scrollbar-width, 0);
}

/* ==========================================================================
   Mobile Menu Container
   ========================================================================== */

/* Only apply mobile menu styles on mobile/tablet (below lg breakpoint) */
@media (max-width: 1023.98px) {
  
  /* Mobile menu scrollable area */
  #mobile-menu {
    /* Calculate available height: viewport minus header */
    max-height: calc(100vh - var(--gf-header-height));
    max-height: calc(100dvh - var(--gf-header-height)); /* Dynamic viewport for mobile browsers */
    
    /* Enable scrolling */
    overflow-y: auto;
    
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    
    /* Prevent scroll chaining to body */
    overscroll-behavior: contain;
    
    /* Allow vertical pan gestures */
    touch-action: pan-y;
  }
  
  /* Scrollbar styling for mobile menu */
  #mobile-menu::-webkit-scrollbar {
    width: 4px;
  }
  
  #mobile-menu::-webkit-scrollbar-track {
    background: transparent;
  }
  
  #mobile-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }
  
  #mobile-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* ==========================================================================
   Animation States
   ========================================================================== */

/* Slide-down animation for menu opening */
#mobile-menu {
  transition: max-height var(--gf-mobile-menu-transition),
              opacity var(--gf-mobile-menu-transition);
}

#mobile-menu.hidden {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu:not(.hidden) {
  opacity: 1;
}

/* ==========================================================================
   Header State Adjustments
   ========================================================================== */

/* Prevent header from hiding while mobile menu is open */
body.mobile-menu-open .site-header-tw {
  transform: translateY(0) !important;
}

/* Ensure header stays visible when menu is open */
body.mobile-menu-open .site-header-tw.header-hidden {
  transform: translateY(0) !important;
}