/* ═══════════════════════════════════════════════════════════════════
   phone-nav.css: Clherity header, ☰ side menu and bottom bar on phones.
   Used by every page with the site header: the main pages (with nav.js)
   and editorial, article and event pages (with phone-nav.js).
   ═══════════════════════════════════════════════════════════════════ */

/* ── TOP NAV + SIDE MENU (phones) ──────────────────────────────── */
/* The ☰ menu is a panel that slides in from the right, with the page
   dimmed behind it (nav.js adds the dimmed layer and the menu-open class). */
.nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* Header: solid on phones. A blurred header would trap the menu inside
     its own strip at the top of the screen. */
  #main-nav {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important;
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), background 0.3s !important;
  }
  #main-nav:not(.scrolled) { background: rgba(255,255,255,0.97) !important; }
  #main-nav.menu-open { z-index: 10000 !important; transform: none !important; }

  #nav-links {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(82vw, 320px) !important; height: auto !important; margin: 0 !important; z-index: 2 !important;
    padding: 5.5rem 1.75rem calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important; align-items: stretch !important; justify-content: flex-start !important;
    background: #1A002A !important; box-shadow: -12px 0 40px rgba(0,0,0,0.25) !important;
    overflow-y: auto !important; overscroll-behavior: contain; touch-action: auto !important;
    transform: translateX(105%) !important; visibility: hidden !important;
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.38s !important;
  }
  #nav-links.open {
    transform: none !important; visibility: visible !important;
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1) !important;
  }
  #nav-links::before {
    content: 'Menu'; display: block; margin-bottom: 0.75rem;
    font-family: 'Syne', sans-serif; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: #D4B8ED;
  }
  #nav-links::after { content: none !important; }
  #nav-links li { list-style: none; opacity: 0; transform: translateX(18px); transition: opacity 0.25s ease, transform 0.3s ease; }
  #nav-links.open li { opacity: 1; transform: none; }
  #nav-links.open li:nth-child(1) { transition-delay: 0.08s; }
  #nav-links.open li:nth-child(2) { transition-delay: 0.12s; }
  #nav-links.open li:nth-child(3) { transition-delay: 0.16s; }
  #nav-links.open li:nth-child(4) { transition-delay: 0.2s; }
  #nav-links.open li:nth-child(5) { transition-delay: 0.24s; }
  #nav-links.open li:nth-child(n+6) { transition-delay: 0.28s; }
  #nav-links a {
    display: flex !important; align-items: center !important; min-height: 52px !important;
    padding: 0.4rem 0 !important; font-size: 1.02rem !important;
    color: rgba(255,255,255,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #nav-links a.active, #nav-links a[aria-current="page"] { color: #E87ED8 !important; }
  #nav-links a.nav-cta {
    justify-content: center !important; margin-top: 1.5rem; border: 0;
    padding: 0.8rem 1.5rem !important; border-radius: 100px !important;
    background: #C200FF !important; color: #fff !important;
    box-shadow: 0 6px 20px rgba(194,0,255,0.4) !important;
  }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(26,0,42,0.55); opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .nav-backdrop.show { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

  /* ☰ button: always on top, turns into a white × while the menu is open */
  #hamburger { display: flex !important; position: relative; z-index: 3; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
  #hamburger span { transition: transform 0.3s ease, opacity 0.2s ease, background 0.2s ease !important; }
  #hamburger[aria-expanded="true"] span { background: #fff !important; }
  #hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px) !important; }
  #hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; transform: translateX(20px) !important; }
  #hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px) !important; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  #nav-links, #nav-links.open, #nav-links li, .nav-backdrop { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR: fixed to the bottom, one-tap page access
   ══════════════════════════════════════════════════════════════════ */
.mobile-nav { display: none; }

@media (max-width: 768px) {
  /* Push content above the bar */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* top/padding/border are reset because each page's own "nav" style
     (meant for the header) also applies to this bar */
  .mobile-nav {
    display: flex; box-sizing: border-box;
    position: fixed; top: auto !important; bottom: 0; left: 0; right: 0;
    z-index: 8000;
    background: rgba(26,0,42,0.96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(194,0,255,0.2); border-bottom: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    max-width: none; overflow: visible; transform: none !important;
    align-items: stretch; justify-content: space-around;
  }

  .mobile-nav-item {
    display: flex; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; text-decoration: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Syne', sans-serif; font-size: 0.56rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    flex: 1; min-height: 44px; padding: 0.4rem 0.2rem;
    transition: color 0.15s; position: relative;
  }

  .mobile-nav-item:active { opacity: 0.7; }

  .mobile-nav-item.active, .mobile-nav-item[aria-current="page"] { color: #C200FF; }

  /* Active indicator stripe at top of tab */
  .mobile-nav-item.active::before, .mobile-nav-item[aria-current="page"]::before {
    content: ''; position: absolute; top: 0; left: 15%; right: 15%;
    height: 2.5px; background: #C200FF; border-radius: 0 0 3px 3px;
  }

  /* CTA tab glows purple */
  .mobile-nav-item--cta { color: #C200FF !important; }
  .mobile-nav-item--cta .mobile-nav-icon {
    background: rgba(194,0,255,0.15); border-radius: 10px; padding: 0.2rem 0.5rem;
  }

  .mobile-nav-icon { font-size: 1.3rem; line-height: 1; display: block; }
  .mobile-nav-label { display: block; line-height: 1; }
}