/* Header v2: compact three-zone pill (brand | links ... tools | login, call to action).
   Loaded last on every page, after ui.css. Every rule is scoped to .site-header so it beats
   light.css (unscoped .nav, .brand) and chrome.css (.site-header .nav) by order or specificity.
   Plain CSS, existing tokens only. */

/* ---------- Pill ---------- */
.site-header .wrap { max-width: 1120px; }
.site-header .nav {
  gap: 4px; height: 52px; padding: 0 6px 0 16px;
  border: 1px solid var(--border, #e3e8e6);
  background-color: var(--surface-card, #ffffff);
  background-color: color-mix(in srgb, var(--surface-card, #ffffff) 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(11, 12, 14, 0.06), 0 12px 32px -16px rgba(11, 12, 14, 0.22);
}
/* Scrolled (motion.css adds .is-scrolled on the homepage): a little tighter and more glass. */
.site-header.is-scrolled .nav {
  height: 48px; margin: 2px 0;
  background-color: color-mix(in srgb, var(--surface-card, #ffffff) 90%, transparent);
}

/* ---------- Brand ---------- */
.site-header .brand { flex: none; margin-right: 0; gap: 10px; }
.site-header .brand img { width: 30px; height: 30px; }
.site-header .brand span { letter-spacing: -0.02em; }

/* ---------- Links: directly after the brand, behind a hairline divider ---------- */
.site-header .nav-links { align-items: center; gap: 2px; }
.site-header .nav-links::before {
  content: ""; flex: none; align-self: center; width: 1px; height: 18px; margin: 0 6px 0 14px;
  background: var(--border, #e3e8e6);
}
.site-header .nav-links a {
  position: relative; padding: 8px 10px; border-radius: 10px;
  font: 500 14px/20px var(--font-sans); color: var(--ink-muted, #56615c); white-space: nowrap;
}
/* Active page: ink text and a small mint dot instead of a filled chip. */
.site-header .nav-links a[aria-current] { color: var(--ink, #0b0c0e); background: transparent; }
.site-header .nav-links a[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 9999px; background: var(--mint-ink, #0a7f58); pointer-events: none;
}
.site-header .nav-links a:hover { color: var(--ink, #0b0c0e); background: var(--surface-sunken, #eef2f0); }

/* ---------- Right zone: language, then divider, login and the call to action ---------- */
.site-header .nav-tools { margin-left: auto; }
.site-header .nav-lang select { min-height: 36px; border-radius: 10px; }
.site-header .nav-lang .vo-dd .vo-dd-trigger { min-height: 36px; border-radius: 10px; }
.site-header .nav-menu-btn { border-radius: 10px; }

.site-header .nav > .nav-login { position: relative; flex: none; white-space: nowrap; min-height: 36px; margin-left: 9px; border-radius: 10px; }
.site-header .nav > .nav-login::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 18px; margin-top: -9px;
  background: var(--border, #e3e8e6); pointer-events: none;
}
/* Icon-only login (ui.css, 861-1200px): square to the new height. */
@media (max-width: 1200px) {
  .site-header .nav > .nav-login { width: 36px; }
}

/* ---------- Call to action: a pill inside the pill ---------- */
.site-header .nav > .btn-primary {
  flex: none; white-space: nowrap;
  min-height: 40px; padding: 0 16px; border-radius: 9999px;
  background-color: var(--mint, #47fabe); color: var(--on-mint, #0b0c0e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(10, 127, 88, 0.22);
}
.site-header .nav > .btn-primary:hover {
  color: var(--on-mint, #0b0c0e); transform: none;
  background-color: color-mix(in srgb, var(--mint, #47fabe) 90%, var(--mint-ink, #0a7f58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(10, 127, 88, 0.3), 0 6px 16px -6px rgba(10, 127, 88, 0.35);
}
/* Same press as ui.css; restated because the hover rule above is more specific. */
.site-header .nav > .btn-primary:active { transform: translateY(1px); }
.site-header .nav > .btn-primary span[aria-hidden] { display: inline-block; transition: transform 200ms var(--vo-ease, ease); }
.site-header .nav > .btn-primary:hover span[aria-hidden] { transform: translateX(2px); }

/* ---------- Touch: keep 44px targets on coarse pointers ---------- */
@media (pointer: coarse) {
  .site-header .nav-lang .vo-dd .vo-dd-trigger, .site-header .nav > .nav-login, .site-header .nav > .btn-primary { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 1200px) {
  .site-header .nav > .nav-login { width: 44px; }
}

/* ---------- Small screens: room for the square menu button at the round end ---------- */
@media (max-width: 560px) {
  .site-header .nav { padding-right: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-header .nav > .btn-primary:active { transform: none; }
  .site-header .nav > .btn-primary span[aria-hidden] { transition: none; }
  .site-header .nav > .btn-primary:hover span[aria-hidden] { transform: none; }
}