/**
 * GeoFazendas Mobile Menu Component
 *
 * Mobile-first menu system with:
 * - Body scroll lock via overflow + overscroll-behavior (no position:fixed)
 * - max-height animation for smooth open/close (universal browser support)
 * - Hard-collapsed when closed (height:0, padding ignored via overflow:hidden)
 * - iOS Safari 16+ compatible (no touch handler hacks)
 * - Desktop (≥1024px) forces display:none to beat Tailwind's lg:hidden specificity
 *
 * Usage: Include this CSS globally via base.html
 * See static/js/mobile-menu.js for JavaScript controller
 *
 * @version 2.1.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 — max-height animation
   ==========================================================================
   Tailwind's `lg:hidden` (class specificity) loses to `#mobile-menu` (ID
   specificity), so we must redeclare desktop hiding at the ID level — see
   the min-width:1024px block at the bottom.
*/

#mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--gf-mobile-menu-transition),
              opacity var(--gf-mobile-menu-transition),
              visibility 0s linear var(--gf-mobile-menu-transition);
}

#mobile-menu.is-open {
  max-height: calc(100vh - var(--gf-header-height));
  opacity: 1;
  visibility: visible;
  transition: max-height var(--gf-mobile-menu-transition),
              opacity var(--gf-mobile-menu-transition),
              visibility 0s linear 0s;
}

/* Mobile viewports: use dynamic viewport (dvh) when available + scroll constraints */
@media (max-width: 1023px) {
  #mobile-menu.is-open {
    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);
  }
}

/* Desktop (lg breakpoint): always hidden, regardless of is-open class.
   ID-level specificity required to beat Tailwind's `.lg:hidden`. */
@media (min-width: 1024px) {
  #mobile-menu {
    display: none;
  }
}