/* Full width on a white ground that covers the pyonen */
.footer {
  padding: 16px;
  background: var(--color-background);
  font-family: var(--font-display);
  /* Stays put between pages (see layout.css) */
  view-transition-name: footer;
}

/* Columns stack on small screens and share the width equally on wider ones,
   a base font size apart */
.footer__columns {
  display: grid;
  gap: var(--fs-base);
}

/* Simplex like the links, with a heavier stroke than their hover one */
.footer__title {
  margin: 0 0 8px;
  font-size: inherit;
  font-weight: 400;
  -webkit-text-stroke: 1.5px currentColor;
}

.footer__links {
  display: grid;
  gap: calc(var(--fs-base) / 2);
}

.footer__link {
  text-decoration: none;
}

/* Simplex is a single-line font; the stroke gives it some weight */
.footer__link:hover,
.footer__link:focus-visible {
  -webkit-text-stroke: 1px currentColor;
}

/* Long German words like "Selbstverständniserklärung" break instead of
   widening their column; without a hyphen where the page's language can't
   hyphenate them (the German labels on English pages). It has to be
   "anywhere": the links' grid sizes to their longest word otherwise */
.footer__column {
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .footer__columns {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}