/* Shared site footer — the standalone counterpart to the landing's scroll-beat
   paper footer (landing/landing.css ".cf-paper*"). Rendered by
   bink/server/site_footer.py across the public server-rendered pages.

   Intentionally self-contained: it uses the live --bi-* tokens (with fallbacks).
   Every server-rendered page that embeds the footer loads tokens.css (shop / book /
   author directly; the legal / under-construction pages via the shared content shell
   in content_page.py), so it themes via data-theme everywhere. This mirrors — rather
   than reuses — the landing's .cf-paper content rules because the landing footer is a
   full-screen editorial beat with absolute positioning, a genuinely different layout.
   Keep the two visually in family when either changes. */

.site-foot {
  background: var(--bi-bg, #ebe4d6);
  border-top: 1px solid var(--bi-rule, #cfc6b3);
  padding: 52px 32px calc(40px + var(--bi-safe-bottom, 0px));
  text-align: center;
}

.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 48px;
  justify-content: center;
  text-align: left;
  margin: 0 auto;
}

.site-foot__col h3 {
  font-family: var(--bi-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bi-meta, #8a7e6c);
  margin: 0 0 10px;
  font-weight: 500;
}

.site-foot__col a {
  display: block;
  font-family: var(--bi-font-body, "Lora", Georgia, serif);
  font-size: 13px;
  color: var(--bi-ink-soft, #4a4135);
  margin-bottom: 7px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-foot__col a:hover,
.site-foot__col a:focus-visible {
  color: var(--bi-ink, #2e2820);
}

/* Three stacked, centered lines: wordmark / theme toggle / "Built by …". */
.site-foot__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* The wordmark primitive, scoped here so the footer renders correctly even on pages
   that don't load landing.css (which defines the global .bi-wordmark). */
.site-foot .bi-wordmark {
  font-family: var(--bi-font-sc, "Cormorant SC", "Cormorant Garamond", Georgia, serif);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 500;
  color: var(--bi-ink, #2e2820);
  font-size: 11px;
}

.site-foot__built {
  font-family: var(--bi-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bi-meta, #8a7e6c);
}

/* Theme toggle (System / Cashmere / Lamplight) — mirrors the landing's
   .bi-theme-toggle, scoped under .site-foot. Wired by site_footer_theme.js,
   which read/modify/writes the canonical display store. */
.site-foot .bi-theme-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bi-rule, #cfc6b3);
  background: transparent;
  padding: 0;
  cursor: pointer;
  height: 30px;
  font-family: var(--bi-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bi-meta, #8a7e6c);
}

.site-foot .bi-theme-toggle span {
  padding: 0 9px;
  line-height: 28px;
}

.site-foot .bi-theme-toggle span[data-active="true"] {
  color: var(--bi-bg, #ebe4d6);
  background: var(--bi-ink, #2e2820);
}

@media (min-width: 720px) {
  .site-foot { padding-top: 64px; padding-bottom: calc(48px + var(--bi-safe-bottom, 0px)); }
  .site-foot__cols { gap: 0 64px; }
}