/**
 * brand-footer.css — the ONE definition of the marketing footer's styling.
 *
 * The markup half lives in scripts/pipeline/lib/web-footer.ts and is written
 * into each page by generate-web-footer.ts. This is the CSS half, and it exists
 * for the reason pricing/index.html already wrote down before there were
 * sixteen more copies to worry about: "The header has a generator and a shared
 * sheet; the footer has neither, so it drifts by hand."
 *
 * OWNED SELECTORS — a page must not re-declare these. That is the same contract
 * brand-header.css holds over .wm / .top-nav / .nav-inner, and it is what stops
 * the drift returning one page at a time:
 *
 *   footer, .foot-row, .foot-meta, .foot-handle
 *
 * NOT owned, deliberately: the shell width. `.foot-row` and `.foot-meta` are
 * bound to var(--measure-shell) by each page alongside .container, because the
 * shell is the page's contract with the header and the body, not the footer's
 * private business. See docs/standards/web/measure-scale.md.
 *
 * Every value below is carried over verbatim from index.html's copy — the
 * "new" footer, in the founder's words — including the two comments that record
 * measured decisions rather than preferences.
 */

footer {
  border-top: 1px solid var(--color-border);
  margin-top: 0;
}

.foot-row {
  padding: 18px 52px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .781rem;
}

/* Underlined, not just recoloured. The links are --color-muted-fg and the two
   non-link spans (Our Story, Careers) are --color-subtle-fg, which measure
   2.18:1 against EACH OTHER — under the 3:1 WCAG 1.4.1 wants when colour is the
   only thing separating two meanings. The underline is the non-colour cue;
   hover then changes colour alone, which is fine because the distinction no
   longer rests on it. */
.foot-row a {
  color: var(--color-muted-fg);
  text-decoration: underline;
}
.foot-row a:hover { color: var(--color-primary); }
.foot-row span { color: var(--color-subtle-fg); }

.foot-meta {
  padding: 0 52px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .781rem;
  color: var(--color-subtle-fg);
}
.foot-meta a {
  color: var(--color-muted-fg);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.foot-meta a:hover { color: var(--color-primary); }
.foot-meta svg { width: 20px; height: 20px; }

.foot-handle { color: var(--color-primary); }

/* Matches .container's own small-screen step, so the footer's inset stays equal
   to the header's and the body's at every viewport — which is the whole point.
   web-chrome-inset-parity.test.ts pins the container half of that pair. */
@media (max-width: 880px) {
  .foot-row { padding: 18px 24px; }
  .foot-meta { padding: 0 24px 24px; }
}