/* THE SITE HEADER AND MENU, ONE SOURCE.
   Markup: scripts/site-header/partial.html, written into every public page by
   scripts/site-header/sync.mjs. Behaviour: site-header.js. Style: this file,
   linked last in <head> on every page with the header.

   Howard, 24 Sep 2026, decision 1a: every public page gets the homepage's
   header. At desktop the mark, the row (Home, Features, For HCPs, About Us,
   FAQ, Portal log in) and the green "Register your interest" pill; the burger
   holds the pages the row does not (Research, Troubleshooting, Repair and the
   legal row), so nothing is offered twice. Below 1080px the row folds into
   the burger and the menu lists everything. Decision 2a: the pill keeps dark
   ink on the lighter green #3FB67E.

   The pages still carry pasted rules from the old header (a bare
   `nav { position: fixed; ... }` on most of them, `header { ... }` on the
   homepage), so every rule here carries `body` and a class, and resets what
   those rules would otherwise paint onto the new elements.

   U-049 every control at least 44x44px. U-067 no capitals set by CSS.
   U-070 labels and buttons at weight 500 or lighter. U-061 one path per
   action. Held by tests/every-control-is-reachable-and-full-size.mjs,
   tests/the-header-row-reads-in-the-expected-order.mjs and
   tests/every-page-carries-the-one-site-header.mjs. */

body header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 210;
  margin: 0;
  padding: 0;
  background: rgba(253, 250, 245, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(154, 123, 79, 0.2);
  text-align: left;
  min-height: 0;
  transition: none;
}
body header.site-header .sh-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 16px;
}
body header.site-header a.nav-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  line-height: 0;
  border-bottom: 0;
  text-decoration: none;
  flex: none;
}
body header.site-header a.nav-wordmark img { height: 52px; width: auto; display: block; }

/* The row. Reset first: most pages style a bare <nav> as their old fixed bar. */
body header.site-header nav.sh-row {
  position: static;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  z-index: auto;
  width: auto;
}
body header.site-header nav.sh-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-family: 'Inter', 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #5A524A;
  text-decoration: none;
  border: 0;
  background: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
