/* =============================================================================
   HolicNode shared header — light only.

   Loaded on EVERY surface: the PHP pages (head.php) and the static React
   homepage (index.html). The bar is one component, not two look-alikes.

   It carries its own tokens (--hdr-*) instead of borrowing the page's,
   because the two surfaces run different token sets (app.css --paper/--ink
   versus the homepage's --bg/--fg) and the header must render identically on
   both. Values are the site palette (see the 2026-09-16 spec). There is no
   dark theme: the site is white, navy ink, one crimson accent.

   Every selector is scoped under .hdr, and buttons are fully specified, so a
   page-level .btn or a { color } rule can never restyle the bar.
   ========================================================================== */
.hdr {
  --hdr-bg:     #ffffff;
  --hdr-fill:   #eef0f3;
  --hdr-edge:   #e4e7ec;
  --hdr-edge-2: #cfd5dd;
  --hdr-ink:    #0f172a;
  --hdr-ink-2:  #3f4a5c;
  --hdr-go:     #c62828;
  --hdr-go-2:   #a51f1f;
  --hdr-font:   'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hdr-r:      8px;

  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--hdr-edge);
  font-family: var(--hdr-font);
}

/* Width matches app.css --wrap (1180px) / --s5 (24px). Hardcoded on purpose so
   the homepage, which has no --wrap, gets the same bar. Change both together. */
.hdr-in { box-sizing: border-box; max-width: 1180px; margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; gap: 24px; height: 68px; }
.hdr a { text-decoration: none; }
.hdr :where(a, button):focus-visible { outline: 2px solid var(--hdr-go); outline-offset: 2px; border-radius: var(--hdr-r); }

.hdr .logo { display: inline-flex; align-items: center; gap: 12px; color: var(--hdr-ink);
  font-family: var(--hdr-font); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.hdr .logo svg { width: 30px; height: 30px; display: block; flex: none; }
.hdr .logo span { white-space: nowrap; }

.hdr .nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.hdr .nav a:not(.btn) { padding: 8px 12px; border-radius: var(--hdr-r); color: var(--hdr-ink-2);
  font-family: var(--hdr-font); font-weight: 600; font-size: .93rem; }
.hdr .nav a:not(.btn):hover { color: var(--hdr-go); }
.hdr .nav .btn { margin-left: 12px; }

/* Buttons. The homepage has its own .btn rules; these are fully specified so
   the bar never inherits them. Corporate shape: 8px, not a pill. */
.hdr .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--hdr-font); font-weight: 700; font-size: .95rem; line-height: normal;
  padding: .7em 1.3em; border-radius: var(--hdr-r); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .1s; }
.hdr .btn:active { transform: translateY(1px); }
.hdr .btn-primary { background: var(--hdr-go); color: #ffffff; border-color: var(--hdr-go);
  box-shadow: 0 4px 14px rgba(198,40,40,.22); }
.hdr .btn-primary:hover { background: var(--hdr-go-2); border-color: var(--hdr-go-2); color: #ffffff;
  box-shadow: 0 8px 22px rgba(198,40,40,.30); }
.hdr .btn-ghost { background: transparent; border-color: var(--hdr-edge-2); color: var(--hdr-ink); box-shadow: none; }
.hdr .btn-ghost:hover { background: transparent; border-color: var(--hdr-go); color: var(--hdr-go); }

/* Auth-aware links. Both states ship in the HTML; an auth/guest class on <html>
   (server-stamped on dynamic pages, cookie-derived otherwise, see header.js)
   picks one. display:contents keeps the survivors as direct flex children of
   .nav, so spacing is as if the wrapper were not there. */
.hdr .when-auth, .hdr .when-guest { display: contents; }
html.guest .hdr .when-auth { display: none; }
html.auth  .hdr .when-guest { display: none; }

/* Language pill (PHP pages only). Last in the bar: a setting, not navigation. */
.hdr .lang-switch { display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 40px; height: 32px; padding: 0 10px; margin-left: 12px; border-radius: var(--hdr-r);
  background: var(--hdr-fill); border: 1px solid var(--hdr-edge-2); color: var(--hdr-ink-2);
  font-family: var(--hdr-font); font-weight: 700; font-size: .8rem; cursor: pointer;
  transition: border-color .16s, color .16s; }
.hdr .lang-switch:hover { border-color: var(--hdr-go); color: var(--hdr-go); }

/* Burger, shown under 900px. */
.hdr .burger { display: none; flex: none; margin-left: auto; background: none;
  border: 1px solid var(--hdr-edge-2); border-radius: var(--hdr-r); padding: 9px 11px; cursor: pointer; }
.hdr .burger span, .hdr .burger span::before, .hdr .burger span::after { display: block; width: 18px; height: 2px;
  background: var(--hdr-ink); position: relative; border-radius: 2px; }
.hdr .burger span::before, .hdr .burger span::after { content: ''; position: absolute; left: 0; }
.hdr .burger span::before { top: -6px; }
.hdr .burger span::after  { top: 6px; }

/* Collapsed layout: logo left; burger and language pill right. The controls
   sit in the bar, not in the menu, so the menu can never hide them. */
@media (max-width: 900px) {
  .hdr .nav { display: none; }
  .hdr .nav.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-edge); padding: 12px; }
  .hdr .nav.open a:not(.btn) { padding: 12px; }
  .hdr .nav.open .btn { margin: 8px 0 0; }
  .hdr .burger { display: block; order: 2; }
  .hdr .lang-switch { order: 3; margin-left: 8px; }
}
@media (max-width: 420px) {
  .hdr .logo { font-size: 1.05rem; }
  .hdr .logo svg { width: 26px; height: 26px; }
}