/* ==========================================================================
   Site footer — templates/partials/footer.php
   ========================================================================== */

@layer components {
  .site-footer {
    /* Re-point the tokens the attribution mark (attribution.css) reads, so
       it sits white-on-grey like the rest of the footer. */
    --color-text-subtle: var(--color-text-on-dark);   /* 0.85 alpha was 4.2:1 — full white = 5.3:1 */
    --color-text-muted: var(--color-text-on-dark);
    --color-accent: var(--color-text-on-dark);
    --color-focus-ring: var(--color-focus-ring-on-dark);

    padding-block: var(--section-space);
    color: var(--color-text-on-dark);
    background-color: var(--color-bg-footer);
  }

  .site-footer a {
    color: inherit;
    text-decoration: none;
  }

  .site-footer a:hover {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: var(--space-6);
    margin-block-end: var(--space-7);
  }

  /* ----- Brand ------------------------------------------------------- */

  .site-footer__logo {
    display: block;
    inline-size: min(24.4375rem, 100%);   /* 391px — the live logo's size */
    color: var(--color-text-on-dark);
  }

  .site-footer__logo:hover {
    opacity: 0.9;
  }

  .site-footer__tagline {
    max-inline-size: 33.75rem;
    margin-block-start: var(--space-2);
    font-size: var(--text-xl);
  }

  /* ----- Nav --------------------------------------------------------- */

  .site-footer__nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-inline-start: 2.5rem;   /* live column indent */
  }

  .site-footer__nav a {
    text-transform: uppercase;
  }

  /* ----- Contact list ------------------------------------------------ */

  .site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-block-start: var(--space-2);
  }

  .site-footer__contact li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .site-footer__contact .icon {
    --icon-size: 1.5625rem;
    color: var(--color-brand);
    stroke-width: 1.5;
  }

  /* ----- Bottom bar -------------------------------------------------- */

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-block-start: 1.5625rem;
    border-block-start: 1px solid rgb(255 255 255 / 0.9);
  }

  .site-footer__copy {
    flex: 1 1 auto;
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
  }

  .site-footer .attribution {
    flex-basis: 100%;
  }

  /* The agency logo is dark artwork — render it white on the grey band. */
  .site-footer .attribution__logo {
    filter: brightness(0) invert(1);
  }

  @media (max-width: 47.99rem) {
    .site-footer__grid {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }

    .site-footer__nav ul {
      gap: var(--space-5);
      padding-inline-start: 0;
    }
  }
}