/* Shared site header: a floating bar, transparent at the top and a frosted light box once you scroll.
   Pages with a dark hero set <header data-hero="dark">: white text at the top, dark text once the bar is visible. */
header {
  --nav-a: 0;
  --nav-fg: rgba(5,10,60,0.72);
  --nav-fg-strong: #050a3c;
  --nav-line: rgba(5,10,60,0.22);
  --logo-ink: var(--ink, #050a3c); /* the logo's navy paths use currentColor, so this recolours it */
  position: sticky; top: 0; z-index: 100;
  padding-top: 14px;
  margin-bottom: -58px; /* header height (14 + 44): the hero background runs behind the floating bar */
  pointer-events: none; /* the empty strip either side of the bar must not block clicks on the page */
}
/* a soft blur across the full header strip (including the gap above the pill), so page content
   sliding underneath on scroll doesn't appear or disappear abruptly at the very top edge */
header::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(calc(var(--nav-a) * 10px));
  backdrop-filter: blur(calc(var(--nav-a) * 10px));
}
header[data-hero="dark"]:not(.is-solid) {
  --nav-fg: rgba(255,255,255,0.78);
  --nav-fg-strong: #fff;
  --nav-line: rgba(255,255,255,0.3);
  --logo-ink: #fff;
}
/* the floating bar: transparent at the top of the page, a frosted rounded box once you scroll */
header .nav {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  /* a full-width floating bar: same column width as the page content, not a narrow centred pill */
  width: 100%; max-width: 1120px; height: 44px; margin: 0 auto; padding: 0 14px 0 22px;
  border-radius: 13px;
  background: rgba(248,246,242, calc(var(--nav-a) * 0.90));
  -webkit-backdrop-filter: blur(calc(var(--nav-a) * 14px));
  backdrop-filter: blur(calc(var(--nav-a) * 14px));
  border: 1px solid rgba(5,10,60, calc(var(--nav-a) * 0.10));
  box-shadow: 0 10px 30px rgba(5,10,60, calc(var(--nav-a) * 0.14));
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo img { display: block; width: auto; }
header .logo { position: relative; z-index: 1; color: var(--logo-ink); transition: color .25s; }
header .logo img.logo-mark, header .logo svg.logo-mark { height: 18px; width: auto; display: block; }
/* until the logo mark's SVG is inlined (see nav.js), the plain file shows in its own colours */
header .logo img.logo-mark { filter: none; }

/* the logo's bar-chart icon: four bars that pulse gently while the header sits over the hero,
   and settle back to full height once the page is scrolled and the bar turns solid */
header .logo-bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.3,.7,.4,1);
}
header:not(.is-solid) .logo-bar-1 { animation: logoBarPulse 2.6s ease-in-out infinite; }
header:not(.is-solid) .logo-bar-2 { animation: logoBarPulse 2.6s ease-in-out infinite .5s; }
header:not(.is-solid) .logo-bar-3 { animation: logoBarPulse 2.6s ease-in-out infinite .22s; }
header:not(.is-solid) .logo-bar-4 { animation: logoBarPulse 2.6s ease-in-out infinite .68s; }
header.is-solid .logo-bar { animation: none; transform: scaleY(1); }
@keyframes logoBarPulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.58); }
}
@media (prefers-reduced-motion: reduce) {
  header .logo-bar { animation: none !important; transform: scaleY(1) !important; }
}
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  position: relative; color: var(--nav-fg); font-size: 15px; font-weight: 500;
  padding: 7px 13px; border-radius: 20px;
  transition: color .2s, background-color .2s;
}
.nav-links a:hover { color: var(--accent, #f05223); }
/* current-section indicator: a soft pill behind the matching link, updated by scroll position */
.nav-links a.is-current { color: var(--nav-fg-strong); font-weight: 600; background: rgba(240,83,35,0.13); }
header[data-hero="dark"]:not(.is-solid) .nav-links a.is-current { background: rgba(255,255,255,0.16); }
@media (max-width: 800px) {
  .nav-links { gap: 0; }
}

/* Language selector */
.lang-select { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--nav-line);
  color: var(--nav-fg); font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lang-btn:hover { border-color: var(--nav-fg-strong); color: var(--nav-fg-strong); }
.lang-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.lang-btn .chev { width: 13px; height: 13px; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--border, #e5e1d8); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(5,10,60,0.18);
  min-width: 130px; padding: 6px; display: none; z-index: 200;
}
.lang-menu.open { display: block; }
.lang-menu a {
  display: block; padding: 9px 12px; border-radius: 7px;
  font-size: 14px; color: var(--ink, #050a3c); font-weight: 500; transition: background .15s;
}
.lang-menu a:hover { background: var(--soft, #efece6); }
.lang-menu a.active { color: var(--accent, #f05223); font-weight: 600; }

.menu-toggle {
  display: none; width: 40px; height: 40px; margin-right: -8px;
  font-size: 24px; line-height: 1; background: none; border: none; cursor: pointer;
  color: var(--nav-fg-strong);
}

/* Heroes that sit under the transparent bar need room for it */
header + .article-hero { padding-top: 100px; }
header + .page-hero { padding-top: 126px; }

@media (max-width: 800px) {
  header + .page-hero { padding-top: 108px; }
  .menu-toggle { display: block; }
  header .nav { width: calc(100% - 20px); max-width: none; gap: 12px; padding: 0 8px 0 16px; }
  .nav-links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg, #f8f6f2); padding: 4px 20px 10px;
    border: 1px solid var(--border, #e5e1d8); border-radius: 16px;
    box-shadow: 0 18px 34px rgba(5,10,60,0.16);
  }
  header.menu-open .nav-links { display: flex; }
  .nav-links a { padding: 15px 12px; margin: 0 -12px; font-size: 17px; border-top: 1px solid var(--border, #e5e1d8); border-radius: 0; }
  .nav-links a:first-child { border-top: none; }
  .nav-links a.is-current { background: rgba(240,83,35,0.08); }
}

/* Logo on dark heroes: match the nav text colour rgba(255,255,255,0.78).
   The <img> fallback gets a white filter before nav.js inlines the SVG;
   the inlined <svg> gets the same opacity so they feel consistent. */
header[data-hero="dark"]:not(.is-solid) .logo img.logo-mark {
  filter: brightness(0) invert(1);
  opacity: 0.78;
}
header[data-hero="dark"]:not(.is-solid) .logo svg.logo-mark {
  filter: brightness(0) invert(1);
  opacity: 0.78;
}