/* ==========================================================================
   Shared site footer — lives on both shells.
   Token resolution: marketing (--mk-*) wins where present, app theme
   tokens otherwise, hard fallbacks last. Loaded by base.html and
   marketing_base.html.
   ========================================================================== */

.sfooter {
  --sf-ink: var(--mk-ink, var(--text-primary, #EDE8E2));
  --sf-body: var(--mk-body-c, var(--text-body, #A8A39D));
  --sf-muted: var(--mk-muted, var(--text-muted, #8A8480));
  --sf-copper: var(--mk-copper, var(--copper, #C78C5C));
  --sf-copper-hi: var(--mk-copper-hi, var(--copper-hover, #D49A6A));
  --sf-border: var(--mk-hairline, var(--border, rgba(140, 130, 120, 0.25)));
  margin-top: auto;
  border-top: 1px solid var(--sf-border);
  padding: 40px 28px 48px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
}

.sfooter-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sfooter-brand { display: flex; gap: 14px; align-items: flex-start; max-width: 300px; }
.sfooter-mark { width: 34px; height: 34px; color: var(--sf-copper); flex-shrink: 0; margin-top: 2px; }
.sfooter-word {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-size: 1.05rem;
  color: var(--sf-ink);
}
.sfooter-word em { font-style: italic; }
.sfooter-line { margin: 6px 0 10px; font-size: 0.85rem; color: var(--sf-body); }
.sfooter-fine { margin: 2px 0 0; font-size: 0.75rem; color: var(--sf-muted); }
.sfooter-fine a { color: var(--sf-muted); text-decoration: underline; text-underline-offset: 2px; }
.sfooter-fine a:hover { color: var(--sf-copper-hi); }

.sfooter-cols {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.sfooter-col { display: flex; flex-direction: column; gap: 8px; min-width: 128px; }
.sfooter-col h3 {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-muted);
}
.sfooter-col a {
  color: var(--sf-body);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.5;
}
.sfooter-col a:hover { color: var(--sf-copper-hi); }

/* Full-viewport pages: footer is invisible — body is height-locked. */
.chat-page ~ .sfooter,
.mail-page ~ .sfooter,
.approvals-page ~ .sfooter,
.cal-page ~ .sfooter { display: none; }

@media (max-width: 760px) {
  .sfooter { padding: 32px 20px 40px; }
  .sfooter-inner { flex-direction: column; gap: 32px; }
  .sfooter-cols { gap: 28px 40px; }
}

/* Phone app shell (bottom tab bar present = signed in): the marketing
   sitemap footer reads as web-page chrome inside the app — hide it. Legal
   and support links stay reachable via Help and the marketing pages. */
@media (max-width: 640px) {
  body:has(.tabbar) .sfooter { display: none; }
}