/* Shared-chrome scaffolding.
 *
 * The nav and footer are fetched after first paint, so the space they will
 * occupy is held open beforehand — otherwise the page content jumps upward
 * for one frame and then down again. The reservation removes itself the
 * moment the markup lands.
 *
 * A page whose nav is a different height sets --site-nav-h on :root.
 * Everything else about the chrome's appearance comes from the page's own
 * nav/footer CSS, which the injected markup matches by class name. */

#site-nav:not([data-loaded]) { min-height: var(--site-nav-h, 76px); }
#site-footer:not([data-loaded]) { min-height: var(--site-footer-h, 280px); }

/* Without scripting the chrome never arrives; the fallback is a plain link
 * home rather than an empty bar. */
.chrome-fallback {
  display: block;
  padding: 1.5rem;
  font-size: 0.95rem;
  text-align: center;
}

/* If the fetch fails the mount is marked rather than left looking loaded. */
#site-nav[data-loaded="failed"],
#site-footer[data-loaded="failed"] { min-height: 0; }

/* ---- baseline for the injected chrome -------------------------------------
 * Most pages style .nav-toggle and .mobile-menu themselves. 33 do not, and on
 * those the shared markup rendered the menu as a list of links down the page
 * and the hamburger alongside the desktop nav.
 *
 * These are wrapped in :where() so they carry zero specificity: any rule a
 * page declares for itself beats them, and they only take effect where there
 * is nothing else. Behaviour only — colour and type stay with the page. */

:where(.mobile-menu) {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: #16130f;
}
:where(.mobile-menu.active) { display: flex; }
:where(.mobile-menu a) { color: #f5f3ef; font-size: 1.75rem; text-decoration: none; }
:where(.mobile-menu-close) {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: none; border: 0; color: #f5f3ef; cursor: pointer; padding: 0.5rem;
}

/* The hamburger belongs to narrow viewports only, and the desktop links to
 * wide ones. These carry real specificity rather than :where(), because some
 * pages set `.nav-links { display: flex }` with no breakpoint — they were
 * built with a two-item nav and never needed one. The shared nav has eight
 * items and overflows at phone width, so the breakpoint has to win. This
 * file is the last stylesheet in <head>, so it takes equal-specificity ties.
 *
 * Appearance is still the page's own; only the breakpoint is settled here. */
:where(.nav-toggle) { background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}