/* Shared by every page: the footer site map, and the header breakpoint now that the
   header carries seven links. Pages in app/ import this file; legacy pages link it.
   Uses the colour and font variables every page already defines. */

/* Header: hide the text links (keep the button) before they can reach the logo. */
@media (max-width: 1240px) {
  .nav-links a:not(.btn) { display: none; }
}
@media (min-width: 1241px) and (max-width: 1500px) {
  nav .brand-tag { display: none; }
}

/* Menu for narrow screens: a <details> after the button, shown when the text links are
   hidden. The panel drops down under the fixed header, full width. */
.nav-menu { display: none; order: 2; }
@media (max-width: 1240px) {
  .nav-menu { display: block; }
}
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line-lt, rgba(148,163,199,.25));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text, #E8ECF6);
  transition: transform .25s, opacity .25s;
}
.nav-menu[open] summary span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-menu[open] summary span:nth-child(2) { opacity: 0; }
.nav-menu[open] summary span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-menu summary:focus-visible { outline: 2px solid var(--gold, #E6C079); outline-offset: 2px; }
.nav-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 10px var(--gutter) 22px;
  background: rgba(4,5,10,.97);
  border-bottom: 1px solid var(--line, rgba(148,163,199,.13));
  display: flex;
  flex-direction: column;
}
nav .nav-links .nav-menu-panel a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  color: var(--text, #E8ECF6);
  border-bottom: 1px solid var(--line, rgba(148,163,199,.13));
  white-space: normal;
}
nav .nav-links .nav-menu-panel a:last-child { border-bottom: 0; }
nav .nav-links .nav-menu-panel a[aria-current="page"] { color: var(--gold, #E6C079); }

/* Footer site map */
.site-map {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line, rgba(148,163,199,.13));
  padding: clamp(48px, 7vh, 72px) var(--gutter, clamp(20px, 5vw, 72px)) clamp(36px, 5vh, 52px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  max-width: 1360px;
  margin: 0 auto;
}
.site-map h2 {
  font-family: var(--font-m, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(232,236,246,.4));
  margin: 0 0 16px;
}
.site-map ul { list-style: none; margin: 0; padding: 0; }
.site-map li { margin: 0 0 9px; line-height: 1.4; }
.site-map a {
  color: var(--text-dim, rgba(232,236,246,.7));
  text-decoration: none;
  font-size: 14px;
  transition: color .2s;
}
.site-map a:hover, .site-map a:focus-visible { color: var(--gold, #E6C079); }
/* Light pages (the playbook): dark text on white, using that page's own colours. */
.site-map.light h2 { color: var(--muted2, #8a919c); }
.site-map.light a { color: var(--muted, #5c636e); }
.site-map.light a:hover, .site-map.light a:focus-visible { color: var(--gold-dk, #96712c); }
@media (max-width: 860px) {
  .site-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-map { grid-template-columns: 1fr; }
}