/* Shared website navigation, brand and language switch.
   All pages use this component. Keep page-specific CSS out of the header.
   Geometry preserves the approved 2026-10-23 v1 prototype. */
.header-boundary {
  position: absolute; top: 16px; left: 0; width: 1px; height: 1px; pointer-events: none;
}
.site-header {
  --navigation-height: 64px;
  --navigation-inset: 48px;
  position: sticky; top: 0; z-index: 20; isolation: isolate; background: var(--paper);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; opacity: 0; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(222,227,237,.8); box-shadow: 0 4px 18px rgba(29,43,75,.035);
  transition: opacity .18s ease;
}
.site-header.has-scroll-state { background: transparent; }
.site-header.has-scroll-state:is(.is-scrolled,.nav-open)::before { opacity: 1; }
.header-inner {
  height: var(--navigation-height);
  width: min(1240px, calc(100% - var(--navigation-inset) * 2));
  margin-inline: auto; display: flex; align-items: center; gap: 36px;
}

/* Header and footer reuse the same brand artwork and wordmark. */
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand > span { font-size: 21px; letter-spacing: -.5px; font-weight: 600; }
.site-header .brand img { width: auto; height: 32px; }
.site-footer .brand img { width: 112px; height: auto; }
html[lang="en"] .brand { gap: 10px; }
html[lang="en"] .site-header .brand { gap: 6px; }
html[lang="en"] .brand img { width: 34px; height: auto; }

.site-header nav {
  display: flex; align-items: center; gap: 34px; margin-left: auto; font-size: 15px; white-space:nowrap;
}
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 23px; flex:none; }
.header-actions > .compact { white-space:nowrap; }
.header-login { display:inline-flex; align-items:center; min-height:44px; font-size:15px; white-space:nowrap; }
.header-login:hover { color:var(--blue); }
.site-header nav .mobile-signup, .site-header nav .mobile-login { display: none; }
.nav-examples > summary { display:flex; align-items:center; gap:6px; list-style:none; cursor:pointer; padding-block:16px; }
.nav-examples > summary::-webkit-details-marker { display:none; }
.nav-examples > summary svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.nav-examples[open] > summary svg { transform:rotate(180deg); }
.nav-examples > summary:is(:hover,.is-current), .nav-examples[open] > summary { color:var(--accent-ink); }
.howto-menu { position:absolute; top:var(--navigation-height); left:50%; transform:translateX(-50%); width:min(1080px,calc(100% - 64px)); padding:24px 28px 28px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px -25px var(--muted); white-space:normal; }
.howto-menu::before { content:""; position:absolute; top:-15px; height:15px; left:0; right:0; }
.howto-menu > p { margin:0 10px 16px; font-size:var(--site-type-label); color:var(--muted); line-height:var(--site-leading-label); }
.howto-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.topic-icon { display:block; width:1em; height:1em; flex:none; color:var(--accent); }
.howto-links > a { display:grid; grid-template-columns:1em minmax(0,1fr); align-items:start; gap:10px; padding:16px 12px; border-radius:8px; font-size:var(--site-type-body); }
.howto-links > a:is(:hover,:focus-visible,[aria-current]) { background:var(--accent-soft); }
.howto-label, .howto-links strong > span:first-child { min-width:0; overflow-wrap:anywhere; }
.howto-links strong { display:flex; align-items:center; gap:6px; font-size:var(--site-type-body); font-weight:500; margin-bottom:7px; }
.howto-label > span { display:block; font-size:var(--site-type-label); color:var(--muted); line-height:var(--site-leading-label); }
.howto-links .topic-icon { margin-top:.4em; }
.howto-arrow { display:flex; flex:none; color:var(--accent-ink); opacity:0; }
.howto-arrow svg { width:12px; height:12px; }
.howto-links > a:is(:hover,:focus-visible) .howto-arrow { opacity:1; }
@media (max-width:860px), (hover:none), (pointer:coarse) {
  .howto-arrow { opacity:.65; color:var(--muted); }
}
.menu-toggle { display: none; border: 0; padding: 8px; background: none; width: 40px; height: 40px; }
.menu-toggle span { display: block; height: 1.5px; background: var(--ink); width: 22px; margin: 6px auto; }

.language-switch {
  display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--paper);
  font-size: var(--site-type-label, .875rem); line-height: 1.4;
}
.language-switch a {
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px;
  padding: 5px 10px; border-radius: 100px; color: var(--muted); white-space: nowrap;
}
.language-switch a:hover { color: var(--blue); background: var(--soft); }
.language-switch a[aria-current="page"] { color: var(--accent-ink); background: var(--blue-soft); font-weight: 600; }
.language-switch a:focus-visible { outline-offset: 2px; border-radius: 100px; }
.footer-links .language-switch a { min-height: 28px; min-width: 40px; padding-inline: 8px; }

@media (max-width: 1080px) {
  .site-header { --navigation-inset: 32px; }
  .header-inner { gap: 20px; }
  .header-actions { gap: 16px; }
  .site-header nav { gap: 20px; }
}
@media (max-width: 860px) {
  .site-header { --navigation-height: 56px; --navigation-inset: 20px; }
  .header-inner { gap: 12px; position: relative; }
  .site-header .brand img { height: 28px; }
  .header-actions { margin-left: auto; gap: 10px; }
  .header-actions > .header-login { display:none; }
  .site-header nav .mobile-login { display:inline-flex; align-items:center; min-height:40px; }
  .header-actions .compact { font-size: 12px; padding: 8px 10px; min-height: 40px; gap: 4px; }
  .header-actions .compact svg { width: 15px; }
  .menu-toggle { display: block; width: 40px; height: 44px; padding: 4px; }
  .site-header nav {
    display: none; position: absolute; top: var(--navigation-height); left: calc(-1 * var(--navigation-inset)); right: calc(-1 * var(--navigation-inset));
    background: white; margin: 0; padding: 20px; justify-content: center;
    border-bottom: 1px solid var(--line);
  }
  .site-header.nav-open nav { display: flex; }
  .site-header .example-topics { display:block; }
  .nav-examples > summary { padding-block:0; min-height:40px; }
  .howto-menu { top:100%; left:0; width:100%; transform:none; padding:20px; border-radius:0 0 12px 12px; max-height:calc(100dvh - 150px); overflow:auto; }
  .howto-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .howto-menu > p { margin-inline:0; }
  .howto-links > a { padding:12px 8px; }
  .site-footer .brand img { width: 76px; }
  html[lang="en"] .brand img { width: 28px; }
  html[lang="en"] .site-header .brand img { width: 30px; height: auto; }
  html[lang="en"] .brand > span { font-size: 20px; }
}
@media (max-width: 480px) {
  .header-actions { gap: 8px; }
  .header-actions > .compact { display: none; }
  .site-header nav .mobile-signup { display: inline-flex; }
  .site-header nav { flex-wrap: wrap; gap: 20px; }
  .site-header nav .mobile-signup:hover { color: white; }
  .howto-links { grid-template-columns:1fr; gap:0; }
  .howto-menu { max-height:calc(100dvh - 215px); }
  .howto-links > a { border-bottom:1px solid var(--line); }
  .language-switch a { min-width: 40px; padding-inline: 8px; }
}
@media (max-width: 365px) {
  .site-header { --navigation-inset: 16px; }
  .site-header .brand img { height: 24px; }
  .header-actions .compact svg { display: none; }
  .site-footer .brand img { width: 64px; }
  html[lang="en"] .site-header .brand img { width: 26px; height: auto; }
  html[lang="en"] .site-header .brand > span { font-size: 18px; }
}
@media print {
  .site-header { display: none !important; }
}