/* ============================================================================
   site-header.css — shared canonical header styling.

   Single source of truth for the standard site-header LOOK (brand + locale +
   breadcrumb + canonical nav + lang switch), mirroring the homepage's inline
   header CSS. Pages that historically inlined their own header keep doing so;
   this file is for pages ADOPTING the canonical header (consultancy, cv,
   pantheon, 404) so the styling is not re-pasted per page. Pair it with
   /_shared/nav-toggle.css (the responsive hamburger/drawer) and
   /_shared/nav-toggle.js.

   All colours come from CSS custom properties the adopting page already
   defines (--ink, --ink-soft, --paper, --mono, --display, --brand-a). The
   header inherits the page's palette, so it reads as part of that page while
   keeping one structural language across the site.
   ============================================================================ */

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 32px 20px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  flex-wrap: wrap;
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.brand svg { color: var(--ink); }

.brand-locale {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: 16px;
  border-left: 1.5px solid var(--ink);
  align-self: center;
}

.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: 16px;
  border-left: 1.5px solid var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  align-self: center;
}
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1.5px solid transparent; padding-bottom: 1px; }
.breadcrumb [aria-current="page"] { color: var(--ink); border-bottom: 1.5px solid var(--brand-a); padding-bottom: 1px; }

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-self: center;
}
.site-nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
}
.site-nav a:hover { border-bottom-color: var(--ink); }

.lang-switch {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 16px;
  align-self: center;
}
.lang-switch .lang-cur { color: var(--ink); font-weight: 700; }
.lang-switch .lang-sep { color: var(--ink-soft); opacity: 0.5; }
.lang-switch a { color: var(--ink-soft); text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .site-header { padding: 18px 20px 16px; gap: 14px; }
  .brand-locale { padding-left: 0; border-left: 0; }
  .site-nav { margin-left: 0; gap: 14px; }
}