/*
 * footer.css — global site footer (PLAN Step 6). Dark chrome for the real site:
 * an email-capture centerpiece (ref-03's "stay in touch" beat) over structured
 * link columns, closing on a legal + lockup baseline row. Consumes tokens.css
 * only. Loaded globally on the real site (skipped on the self-contained holding
 * page, which keeps its own footer). Sibling to header.css — file-per-concern.
 *
 * Sub-step 1 (here): the shell — capture centerpiece frame + link columns.
 * The capture form + privacy microcopy (sub-step 2) and the social + legal +
 * lockup baseline (sub-step 3) layer in next.
 */

.site-footer {
  background-color: var(--color-bg);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding-block: var(--space-64) var(--space-48);
}

/* — Capture centerpiece — the "stay in touch" beat: a centered, contained block,
   mirroring the homepage capture treatment. The capsule form lands sub-step 2. — */
.site-footer__capture {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

.site-footer__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-footer__headline {
  letter-spacing: var(--tracking-tight);
}

.site-footer__lead {
  margin-block-start: var(--space-20);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* The reusable .capture capsule (components.css); left-align the field/placeholder
   inside the centered centerpiece, matching the homepage capture. */
.site-footer__form {
  margin-block-start: var(--space-32);
  text-align: start;
}

/* The submission status ("Adding you…" / success / error) reads as part of the
   centered centerpiece, not the left-aligned field — center it under the capsule. */
.site-footer__form .capture__status {
  text-align: center;
}

.site-footer__note {
  margin-block-start: var(--space-16);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* — Link columns — mobile-first single-column stack; a 4-up row at --bp-md
   (Shop · Company · Support · Follow, since UI-rework Phase 3 moved social here). — */
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
}

/* Uppercase wide-tracked micro-label — the sitewide label treatment (matches the
   header nav + price labels), overriding the base h3 subheading scale. */
.footer-col__title {
  margin-block-end: var(--space-20);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  list-style: none;
  padding: 0;
}

.footer-col__link {
  font-size: var(--type-body);
  color: var(--color-text-muted);
  text-decoration: none;
  /* Only the text color changes on hover — scope to it (never `all`). */
  transition: color var(--duration-fast);
}

.footer-col__link:hover,
.footer-col__link:focus-visible {
  color: var(--color-text);
}

/* — Baseline row — brand lockup + legal, over a hairline top divider. Since
   UI-rework Phase 3 the social marks live in the link columns, so __base holds
   only the brand-row. Mobile-first stack; a row at --bp-md. — */
.site-footer__base {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-block-start: var(--space-40);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.site-footer__brand-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  justify-content: space-between;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
}

/* Footer lockup: a touch more prominent than the header's, still on the scale. */
.site-footer__logo {
  height: var(--space-40);
  width: auto;
}

.site-footer__legal {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Social links in the fourth footer column (UI-rework Phase 3) — icon + platform
   name inline. Colour + hover come from .footer-col__link; this only adds the
   icon layout. Icon sized a step under the 24px standalone social mark so it sits
   comfortably beside the 16px link text. */
.footer-col__link--social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
}

.footer-col__icon {
  width: var(--space-16);
  height: var(--space-16);
  flex-shrink: 0;
}

@media (min-width: 768px) /* --bp-md */ {
  .site-footer__cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__base {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer__brand-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-col__link {
    transition: none;
  }
}