/*
 * Signal and Echo design system: site-footer (site profile, issue 164 slice 14;
 * .claude/reference/site-profile.md s4 and s6). Ships as parts/site/site-footer.css.
 *
 *   <footer class="sds-site-footer">
 *     <div class="sds-site-footer-cols">
 *       <div class="sds-site-footer-brand">(brand mark) <p class="sds-site-footer-colophon">…</p></div>
 *       <nav class="sds-site-footer-col" aria-label="Games">
 *         <p class="sds-eyebrow">Games</p>
 *         <ul class="sds-site-footer-links"><li><a class="sds-link" data-variant="quiet" href="…">…</a></li></ul>
 *       </nav>
 *       (more link columns)
 *     </div>
 *     <div class="sds-site-footer-bar">
 *       <p class="sds-site-footer-copy">© 2026 …</p> <p class="sds-site-footer-build">build …</p>
 *       <ul class="sds-site-footer-links">(small links)</ul>
 *     </div>
 *   </footer>
 *
 * The footer spans the page (its rule and background bleed); its content keeps the page gutter and
 * stops at --sds-page-max. Columns: the brand row, then link columns 2 or more to a row below 75em;
 * from 75em one row, the brand column twice as wide. Every footer link is a full touch target.
 */

/* sds-claims: site-footer */

@layer sds.reset, sds.components;

@layer sds.components {
  .sds-site-footer {
    padding-block: var(--sds-space-8) var(--sds-space-6);
    padding-inline: max(var(--sds-page-gutter), (100% - var(--sds-page-max)) / 2);
    border-top: var(--sds-border-thin) solid var(--sds-color-line);
    color: var(--sds-color-text);
    font-family: var(--sds-font-ui);
  }

  .sds-site-footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10em), 1fr));
    gap: var(--sds-space-7) var(--sds-space-6);
  }

  .sds-site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-4);
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .sds-site-footer-colophon {
    margin: 0;
    color: var(--sds-color-text-soft);
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-small-weight);
    letter-spacing: var(--sds-type-small-tracking);
    line-height: var(--sds-type-small-line-height);
  }

  .sds-site-footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-3);
    min-width: 0;
  }

  .sds-site-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A footer link fills its row up to the touch target, so a thumb hits it anywhere on the line. */
  .sds-site-footer-links a {
    display: flex;
    align-items: center;
    min-height: var(--sds-touch-target);
  }

  .sds-site-footer-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sds-space-6);
    align-items: center;
    margin-top: var(--sds-space-7);
    padding-top: var(--sds-space-4);
    border-top: var(--sds-border-thin) solid var(--sds-color-line);
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-small-weight);
    letter-spacing: var(--sds-type-small-tracking);
    line-height: var(--sds-type-small-line-height);
  }

  .sds-site-footer-copy,
  .sds-site-footer-build {
    margin: 0;
  }

  .sds-site-footer-build {
    font-family: var(--sds-font-mono);
    font-variant-numeric: tabular-nums;
  }

  .sds-site-footer-bar .sds-site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sds-space-5);
    margin-inline-start: auto;
  }

  @media (width >= 75em) {
    .sds-site-footer-cols {
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      grid-template-columns: minmax(0, 2fr);
    }

    .sds-site-footer-brand {
      grid-column: auto;
    }
  }
}