/* Styles for the shared marketing footer used by /hello, /docs,
   /getting-started, /privacy, /terms and every generated blog page.
   The markup that goes with these rules is generated by Go — see package
   evstick/genfooter — and the behavior lives in /site-footer.js.

   Like /site-header.css this file assumes the page's own :root palette
   (--border, --muted, --muted2) already exists, and pages load it before
   their inline <style>, so a footer rule left behind in a page would
   silently win over the one here — change it here and nowhere else. */

/* Sticky footer, without turning .wrap into a flex or grid container (which
   would stop its children's margins collapsing and quietly change the
   spacing of every marketing page): the wrap is made at least as tall as
   what's left of the viewport under the fixed header — the 64px + safe area
   each page already reserves with its own body padding-top — and the footer
   sticks to the bottom of it. On a page whose content is taller than that
   the min-height does nothing and the footer sits below the content as
   usual, since sticky can never move an element past its container. */
body > .wrap {
  min-height: calc(100dvh - 64px - env(safe-area-inset-top));
}

footer {
  position: sticky;
  top: 100vh;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
footer a {
  color: var(--muted2);
  transition: color .15s;
}
footer a:hover {
  color: var(--muted);
}
.footer-source-note {
  flex-basis: 100%;
  padding-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted2);
}