/* ==========================================================
   ARCADIA v7_14 — MOBILE DROPDOWN / RETREAT HEADER OVERLAY
   Baseline: v7_13 compact mobile header, built from v7_6 true source.
   Purpose: keep every menu item visible on mobile at page arrival,
   remove horizontal menu scrolling, then let the navigation retreat
   into a compact touch-open Menu state after the visitor begins
   scrolling so more content remains visible.
   Preserves: v7_6/v7_11/v7_12/v7_13 visual language, colors, logo,
   hero image path, Worker/D1, Approval Queue, Operational Continuity,
   and no-autonomous-public-action boundaries.
   ========================================================== */

.mobile-menu-toggle {
  display: none;
}

@media (max-width: 820px) {
  .site-header {
    max-height: none !important;
    overflow: visible !important;
    transition: padding .22s ease, box-shadow .22s ease, backdrop-filter .22s ease;
  }

  .site-header .wrap.header-inner,
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand spacer toggle"
      "nav nav nav" !important;
    row-gap: .38rem !important;
  }

  .brand,
  .brand-symbol {
    grid-area: brand !important;
  }

  .mobile-menu-toggle {
    grid-area: toggle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: .48rem .72rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(224, 184, 91, .42) !important;
    background: rgba(14, 18, 33, .72) !important;
    color: var(--accent-2) !important;
    font: inherit !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.16) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  nav#primary-navigation,
  nav[aria-label="Primary navigation"]#primary-navigation {
    grid-area: nav !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .34rem !important;
    width: 100% !important;
    max-height: 240px !important;
    overflow: visible !important;
    padding: .12rem 0 .2rem !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: max-height .24s ease, opacity .18s ease, transform .22s ease, padding .22s ease;
  }

  nav#primary-navigation a,
  nav#primary-navigation .nav-cta {
    flex: 0 1 auto !important;
    min-height: 34px !important;
    height: auto !important;
    padding: .42rem .58rem !important;
    font-size: clamp(.66rem, 2.25vw, .76rem) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* After the visitor starts scrolling, the header retreats.
     The Menu button remains touchable; tapping it restores full nav. */
  body.arcadia-mobile-nav-retreat .site-header:not(.mobile-nav-open) {
    padding-top: .12rem !important;
    padding-bottom: .12rem !important;
  }

  body.arcadia-mobile-nav-retreat .site-header:not(.mobile-nav-open) .wrap.header-inner,
  body.arcadia-mobile-nav-retreat .header-inner {
    grid-template-areas: "brand spacer toggle" !important;
    row-gap: 0 !important;
  }

  body.arcadia-mobile-nav-retreat .site-header:not(.mobile-nav-open) nav#primary-navigation {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-.35rem) !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none !important;
  }

  body.arcadia-mobile-nav-retreat .site-header.mobile-nav-open nav#primary-navigation {
    max-height: 260px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Restore a little first-screen content now that the header is
     functional instead of permanently tall. */
  .hero {
    padding-top: clamp(1.85rem, 5.6vw, 2.75rem) !important;
  }
}

@media (max-width: 520px) {
  .site-header .wrap.header-inner,
  .header-inner {
    width: min(100% - .72rem, var(--wrap, 1120px)) !important;
    row-gap: .32rem !important;
  }

  .mobile-menu-toggle {
    min-height: 35px !important;
    padding: .44rem .62rem !important;
    font-size: .72rem !important;
    letter-spacing: .07em !important;
  }

  nav#primary-navigation,
  nav[aria-label="Primary navigation"]#primary-navigation {
    gap: .26rem !important;
    max-height: 270px !important;
    padding-bottom: .16rem !important;
  }

  nav#primary-navigation a,
  nav#primary-navigation .nav-cta {
    min-height: 31px !important;
    padding: .36rem .44rem !important;
    font-size: clamp(.61rem, 2.75vw, .69rem) !important;
  }

  body.arcadia-mobile-nav-retreat .site-header.mobile-nav-open nav#primary-navigation {
    max-height: 300px !important;
  }
}