/**
 * Header and footer.
 *
 * Ported from components/nav/Nav.module.css. The header is the one place on this site
 * where the 360px viewport was actually broken once — the action cluster overran the
 * viewport and scrolled the page sideways. The rules that stop that recurring are
 * marked below.
 */

/* ── Header ───────────────────────────────────────────────────────────────── */

.ss-header {
  border-bottom: var(--hairline);
  background: var(--surface-base);
}

.ss-header__inner {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: var(--space-4) var(--layout-gutter);
  gap: var(--space-5);
}

.ss-header__brand a,
.ss-header__brand {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  text-decoration: none;
  white-space: nowrap;
}

.ss-header__actions {
  gap: var(--space-5);

  /**
   * The 360px fix. The action cluster — brand, navigation toggle, language switcher,
   * CTA — overran the viewport and scrolled the whole page sideways. See docs/STATUS.md.
   *
   * min-width: 0 lets the flex child shrink below its content width instead of forcing
   * the track open; the header's own overflow is then the toggle's problem, not the
   * document's.
   */
  min-width: 0;
}

.ss-header__nav {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
}

.ss-header__nav a {
  color: var(--text-body);
  text-decoration: none;
}

.ss-header__nav a:hover,
.ss-header__nav a[aria-current="page"] {
  color: var(--ss-blue);
}

.ss-header--sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (width <= 768px) {
  .ss-header__inner {
    padding-inline: var(--layout-gutter-mobile);
  }

  /* The CTA duplicates the sticky mobile contact bar at the foot of the screen.
     Two of the same action on a 360px viewport is one too many. */
  .ss-header__cta {
    display: none;
  }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.ss-footer {
  border-top: var(--hairline);
  background: var(--surface-section);
  padding: var(--space-10) var(--layout-gutter) var(--space-8);
}

.ss-footer__columns {
  gap: var(--space-8);
}

.ss-footer__brand {
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
}

.ss-footer__note,
.ss-footer__colophon {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--text-secondary);
  margin-top: var(--space-3);
}

.ss-footer__nav {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--type-body-sm-size);
}

.ss-footer__nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.ss-footer__nav a:hover {
  color: var(--ss-blue);
}

/**
 * ── THE STANDING GATE STATEMENT ───────────────────────────────────────────
 *
 * §0.2 requires that the absence of the held figures be STATED rather than left to be
 * noticed. This is the one element present on every page, so it is where the statement
 * belongs — a specifier landing deep in the site from a search result reads it before
 * concluding a figure is missing by oversight.
 *
 * Set in --text-pending, matching every other held-figure treatment on the site, so the
 * visual language is consistent: grey means "we have not published this", everywhere.
 */
.ss-footer__gate-note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  letter-spacing: var(--tracking-mono);
  color: var(--text-pending);
  max-width: 88ch;
}

.ss-footer__colophon {
  margin-top: var(--space-6);
}

@media (width <= 768px) {
  .ss-footer {
    padding-inline: var(--layout-gutter-mobile);
  }
}

@media print {
  .ss-header,
  .ss-footer__columns {
    display: none;
  }

  /* The gate statement survives onto paper. A printed detail sheet that shows no fire
     rating and does not say why is the exact ambiguity §0.2 exists to remove. */
  .ss-footer {
    border-top: 0.5pt solid #999; /* stylelint-disable-line color-no-hex -- paper has no theme */
    padding: 0;
  }
}