/* The shop footer — SHARED, and byte-identical to the marked region of shop/shop.css.
 *
 * The landing page is a different Cloudflare Pages project and cannot reach across roots into
 * shop.css, so the footer's styles are duplicated here for it — the same reason brand/tokens.css
 * is duplicated, and the same rule applies: EDIT ONE, COPY TO THE OTHER.
 *
 * tests/unit/brand.test.mjs pins this file against the FOOTER:BEGIN/END markers in shop.css and
 * fails the build if they drift. `npm run brief` reports it too.
 *
 * Depends only on brand/tokens.css, which the landing already loads.
 */
.shop-footer {
  background: var(--surface-action);      /* maroon-500 — the brand anchor */
  color: var(--text-on-action);           /* beige-500 */
  margin-top: var(--space-16);
}

/* ONE grid for the whole footer body, holding five blocks: the badge, Shop, Learn, Legal and
   Signup. The badge is a cell like any other — on a phone it takes the first slot of a 2×2 and
   the links fill the rest.

   That is why .ft-cols is `display: contents` below: the badge and the link columns sit in
   different parents in the markup (the columns are wrapped in a <nav> that carries the
   landmark), and grid only lays out its own direct children. `display: contents` drops the nav
   box out of the layout while keeping the element — and its landmark — in the tree, so all five
   blocks become children of this one grid without deleting the <nav>. */
.shop-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-12) var(--page-px) var(--space-10);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  align-items: start;
}
.ft-cols { display: contents; }

/* Badge, Shop / Learn, Legal — then Signup across the bottom. */
@media (min-width: 560px) {
  .shop-footer-inner { grid-template-columns: auto repeat(3, minmax(0, 1fr)); }
}
/* Everything on one line. The ratios reproduce the old two-part layout: the badge column and
   Signup each get 1.5fr against 1fr for the three link columns. */
@media (min-width: 900px) {
  .shop-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
    gap: var(--space-12) var(--space-6);
  }
}

/* ── Badge ── */
/* The badge carries the brand on its own. The tagline under it repeated what the bottom bar
   already says in the hallmark line. */
.ft-brand { display: flex; }
/* Sized off the block it sits beside, not picked by eye: the artwork is 479×828, a ratio of
   1.729, and a link column stands 152px tall — so 88px wide lands the badge at exactly that
   height and the two square up along the footer's horizontal band.
   One width, no breakpoint: the columns are 152px tall at EVERY size (four links, they never
   reflow), so the badge has the same band to match on a phone as on a desktop. It used to drop
   to 72px below 900px, from back when it sat above the links as a banner and had no band beside
   it — once it became a cell in the grid that rule did nothing but shrink it for no reason. */
.ft-badge {
  width: 88px;
  height: auto;
  display: block;
}

/* Everything reads left-aligned — a list of links is scanned down its left edge, and centring
   leaves both sides ragged so the eye has to hunt for where each line starts. The badge follows
   the same edge.

   Each block is then indented off that edge, so the contents are not flush against the cell
   boundary. It applies to the badge and all four columns, signup included, which keeps every
   block on one shared left margin — indenting only some of them would just move the misalignment
   somewhere else. */
.ft-brand,
.ft-col { padding-left: var(--space-4); }

/* The eyebrow style from the brand system — 10px, uppercase, wide tracking. The old footer
   headings were body-sized, which made every column read as a paragraph. */
.ft-col-title {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-on-action-subtle);
  margin: 0 0 var(--space-4);
}

.ft-col-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
/* opacity, not colour: this is a hover fade on a bare link, and fading the whole element is
   exactly the intent. The static colours above are tokens instead — see the note in tokens.css. */
.ft-col-links a {
  font-size: var(--type-body-sm);
  color: var(--text-on-action);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--duration-base) var(--ease-out);
}
.ft-col-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ── Signup ── */
/* It runs the full width of the grid at every size except the widest, where it finally earns a
   column of its own:
     < 560px   2 cols — badge, Shop / Learn, Legal — then Signup across both.
     560–899   4 cols — badge and the three link columns — then Signup across all four.
     ≥ 900px   5 cols — Signup takes the last one.
   `1 / -1` spans whatever the current column count is, so it does not have to be restated when
   the count changes. */
