/* Shared site footer, used by every page: the app, docs, changelog, about and
 * legal.
 *
 * These rules were previously triplicated across src/style.css, docs.html and
 * changelog.html. Five of the eight rules were already byte-identical; adding
 * the about and legal pages would have made it five copies.
 *
 * Unlike the header, this genuinely is the same component everywhere, so the
 * app uses it too. The three real differences are variables rather than
 * duplicated rules:
 *
 *   --footer-max  content width. The app leaves it unset because its own
 *                 .container already constrains width; docs sets 1100px and
 *                 changelog 900px to match their columns.
 *   --footer-pad  inline padding. Unset for the app, again supplied by
 *                 .container; 1.5rem on the standalone pages.
 *   --footer-gap  space above the footer. 2rem in the app, 0 elsewhere.
 */

.site-footer {
  background: var(--footer-scrim);
  border-top: 1px solid var(--header-hairline);
  padding: 1.25rem 0;
  margin-top: var(--footer-gap, 0);
}

.footer-inner {
  /* Matches the header, so the chrome lines up top and bottom. */
  max-width: var(--footer-max, 75rem);
  margin-inline: auto;
  padding-inline: var(--footer-pad, 0);
  display: flex;
  align-items: center;
  /* Centered rather than space-between: the footer now holds a single link row,
     since the author credit moved to about.html. With one flex child
     space-between stranded it against the left edge. */
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* Five links do not fit on one line at 320px, the WCAG 1.4.10 reflow width,
     and without wrapping they pushed the page into horizontal scroll. */
  flex-wrap: wrap;
  justify-content: center;
}

.footer-link {
  font-size: 0.875rem;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-link:hover {
  color: white;
}

.footer-link-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Part of the footer, so it lives here rather than per page. It was previously
   defined separately in style.css, docs.html and changelog.html, which meant
   about.html and legal.html rendered the icon at 0x0 -- invisible. */
.github-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .footer-inner {
    flex-direction: column;
  }
}