@layer components {
  /* Three tracks: nav at the leading edge, copyright between, controls trailing. The nav and controls
     take what they need; the copyright gives way, wrapping, so long labels never squeeze the menu. */
  .site-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--block-space);
    margin-block-start: var(--block-space-triple);
    padding-block: var(--block-space-double) calc(var(--block-space-double) + var(--site-dock-height, 0px));
    border-block-start: var(--border);
    color: var(--color-muted);
    font-size: var(--text-small);
  }

  .site-footer__nav { grid-column: 1; justify-self: start; }
  .site-footer__copyright { grid-column: 2; justify-self: center; text-align: center; margin: 0; }

  /* The language picker sits at the trailing edge. */
  .site-footer__controls {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--block-space);
  }

  /* When there's no room for three tracks: the nav above, the copyright and picker centered below it. */
  @media (width < 40rem) {
    .site-footer { grid-template-columns: auto auto; justify-content: center; }
    .site-footer__nav { grid-column: 1 / -1; justify-self: center; }
    .site-footer__copyright { grid-column: 1; }
    .site-footer__controls { grid-column: 2; }
    .site-footer:not(:has(.site-footer__controls)) .site-footer__copyright { grid-column: 1 / -1; }
  }

  /* The bars pinned to the bottom of the screen (locale suggestion, cookie notice), stacked. */
  .site-dock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
  }

  /* The language picker lives in the footer, so its menu opens upward (no room below). */
  .site-footer .locale-switcher__menu {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--inline-space-half));
  }

  /* Here the options are language names, not flags — sized for a finger. */
  .site-footer .locale-switcher__option {
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--block-space);
    text-decoration: none;
  }
  .site-footer .locale-switcher__option.is-current { color: var(--color-text); font-weight: 600; }
}