.ft-col-signup { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ft-col-signup { grid-column: auto; }
}

.ft-signup-note {
  font-size: var(--type-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-on-action-muted);
  margin: 0 0 var(--space-4);
}
.ft-signup { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ft-signup-input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-base);
  font-size: var(--type-body-sm);
  color: var(--text-on-action);
  background: var(--surface-on-action-subtle);
  border: var(--border-w-small) solid var(--border-on-action);
  border-radius: var(--radius-input);
}
.ft-signup-input::placeholder { color: var(--text-on-action-subtle); }
.ft-signup-input:focus {
  outline: none;
  border-color: var(--text-on-action);
  background: var(--surface-on-action-hover);
}
.ft-signup-btn {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--surface-action);                  /* maroon text on beige — inverted */
  background: var(--text-on-action);
  border: 1px solid var(--text-on-action);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: opacity var(--duration-base) var(--ease-out);
}
.ft-signup-btn:hover:not(:disabled) { opacity: 0.86; }
.ft-signup-btn:disabled { opacity: 0.5; cursor: default; }

/* No mobile override for the input: Signup spans the full grid below 900px, so it has the whole
   footer width to work in and the button sits beside the field. (An earlier layout put Signup in
   a half-width cell, which needed one — the cell was narrower than the input's 10rem basis.) */

.ft-signup-msg {
  min-height: 1.2em;
  margin: var(--space-2) 0 0;
  font-size: var(--type-caption);
  line-height: var(--leading-snug);
  opacity: 0;
}
.ft-signup-msg.is-ok,
.ft-signup-msg.is-error { opacity: 1; }
.ft-signup-msg.is-ok    { color: var(--text-on-action); }
.ft-signup-msg.is-error { color: var(--text-error-on-action); }

/* ── The star rule — the brand-mark divider (canonical component) ──────────────
   A hairline broken at its centre by the brand star. Two flex line-halves grow
   out from a centred star, rather than a border with a glyph laid on top —
   nothing has to be measured, and nothing has to be masked to hide the line
   behind the star. The star glyph comes from --brand-star, never retyped.
   The line colour, star ink, gap and star size are set by four locals so one
   structure serves every ground; the defaults suit a light surface. Modifiers
   repaint them: .rule-star--on-action for the maroon footer.
   Mark the element aria-hidden — a screen reader announces ✦ as "black four
   pointed star", which is noise in the middle of a divider.
   Used by: the shop footer, the configurator's "I need help" disclosure. The
   guide-page section dividers are the same mark by a different means (a glyph
   overlaid on a section's border-top — see #panel-length .browse-section). */
.rule-star {
  --rule-star-line: var(--border-default);
  --rule-star-ink:  var(--text-action);
  --rule-star-gap:  var(--space-3);
  --rule-star-size: var(--type-body-sm);
  display: flex;
  align-items: center;
  gap: var(--rule-star-gap);
}
.rule-star::before,
.rule-star::after {
  content: '';
  flex: 1;
  height: var(--border-w-small);
  background: var(--rule-star-line);
}
.rule-star-mark {
  line-height: 1;
  color: var(--rule-star-ink);
  font-size: var(--rule-star-size);
}
.rule-star-mark::before { content: var(--brand-star); }

/* On the maroon footer ground: subtle beige line and ink, a wider gap and a
   smaller star — the footer's long-standing look, now a modifier. */
.rule-star--on-action {
  --rule-star-line: var(--border-on-action-subtle);
  --rule-star-ink:  var(--text-on-action-subtle);
  --rule-star-gap:  var(--space-4);
  --rule-star-size: var(--type-caption);
}

/* The footer instance also spans the footer's content width. */
.ft-rule {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-px);
}

/* ── Bottom bar ── */
.shop-footer-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-5) var(--page-px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-on-action-subtle);
}
@media (min-width: 640px) {
  .shop-footer-bar { flex-direction: row; justify-content: space-between; }
}