/* =====================================================================
   SITE HEADER — the ONE shared navigation bar, used by every page.

   Rendered by assets/js/site-header.js; styled only here. This file is
   deliberately self-contained: it carries its own colour tokens (the same
   values the marketing shell defines in assets/css/styles.css) so it renders
   identically on pages that load styles.css and on pages that load the
   product stylesheet (styles/demo.css), which define different token sets.

   Do NOT restyle the header from a page stylesheet. The "See Your Eye" page
   used to ship its own copy of this bar (smaller, no dark logo, a stray
   wordmark, a "Local demo" badge, a different theme control) - that drift is
   exactly what this file exists to prevent.
   ===================================================================== */

:root {
  --site-nav-h: 73px;                       /* 1rem + 40px logo + 1rem + 1px rule; pages offset their content by this */
  --hdr-bg: rgba(250, 246, 241, 0.92);
  --hdr-border: rgba(114, 47, 55, 0.10);
  --hdr-shadow: none;
  --hdr-link: #475569;
  --hdr-link-active: #722F37;
  --hdr-link-glow: rgba(114, 47, 55, 0.30);
  --hdr-hamburger: #722F37;
  --hdr-overlay-bg: #FAF6F1;
  --hdr-overlay-link: #475569;
  --hdr-overlay-active: #722F37;
  --hdr-toggle-track: #e8e0d5;
  --hdr-toggle-knob: #ffffff;
  --hdr-toggle-sun: #D4A853;
  --hdr-toggle-moon: #ffffff;
  --hdr-logo-filter: drop-shadow(0 0 6px rgba(160, 90, 90, 0.25)) drop-shadow(0 0 12px rgba(140, 75, 75, 0.15));
}
[data-theme="dark"] {
  --hdr-bg: rgba(26, 15, 16, 0.92);
  --hdr-border: rgba(61, 36, 38, 0.50);
  --hdr-shadow: 0 4px 20px rgba(240, 200, 110, 0.08);
  --hdr-link: #C4B8B0;
  --hdr-link-active: #F0C86E;
  --hdr-link-glow: rgba(240, 200, 110, 0.40);
  --hdr-hamburger: #F0C86E;
  --hdr-overlay-bg: #12090A;
  --hdr-overlay-link: #C4B8B0;
  --hdr-overlay-active: #F0C86E;
  --hdr-toggle-track: #F0C86E;
  --hdr-toggle-knob: #ffffff;
  --hdr-toggle-sun: #ffffff;
  --hdr-toggle-moon: #722F37;
  /* the dark-mode logo variant: the maroon knot is inverted to gold and re-lit */
  --hdr-logo-filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.95)
                     drop-shadow(0 0 6px rgba(240, 200, 110, 0.3)) drop-shadow(0 0 12px rgba(245, 217, 138, 0.2));
}

/* ---- bar ---- */
nav.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: auto;
  background: var(--hdr-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hdr-border);
  box-shadow: var(--hdr-shadow);
  padding: 1rem 3rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  transition: background 0.4s ease;
  box-sizing: border-box;
  font-family: 'DM Sans', system-ui, sans-serif;
}
nav.site-header *, nav.site-header *::before, nav.site-header *::after { box-sizing: border-box; }
nav.site-header ul { margin: 0; padding: 0; }

/* ---- logo ---- */
nav.site-header .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
}
nav.site-header .logo a {
  display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: inherit;
}
nav.site-header .logo img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease, filter 0.4s ease;
  filter: var(--hdr-logo-filter);
}
nav.site-header .logo a:focus-visible { outline: 2px solid var(--hdr-link-active); outline-offset: 4px; border-radius: 4px; }

/* ---- links ---- */
nav.site-header .nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}
nav.site-header .nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
}
nav.site-header .nav-links a {
  text-decoration: none;
  color: var(--hdr-link);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}
nav.site-header .nav-links a:hover,
nav.site-header .nav-links a.active {
  color: var(--hdr-link-active);
  text-shadow: 0 0 20px var(--hdr-link-glow);
}
nav.site-header .nav-links a:focus-visible { outline: 2px solid var(--hdr-link-active); outline-offset: 4px; border-radius: 2px; }

