.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* Longhand, not the `padding` shorthand — this element also carries
     .container (see includes/nav.html), and the shorthand would win the
     whole property over .container's own left/right padding (this file
     loads before components.css, but that's incidental — same bug class
     as the .section fix above; anything paired with .container must use
     top/bottom-only longhand or it silently zeroes .container's sides). */
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.site-logo:hover { text-decoration: none; }
.site-logo:hover .logo-word { color: var(--color-primary-light); }

.logo-lockup { display: inline-flex; align-items: center; gap: var(--space-2); }
.logo-mark { flex: none; margin-bottom: 7px; }
.logo-word {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-primary);
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.logo-word-accent { color: var(--color-accent); }
.logo-word-light { color: #fff; }
.logo-word-light .logo-word-accent { color: var(--color-accent-light); }

/* .mobile-nav-* elements (profile name/logout moved out of the header row
   below 480px — see the media query further down) are hidden by default.
   This default MUST come before that media query in source order: it has
   the same specificity as the override, and a later unconditional rule
   always beats an earlier conditional one regardless of which media query
   currently matches. */
.mobile-nav-divider, .mobile-nav-profile-link, .mobile-nav-logout-btn { display: none; }

/* Below this width, the header (logo + language switcher + account
   actions + hamburger, all always visible — see .site-nav-actions)
   doesn't fit on one row. Dropping the wordmark and keeping just the mark
   (still a distinctive two-tone shape on its own) is the standard mobile
   pattern for this — the alternative, wrapping the header to two rows,
   would permanently cost vertical space on every page since the header is
   sticky, which is worse on exactly the small screens this is fixing for. */
@media (max-width: 480px) {
  .site-header .logo-word { display: none; }
  /* Hiding the wordmark alone still isn't enough once logged in — the
     profile-name pill and logout icon push the hamburger button
     off-screen entirely on narrow phones. Their content moves into the
     mobile-nav panel instead (see .mobile-nav-profile-link below). */
  /* Qualified with .site-nav-actions (not just the bare class) so this
     beats components.css's .btn rule — same specificity, but components.css
     loads after nav.css, so the bare class alone would lose the cascade. */
  .site-nav-actions .nav-account-name, .site-nav-actions .nav-account-logout { display: none; }
  .mobile-nav-divider, .mobile-nav-logout-btn { display: block; }
  .mobile-nav-profile-link { display: flex; align-items: center; gap: var(--space-2); }
}

.site-nav-links {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
.site-nav-links a { color: var(--color-body); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.site-nav-links a:hover, .site-nav-links a.is-active { color: var(--color-primary); text-decoration: none; }

.site-nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* "About" dropdown (How it works / Trust & fairness) — folds two nav links
   into one so the bar doesn't run out of room and wrap mid-word in longer
   languages (fr/de). */
.nav-dropdown { position: relative; }
.nav-dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-body);
  white-space: nowrap;
  cursor: pointer;
}
.nav-dropdown > button:hover { color: var(--color-primary); }
.nav-dropdown > button svg { width: 14px; height: 14px; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  min-width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: 110;
}
.nav-dropdown-menu a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-body);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--color-sand); color: var(--color-primary); text-decoration: none; }

/* Language switcher — a custom dropdown (not a native <select>) so it can
   actually take the design system's surface/border/shadow tokens; native
   <select> option lists are OS-styled and can't be themed cross-browser.
   Shows short codes (EN/FR/DE/ES) rather than full language names to stay
   compact in the header. */
.lang-switcher { position: relative; margin: 0; }
.lang-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-body);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-switcher-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lang-switcher-toggle svg { width: 14px; height: 14px; }

.lang-switcher-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  min-width: 84px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: 110;
}
.lang-switcher-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-body);
  cursor: pointer;
}
.lang-switcher-option:hover { background: var(--color-sand); color: var(--color-primary); }
.lang-switcher-option.is-active { color: var(--color-primary); background: var(--color-sand); }

.nav-toggle {
  background: none;
  border: none;
  width: auto;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-body);
}

/* Hamburger-to-X morph: each bar is a stroked path with a dash pattern
   sized to look like a straight line at rest; toggling .is-open shifts the
   dash offset/length so the two diagonal bars sweep into an X and the
   middle bar collapses to a dot-width sliver. */
.nav-toggle .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  transition: stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-toggle .line1 { stroke-dasharray: 60 207; }
.nav-toggle .line2 { stroke-dasharray: 60 60; }
.nav-toggle .line3 { stroke-dasharray: 60 207; }
.nav-toggle.is-open .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
.nav-toggle.is-open .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; }
.nav-toggle.is-open .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: var(--space-2) 0; color: var(--color-body); font-weight: 500; }

.mobile-nav-divider { border-top: 1px solid var(--color-border); margin: var(--space-2) 0; }
.mobile-nav-profile-link { font-weight: 600; }
.mobile-nav-logout-btn {
  background: none;
  border: none;
  width: 100%;
  padding: var(--space-2) 0;
  margin: 0;
  color: var(--color-body);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

@media (min-width: 900px) {
  .site-nav-links { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}