body header.site-header nav.sh-row a:hover { color: #7A5F38; }
body header.site-header nav.sh-row a[aria-current="page"] { color: #1F1B17; text-decoration: underline; text-decoration-color: #9A7B4F; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* The two doors out are one pair at one height: Portal log in outlined, the
   green pill filled. */
body header.site-header nav.sh-row a.sh-portal {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #1F1B17;
  border-radius: 999px;
  color: #1F1B17;
}
body header.site-header nav.sh-row a.sh-portal:hover { background: #1F1B17; color: #FDFAF5; }

body header.site-header .nav-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  margin: 0;
  border-radius: 999px;
  background: #3FB67E;
  color: #1F1B17;
  font-family: 'Inter', 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  flex: none;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
body header.site-header .nav-order:hover {
  background: #2AA06A;
  color: #1F1B17;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37, 35, 34, 0.18);
}
/* No pill on this page: the burger still sits at the right-hand edge. */
body header.site-header nav.sh-row + .burger-btn { margin-left: 16px; }

body header.site-header .burger-btn {
  position: static;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
body header.site-header .burger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #9A7B4F;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body header.site-header .burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body header.site-header .burger-btn.open span:nth-child(2) { opacity: 0; }
body header.site-header .burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The slide-out. It opens under the header, which stays on top with the
   burger turned into the close control. */
body .menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.6);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
body .menu-overlay.open { opacity: 1; visibility: visible; }
body .menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  /* Sized to what it holds, so the dimmed page shows beneath it and a tap
     there closes the menu (R-0268, U-047). */
  bottom: auto;
  max-height: 100vh;
  max-height: 100dvh;
  left: auto;
  width: 100%;
  max-width: 320px;
  background: #F5F0E8;
  z-index: 205;
  display: flex;
  flex-direction: column;
  padding: 5.5rem 2rem 2rem;
  border-bottom-left-radius: 12px;
  box-shadow: 0 18px 40px rgba(31, 27, 23, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}
body .menu-panel.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
body .menu-panel > * { flex-shrink: 0; }
body .menu-panel nav.menu-nav {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  z-index: auto;
  flex: none;
}
body .menu-panel .menu-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 0;
  font-family: 'Inter', 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: center;
  color: #252322;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(154, 123, 79, 0.2);
}
body .menu-panel .menu-nav a:hover { color: #7A5F38; }
/* Three groups, as the full header shows them: the row's pages, the owner's
   pages, then the door out. A gap sits between groups (U-022). */
body .menu-panel .menu-nav a.sh-group { margin-top: 16px; }
/* Portal log in keeps its outlined pill in the menu too, the pair to the
   green pill above it (U-057). */
body .menu-panel .menu-nav a.sh-portal-menu {
  min-height: 48px;
  margin-top: 16px;
  border: 1px solid #1F1B17;
  border-radius: 999px;
  color: #1F1B17;
}
body .menu-panel .menu-nav a.sh-portal-menu:hover { background: #1F1B17; color: #FDFAF5; }
body .menu-panel .menu-nav a[aria-current="page"] { color: #1F1B17; text-decoration: underline; text-decoration-color: #9A7B4F; text-decoration-thickness: 2px; text-underline-offset: 6px; }
body .menu-panel .menu-legal-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 1.5rem;
}
body .menu-panel .menu-legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-family: 'Inter', 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #6B6459;
  text-decoration: none;
  border: 0;
}
body .menu-panel .menu-legal:hover { color: #252322; }
body .menu-panel .menu-legal[aria-current="page"] { color: #1F1B17; text-decoration: underline; text-decoration-color: #9A7B4F; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Desktop: the row is on screen, so the menu does not repeat it, and the
   three pages and legal row it does hold sit in a card under the burger
   rather than a full-height drawer that is mostly empty (R-0268). */
@media (min-width: 1080px) {
  body .menu-panel .menu-nav a.sh-in-row { display: none; }
  body .menu-panel {
    top: 72px;
    bottom: auto;
    /* Right edge on the burger's right edge, never past the page column. */
    right: calc((100vw - min(100vw, 1280px)) / 2 + clamp(1.25rem, 4vw, 3rem));
    width: 320px;
    max-height: calc(100vh - 96px);
    padding: 1rem 1.5rem 1.25rem;
    border: 1px solid rgba(154, 123, 79, 0.2);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(31, 27, 23, 0.16);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s;
  }
  body .menu-panel.open { transform: none; opacity: 1; }
  body .menu-panel .menu-legal-row { margin-top: 1rem; }
  body .menu-overlay { background: rgba(26, 23, 20, 0.25); }
}

/* While the menu is open nothing paints over it: the cookie banner waits
   until it closes (U-024). !important is load-bearing: consent.js shows the
   banner with an inline style.display = 'block', which no stylesheet rule
   outranks otherwise. */
body:has(.menu-panel.open) #cookieBanner { display: none !important; }
/* Below 1080px the row folds into the menu. */
@media (max-width: 1079px) {
  body header.site-header nav.sh-row { display: none; }
  body header.site-header .nav-order { margin-left: auto; }
  body header.site-header nav.sh-row + .burger-btn { margin-left: auto; }
}
@media (max-width: 560px) {
  body header.site-header .sh-inner { gap: 10px; }
  body .menu-panel { max-width: 100%; border-bottom-left-radius: 0; }
}
/* The pill keeps the homepage buttons' 15px at every width; on the
   narrowest phones the room comes from the mark and the padding instead. */
@media (max-width: 360px) {
  body header.site-header .sh-inner { gap: 8px; }
  body header.site-header a.nav-wordmark img { height: 40px; }
  /* The one place the 24px side padding gives way (U-143): at 360px and under the pill, the mark and the burger share 280px. */
  body header.site-header .nav-order:not(#k):not(#k) { padding: 0 12px; }
}
/* A short screen: the menu tightens rather than scrolling where it can. */
@media (max-height: 700px) and (max-width: 1079px) {
  body .menu-panel { padding-top: 4.5rem; padding-bottom: 1rem; }
  body .menu-panel .menu-nav a.sh-group,
  body .menu-panel .menu-nav a.sh-portal-menu { margin-top: 8px; }
  body .menu-panel .menu-legal-row { margin-top: 0.75rem; }
  body .menu-panel .menu-nav a { min-height: 44px; padding: 0.4rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  body .menu-panel, body .menu-overlay, body header.site-header .burger-btn span, body header.site-header .nav-order { transition: none; }
  body header.site-header .nav-order:hover { transform: none; }
}
@media print {
  body header.site-header .burger-btn, body .menu-panel, body .menu-overlay { display: none !important; }
}

/* ==========================================================================
   THE BUTTONS, ONE SOURCE (U-143, Howard, 30 Sep 2026: "Just give them some
   'depth' and 'physicality'"). Linked last on every public page, so this is
   the only place a primary or secondary button's shape, depth and motion is
   set. Colours stay per U-057 and are each button's own; this block never
   sets a fill.

   Primary: 48px tall, 24px side padding, pill (radius = height / 2), the
   label at weight 500 in sentence case (U-070, U-067), a lit top edge (inset
   1px highlight) and a soft shadow falling below. Hover changes colour and
   shadow over 200ms; a press sinks 1px inside 120ms. No idle pulse, glow or
   bounce, and nothing moves at all under prefers-reduced-motion.
   Edge 3:1: the fill alone is 2.46:1 against the cream, so each primary
   carries a 1px edge in --k-btn-edge (#248A5A, 4.15:1 on #FDFAF5).
   Label contrast is each button's own pairing, all 4.5:1 or better.
   Secondary: same shape and press, a quieter shadow.
   Submit: kenButton.busy(btn) greys it and shows a spinner in the icon slot,
   kenButton.done(btn) turns the spinner into a tick, kenButton.reset(btn)
   returns it (site-header.js). One icon at most, 10px from the label (gap).
   The :not(#k) lifts every rule above the pages' own pasted button rules,
   which are single-class and load before this file.
   Held by tests/the-buttons-have-depth.mjs. */
body {
  --k-btn-h: 48px;
  --k-btn-edge: #248A5A;
  --k-btn-lit: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --k-btn-drop: 0 8px 24px rgba(31, 27, 23, 0.14);
  --k-btn-drop-hover: 0 10px 26px rgba(31, 27, 23, 0.2);
  --k-btn-drop-press: 0 3px 10px rgba(31, 27, 23, 0.16);
}
body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn:not(.secondary):not(.btn-ghost)):not(#k),
body :is(.btn-ghost, .btn.secondary, .sh-portal):not(#k) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: var(--k-btn-h);
  padding: 0 24px;
  border-radius: calc(var(--k-btn-h) / 2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn:not(.secondary):not(.btn-ghost)):not(#k) {
  font-size: 0.9375rem;
  border: 1px solid var(--k-btn-edge);
  box-shadow: var(--k-btn-lit), var(--k-btn-drop);
}
body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn:not(.secondary):not(.btn-ghost)):not(#k):hover {
  box-shadow: var(--k-btn-lit), var(--k-btn-drop-hover);
  transform: none;
}
body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn:not(.secondary):not(.btn-ghost)):not(#k):active {
  transform: translateY(1px);
  box-shadow: var(--k-btn-lit), var(--k-btn-drop-press);
}
body :is(.btn-ghost, .btn.secondary, .sh-portal):not(#k) {
  box-shadow: 0 2px 8px rgba(31, 27, 23, 0.08);
}
body :is(.btn-ghost, .btn.secondary, .sh-portal):not(#k):hover { transform: none; }
body :is(.btn-ghost, .btn.secondary, .sh-portal):not(#k):active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(31, 27, 23, 0.1);
}
/* The chat panel's Send is the dark fill, so its edge is dark. */
body .ken-chat-send:not(#k) { --k-btn-edge: #252322; }
/* Busy: greyed and inert until the server answers (U-140), a spinner in the
   icon slot. Done: the spinner becomes a tick. */
body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn:not(.secondary):not(.btn-ghost)):not(#k)[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
  cursor: progress;
}
body :is(.eoi-submit, .btn, .cta-btn, .ken-chat-send):not(#k)[aria-busy="true"]::after,
body :is(.eoi-submit, .btn, .cta-btn, .ken-chat-send):not(#k).is-done::after {
  content: "";
  order: -1;
  flex: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
}
body :is(.eoi-submit, .btn, .cta-btn, .ken-chat-send):not(#k)[aria-busy="true"]::after {
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: k-btn-spin 800ms linear infinite;
}
body :is(.eoi-submit, .btn, .cta-btn, .ken-chat-send):not(#k).is-done::after {
  width: 6px;
  height: 11px;
  margin: 0 5px 3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes k-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn, .btn-ghost, .sh-portal):not(#k) { transition: none; }
  body :is(.nav-order, .btn-primary, .cta-particle, .cta-btn, .home-btn, .eoi-submit, .ken-chat-send, .btn, .btn-ghost, .sh-portal):not(#k):active { transform: none; }
  body :is(.eoi-submit, .btn, .cta-btn, .ken-chat-send):not(#k)[aria-busy="true"]::after { animation: none; border-right-color: currentColor; }
}