/* Site footer, one for every page (ND-03). Self-contained so pages still in
 * the old design can carry it too: own background, colours and logo mark
 * from global tokens only.
 *
 * The page background runs straight into it, so the structure carries the
 * transition. Columns use the card grid of the redesigned sections (same
 * width, gutter and gap), and a cropped wordmark closes the page. Padding,
 * not max-width, centres the content, so the top line spans the window. */
.home-footer {
  container-type: inline-size;
  width: 100%;
  margin-top: auto;
  padding: var(--site-footer-rhythm) max(var(--nd-gutter), calc((100% - var(--home-width)) / 2 + var(--nd-gutter))) 0;

  /* Content starts a full rhythm below the zigzag edge, not under it. */
  padding-top: calc(var(--zig-height) + var(--site-footer-rhythm));
  position: relative;
  overflow: hidden;
  background: var(--nd-bg);
  color: var(--nd-muted);
  font: 400 var(--text-sm) / var(--leading-normal) var(--font-body);
}

/* Zigzag top edge instead of a straight border */
.home-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--zig-height);
  background: linear-gradient(90deg, var(--ambient-sea), var(--ambient-mint), var(--ambient-lime));
  mask-image: var(--zig-tile);
  mask-repeat: repeat-x;
  opacity: 0.35;
  pointer-events: none;
}

.home-footer :is(a, button):focus-visible {
  outline: 2px solid var(--ambient-mint);
  outline-offset: 5px;
}

.home-footer-top,
.home-footer-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs) var(--nd-card-gap);
}

.home-footer-logo {
  color: var(--nd-text);
  text-decoration: none;
}

.home-footer-logo .logo-text {
  color: var(--nd-text);
}

.home-footer-top p {
  margin-top: var(--spacing-label);
}

.home-footer-links {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--spacing-related);
}

.home-footer-links[hidden] {
  display: none;
}

.home-footer :is(.home-footer-links a, .home-footer-bottom a, .footer-feedback-link) {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nd-muted);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.home-footer :is(.home-footer-links a, .home-footer-bottom a, .footer-feedback-link):hover {
  color: var(--nd-text);
}

.home-footer-bottom {
  margin-top: var(--site-footer-rhythm);
  font-size: var(--text-xs);
}

/* Service pages (unsubscribe, account deletion) keep only the bottom row. */
.home-footer-bottom:first-child {
  margin-top: 0;
}

/* Decorative: one solid colour, no gradient on text (docs/35-gradient-usage.md).
 * Capitals have no descenders, so the word stands whole on the page edge
 * instead of being cut by it. Sized in container units to fill the content
 * column exactly; line-height is the cap height, so the box hugs the letters. */
.home-footer-word {
  margin: var(--site-footer-rhythm) 0 var(--home-footer-word-gap);
  color: var(--home-footer-word-color);
  font: 600 var(--home-footer-word-size) / var(--home-footer-word-leading) var(--font-body);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* Two card columns here, so two footer columns; the brand takes a row.
 * Links are finger targets now: each one is a 44px row instead of a text
 * line plus gap (GUX-37). Three bottom items do not fit two columns without
 * leaving one alone on its own row, so they stack as a short list. */
@media (width <= 900px) {
  .home-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-footer-top > :first-child {
    grid-column: 1 / -1;
  }

  .home-footer-links {
    gap: 0;
  }

  .home-footer :is(.home-footer-links a, .home-footer-bottom a, .footer-feedback-link) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .home-footer :is(.home-footer-links a, .home-footer-bottom a, .footer-feedback-link)[hidden] {
    display: none;
  }

  .home-footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    place-items: center start;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-footer * {
    transition: none !important;
  }
}