/* =====================================================================
   ELITE SOCIAL HUB — MOBILE MENU (self-contained fix)
   Load AFTER style.css so it always wins.

   The mobile drawer is driven by the class  html.esh-mnav , which is set
   by the small inline script in includes/header.php (and, as a fallback,
   by assets/js/mobile-nav.js). That is deliberate: a hard-coded
   @media breakpoint here could disagree with the breakpoint inside
   style.css and leave a width range with NO menu at all. The script
   detects that case and switches the drawer on at any width where the
   normal nav is hidden.
   ===================================================================== */

/* ---- overlays must never eat taps (custom cursor + floating balls) ---- */
#cursor-ball,
#cursor-glow,
#site-particles,
.esh-particles,
.gradient-orb { pointer-events: none !important; }

/* ---- header sits above page content ---- */
.site-header { position: sticky; top: 0; z-index: 900; }

/* ---- backdrop (created by mobile-nav.js) ---- */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 3, 12, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  z-index: 1400;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* =====================  DESKTOP (no drawer)  ===================== */
html:not(.esh-mnav) .nav-toggle   { display: none !important; }
html:not(.esh-mnav) .nav-backdrop { display: none !important; }
html:not(.esh-mnav) body.nav-open { overflow: auto !important; }

/* =====================  MOBILE / TABLET (drawer)  ===================== */

/* NOTE: a positioned header with a z-index creates its own stacking
   context, so the drawer — a child of the header — can never out-rank the
   backdrop on its own. The HEADER is what has to beat the backdrop. */
html.esh-mnav .site-header { z-index: 1600 !important; overflow: visible !important; }
html.esh-mnav .site-header .nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; overflow: visible !important;
}
html.esh-mnav .site-header .logo-text { font-size: 1rem; }

/* burger button — always visible, always on top of the drawer */
html.esh-mnav .site-header .nav-toggle {
  display: flex !important;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 44px; height: 44px;              /* full 44px tap target */
  padding: 0; margin: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(193, 90, 240, .3);
  border-radius: 11px;
  cursor: pointer;
  position: relative; z-index: 1610;
  -webkit-tap-highlight-color: transparent;
}
html.esh-mnav .site-header .nav-toggle span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: transform .3s ease, opacity .2s ease;
}
html.esh-mnav body.nav-open .site-header .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.esh-mnav body.nav-open .site-header .nav-toggle span:nth-child(2) { opacity: 0; }
html.esh-mnav body.nav-open .site-header .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the drawer itself */
html.esh-mnav .site-header .main-nav {
  position: fixed !important;
  top: 0; right: 0; bottom: 0; left: auto;
  width: min(330px, 86vw);
  height: 100vh; height: 100dvh;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 86px 20px calc(30px + env(safe-area-inset-bottom)) 20px;
  background: linear-gradient(180deg, #150c1f 0%, #0a0511 100%);
  border-left: 1px solid rgba(193, 90, 240, .26);
  box-shadow: -22px 0 60px rgba(0, 0, 0, .6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Closed state stays INSIDE the viewport. Parking it at translateX(102%)
     pushed its links past the right edge, which let the whole page be dragged
     sideways on phones and tablets. It fades + slides a short distance
     instead, so there is never any horizontal overflow. */
  transform: translateY(14px) scale(.985);
  opacity: 0;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .26s ease, visibility .32s;
  z-index: 1500;
  visibility: hidden;
}
html.esh-mnav body.nav-open .site-header .main-nav {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

/* every link is a full-width, thumb-sized row */
html.esh-mnav .site-header .main-nav > a,
html.esh-mnav .site-header .main-nav .nav-item > a,
html.esh-mnav .site-header .main-nav .sub-menu > a {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 13px 12px;
  margin: 0;
  color: #efe7f6;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease;
}
html.esh-mnav .site-header .main-nav > a:active,
html.esh-mnav .site-header .main-nav .nav-item > a:active,
html.esh-mnav .site-header .main-nav .sub-menu > a:active { background: rgba(193, 90, 240, .16); }
html.esh-mnav .site-header .main-nav a.on { color: var(--violet-2, #c15af0); }

/* sub-menus become a tap-to-open accordion (hover does not exist on touch) */
html.esh-mnav .site-header .main-nav .nav-item { width: 100%; position: static; }
html.esh-mnav .site-header .main-nav .nav-item > a { justify-content: space-between; }
html.esh-mnav .site-header .main-nav .nav-item > a .caret {
  font-size: .6rem; opacity: .65;
  transition: transform .28s ease;
}
html.esh-mnav .site-header .main-nav .nav-item.open > a .caret { transform: rotate(180deg); }

html.esh-mnav .site-header .main-nav .sub-menu {
  position: static !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, .035);
  border: 0; border-radius: 10px;
  box-shadow: none;
  margin: 0; padding: 0 0 0 12px;
  min-width: 0; width: 100%;
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease;
}
html.esh-mnav .site-header .main-nav .nav-item.open .sub-menu { max-height: 640px; }
html.esh-mnav .site-header .main-nav .sub-menu > a {
  font-size: .93rem; font-weight: 500; min-height: 44px;
  color: #c9bcd8; border-bottom: 0;
}

/* HIRING pill stays inline and small */
html.esh-mnav .site-header .main-nav .hiring-badge { margin-left: 8px; flex: 0 0 auto; }

/* the Get Started button sits at the bottom of the drawer */
html.esh-mnav .site-header .main-nav .nav-cta {
  justify-content: center !important;
  margin-top: 18px;
  border-bottom: 0 !important;
  text-align: center;
  font-size: 1rem;
}

/* lock the page behind the drawer */
html.esh-mnav body.nav-open { overflow: hidden !important; }

/* very small phones */
@media (max-width: 360px) {
  html.esh-mnav .site-header .main-nav { width: 92vw; padding-top: 78px; }
  html.esh-mnav .site-header .logo-text { font-size: .92rem; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .site-header .main-nav,
  .nav-backdrop,
  .site-header .main-nav .sub-menu { transition: none !important; }
}