/* Shared site navigation.
   One bar, identical in every page, promoted from the annexes' original bar.
   Every page links out to every other page, so nothing is orphaned and the
   reader can always get back.

   Wide screens: one horizontal row.
   Narrow screens: a burger that opens the links as a panel under the bar.
   The burger is progressive enhancement. Without nav.js the .js class is
   never added to <html>, so the links simply stay visible and stacked --
   the site remains navigable, just taller. */

/* keep in-page jumps clear of the fixed bar */
html { scroll-padding-top: 4.5rem; }

.site-nav {
  position: fixed; z-index: 50; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 54px; padding: 0 max(1.1rem, 3.2vw);
  color: rgba(248, 241, 229, .82);
  background: rgba(9, 12, 18, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
  font: 720 .62rem/1.2 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
}

.site-home {
  display: inline-flex; align-items: baseline; gap: .5rem;
  color: #ecd28d; text-decoration: none; white-space: nowrap;
}
.site-home em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: rgba(236, 210, 141, .62);
}

.site-links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.6rem, 1.5vw, 1.4rem);
  margin: 0; padding: 0; list-style: none;
}
.site-links a {
  display: inline-block; padding: .35rem 0;
  color: rgba(248, 241, 229, .78); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.site-links a:hover, .site-links a:focus-visible { color: #ecd28d; outline: 0; }
.site-links a[aria-current="page"] {
  color: var(--gold); border-bottom-color: var(--gold);
}

/* ---------- the burger ----------
   Hidden on wide screens, where the links already fit. */

.nav-toggle {
  display: none;
  align-items: center; gap: .5rem;
  margin: 0; padding: .6rem 0 .6rem .8rem;
  background: none; border: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-toggle-label { color: rgba(248, 241, 229, .78); }

/* three rules, drawn with pseudo-elements so there is no extra markup */
.nav-toggle-bars {
  position: relative; display: block; flex: none;
  width: 22px; height: 2px;
  background: currentColor;
  transition: background-color .2s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0;
  width: 100%; height: 100%;
  background: currentColor;
  transition: transform .22s ease, top .22s ease;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

/* open: the middle rule fades, the outer two cross into a close */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .site-nav {
    min-height: 50px;
    font-size: .58rem; letter-spacing: .09em;
  }
  .site-home em { display: none; }
  .site-links { gap: .55rem; }

  /* burger appears, links collapse into a panel under the bar */
  .js .nav-toggle { display: inline-flex; }
  .js .site-links { display: none; }
  .js .nav-toggle[aria-expanded="true"] ~ .site-links { display: flex; }

  .js .site-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 0;
    padding: .2rem max(1.1rem, 3.2vw) .7rem;
    /* opaque, unlike the bar itself: page text must not read through a menu */
    background: #090c12;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
  .js .site-links a {
    display: block;
    padding: .8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .js .site-links li:last-child a { border-bottom: 0; }
}

@media (max-width: 420px) {
  /* French brand line is dropped first; labels stay readable rather than shrinking. */
  .site-links { gap: .45rem; }
  .site-home { font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-links a { transition: none; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
}