/* ---- hamburger ---- */
nav.site-header .hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 28px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1005;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
nav.site-header .hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--hdr-hamburger);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
nav.site-header .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
nav.site-header .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.site-header .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
nav.site-header .hamburger:focus-visible { outline: 2px solid var(--hdr-link-active); outline-offset: 4px; border-radius: 2px; }

/* ---- mobile overlay ---- */
nav.site-header .nav-links.mobile-open {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--hdr-overlay-bg);
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 0;
  z-index: 1004;
  padding: 0;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
nav.site-header .nav-links.mobile-open::-webkit-scrollbar { display: none; }
nav.site-header .nav-links.mobile-open li {
  border: none;
  width: auto;
  text-align: center;
  opacity: 0;
  animation: siteHeaderFadeInUp 0.5s ease forwards;
}
nav.site-header .nav-links.mobile-open li:nth-child(1) { animation-delay: 0.05s; }
nav.site-header .nav-links.mobile-open li:nth-child(2) { animation-delay: 0.1s; }
nav.site-header .nav-links.mobile-open li:nth-child(3) { animation-delay: 0.15s; }
nav.site-header .nav-links.mobile-open li:nth-child(4) { animation-delay: 0.2s; }
nav.site-header .nav-links.mobile-open li:nth-child(5) { animation-delay: 0.25s; }
nav.site-header .nav-links.mobile-open li:nth-child(6) { animation-delay: 0.3s; }
nav.site-header .nav-links.mobile-open li:nth-child(7) { animation-delay: 0.35s; }
@keyframes siteHeaderFadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
nav.site-header .nav-links.mobile-open a {
  font-size: 1.6rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  display: block;
  padding: 0.9rem 3rem;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  color: var(--hdr-overlay-link);
  letter-spacing: 0.02em;
}
nav.site-header .nav-links.mobile-open a:hover,
nav.site-header .nav-links.mobile-open a:active { color: var(--hdr-overlay-active); transform: scale(1.05); }
nav.site-header .nav-links.mobile-open a.active { color: var(--hdr-overlay-active); font-weight: 600; }

/* ---- theme toggle (the slider) ---- */
nav.site-header .theme-toggle {
  position: relative;
  width: 52px;
  height: 28px;
  background: var(--hdr-toggle-track);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
  padding: 0;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
}
nav.site-header .theme-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--hdr-toggle-knob);
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] nav.site-header .theme-toggle::before { transform: translateX(24px); }
nav.site-header .theme-toggle:focus-visible { box-shadow: 0 0 0 3px var(--hdr-link-glow); }
nav.site-header .theme-toggle-icons {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  pointer-events: none;
}
nav.site-header .theme-toggle-icons svg { width: 14px; height: 14px; display: block; }
nav.site-header .sun-icon  { color: var(--hdr-toggle-sun); }
nav.site-header .moon-icon { color: var(--hdr-toggle-moon); }

nav.site-header .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- responsive (values mirror the marketing shell's breakpoints) ---- */
@media (max-width: 1200px) {
  nav.site-header .nav-links { gap: 1.4rem; }
  nav.site-header .nav-links a { font-size: 0.85rem; }
}
@media (max-width: 1024px) {
  :root { --site-nav-h: 69px; }
  nav.site-header {
    padding: 1rem 1.5rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }
  nav.site-header .nav-links { display: none; }
  nav.site-header .hamburger {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  nav.site-header .theme-toggle { width: 44px; height: 24px; border-radius: 12px; }
  nav.site-header .theme-toggle::before { width: 20px; height: 20px; }
  [data-theme="dark"] nav.site-header .theme-toggle::before { transform: translateX(20px); }
  nav.site-header .theme-toggle-icons svg { width: 12px; height: 12px; }
  nav.site-header .nav-right { gap: 1.25rem; }
}
@media (max-width: 480px) {
  :root { --site-nav-h: 57px; }
  nav.site-header {
    padding: 0.75rem 1rem;
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }
  nav.site-header .logo img { height: 32px; width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  nav.site-header .nav-links.mobile-open li { animation: none; opacity: 1; }
  nav.site-header .theme-toggle::before, nav.site-header .logo img, nav.site-header .nav-links a { transition: none; }
}