/* The universal footer, shared by every page family.
 *
 * Each family (public funnel, admin, homepage, error pages) has its own base
 * template and its own palette, so this file must not assume any of them:
 *
 *  - Every custom property carries a literal fallback. `errors/_base.html`
 *    deliberately links no other stylesheet -- an error page must render when
 *    the rest of the world is broken -- so `var(--brand-text-muted)` alone
 *    would leave its footer unstyled.
 *  - Rules are class-scoped (`.site-footer`), never `footer`, so the element
 *    rules already present in the admin and homepage <style> blocks cannot win
 *    on specificity and no import order has to be maintained.
 *  - The background is transparent: four page families use four different page
 *    colours, and a footer that painted its own would band against all of them.
 */

.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--site-footer-rule, #e2e6eb);
  background: transparent;
  color: var(--brand-text-muted, #757575);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: left;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  width: min(calc(100% - 2.5rem), 72rem);
  margin: 0 auto;
}

.site-footer-brand {
  font-weight: 700;
  color: var(--brand-text, #333333);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--brand-primary, #155aa3);
  border-bottom-color: currentColor;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--brand-primary, #155aa3);
  outline-offset: 3px;
  border-bottom-color: transparent;
}

/* Pushed to the far end on a wide screen; falls into the flow on a narrow one,
   where `margin-left: auto` on a wrapped flex line would strand it. */
.site-footer-version {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .site-footer-inner {
    width: min(calc(100% - 2rem), 72rem);
  }
  .site-footer-version {
    width: 100%;
    margin-left: 0;
  }
}