/* Public site footer — brand block, then four link columns for the two audience
 * journeys, the public football data pages and company links.
 * ---------------------------------------------------------------------- */

@layer modules {
  /* Horizontal spacing is left to the container-large inside, so the columns
   * line up with the page content above them instead of being inset twice. */
  .web-footer {
    background-color: var(--color-surface-2);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-ink-dark);
    margin-block-start: clamp(var(--space-xxl), 6vw, 4rem);
    padding-block: var(--space-xxl);
  }

  .web-footer__tagline {
    color: var(--color-ink-medium);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
    max-inline-size: 22rem;
  }

  .web-footer__heading {
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
  }

  .web-footer__heading-link {
    color: inherit;
    text-decoration: none;
  }

  .web-footer__heading-link:hover {
    color: var(--color-accent);
  }

  .web-footer__links {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* Each link only as wide as its text, so a wrapped label stays one visual
   * block. Hover is a colour shift — no underlines anywhere in the footer. */
  .web-footer__links a {
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-decoration: none;
  }

  .web-footer__links a:hover {
    color: var(--color-ink);
  }

  /* Sits outside the stack above it, so the rule's distance from the columns is
   * set here rather than inherited from the stack gap. */
  .web-footer__bottom {
    align-items: center;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    justify-content: space-between;
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
  }

  .web-footer__copy {
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
  }
}