/* ─────────────────────────────────────────────────────────────────
   GENERATED — do not hand-edit.

   Every rule here is css/site-header.css with its selectors namespaced
   under .nem-persistent-nav, for the pages that use the class name
   "site-header" for a banner of their own. Regenerate with
   `npm run build:nav`; `npm run audit:nav` fails the deploy if this
   file and the canonical have parted company.

   Edit css/site-header.css instead. A change made here is overwritten.

   See tools/build-persistent-nav.mjs for why this file exists at all,
   and why one @import is deliberately not carried across.
   ───────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────
   Shared site header / persistent nav — standalone, self-contained.

   Used by pages that keep their own bespoke look-and-feel (their own
   <style> block, their own theme system, no /css/site.css) but still
   need the same top masthead + section nav as the rest of the site,
   so no page is a dead end.

   Values are hardcoded rather than pulled from CSS custom properties:
   the masthead is a fixed dark bar by design (same in day and night
   mode -- see the equivalent note in site.css) and it needs to render
   correctly regardless of whatever --gold/--ink/etc. a host page
   defines for its own body. Colors match site.css's .site-header
   exactly, so pages that already load site.css and this file together
   don't see any visible seam.
   ───────────────────────────────────────────────────────────────── */

.nem-persistent-nav.site-header {
  background: #2a1a08;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
.nem-persistent-nav.site-header * { box-sizing: border-box; }
.nem-persistent-nav .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}
.nem-persistent-nav .site-logo {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
  text-decoration: none;
}
.nem-persistent-nav .site-logo-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #d4c49a;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.nem-persistent-nav .site-logo-sub {
  font-size: 0.6rem;
  /* Was #8a7a5a: 4.01:1 on the #2a1a08 bar at 9.6px, a near-miss on ~217
     pages. #968562 is 4.66:1 here and 5.06:1 on the #1a1410 variant. Held
     back until the seven pages that repainted this bar light were fixed --
     while those existed the colour sat on both light and dark and no single
     value could serve both (tools/colour-impact.mjs now flags that case). */
  color: #968562;
  letter-spacing: 0.2em;
  font-family: 'Cinzel', Georgia, serif;
}
.nem-persistent-nav .site-nav {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nem-persistent-nav .site-nav a {
  color: #c0a870;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 1.1rem 0.9rem;
  display: block;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.nem-persistent-nav .site-nav a:hover, .nem-persistent-nav .site-nav a.active {
  color: #fdf8ed;
  border-bottom-color: #7A5C12;
  text-decoration: none;
}
.nem-persistent-nav .nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #c0a870;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* Keyboard focus.

   This file had :hover and .active and nothing for the keyboard, so a
   reader tabbing the nav got only whatever ring the browser draws by
   default -- on a #2a1a08 bar, against a page that may set its own
   outline rules, that is not something to leave to chance. It survived a
   contrast and accessibility pass reporting zero violations because a
   missing focus STYLE is not a WCAG failure the way a missing focus
   INDICATOR is; axe sees a default ring and is satisfied.

   #fdf8ed is 15.86:1 on the bar and 17.68:1 on the #1a1008 mobile
   dropdown -- far past the 3:1 that WCAG 2.2 asks of a focus indicator,
   and the same colour the nav already uses for :hover, so nothing new
   enters the palette. The 2px offset keeps the ring clear of the
   letterforms rather than tight against them.

   Drawn on :focus first and withdrawn again for pointer users via
   :focus:not(:focus-visible): a browser too old for :focus-visible still
   gets a visible ring, which is the case this exists for, and a modern
   one does not flash it on every mouse click. */
.nem-persistent-nav .site-nav a:focus, .nem-persistent-nav .nav-toggle:focus, .nem-persistent-nav .site-logo:focus {
  outline: 2px solid #fdf8ed;
  outline-offset: 2px;
  border-radius: 2px;
}
.nem-persistent-nav .site-nav a:focus:not(:focus-visible), .nem-persistent-nav .nav-toggle:focus:not(:focus-visible), .nem-persistent-nav .site-logo:focus:not(:focus-visible) {
  outline: none;
}

@media (max-width: 768px) {
  .nem-persistent-nav .site-nav { display: none; flex-direction: column; width: 100%; }
  .nem-persistent-nav .site-nav.open { display: flex; }
  .nem-persistent-nav .site-nav a { padding: 0.8rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); border-left: none; }
  .nem-persistent-nav .nav-toggle { display: block; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nem-persistent-nav .header-inner { flex-wrap: wrap; }
  .nem-persistent-nav .site-nav { order: 3; width: 100%; background: #1a1008; }
}