/* ============================================================================
 * Fablely — shared landing-site styles
 * ============================================================================
 * Rules that are LITERALLY identical across 2+ hand-coded HTML pages.
 * Extracted to remove duplication and shrink page weight.
 *
 * Load order (matters for cascade): a11y.css → nav.css → site.css → inline <style>
 * Each page's own inline <style> wins over anything declared here, so adding
 * a rule here only sets a baseline; pages can still override.
 *
 * Sections:
 *   1. Universal reset
 *   2. Document defaults
 *   3. Skip-link (a11y)
 *   4. Header bar pattern (non-site-nav pages)
 *   5. Logo brand-token
 *   6. Nav-back link
 *   7. Plain-text page TLDR box
 *   8. Legal-footer link styling
 *   9. "Last updated" caption
 *  10. Legal-links strip hover/focus
 * ============================================================================ */

/* ===== 1. Universal reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== 2. Document defaults ===== */
html { scroll-behavior: smooth; }

/* ===== 3. Skip-link (a11y) — non-site-nav pages share this offset pattern =====
 * Sits off-screen at top: -100px until focused, then slides down to top: 12px.
 * Pages that use /nav.css get nav.css's left:-9999px variant overridden here,
 * which is intentional — every page now shares one skip-link style. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: #1A1F25;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ===== 4. Header bar — used by legal/utility pages that don't load /nav.css =====
 * Pattern: <header class="header"><div class="container header-inner">…</div></header>
 * Pages with their own .header rule (app.html, decide.html, pricing.html) override these. */
.header { padding: 22px 0; border-bottom: 1px solid #F4E8D6; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }

/* ===== 5. Logo brand-token =====
 * The ✦ star in the .logo wordmark. Same orange + spacing on every page that
 * uses the .logo class (legal/utility pages and the in-app header). */
.logo .star { color: #F4A261; margin-right: 4px; }

/* ===== 6. Nav-back link =====
 * "← Back home" / "← Back to recording" links on legal/utility pages. */
.nav-back { font-size: 13.5px; color: #6B6B6B; font-weight: 700; text-decoration: none; }

/* ===== 7. Plain-text-page TLDR/key box =====
 * The peach-gradient summary box at the top of privacy.html and terms.html. */
.tldr-box {
  background: linear-gradient(135deg, #FFF1DC 0%, #FFE0C7 100%);
  border-left: 4px solid #F4A261;
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  margin: 20px 0;
}

/* ===== 8. Legal-footer link styling =====
 * Used in app.html, story.html, decide.html — small grey footer link strip
 * with the standard hover/focus orange. Pages still own the .legal-footer
 * container style itself (padding varies per page). */
.legal-footer { padding: 28px 0; border-top: 1px solid #F4E8D6; margin-top: 40px; color: #6B6B6B; font-size: 13px; text-align: center; }
.legal-footer a { color: #6B6B6B; margin: 0 8px; text-decoration: none; }
.legal-footer a:hover, .legal-footer a:focus-visible { color: #F4A261; }

/* ===== 9. "Last updated …" line on legal pages =====
 * Privacy, terms, voice-privacy notices all share this caption styling. */
.updated { color: #6B6B6B; font-size: 13.5px; margin-bottom: 26px; }

/* ===== 10. Tiny legal-links strip in page footers =====
 * Used in auth, check, library, pricing, vault — the small "Privacy · Terms · …"
 * row at the very bottom. The hover/focus orange is identical everywhere;
 * the link's base color/margin/font-size vary slightly per page so those
 * stay inline. */
.legal-links a:hover, .legal-links a:focus-visible { color: #F4A261; }

/* ===== 11. Canonical site footer (.site-footer) =====
 * The dark 4-column footer used on EVERY public marketing page.
 * Apply by tagging the footer element: <footer class="site-footer">…</footer>.
 * Originally lived inline in index.html / pricing.html / founder-forever.html.
 * Hoisted here 2026-05-29 so voice / about / privacy / terms / app pages
 * could all share the same brand + product + legal layout without diverging.
 *
 * Required inner structure:
 *   .footer-grid (4-col grid)
 *     .footer-brand    → brand col with logo + tagline + email
 *     .footer-col × 3  → Product / Explore / Legal columns
 *       .footer-col-title + ul.footer-links
 *   .footer-bottom     → © line + WY postal address
 */
.site-footer {
  background: #1A1F25;
  padding: 64px 0 0;
  color: #9BA3AF;
  margin-top: 64px;
  text-align: left; /* about.html / voice.html inherit text-align:center
                       from their main content blocks; reset it inside the
                       dark footer so brand col + col titles aren't centered. */
}
/* Footer's inner container ignores the page-level .container width.
 * Otherwise legal/utility pages (about, privacy, terms) which set
 * a narrow .container (~760px) squeeze the 4-col footer grid, causing
 * "Do Not Sell or Share My Info" and "Baby Name Guides" to wrap.
 * Higher specificity (.site-footer + .container = 2 classes) wins
 * against pages' inline .container { max-width: ... } definitions. */
.site-footer .container,
.site-footer .container-wide {
  max-width: 1200px !important;
  width: 100%;
  margin-inline: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px 28px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.site-footer .footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.site-footer .footer-logo-link .star { color: #F4A261; }
.site-footer .footer-tagline {
  font-size: 14px;
  color: #9BA3AF;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 200px;
}
.site-footer .footer-meta { font-size: 13px; color: #6B7480; margin-bottom: 6px; }
.site-footer .footer-email-link { font-size: 13px; color: #F4A261; text-decoration: none; }
.site-footer .footer-email-link:hover { text-decoration: underline; }
.site-footer .footer-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.site-footer .footer-links { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-links li { margin-bottom: 11px; }
.site-footer .footer-links a { font-size: 14px; color: #9BA3AF; text-decoration: none; transition: color 0.15s; }
.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible { color: #fff; }
.site-footer .footer-bottom {
  padding: 20px 0;
  font-size: 13px;
  color: #6B7480;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer .footer-bottom a { color: #6B7480; text-decoration: none; }
.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible { color: #9BA3AF; }
@media (max-width: 820px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}