/* =============================================================================
   MyApollo — Site-wide unified footer.
   Mounted by shared/site-footer.js into <div id="site-footer-mount"></div>.

   Self-contained: declares its own --sf-* vars with fallback chains onto the
   shared tokens (v3 --gold/--ink/--surface OR landing apollo.css, which use the
   SAME names) and hardcoded last-resort values, so it looks correct on every
   page regardless of which sheet the page already imports.

   `sf-` prefix + <footer> wrapper avoids collisions with page-scoped footer rules.

   Responsive: desktop 4-column · tablet 2-column · mobile single-column stacked.
   ============================================================================= */

:where(:root) {
  /* Fallback chains mirror site-nav.css: read v3 tokens (--gold/--ink/--surface)
     first, then legacy v2 names (--accent-gold/--text-primary/--glass-bg) that
     the legal/privacy pages still ship, then a hardcoded last resort — so the
     footer themes correctly on EVERY page in both light and dark. */
  --sf-gold:    var(--gold, var(--accent-gold, #c9a84c));
  --sf-rose:    var(--rose, var(--accent-rose, #b85c5c));
  --sf-pink:    #ff7ec0;
  --sf-orpheus: #8b7fff;
  --sf-ink:     var(--ink, var(--text-primary, #f5f0e6));
  --sf-ink-dim: var(--ink-dim, var(--text-secondary, rgba(245,240,230,.66)));
  --sf-ink-faint: var(--ink-faint, var(--text-secondary, rgba(245,240,230,.5)));
  --sf-bg:      var(--surface, var(--glass-bg, #15130f));
  --sf-line:    var(--line-2, var(--line, var(--glass-border, rgba(245,240,230,.12))));
  --sf-font-body: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  --sf-font-disp: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  --sf-ease:    cubic-bezier(.25,.46,.45,.94);
}

#site-footer-mount { display: block; }

.sf,
.sf *,
.sf *::before,
.sf *::after { box-sizing: border-box; }

.sf {
  /* text-align/padding-inline reset defends against legacy bare `footer{}`
     rules (e.g. legal/privacy ship `footer{text-align:center;padding:0 5%}`). */
  text-align: left;
  margin-top: clamp(48px, 8vw, 96px);
  background: var(--sf-bg);
  border-top: 1px solid var(--sf-line);
  box-shadow: 0 -1px 0 color-mix(in oklab, var(--sf-gold) 14%, transparent);
  color: var(--sf-ink-dim);
  font-family: var(--sf-font-body);
  padding-block: clamp(44px, 6vw, 72px) calc(26px + env(safe-area-inset-bottom, 0px));
  padding-inline: 0;
}
.sf__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 36px);
}

/* ── Top: brand block + link columns ─────────────────────────────────── */
.sf__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.65fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--sf-line);
}

.sf__logo { display: inline-flex; align-items: center; text-decoration: none; }
.sf__wm {
  font-family: var(--sf-font-disp);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sf-gold);
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in oklab, var(--sf-gold) 38%, transparent);
}
.sf__wm em { font-weight: 300; opacity: .55; font-style: normal; }
.sf__tagline {
  margin: 16px 0 0;
  max-width: 38ch;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--sf-ink);
}
.sf__disclaimer {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--sf-ink-faint);
}
.sf__disclaimer strong { color: var(--sf-ink-dim); font-weight: 600; }

/* ── Link columns ────────────────────────────────────────────────────── */
.sf__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}
.sf__h {
  margin: 0 0 14px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-ink-faint);
}
.sf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sf__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 0;
  min-height: 40px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sf-ink-dim);
  text-decoration: none;
  border-radius: 8px;
  transition: color .2s var(--sf-ease), transform .2s var(--sf-ease);
}
.sf__link:hover { color: var(--sf-gold); transform: translateX(2px); }
.sf__link:focus-visible {
  outline: 2px solid var(--sf-gold);
  outline-offset: 2px;
}
.sf__link[data-tone="gold"]    { color: var(--sf-gold); }
.sf__link[data-tone="rose"]    { color: var(--sf-rose); }
.sf__link[data-tone="plot"]    { color: var(--sf-pink); }
.sf__link[data-tone="orpheus"] { color: var(--sf-orpheus); }
.sf__link[data-tone="rose"]:hover    { color: var(--sf-rose); }
.sf__link[data-tone="plot"]:hover    { color: var(--sf-pink); }
.sf__link[data-tone="orpheus"]:hover { color: var(--sf-orpheus); }
.sf__ic { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Bottom bar: studio credit + copyright ───────────────────────────── */
.sf__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: clamp(20px, 3vw, 28px);
}
.sf__made {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--sf-ink-faint);
}
.sf__made .sf__ic { width: 14px; height: 14px; color: var(--sf-rose); }
.sf__studio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sf-ink-dim);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s var(--sf-ease);
}
.sf__studio img { border-radius: 4px; }
.sf__studio:hover { color: var(--sf-gold); }
.sf__studio:focus-visible { outline: 2px solid var(--sf-gold); outline-offset: 2px; border-radius: 4px; }
.sf__copy { margin: 0; font-size: .8rem; color: var(--sf-ink-faint); }

/* ── Tablet: 2-column link grid, brand stacks above ──────────────────── */
@media (max-width: 900px) {
  .sf__top { grid-template-columns: 1fr; gap: 32px; }
  .sf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile: single-column stacked ───────────────────────────────────── */
@media (max-width: 540px) {
  .sf__cols { grid-template-columns: 1fr; gap: 22px; }
  .sf__bar { flex-direction: column; align-items: flex-start; }
}

/* ── Light theme: tokens flip automatically; nudge the credit line ────── */
[data-theme="light"] .sf { box-shadow: 0 -1px 0 color-mix(in oklab, var(--sf-gold) 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .sf__link, .sf__studio { transition: none !important; }
  .sf__link:hover { transform: none; }
}