/* Shared site footer.
   Identical markup on every page, so it must not depend on any page's own
   layout classes — it brings its own palette fallbacks and its own wrapper
   width, and sits outside each page's .wrap/.shell container. */

.site-footer {
  --f-bg: #0e1117;
  --f-border: #262c3a;
  --f-text: #e8ebf2;
  --f-muted: #9aa3b5;
  --f-accent: #5b8cff;
  border-top: 1px solid var(--f-border);
  background: var(--f-bg);
  margin-top: 72px;
  padding: 44px 0 30px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--f-muted);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  /* index.html's legacy footer rule centred everything; the inline-flex logo
     obeyed it while the block paragraphs did not, so the tagline never lined
     up under the logo. Stated explicitly so no host page can shift it again. */
  text-align: left;
}

/* Matches the host page's own content column so the footer lines up with
   everything above it. Each stylesheet sets --content-width; 1060px is the
   homepage default. Without this the footer sat up to 94px left of the body
   text on the narrower legal and guide pages. */
.site-footer .foot-wrap {
  max-width: var(--content-width, 1060px);
  margin: 0 auto;
  padding: 0 24px;
}

/* Flex rather than a fixed 4-column grid: the footer is now as wide as the
   page it sits on, which varies from 720px to 1180px, so the columns have to
   reflow to the container rather than to the viewport. */
.site-footer .foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 28px;
  align-items: start;
}
/* Sized so all four blocks still fit the narrowest footer we ship (the 720px
   legal pages, 672px inside padding): 190 + 3x120 + 3x28 = 634. No container
   query needed, so the layout is identical on every page. */
.site-footer .foot-brand { flex: 1 1 190px; min-width: 180px; max-width: 270px; }
.site-footer .foot-col { flex: 1 1 0; min-width: 120px; }

/* Brand block */
.site-footer .foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--f-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 10px;
}
.site-footer .foot-logo .logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(180deg, #2a5cf2, #0d2a8c);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  flex: none;
}
.site-footer .foot-tag {
  margin: 0 0 14px;
  max-width: 30ch;
  font-size: 13.5px;
  color: var(--f-muted);
}
.site-footer .foot-meta {
  margin: 0;
  font-size: 13px;
  color: var(--f-muted);
  opacity: 0.85;
}

/* Link columns */
.site-footer h5 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-text);
  opacity: 0.55;
}
.site-footer .foot-col a {
  display: block;
  color: var(--f-muted);
  text-decoration: none;
  font-size: 13.5px;
  padding: 2px 0;
}
.site-footer .foot-col a:hover { color: var(--f-text); }

/* Baseline */
.site-footer .foot-base {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--f-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  opacity: 0.8;
}
.site-footer .foot-base a { color: var(--f-muted); text-decoration: underline; }
.site-footer .foot-base a:hover { color: var(--f-text); }
.site-footer .foot-grist { font-style: italic; }

@media (max-width: 560px) {
  /* Flex wrap at phone width produced a lopsided 2+1 layout with the last
     column stretched full-width. A 2-column grid keeps every column the same
     width and left-aligned; the brand spans the row above them. */
  .site-footer .foot-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .site-footer .foot-brand { grid-column: 1 / -1; max-width: none; }
  .site-footer .foot-col { min-width: 0; }
  .site-footer .foot-base { flex-direction: column; gap: 8px; }
}