/* ============================================================
   NEXORA · Layout / Header Dock — Apple Minimal
   Floating white (light) / black (dark) dock, no glass,
   no glow, no borders — pure minimal like Apple nav.
   ============================================================ */

:root {
  --dock-top: clamp(0.7rem, 1.4vw, 1.1rem);
  --dock-width: 74rem;
  --dock-inset: clamp(1rem, 4vw, 2rem);
  --dock-height: 64px;
  --dock-height-scrolled: 56px;
  --dock-radius: 16px;
  --dock-pad: clamp(0.6rem, 1.4vw, 0.9rem);
  --dock-glass: var(--bg-elevated);
  --dock-glass-scrolled: var(--bg-elevated);
  --dock-blur: none;
  --dock-blur-scrolled: none;
  --dock-edge: none;
  --dock-shadow: none;
  --dock-shadow-scrolled: none;
}

[data-theme="light"] {
  --dock-glass: #ffffff;
  --dock-glass-scrolled: #ffffff;
  --dock-edge: none;
  --dock-shadow: none;
  --dock-shadow-scrolled: none;
}

/* ---------- 1 · Shell ----------------------------------- */

.site-header, .site-header.is-scrolled {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: var(--dock-top);
  background: none;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}

/* ---------- 2 · The dock — flat Apple pill ------------- */

.site-header .nav {
  pointer-events: auto;
  position: relative;
  width: min(100% - (var(--dock-inset) * 2), var(--dock-width));
  margin-inline: auto;
  height: var(--dock-height);
  padding-inline: var(--dock-pad) var(--dock-pad);
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  border-radius: var(--dock-radius);
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border: none;
  transition: height var(--dur) var(--ease-out), width var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

[data-theme="dark"] .site-header .nav { background: #000000; }

.site-header .nav::before { content: none; display: none; }
[data-theme="light"] .site-header .nav::before { background: none; }
.site-header .nav > * { position: relative; z-index: 1; }

/* Condensed (scrolled) state — same flat look */
.site-header.is-scrolled .nav {
  height: var(--dock-height-scrolled);
  width: min(100% - (var(--dock-inset) * 2), calc(var(--dock-width) - 6rem));
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

[data-theme="dark"] .site-header.is-scrolled .nav { background: #000000; }

/* ---------- 3 · Brand ------------------------------------ */

.site-header .brand { gap: 0.55rem; }
.site-header .brand .icon { width: 30px; height: 30px; filter: none; transition: transform var(--dur) var(--ease-spring); }
.site-header .brand:hover .icon { transform: none; }
.site-header .brand-word { font-size: 1.02rem; letter-spacing: 0.2em; }

/* ---------- 4 · Links: minimal --------------------------- */

.site-header .nav-links { gap: 0.15rem; padding: 0.2rem; border-radius: var(--radius-full); }
.site-header .nav-link {
  padding: 0.48rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.89rem;
  color: var(--text-2);
  background: transparent;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out);
}
.site-header .nav-link::after { display: none; }
.site-header .nav-link:hover { color: var(--text-1); background: #f5f5f7; }
.site-header .nav-link.is-active { color: var(--text-1); background: #f5f5f7; box-shadow: none; }
[data-theme="dark"] .site-header .nav-link:hover,
[data-theme="dark"] .site-header .nav-link.is-active { background: #1c1c1e; }
[data-theme="light"] .site-header .nav-link:hover { background: #f5f5f7; }
[data-theme="light"] .site-header .nav-link.is-active { background: #f5f5f7; }

/* ---------- 5 · Actions ---------------------------------- */

.site-header .nav-actions { gap: 0.5rem; }
.site-header .theme-toggle, .site-header .nav-burger {
  width: 38px; height: 38px; border-radius: 10px;
  background: #f5f5f7; box-shadow: none; border: none;
}
[data-theme="dark"] .site-header .theme-toggle,
[data-theme="dark"] .site-header .nav-burger { background: #1c1c1e; }
.site-header .theme-toggle:hover, .site-header .nav-burger:hover { background: #e8e8ed; box-shadow: none; }
[data-theme="dark"] .site-header .theme-toggle:hover,
[data-theme="dark"] .site-header .nav-burger:hover { background: #2c2c2e; }
[data-theme="light"] .site-header .theme-toggle,
[data-theme="light"] .site-header .nav-burger { background: #f5f5f7; }
.site-header .nav-cta-desktop { padding: 0.6rem 1.15rem; border-radius: 12px; }

/* ---------- 6 · Scroll progress — thin minimal ---------- */

.site-header .scroll-progress {
  position: absolute;
  left: 50%; bottom: 6px; transform: translateX(-50%);
  width: min(100% - (var(--dock-inset) * 2) - 2.6rem, calc(var(--dock-width) - 2.6rem));
  height: 2px; border-radius: var(--radius-full); overflow: hidden; opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  background: transparent;
}
.site-header.is-scrolled .scroll-progress {
  opacity: 1;
  width: min(100% - (var(--dock-inset) * 2) - 2.6rem, calc(var(--dock-width) - 8.6rem));
}
.site-header .scroll-progress span { border-radius: var(--radius-full); background: var(--text-1); box-shadow: none; }

/* ---------- 7 · Responsive -------------------------------- */

@media (max-width: 980px) {
  :root { --dock-height: 58px; --dock-height-scrolled: 54px; --dock-inset: clamp(0.75rem, 3.5vw, 1.25rem); }
  .site-header.is-scrolled .nav { width: min(100% - (var(--dock-inset) * 2), var(--dock-width)); }
  .site-header .scroll-progress, .site-header.is-scrolled .scroll-progress {
    width: min(100% - (var(--dock-inset) * 2) - 2rem, calc(var(--dock-width) - 2rem));
  }
}

@media (max-width: 560px) {
  :root { --dock-top: 0.6rem; --dock-height: 54px; --dock-height-scrolled: 52px; --dock-radius: 14px; }
  .site-header .brand .icon { width: 27px; height: 27px; }
  .site-header .brand-word { font-size: 0.92rem; letter-spacing: 0.16em; }
  .site-header .theme-toggle, .site-header .nav-burger { width: 36px; height: 36px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .nav { background: var(--bg-elevated); }
}