/* ================================================================
   FOOTER — main footer and the SJP legal bar.
   Modules 04 and 05.

   Four columns at desktop, two at 1000px, one below 560px. Every column is
   optional in the template, so the grid is written to tolerate gaps rather than
   assuming all four are present.
   ================================================================ */

.footer {
  background: var(--bg-base, #121412);
  color: var(--muted, #c9cfc9);
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  padding-top: 4rem;
}

.footer__inner {
  max-width: var(--container-wide, 1320px);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.15fr 1.5fr 1fr 1.1fr;
  gap: 3rem;
  padding-bottom: 4rem;
}

/* ── Brand column ────────────────────────────────────────────── */

.footer__logo {
  display: block;
  margin-bottom: 2rem;
  line-height: 1;
  text-decoration: none;
}

.footer__wordmark {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text, #ffffff);
}

.footer__tab {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 8px;
  background: var(--accent, #5ad05a);
  color: var(--green-ink, #0e1c0e);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

.footer__tab::before { content: '[ '; }
.footer__tab::after  { content: ' ]'; }

.footer__logo img {
  display: block;
  max-height: 54px;
  width: auto;
}

.footer__sponsors {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.footer__sponsor {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

/* Crests are supplied at mixed sizes; cap the height and let width follow. */
.footer__sponsor-img {
  max-height: 44px;
  width: auto;
}

.footer__sponsor-label {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-2, #8e968e);
}

/* ── Link columns ────────────────────────────────────────────── */

.footer__col-head {
  margin: 0 0 1rem;
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text, #ffffff);
}

.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links li + li { margin-top: 11px; }

.footer__link {
  font-size: 0.9375rem;
  color: var(--muted, #c9cfc9);
  text-decoration: none;
  transition: color var(--dur, 0.22s) var(--ease, ease);
}

.footer__link:hover,
.footer__link[aria-current='page'] { color: var(--accent, #5ad05a); }

/* Quick links runs as two lists side by side, as the comp draws it. */
.footer__quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* The last two columns are divided off by a rule in the comp. */
.footer__col--legal,
.footer__col--social {
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.18));
  padding-left: 2rem;
}

/* ── Social ──────────────────────────────────────────────────── */

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text, #ffffff);
  transition:
    color var(--dur, 0.22s) var(--ease, ease),
    transform var(--dur, 0.22s) var(--ease, ease);
}

.footer__social a:hover {
  color: var(--accent, #5ad05a);
  transform: translateY(-2px);
}

.footer__social svg {
  width: 24px;
  height: 24px;
}

.footer__external {
  font-size: 0.9375rem;
  color: var(--text, #ffffff);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur, 0.22s) var(--ease, ease),
    border-color var(--dur, 0.22s) var(--ease, ease);
}

.footer__external:hover {
  color: var(--accent, #5ad05a);
  border-bottom-color: var(--accent, #5ad05a);
}

/* ── SJP legal bar (module 05) ───────────────────────────────────
   Deliberately the quietest type on the site: this is regulatory small print,
   not content. The wording is fixed by SJP — see app/options.php. */

.legal {
  background: var(--bg-base, #121412);
  padding-block: 1.5rem 3rem;
}

.legal__inner {
  max-width: var(--container-wide, 1320px);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.18));
}

.legal__approved {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text, #ffffff);
}

.legal__text,
.legal__text p {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.6;
  color: var(--muted-2, #8e968e);
}

.legal__text p + p { margin-top: 0.75rem; }

.legal__text a {
  color: var(--muted-2, #8e968e);
  text-decoration: underline;
}

.legal__text a:hover { color: var(--accent, #5ad05a); }

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
  }

  .footer__col--legal,
  .footer__col--social {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .legal__text,
  .legal__text p { font-size: 0.5625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__link,
  .footer__social a,
  .footer__external { transition: none; }
}