/* ===== MMR mega-menu header (Claude Design tokens) ===== */
.nav-mega { display:flex; align-items:stretch; gap:2px; }
/* Audience segmented toggle (Patients / Providers / Organizations) */
.aud-pill { padding:5px 11px; border-radius:999px; font-size:12px; font-weight:500; color:var(--ink-3); white-space:nowrap; transition:color .18s ease, background .18s ease; }
/* --- Nav overflow fix (2026-08-06) ---------------------------------------
   #nav-bar is a three-part flex row — logo | mega nav | (audience + theme +
   "Get started") — that was nowrap. Its intrinsic width is ~1204px but the
   .container only offers 1168px, so the CTA spilled past the rounded bar at
   EVERY desktop width, and below ~1200px it was clipped by the viewport and
   forced up to 260px of horizontal page scroll.
   Fix is two-part: (1) the tightened gap/padding above and below buy back the
   ~44px so wide desktops still sit on one line; (2) flex-wrap drops the
   right-hand group onto a second row at any width where it still doesn't fit,
   automatically — no extra breakpoint to keep in sync with the 1000px burger
   cutover. The mega dropdown is absolutely positioned against #nav-bar, so a
   taller wrapped bar just pushes the panel down with it.
   The right-hand group is right-aligned via flex:1 0 auto +
   justify-content:flex-end on the element itself, NOT via margin-left:auto.
   That distinction matters: Chromium factors a resolved auto margin into
   line-breaking, so margin-left:auto made the bar wrap into three rows even at
   1440px where it fits fine. */
#nav-bar { flex-wrap:wrap; row-gap:8px; }

.aud-pill:hover { color:var(--ink); }
.aud-pill.aud-active { font-weight:600; color:var(--ink); background:var(--surface-2); }
/* nav bar is the containing block so every dropdown anchors to ONE shared
   position (centered under the bar) instead of shifting under each item. */
#nav-bar { position:relative; }
.navc { position:static; display:flex; align-items:center; }
.navt { display:inline-flex; align-items:center; gap:5px; padding:8px 10px; border-radius:9px; font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:background .2s, color .2s; }
.navc:hover .navt, .navc:focus-within .navt { background:var(--surface); color:var(--ink); }
.navcaret { opacity:.55; transition:transform .25s ease; }
.navc:hover .navcaret, .navc:focus-within .navcaret { transform:rotate(180deg); }
/* full-width overlay anchored to the bar; the visible panel is centered inside
   it, so the panel position is identical for every menu. The full width also
   keeps the menu open while the mouse travels down from any item. */
/* top pulled up 12px so the hover area overlaps the nav bar's bottom padding
   (no dead zone between the item and the panel); padding-top keeps the visible
   panel 14px below. A close-delay lets the cursor cross the gap. */
.navmega { position:absolute; top:calc(100% - 12px); left:0; right:0; padding-top:26px; display:flex; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity .18s ease .12s, transform .18s ease .12s, visibility 0s linear .3s; z-index:70; }
.navc:hover .navmega, .navc:focus-within .navmega { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
.navmega-in { display:grid; grid-template-columns:1.55fr 1fr; gap:10px; width:740px; max-width:calc(100vw - 48px); padding:14px; border:1px solid var(--border-strong); border-radius:18px; background:var(--card-bg), var(--bg-2); box-shadow:var(--shadow-card); }
.navmega-links { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.megaitem { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:12px; transition:background .18s ease; }
.megaitem:hover { background:var(--surface-2); }
.megaico { flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); color:var(--blue-500); }
.megaico svg { width:18px; height:18px; }
.megaitem b { display:block; font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.megaitem i { display:block; font-size:12px; font-style:normal; color:var(--ink-3); margin-top:2px; line-height:1.35; }
.navmega-promo { display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:18px; border-radius:14px; background:var(--grad-brand); color:#fff; overflow:hidden; }
.navmega-promo-eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.navmega-promo-title { font-family:var(--font-heading); font-size:19px; line-height:1.15; font-weight:500; }
.navmega-promo-cta { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; margin-top:2px; }
.navmega-promo:hover .navmega-promo-cta { gap:9px; }
.nav-burger { display:none; }
.nav-drawer-cta { display:none; }
@media (max-width: 1000px) {
  .nav-audience { display:none !important; }
  .nav-cta { display:none !important; }
  #nav-bar.nav-open .nav-drawer-cta { display:inline-flex; align-items:center; justify-content:center; gap:7px; margin:14px 4px 4px; padding:13px 20px; border-radius:999px; background:var(--grad-brand); color:#fff; font-weight:600; font-size:15px; }
  .nav-mega { display:none; }
  .nav-burger { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:9px; border:1px solid var(--border); border-radius:10px; background:transparent; cursor:pointer; flex-shrink:0; }
  .nav-burger span { display:block; width:22px; height:2px; background:var(--ink-2); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  #nav-bar.nav-open { flex-wrap:wrap; row-gap:8px; }
  #nav-bar.nav-open .nav-mega { display:flex !important; flex-direction:column; align-items:stretch; width:100%; flex:0 0 100%; order:5; gap:0; max-height:72vh; overflow-y:auto; border-top:1px solid var(--border); margin-top:4px; padding-top:6px; }
  #nav-bar.nav-open .navc { display:block; width:100%; }
  #nav-bar.nav-open .navt { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:14px 4px 4px; pointer-events:none; }
  #nav-bar.nav-open .navcaret { display:none; }
  #nav-bar.nav-open .navmega { position:static !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; display:block !important; padding:0 0 4px; }
  #nav-bar.nav-open .navmega-in { display:block !important; width:auto; max-width:none; padding:0; background:none; border:0; box-shadow:none; }
  #nav-bar.nav-open .navmega-links { display:block !important; }
  #nav-bar.nav-open .megaitem { padding:9px 8px !important; background:none !important; border:0 !important; }
  #nav-bar.nav-open .megaico, #nav-bar.nav-open .megaitem i { display:none !important; }
  #nav-bar.nav-open .megaitem b { font-weight:500; font-size:15px; }
  #nav-bar.nav-open .navmega-promo { display:none !important; }
  #nav-bar.nav-open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  #nav-bar.nav-open .nav-burger span:nth-child(2) { opacity:0; }
  #nav-bar.nav-open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}