/**
 * GeoFazendas Mobile Menu Component
 * 
 * Mobile-first menu system with:
 * - Body scroll lock via overflow + overscroll-behavior (no position:fixed)
 * - CSS grid animation for smooth open/close
 * - iOS Safari 16+ compatible (no touch handler hacks)
 * - Fallback graceful: iOS 13-15 may rubber-band with menu open
 * 
 * Usage: Include this CSS globally via base.html
 * See static/js/mobile-menu.js for JavaScript controller
 * 
 * @version 2.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;
  /* NO position:fixed — preserves sticky header behavior on iOS Safari */
  overscroll-behavior: none;
  /* No touch-action:none — would block pinch-to-zoom (WCAG 1.4.4) */
  padding-right: var(--scrollbar-width, 0);
}

/* ==========================================================================
   Mobile Menu Container — Grid-based animation
   ========================================================================== */

#mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows var(--gf-mobile-menu-transition),
              opacity var(--gf-mobile-menu-transition);
  visibility: hidden;
}

#mobile-menu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

/* Inner wrapper — required for grid animation */
#mobile-menu > .mobile-menu-inner {
  min-height: 0;
}

/* Only apply scroll constraints on mobile/tablet (below lg breakpoint) */
@media (max-width: 1023.98px) {
  #mobile-menu.is-open {
    max-height: calc(100vh - var(--gf-header-height));
    max-height: calc(100dvh - var(--gf-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    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);
  }
}