/* The page shell: the fixed header with its nav, and the footer.

   Both are generated once by src/components.mjs and appear on all nine pages,
   so every rule here is written once and applies everywhere. Nothing else in
   the stylesheets may style a header or a footer.

   The header is one bar at every width. Below 960px the links move into a
   panel behind a button; above it they sit in the bar. The panel is the same
   list in the same order, not a second copy of the nav. */

/* ---- Header ---- */

.shell-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over the hero the bar is transparent; once the page moves it takes a
   background so the links stay readable over whatever scrolls under them. */
.shell-head.is-solid {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.shell-head__bar {
  width: min(var(--shell), 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ---- Brand mark ---- */

.mark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-right: var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  flex: none;
  transition: opacity .25s var(--ease);
}

.mark:hover { opacity: .82 }

.mark__img {
  display: block;
  /* The file is a wide lockup; height drives the size and width follows the
     intrinsic ratio, so the logo never dictates the height of the bar. */
  height: 40px;
  width: auto;
}

/* Revealed by brand.js only when neither the branding endpoint nor the local
   copy of the logo could be loaded, so the header still names the site. */
.mark__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* ---- Menu button ---- */

.menubtn {
  display: none;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line2);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.menubtn:hover {
  border-color: var(--accent);
  background: var(--soft);
}

.menubtn svg {
  width: 22px;
  height: 22px;
}

/* One button, two glyphs: whichever matches the current state is the one
   drawn, so the control reads as open or close without a second button.
   Both rules key off the same attribute the button already exposes to
   assistive tech, so the picture and the announcement cannot disagree. */
.menubtn__open,
.menubtn__close {
  display: grid;
  place-items: center;
}

.menubtn[aria-expanded="true"] .menubtn__open,
.menubtn[aria-expanded="false"] .menubtn__close { display: none }

/* ---- Navigation ---- */

.shell-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shell-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}

.shell-nav__link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.shell-nav__link[aria-current="page"] {
  color: var(--text);
  background: var(--soft);
}

/* ---- Footer ---- */

.shell-foot {
  border-top: 1px solid var(--line);
  margin-top: var(--space-10);
  padding-top: var(--space-12);
}

.shell-foot__top {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
  align-items: start;
}

.shell-foot__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.shell-foot__tagline {
  margin: var(--space-1) 0 0;
  color: var(--dim);
  font-size: var(--text-sm);
}

.fgroup__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}

.fgroup__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Full-width rows with a touch-sized height: on a phone the footer is where
   links are most often mis-tapped. */
.fgroup__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.fgroup__link:hover { color: var(--text) }

.shell-foot__base {
  margin-top: var(--space-10);
  padding: var(--space-5) 0 var(--space-10);
  border-top: 1px solid var(--line);
}

.shell-foot__social {
  margin: 0;
  color: var(--dim);
  font-size: var(--text-sm);
}

/* ---- Narrow: the links move behind the button ---- */

@media (max-width: 960px) {
  :root { --header-h: 64px }

  .menubtn { display: grid }

  .mark__img { height: 34px }

  .shell-nav {
    position: fixed;
    top: calc(var(--header-h) + var(--space-2));
    left: var(--gutter);
    right: var(--gutter);
    max-height: calc(100dvh - var(--header-h) - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--line2);
    background: color-mix(in srgb, #141216 96%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-raised);
  }

  .shell-head[data-menu="open"] .shell-nav { display: block }

  /* Dims the page behind the panel. A click on it lands on .shell-head rather
     than on the bar, which is how header.js tells an outside click from a
     click on the nav itself. */
  .shell-head[data-menu="open"]::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: -1;
    background: rgba(8, 7, 10, .62);
  }

  body.is-menu-open { overflow: hidden }

  .shell-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .shell-nav__link {
    min-height: 52px;
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
  }

  .shell-nav__list li + li .shell-nav__link {
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  .shell-foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .shell-foot__brand { grid-column: 1 / -1 }
}

@media (max-width: 520px) {
  .shell-foot__top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}