/**
 * The mobile nav drawer.
 *
 * Its own file because two different page designs need it. index.html,
 * bmi.html, care.html and 404.html use the .hd__* header with teaser.css;
 * app.html predates them and uses .header__* with site.css. One drawer that
 * both load beats the same 140 lines pasted into each, which is how two
 * implementations start disagreeing.
 *
 * The two designs also drop their navs at different widths — 860px and
 * 900px. The burger carries the breakpoint it belongs to as a data
 * attribute, so neither page gets a band where the nav has gone and the
 * button has not arrived.
 */

/* ---------------------------------------------------------------- *
 * MOBILE NAV — the drawer
 * ----------------------------------------------------------------
 * Below 860px the nav above is dropped, which left the header as a
 * logo and a CTA: eight sections and the two standalone pages were
 * unreachable from the top of a phone. They cannot go back on that
 * row — at 390px the bar has 101px free and the four shortest links
 * alone need 278px before gaps — so they move behind a button.
 *
 * The button and the panel are injected by teaser.js, never written
 * into the markup. Two reasons: a control that cannot work without
 * JavaScript should not exist when JavaScript has not run, and the
 * panel is cloned from each page's own <nav>, so bmi.html's six
 * links and index.html's eight stay correct without five copies of
 * the same list drifting apart.
 * ---------------------------------------------------------------- */

.hd__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: 8px;
  border: var(--hair) solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--card);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hd__burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur-control) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}

/* The bars become a cross while the panel is open, so the control
   reads as a toggle rather than two unrelated buttons. */
.hd__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.hd__scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(11, 20, 64, 0.34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-colour) var(--ease-out);
}

.hd__scrim.is-open { opacity: 1; }

.hd__drawer {
  position: fixed;
  z-index: 61;
  top: 0;
  right: 0;
  width: min(86vw, 320px);
  height: 100%;
  /* dvh so the panel is not cut off by a mobile browser's own chrome. */
  height: 100dvh;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border-left: var(--hair) solid var(--hairline);
  box-shadow: var(--shadow-card);
  transform: translateX(100%);
  transition: transform var(--dur-colour) var(--ease-out);
}

.hd__drawer.is-open { transform: none; }

.hd__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  min-height: 42px;
}

.hd__drawer-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hd__drawer a {
  display: block;
  /* 48px of target, which is the floor for a thumb. */
  padding: 13px 4px;
  font-size: 16px;
  font-weight: 560;
  color: var(--text);
  border-bottom: var(--hair) solid var(--divider);
}

.hd__drawer a:last-of-type { border-bottom: none; }

/* The section the visitor is already reading, marked the same way the
   desktop nav marks it. */
.hd__drawer a.hd__ai { color: var(--pulse-text); }

.hd__drawer .btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  text-align: center;
}

/* Each header drops its nav at its own width — the .hd__* pages at 860px,
   app.html's .header__* at 900px. The burger is stamped with the one it
   belongs to, so neither page has a band where the nav has gone and the
   button has not arrived. */
@media (max-width: 860px) {
  .hd__burger[data-bp="860"] { display: flex; }
  /* The CTA keeps its place; the button sits beside it rather than
     replacing it, because joining the waitlist is still the one thing
     the header is asking for. */
  .hd .btn--sm { margin-left: auto; }
}

@media (max-width: 899px) {
  .hd__burger[data-bp="900"] { display: flex; }
}

/* Nothing of the drawer survives above its breakpoint, including a panel
   left open when a phone is rotated or a window dragged wider. */
@media (min-width: 861px) {
  .hd__burger[data-bp="860"] { display: none !important; }
}

@media (min-width: 900px) {
  .hd__burger[data-bp="900"] { display: none !important; }
}

/* The panel and scrim are removed by the script on a breakpoint change,
   but a stylesheet that also says so costs nothing and covers the frame
   before the listener runs. */
@media (min-width: 861px) {
  .hd__scrim, .hd__drawer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hd__drawer, .hd__scrim, .hd__burger span { transition: none; }
}