/* Site header, rebuilt 2026-10-11: one slim sticky row instead of the
   old fixed two-row bar. Logo left; six hub links, search and theme
   toggle right; the full menu stays in the hamburger below 1024px.
   Loaded after the theme so these rules win on equal specificity. */

.header{position:sticky;top:0;height:48px;box-shadow:none;border-bottom:1px solid var(--border,#e0e6ed)}
/* Explicit colours: main.css re-declares --theme on :root after the dark
   blocks, so var(--theme) never flips and the bar would stay white. */
.header{background:rgba(240,244,248,.88)}
.dark .header{background:rgba(13,15,19,.82);border-bottom-color:#2a3040}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  .header{background:rgba(240,244,248,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .dark .header{background:rgba(13,15,19,.7)}
}
.dark .header .logo a,.dark .header-search{color:#e7e9ea}

/* The old fixed header reserved a 60px gap under the bar; sticky needs
   none. Reclaim it. */
.main{margin-top:0}
@media(max-width:1024px){.main{margin-top:0}}

.nav{flex-wrap:nowrap;gap:1rem;align-items:center;padding-top:0}

.logo{margin:0}
.logo a{font-size:1.18rem;font-weight:800;letter-spacing:-.02em}
.logo-switches{gap:.15rem}

.header-search{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--secondary,#34495e)}
.header-search:hover,.header-search:focus-visible{color:var(--primary,#2c3e50);background:rgba(44,62,80,.08)}
.dark .header-search:hover,.dark .header-search:focus-visible{color:#e7e9ea;background:rgba(255,255,255,.08)}

/* Desktop menu: one row, pill hover, gold active marker. Scoped to
   min-width so the theme's mobile slide-in panel below 1024px keeps
   its own position and panel styles intact. */
@media(min-width:1025px){
  #menu{display:flex;flex-direction:row;position:static;transform:none;box-shadow:none;background:transparent;border:0;padding:0;gap:.1rem;max-height:none;overflow:visible;list-style:none}
  #menu li{border:0}
  #menu li a{display:inline-flex;align-items:center;padding:.42rem .7rem;border-radius:8px;font-size:.92rem;font-weight:500;line-height:1;color:var(--secondary,#34495e);white-space:nowrap}
  #menu li a:hover,#menu li a:focus-visible{color:var(--primary,#2c3e50);background:rgba(44,62,80,.07);text-decoration:none}
  .dark #menu li a{color:#b9c2d4}
  .dark #menu li a:hover,.dark #menu li a:focus-visible{color:#e7e9ea;background:rgba(255,255,255,.07)}
  #menu li a span.active{color:var(--primary,#2c3e50);font-weight:700;box-shadow:inset 0 -2px 0 #b4974b}
  .dark #menu li a span.active{color:#ffffff}
  #hamburger-menu{display:none}
}

@media(max-width:1024px){
  .header{height:44px}
  .nav{padding-top:0}
}

/* main.css declares its design tokens on :root and loads last, so they
   never flip in dark mode (this is what painted the body white under
   the dark header). Re-map the neutrals and text tokens explicitly;
   .dark scoping outranks :root regardless of file order. */
html.dark{
  --bg-primary:#0d0f13;
  --bg-secondary:#16181c;
  --bg-tertiary:#1c2027;
  --text-primary:#e7e9ea;
  --text-secondary:#aab4c8;
  --text-muted:#8b95a8;
  --text-light:#6b7689;
}

/* Header block: left-aligned, tight, no mixed centring. */
.post-header{text-align:left;margin:0 auto var(--content-gap)}
.post-header .post-title{text-align:left;margin-bottom:.4rem}
.post-header .post-meta-top,.post-header .post-description,.post-header .post-author{margin-top:.35rem}
.post-content .prose > :first-child{margin-top:0}

/* Readable links: the pale indigo fails 4.5:1 on white cards. */
.post-content a,.entry-content a,.directory-grid h2 a{color:#3b4dbe;text-underline-offset:.15em}
.post-content a:visited{color:#6d3fb0}
.dark .post-content a,.dark .entry-content a,.dark .directory-grid h2 a{color:#aebdf2}
.post-header .post-description{text-align:left;margin-inline:0}