/* Site header: the one source of truth for the header on every page (logo, nav, spacing, weight).
   Loaded after each page's own <style>, ui-motion.css and map.css, and scoped under `body > header`, so it wins over
   the older per-page header rules. The header is full-bleed in the page colour, its content lines up with the
   1280px page column below, and it has a fixed height so it never jumps when the page underneath changes. */
:root { --wb-header-h: 72px; --wb-header-pad: max(24px, calc((100% - 1280px) / 2 + 24px)); }
html { scrollbar-gutter: stable; }

body > header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; max-width: none; min-height: var(--wb-header-h); margin: 0;
  padding: 10px var(--wb-header-pad); box-sizing: border-box;
  background: var(--bg); border-bottom: 1px solid var(--border);
  flex-wrap: nowrap; gap: 0;
  view-transition-name: wb-site-header;
}
/* The old full-bleed fill layer is no longer needed: the header itself spans the viewport */
body > header::before { content: none; }

body > header .header-left {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;
  gap: 36px; width: 100%; min-width: 0; margin: 0;
}

/* Logo: flush with the content edge, a touch lighter than before */
body > header .brand-pin-logo { display: flex; align-items: center; gap: 9px; margin: 0; flex-shrink: 0; text-decoration: none; justify-self: auto; grid-column: auto; }
body > header .brand-pin-logo svg { width: 36px; height: 44px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
body > header .brand-text-logo { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.2px; line-height: 1; }
body > header .brand-text-logo .world { color: var(--text); }
body > header .brand-text-logo .bites { color: var(--gold); }

/* Nav: light weight, even spacing, sits right next to the logo; extras (badges, theme switch) go to the far right */
body > header .header-left > nav {
  display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto;
  gap: 4px; min-width: 0; width: auto; margin: 0; padding: 0; order: 0; grid-column: auto;
}
body > header .header-left > nav > a {
  flex: 0 0 auto; margin: 0; padding: 7px 13px; border-radius: 999px;
  font-size: .95rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2;
  color: var(--text); text-decoration: none; text-align: left; white-space: nowrap;
  opacity: .82; background: transparent;
  transition: color .2s, background-color .2s, opacity .2s;
}
body > header .header-left > nav > a:last-of-type { margin-right: auto; }
body > header .header-left > nav > a:hover,
body > header .header-left > nav > a:focus-visible { color: var(--teal); opacity: 1; background: rgba(26,155,142,0.07); }
body > header .header-left > nav > a.active { color: var(--teal); opacity: 1; background: rgba(26,155,142,0.1); }

body > header .wb-joined-badge { flex: 0 0 auto; font-weight: 500; }
body > header .theme-toggle {
  flex: 0 0 auto; margin-left: 10px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--teal);
  font-size: .75rem; font-weight: 500; letter-spacing: .02em; cursor: pointer; user-select: none; white-space: nowrap;
}
body > header .theme-toggle:hover { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }

/* Tablet and mobile: same header, compacted. Logo stays on the left, the links follow on the same line
   and scroll sideways when they don't fit */
@media (max-width: 1000px) {
  :root { --wb-header-h: 60px; --wb-header-pad: 14px; }
  body > header { padding-top: 8px; padding-bottom: 8px; }
  body > header .header-left { gap: 16px; }
  body > header .brand-pin-logo svg { width: 30px; height: 37px; }
  body > header .brand-text-logo { font-size: 1.15rem; }
  body > header .header-left > nav { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
  body > header .header-left > nav::-webkit-scrollbar { display: none; }
  body > header .header-left > nav > a { padding: 6px 10px; font-size: .88rem; }
  body > header .theme-toggle { padding: 3px 9px; font-size: .68rem; margin-left: 6px; }
}

/* Smooth page changes: the browser cross-fades the page body while the header (identical on every page)
   stays put. Browsers without cross-document view transitions simply load the next page as before. */
@view-transition { navigation: auto; }
::view-transition-group(wb-site-header) { animation: none; }
::view-transition-old(wb-site-header) { display: none; }
::view-transition-new(wb-site-header) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}