/* ============================================================
   MOBILE NAVIGATION  (full-screen editorial menu sheet)
   Matches the V5 theme — cream ground, serif links, coral accent.
   ============================================================ */

/* Hamburger stays visible at all widths (matches the original V5 nav) so the
   menu is always reachable, including on desktop-width previews. */
.nav-menu-btn { display: inline-flex; }
/* On phones the eligibility CTA lives inside the menu, so drop the nav one.
   .nav-cta-btn goes with it: at 390 the same call to action is on screen
   three times — here, in .mnav-foot, and in the fixed .cc-launcher (all 36
   pages, concierge.css). Its 148px + 18px gap is what squeezed the logo
   track to 42px, letterboxing a 7.9:1 lockup into 42×34. Dropping it here
   returns the wordmark to its full 269px. */
@media (max-width: 640px) {
  .nav-right .btn-ghost { display: none; }
  .nav-cta-btn { display: none; }
}

.nav-menu-btn[aria-expanded="true"] { background: var(--fg-strong); color: var(--bg); border-color: var(--fg-strong); }

/* The hamburger draws at 36px and the drawer's close button at 40 — both under
   the 44px a finger needs, on the primary way into navigation on a phone.
   The circle keeps its size: the nav geometry settled on 6 Aug depends on these
   boxes, so only the hit area grows, through a pseudo-element that changes no
   layout. Measured before adding it — below 640 the hamburger sits 20px from
   the viewport edge with no neighbour; at 768 and 1024 it is 18px from
   .nav-cta-btn, so 4px a side leaves 14px, still clear of the 8px threshold. */
.nav-menu-btn, .mnav-close { position: relative; }
.nav-menu-btn::after, .mnav-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---------- Sheet ---------- */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 1480;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 280ms var(--ease), transform 360ms var(--ease), visibility 0s linear 300ms;
}
.mnav.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 280ms var(--ease), transform 360ms var(--ease), visibility 0s;
}

.mnav-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 18px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 34px);
  /* min-height:0 has to be on EVERY flex ancestor between the fixed sheet and
     the scrolling list, not just the list. Without it here, .mnav-inner keeps
     its default min-height:auto, grows to its content, and hands .mnav-links
     the full 1702px — so overflow-y:auto below has nothing to scroll and
     clientHeight comes back equal to scrollHeight. Measured that way first. */
  min-height: 0;
}

/* ---------- Head ---------- */
.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  gap: 16px;
}
.mnav-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.mnav-close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg-strong);
  font-size: 21px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms var(--ease), transform 160ms var(--ease);
}
.mnav-close:hover { background: var(--bg-alt); transform: rotate(90deg); }

/* ---------- Links ---------- */
.mnav-links {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border-top: 1px solid var(--border-soft);
  /* 🔴 The drawer is position:fixed inset:0, so it is exactly viewport height,
     and :root.mnav-open puts overflow:hidden on both html and body. Without a
     scroll container in here, expanding a group past the fold put those items
     nowhere: the sheet could not scroll and neither could the page behind it.
     Reported on iPhone 15 and iPad, 10 Aug 2026 `[Jacob]`. All four groups open
     measure ~1300px of content against ~750px of usable height on a phone.

     It goes on .mnav-links and not on .mnav-inner so that .mnav-head keeps the
     close button and .mnav-foot keeps the eligibility CTA on screen — scrolling
     the whole inner would carry the way out of the menu off the top.

     ⚠️ min-height:0 is the part that actually does the work. A flex item
     defaults to min-height:auto, which refuses to shrink below its content, so
     overflow-y:auto alone would have changed nothing. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mnav-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: clamp(16px, 3.4vw, 24px) 2px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.mnav-item .n {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--slate-light);
}
.mnav-item:hover { color: var(--accent-deep); }
.mnav-item:hover .n,
.mnav-item.active .n { color: var(--accent-deep); }
.mnav-item .arrow {
  margin-left: auto;
  align-self: center;
  font-size: 20px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);}
.mnav-item:hover .arrow,
.mnav-item.active .arrow { opacity: 1; transform: translateX(0);}

/* staggered entrance */
.mnav-links > .mnav-item, .mnav-links > .mnav-group { opacity: 0; transform: translateY(12px); }
.mnav.open .mnav-links > .mnav-item, .mnav.open .mnav-links > .mnav-group { animation: mnav-rise 460ms var(--ease) forwards; }
.mnav.open .mnav-links > *:nth-child(1) { animation-delay: 70ms; }
.mnav.open .mnav-links > *:nth-child(2) { animation-delay: 110ms; }
.mnav.open .mnav-links > *:nth-child(3) { animation-delay: 150ms; }
.mnav.open .mnav-links > *:nth-child(4) { animation-delay: 190ms; }
.mnav.open .mnav-links > *:nth-child(5) { animation-delay: 230ms; }
.mnav.open .mnav-links > *:nth-child(6) { animation-delay: 270ms; }
@keyframes mnav-rise { to { opacity: 1; transform: translateY(0); } }

/* ---------- Foot ---------- */
.mnav-foot {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.mnav-foot .btn { width: 100%; justify-content: center; }

/* Secondary contact in the mobile menu. Added 19 Aug 2026: the menu is an
   ACTION surface — it carries the eligibility CTA and nothing else — so
   WhatsApp belongs here as the lower-commitment option for someone with a
   question who is not ready to send records. The other social profiles stay
   in the footer, which is a discovery surface; duplicating them here would
   dilute the one thing this menu is for. */
.mnav-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--slate-dark);
  transition: color 160ms var(--ease);
}
.mnav-wa svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.mnav-wa:hover { color: var(--accent-deep); opacity: 1; }
.mnav-lang {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
  cursor: pointer;
}
.mnav-lang:hover { color: var(--fg-strong); }

/* lock background scroll while open */
:root.mnav-open, :root.mnav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav.open { transform: none; transition: opacity 200ms linear, visibility 0s; }
  .mnav.open .mnav-links > * { animation: none; opacity: 1; transform: none; }
}

/* ---------- Expandable groups (Conditions / Therapies / About) ---------- */
.mnav-group { display: block; }
button.mnav-toggle {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.mnav-group.open > .mnav-toggle,
.mnav-group.open > .mnav-toggle .n { color: var(--accent-deep); }
.mnav-toggle .chev {
  margin-left: auto;
  align-self: center;
  position: relative;
  width: 20px; height: 20px;
  flex: 0 0 auto;
}
.mnav-toggle .chev::before,
.mnav-toggle .chev::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; }
.mnav-toggle .chev::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.mnav-toggle .chev::after {
  left: 50%; top: 0; width: 2px; height: 100%;
  transform: translateX(-50%);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.mnav-toggle[aria-expanded="true"] .chev::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.mnav-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 340ms var(--ease), opacity 240ms var(--ease);
}
.mnav-group.open .mnav-sub { max-height: 720px; opacity: 1; }
.mnav-subitem {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 2px 13px 34px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.12;
  color: var(--slate-dark);
  text-decoration: none;
  transition: color 140ms var(--ease);
}
.mnav-sub .mnav-subitem:last-child { border-bottom: 0; }
.mnav-subitem:hover,
.mnav-subitem.active { color: var(--accent-deep); }
.mnav-subitem .s {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.mnav-subitem.mnav-all { color: var(--accent-deep); font-style: italic; }
.mnav-subitem.mnav-all .s { color: var(--accent-deep); }

/* Solid-tumor program subheading inside the mobile accordion (held) */
.mnav-solid-head {
  padding: 14px 0 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-deep);
}