/* =========================================================
   header.css
   Logo + nav, in their own bar above the scene.
   ========================================================= */

.site-header {
  position: relative;
  /* Must clear .nav-backdrop's z-index (30, mobile.css) — the
     backdrop is a page-level sibling, not a header descendant,
     but .nav-toggle and .site-nav live inside this header. Since
     z-index only competes within the same stacking context, a
     header z-index below the backdrop's traps the toggle button
     (and the slide-out panel itself) underneath it once the
     backdrop fades in — the menu opens fine but the toggle
     becomes unclickable to close it again. */
  z-index: 41;
  width: 100%;
}

.logo {
  display: block;
  width: clamp(8rem, 6rem + 7vw, 12.5rem);
  flex-shrink: 0;
}

.logo__mark {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 50%;
}

@keyframes logo-jiggle {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-6deg); }
  35%  { transform: rotate(5deg); }
  55%  { transform: rotate(-3deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* One jiggle per hover/focus — not a loop. Default
   animation-iteration-count is already 1, so re-entering
   hover naturally replays it once each time. */
.logo:hover .logo__mark,
.logo:focus-visible .logo__mark {
  animation: logo-jiggle 0.5s ease;
}

/* ---- Desktop nav ---- */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.7rem + 1.2vw, 2rem);
}

.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.875rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-block: 2px;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--duration-med) var(--ease-out);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-paper);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  right: 0;
}

/* ---- Hamburger: hidden on desktop by default ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  height: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  padding: 0.4rem;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-paper);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}