/* ═══════════════════════════════════════════════════════════════════
   THE NAV, ONCE, FOR EVERY PAGE.

   Until now the site carried two of these. The storefront, /coaching
   and /apply had a flat text bar; /contact, /privacy, /terms,
   /consumer-health-data and the old homepage had the pill bar with the
   ransom-note logo. /in-person had the flat markup with none of the
   rules that style it, because that page loads no shared stylesheet,
   so its nav rendered as two lines of 16px body text in the corner.

   One file, linked by all eight pages, is the fix. It reads only from
   the palette variables, and every page defines those: the five pages
   with their own inline CSS declare the full set, and site.css
   declares it for the other three.

   THE OLD BAR HAD A DEAD ZONE AND THIS ONE DOES NOT. Its links hid at
   900px but its Menu button only appeared at 768px, so a window
   between 769px and 900px showed no links and no button. Both
   breakpoints are --nav-break below, so the button appears in the same
   breath the links leave.
   ═══════════════════════════════════════════════════════════════════ */

/* The bar's own height, declared rather than discovered, so any page can
   clear a fixed bar with one calc instead of a guess. The logo is taller
   than this on purpose and overhangs it. */
:root{ --nav-break:900px; --nav-h:clamp(66px,5.6vw,80px); }

#main-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,248,237,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:2.5px solid var(--black);
  /* The logo overhangs the bar, so this may not become hidden. */
  overflow:visible;
}

.nav-inner{
  max-width:1400px; margin:0 auto; padding:14px 28px; min-height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* ── THE WORDMARK ────────────────────────────────────────────────────
   logo.png is the ransom-note CHEMISTRY, cut-paper letters at
   1024x576 with transparency. It is set taller than the bar and pulled
   back with negative margins so it breaks the rule at top and bottom,
   which is the whole effect. The height is fluid: 166px is right on a
   desktop and far too tall on a phone, and the negative margin tracks
   it so the overhang stays proportional. */
.nav-logo{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.nav-logo img{
  height:clamp(96px,11.5vw,166px);
  width:auto; object-fit:contain;
  margin:clamp(-58px,-4vw,-32px) 0;
  position:relative; z-index:1001;
  /* Clicks belong to the anchor, not to an image that overhangs it. */
  pointer-events:none;
}

.nav-links{ display:flex; align-items:center; gap:10px; }

/* ── THE PILLS ───────────────────────────────────────────────────────
   Flat fill, 2.5px black, hard offset shadow, and each one tilted a
   degree or so off straight. The tilt is set per link in the markup
   rather than here, because the point is that no two match. */
.nav-pill{
  display:inline-block; padding:8px 20px;
  border:2.5px solid var(--black); border-radius:9999px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  color:var(--black); cursor:pointer; white-space:nowrap;
  box-shadow:3px 3px 0 var(--black);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             background-color .25s ease, box-shadow .25s ease;
}
/* Straightening on hover is the interaction: the tilt is the rest
   state, and touching one pulls it square. */
.nav-pill:hover{ transform:scale(1.08) rotate(0deg) !important; box-shadow:5px 5px 0 var(--black); }
.nav-pill:focus-visible{ outline:3px solid var(--black); outline-offset:3px; }

/* The dark pill. NOTHING USES IT TODAY. It carried Book Now, which
   came out of the nav because booking belongs on /in-person, where
   there are nine links to it already. The rule stays because it is one
   line and it is how a single emphasised pill gets made: a nav that
   needs one again does not have to rediscover the treatment. */
.nav-pill--ink{ background:var(--black); color:var(--cream); }

/* The current page's own pill. The tilt and fill already vary from
   pill to pill, so colour cannot carry this; the underline can. */
.nav-pill[aria-current="page"]{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }

/* ── THE MENU BUTTON ─────────────────────────────────────────────── */
.nav-toggle{
  display:none; padding:8px 20px;
  border:2.5px solid var(--black); border-radius:9999px;
  background:var(--black); color:var(--cream);
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  box-shadow:3px 3px 0 var(--black);
}
.nav-toggle:focus-visible{ outline:3px solid var(--black); outline-offset:3px; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-block; }

  .nav-links.is-open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:10px;
    background:var(--cream); border-bottom:2.5px solid var(--black);
    padding:18px 20px 22px;
  }
  /* Straight and full width in the panel. The tilt is for the bar,
     where the pills sit in a row and the angles read against each
     other. Stacked, they just look crooked. */
  .nav-links.is-open .nav-pill{
    transform:none !important; text-align:center;
    font-size:15px; padding:13px 20px;
  }
}

/* The bar is fixed, so the first thing on every page has to clear it.
   Pages with their own layout set this themselves; this is the floor. */
.nav-spacer{ height:var(--nav-h); }