/* ==========================================================================
   Veyra site header — markup in partials/site-header.html (+ -focused),
   behaviour in assets/js/components/site-header.js

   Theming: the header reads --site-header-bg, so a page can tint it
   (e.g. body.theme-patient sets the warm sand canvas).
   ========================================================================== */

.site-header {
  --site-header-bg: var(--graphite-50);
  --site-header-bg-scrolled: rgba(245, 246, 243, .86);
  --site-header-pad-x: clamp(20px, 4.2vw, 60px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.theme-patient .site-header {
  --site-header-bg: var(--sand-50);
}

/* ── Utility bar ────────────────────────────────────────────────────────── */

.site-header__util {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--site-header-pad-x);
  background: var(--site-header-bg);
  border-bottom: 1px solid var(--ink-a10);
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--graphite-600);
}

.site-header__region {
  font: 400 12px/1 'Geist Mono', monospace;
  letter-spacing: .04em;
  white-space: nowrap;
}

.site-header__util-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header__util-link,
.site-header__util-link:hover {
  color: var(--graphite-600);
  text-decoration: none;
}

/* HCP / Patients segmented switch */
.audience-toggle {
  display: flex;
  padding: 2px;
  border: 1px solid var(--ink-a14);
  border-radius: var(--radius-pill);
  font-size: 13px;
}

.audience-toggle__option {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-600);
  text-decoration: none;
}
.audience-toggle__option:hover { color: var(--graphite-900); }

.audience-toggle__option[aria-current="true"] {
  background: var(--graphite-900);
  color: var(--site-header-bg);
}

/* ── Main bar ───────────────────────────────────────────────────────────── */

.site-header__bar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--site-header-pad-x);
  background: var(--site-header-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ink-a10);
  transition: background var(--dur-3);
}
.site-header.is-scrolled .site-header__bar { background: var(--site-header-bg-scrolled); }

.site-header__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--graphite-900);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__brand:hover { color: var(--graphite-900); }

.site-header__wordmark {
  font: 600 19px/1 'Geist', sans-serif;
  letter-spacing: .22em;
}

.site-header__sub {
  font: 500 10px/1 'Geist Mono', monospace;
  letter-spacing: .18em;
  color: var(--graphite-500);
}

.site-header__nav {
  display: flex;
  gap: 4px;
  height: 100%;
}

.site-header__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font: 500 16px/1 'Geist', sans-serif;
  color: var(--graphite-900);
  text-decoration: none;
}
.site-header__nav-link:hover { color: var(--graphite-900); }

/* Current-section underline */
.site-header__nav-link::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.site-header__nav-link[aria-current="page"]::after { background: var(--graphite-900); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 500 15px/1 'Geist', sans-serif;
  white-space: nowrap;
}

.site-header__action-link,
.site-header__action-link:hover {
  color: var(--graphite-900);
  text-decoration: none;
}

/* Header CTA is outlined so it never competes with the page's primary CTA (K01 · 07) */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--graphite-900);
  border-radius: var(--radius-pill);
  color: var(--graphite-900);
  text-decoration: none;
}
.site-header__cta:hover { color: var(--graphite-900); }

.site-header__menu-toggle {
  display: none;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink-a14);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
  color: var(--graphite-900);
  font: 500 15px/1 'Geist', sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.site-header__menu-toggle:hover { color: var(--graphite-900); }

/* ── Focused variant (D06) ──────────────────────────────────────────────── */

.site-header__status {
  display: flex;
  align-items: center;
  gap: 20px;
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--graphite-600);
}

.site-header__status-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leaf-500);
}

.site-header__exit {
  color: var(--graphite-900);
  font-weight: 500;
}

/* ── Mobile navigation ──────────────────────────────────────────────────── */

.site-header__mobile-nav {
  position: fixed;
  inset: 72px 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 12px 20px 120px;
  background: var(--site-header-bg);
}

.site-header__mobile-link {
  min-height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ink-a10);
  font: 500 24px/1 'Geist', sans-serif;
  letter-spacing: -.02em;
  color: var(--graphite-900);
  text-decoration: none;
}

.site-header__mobile-secondary {
  min-height: 52px;
  display: flex;
  align-items: center;
  font: 500 17px/1 'Geist', sans-serif;
  color: var(--graphite-900);
  text-decoration: none;
}

.site-header__mobile-cta {
  margin-top: 16px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--graphite-900);
  border-radius: var(--radius-pill);
  font: 500 16px/1 'Geist', sans-serif;
  color: var(--graphite-900);
  text-decoration: none;
}

.site-header__mobile-link:hover,
.site-header__mobile-secondary:hover,
.site-header__mobile-cta:hover { color: var(--graphite-900); }

@media (max-width: 959.98px) {
  .site-header__util,
  .site-header__nav,
  .site-header__actions,
  .site-header__status { display: none; }

  .site-header__menu-toggle { display: inline-flex; }
}

@media (min-width: 960px) {
  /* The overlay only exists on mobile, even if it was left open on resize */
  .site-header__mobile-nav { display: none; }
}