/*
 * Shared stylesheet for the public static pages: landing, about, privacy, terms, legal.
 * Self-contained — does NOT use the SPA's compiled Tailwind bundle.
 * Palette mirrors tailwind.config.js exactly. See src/components/Layout/Layout.js for the
 * React reference these styles re-implement.
 */

/* Self-hosted webfonts. Sourced from @fontsource and copied to /public/fonts at
   build prep. Replaces the previous fonts.googleapis.com / fonts.gstatic.com
   <link> tags so these static stubs no longer leak the user's IP to Google on
   first paint. See audit/pre-launch-security-roadmap.md item #16. */
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root {
  --bg: #F1EBE4;
  --bg-card: #FFFFFF;
  --bg-card-soft: #F7F3EF;
  --text: #2A363C;
  --text-muted: #828e82;
  --text-soft: #525d62;
  --primary: #3a606e;
  --primary-hover: #2b4752;
  --primary-soft: rgba(58, 96, 110, 0.08);
  --accent: #f7dba7;
  --border: rgba(130, 142, 130, 0.2);
  --border-soft: rgba(130, 142, 130, 0.1);
  --shadow-sm: 0 1px 2px rgba(42, 54, 60, 0.05);
  --shadow-md: 0 8px 24px rgba(42, 54, 60, 0.08);
  --shadow-lg: 0 20px 50px rgba(42, 54, 60, 0.08);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', system-ui, sans-serif; }
.font-poppins { font-family: 'Poppins', system-ui, sans-serif; }
.font-lato { font-family: 'Lato', system-ui, sans-serif; }

/* ── Site Header ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(241, 235, 228, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.site-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 768px) { .site-header-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .site-header-inner { padding: 0 2rem; } }

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: var(--shadow-sm); object-fit: cover; }
.brand-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: none;
}
@media (min-width: 1024px) { .brand-name { display: inline; } }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.site-nav-links {
  display: none;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 768px) { .site-nav-links { display: flex; } }
.site-nav-links a {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
}
.site-nav-links a:hover { color: var(--primary); }
.site-nav-cta {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text);
  white-space: nowrap;
}
.site-nav-cta:hover { background: var(--bg-card-soft); color: var(--text); }

/* ── Page Wrapper ───────────────────────────────────────────────── */
.page {
  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 3rem;
  background: var(--bg);
}
.container-narrow {
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.container-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 3rem 1rem 2rem;
}
.site-footer-inner { max-width: 1152px; margin: 0 auto; padding: 0 0.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
}
.footer-brand-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-brand-row img { width: 40px; height: 40px; border-radius: 50%; }
.footer-brand-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.footer-blurb {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
  padding-right: 1rem;
  margin: 0;
}
.footer-col h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  color: var(--text);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col a { color: var(--text-soft); font-size: 0.875rem; }
.footer-col a:hover { color: var(--primary); }
.footer-copyright {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  background: var(--primary);
  color: #fff;
  padding: 0.875rem 1.625rem;
  border-radius: 0.625rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  border: 1px solid var(--primary);
  transition: all 200ms ease;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow-md); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center;
  background: transparent;
  color: var(--text);
  padding: 0.875rem 1.625rem;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.9375rem;
  border: 1px solid var(--border);
  transition: all 200ms ease;
}
.btn-secondary:hover { background: var(--bg-card-soft); color: var(--text); }

/* ── Legal Page (Privacy / Terms / Legal) ───────────────────────── */
.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
@media (min-width: 1024px) {
  .legal-grid { grid-template-columns: 280px 1fr; gap: 4rem; padding: 4rem 1.5rem; }
}

.legal-sidebar {
  font-family: 'Poppins', sans-serif;
  display: none;
}
@media (min-width: 1024px) {
  .legal-sidebar {
    display: block;
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}
.legal-sidebar h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.legal-sidebar nav { display: flex; flex-direction: column; gap: 0.125rem; }
.legal-sidebar nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  color: var(--text);
  line-height: 1.4;
}
.legal-sidebar nav a:hover { background: var(--primary-soft); color: var(--primary); }
.legal-sidebar-related {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.legal-sidebar-related h3 { margin-bottom: 0.5rem; }
.legal-sidebar-related a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  color: var(--text);
}
.legal-sidebar-related a:hover { background: var(--primary-soft); color: var(--primary); }

.legal-article { max-width: 850px; }
.legal-page-header {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2.5rem;
}
.legal-icon-badge {
  width: 56px; height: 56px;
  border-radius: 1rem;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-md);
}
.legal-icon-badge svg { width: 28px; height: 28px; }
.legal-page-header h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--text);
  letter-spacing: -0.02em;
}
.legal-page-header h1 .accent { color: var(--primary); }
.legal-page-header .effective {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0 1rem;
}
.legal-page-header .description {
  color: var(--text-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 680px;
  margin: 0;
}

.legal-section {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 0.875rem;
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
  scroll-margin-top: 96px;
  box-shadow: var(--shadow-sm);
}
.legal-section h2 {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  letter-spacing: -0.01em;
}
.legal-section h2 .num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--primary);
  line-height: 1;
  font-weight: 700;
}
.legal-section h3 {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  margin: 1.75rem 0 0.5rem;
}
.legal-section p, .legal-section li {
  color: #3a464d;
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(58, 96, 110, 0.4); text-underline-offset: 2px; }
.legal-section a:hover { text-decoration-color: var(--primary); }
.legal-section .intro { font-style: italic; color: var(--text-soft); }

/* ── Back Links Row ─────────────────────────────────────────────── */
.back-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 0 0;
}
.back-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
}
.back-links a:hover { text-decoration: underline; }

/* ── Generic helpers ─────────────────────────────────────────────── */
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}