/* ──────────────────────────────────────────────────────────────────────────
   Shared mobile hardening for getetapa.com.

   Two parts:
     1. the mobile navigation drawer (below), and
     2. cross-page mobile fixes at the end of the file.

   ──────────────────────────────────────────────────────────────────────────
   1. Mobile navigation (hamburger + drawer)

   Before this existed, every page fell into one of two broken states on a
   phone:

     • index / events / event / plan-preview hid every nav link below 1000px
       (`.nav-links a:not(.nav-cta) { display: none }`) and offered nothing in
       their place — the menu simply vanished.
     • privacy / terms / cookies / website-terms / the blog had no responsive
       nav rules at all, so the full desktop row overflowed the viewport and
       `body { overflow-x: hidden }` clipped the Download CTA off-screen.

   Either way you could not navigate the site from a phone. This file plus
   `mobile-nav.js` gives every page one identical, accessible drawer.

   Progressive enhancement: the rules that hide the desktop row are scoped to
   `html.mnav-ready`, a class `mobile-nav.js` sets on boot. With JS disabled
   nothing here applies and each page keeps its previous behaviour.
   ────────────────────────────────────────────────────────────────────────── */

.mnav-toggle,
.mnav-bar-actions { display: none; }

/* The drawer is built by JS and lives outside <nav>, so page-level rules such
   as `.nav-links a:not(.nav-cta) { display: none }` can never match it. */
.mnav-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 76px 20px 20px;
  background: #0a0a0a;
  border-bottom: 1px solid #1f1f1f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@media (max-width: 1000px) {
  /* Desktop link row off, hamburger on — only once JS has built the drawer. */
  html.mnav-ready nav .nav-links { display: none !important; }

  html.mnav-ready .mnav-toggle,
  html.mnav-ready .mnav-bar-actions { display: flex; }

  .mnav-bar-actions {
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  /* 44x44 minimum touch target (WCAG 2.5.5 / Apple HIG). */
  .mnav-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 1px solid #232323;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
  }
  .mnav-toggle:hover { border-color: #F6237D; }
  .mnav-toggle:focus-visible { outline: 2px solid #F6237D; outline-offset: 2px; }

  /* Three bars that morph into a cross when the drawer is open. */
  .mnav-toggle-bars {
    position: relative;
    width: 18px;
    height: 12px;
    display: block;
  }
  .mnav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.15s ease, top 0.22s ease;
  }
  .mnav-toggle-bars span:nth-child(1) { top: 0; }
  .mnav-toggle-bars span:nth-child(2) { top: 5px; }
  .mnav-toggle-bars span:nth-child(3) { top: 10px; }

  .mnav-toggle[aria-expanded="true"] .mnav-toggle-bars span:nth-child(1) {
    top: 5px; transform: rotate(45deg);
  }
  .mnav-toggle[aria-expanded="true"] .mnav-toggle-bars span:nth-child(2) {
    opacity: 0;
  }
  .mnav-toggle[aria-expanded="true"] .mnav-toggle-bars span:nth-child(3) {
    top: 5px; transform: rotate(-45deg);
  }

  /* Compact Download pill kept in the bar beside the hamburger, so the
     primary conversion action never costs a tap to reach. */
  .mnav-bar-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 100px;
    background: #F6237D;
    color: #000 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .mnav-panel.is-open,
  .mnav-backdrop.is-open { display: flex; }

  /* Every drawer row is a full-width 48px target. */
  .mnav-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 12px;
    border-radius: 12px;
    color: #d8d8d8 !important;
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
    background: none !important;
    border: none;
    transition: background 0.15s, color 0.15s;
  }
  .mnav-panel:focus { outline: none; }
  .mnav-panel a:hover { background: #141414; color: #fff !important; }
  .mnav-panel a:focus-visible {
    background: #141414;
    color: #fff !important;
    outline: 2px solid #F6237D;
    outline-offset: -2px;
  }
  .mnav-panel a[aria-current="page"] { color: #F6237D !important; font-weight: 500; }

  /* Download reads as the primary action at the foot of the drawer. */
  .mnav-panel a.mnav-panel-cta {
    justify-content: center;
    margin-top: 8px;
    background: #F6237D !important;
    color: #000 !important;
    font-weight: 600;
  }
  .mnav-panel a.mnav-panel-cta:hover { background: #F472B6 !important; color: #000 !important; }

  /* Social icons sit on one row rather than eating a full line each. */
  .mnav-panel-social {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #1a1a1a;
  }
  .mnav-panel-social a {
    width: 48px;
    justify-content: center;
    color: #888 !important;
  }

  html.mnav-open, html.mnav-open body { overflow: hidden; }
}

/* Above the breakpoint the drawer must never be reachable, even if a resize
   happened while it was open. */
@media (min-width: 1001px) {
  .mnav-panel, .mnav-backdrop { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   2. Cross-page mobile fixes
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  /* iOS Safari zooms the whole page in whenever a focused form control has a
     font-size below 16px, and it does not zoom back out on blur. The support
     ticket form (15px), the events filters and search (13-15px) and the
     podcast question form (14px) all tripped this. 16px is the threshold, so
     floor every control at it rather than editing each page's inline styles.
     `select` is included: the date and distance filters on events.html are
     the worst offenders at 13px.

     `!important` is deliberate: pages style their controls through class
     selectors (`.ticket-form textarea { font-size: 15px }`, `.ask-input`,
     the events filter rules), which outrank a bare element selector here.
     This override has to win on every page without knowing each one's
     specificity. Checkboxes and radios are excluded — they never trigger the
     zoom and sizing them would distort the control. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}