/* ==========================================================
   ARCADIA v7_13 — MOBILE COMPACT HEADER OVERLAY
   Baseline: v7_12 = v7_11 successful descender fix + first
   mobile human-optimized pass.
   Purpose: reduce the mobile top menu/header footprint while
   preserving visibility, tap functionality, logo, color system,
   hero image path, styles.css visual language, Worker/D1,
   Approval Queue, Operational Continuity, and no-autonomous-action
   operating boundaries.
   ========================================================== */

/* Mobile header should be present, usable, and compact — not a
   large fixed panel that consumes the human viewing field. */
@media (max-width: 820px) {
  .site-header {
    padding-top: .18rem !important;
    padding-bottom: .18rem !important;
    min-height: 0 !important;
    max-height: 68px !important;
    overflow: hidden !important;
  }

  .site-header .wrap.header-inner,
  .header-inner {
    width: min(100% - 1rem, var(--wrap, 1120px)) !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: .42rem !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .brand,
  .brand-symbol {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .brand-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: block !important;
  }

  nav[aria-label="Primary navigation"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .36rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 52px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: .18rem 0 .2rem !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  nav[aria-label="Primary navigation"]::-webkit-scrollbar {
    display: none;
  }

  nav[aria-label="Primary navigation"] a {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: .38rem .58rem !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  nav[aria-label="Primary navigation"] .nav-cta {
    min-height: 34px !important;
    height: 34px !important;
  }

  /* Compensate for the shorter sticky header so the first screen
     opens with more real content visible. */
  .hero {
    padding-top: clamp(2.15rem, 6.5vw, 3.25rem) !important;
  }
}

@media (max-width: 520px) {
  .site-header {
    max-height: 58px !important;
    padding-top: .12rem !important;
    padding-bottom: .12rem !important;
  }

  .site-header .wrap.header-inner,
  .header-inner {
    width: min(100% - .75rem, var(--wrap, 1120px)) !important;
    gap: .32rem !important;
  }

  .brand,
  .brand-symbol {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .brand-logo {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  nav[aria-label="Primary navigation"] {
    gap: .28rem !important;
    max-height: 44px !important;
    padding: .12rem 0 .14rem !important;
  }

  nav[aria-label="Primary navigation"] a,
  nav[aria-label="Primary navigation"] .nav-cta {
    min-height: 31px !important;
    height: 31px !important;
    padding: .32rem .48rem !important;
    font-size: .7rem !important;
    letter-spacing: .01em !important;
  }

  .hero {
    padding-top: clamp(1.85rem, 5.8vw, 2.7rem) !important;
  }
}