/* Shared styling for /legal/*.html — same design tokens as the live editorial
   theme's light mode (src/EditorialTheme.css) and scripts/blog-shared.css,
   kept as plain hex here since static pages have no theme-toggle JS.
   Deliberately no prefers-color-scheme dark variant — see blog-shared.css
   for why (the real homepage always defaults to light regardless of OS
   preference, so a static page that followed the OS preference would look
   inconsistent next to it). External stylesheet (not inlined per-page like
   the blog pipeline) since these 3 pages are hand-maintained, not generated
   from a source+template pipeline — nothing regenerates them, so nothing
   needs the CSS baked in per file. */
:root {
  --accent: #0f7a54;
  --accent-shadow: 15, 122, 84;
  --ink: #16130f;
  --ink-soft: #4a4238;
  --muted: #a99f8f;
  --border: #ece4d8;
  --card: #ffffff;
  --panel-bg: #f5f0e8;
  --page-bg: #faf7f2;
  --header-bg: rgba(250, 247, 242, 0.8);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Newsreader', Georgia, serif;
  color: var(--ink);
  background: var(--page-bg);
  min-height: 100vh;
  line-height: 1.8;
}
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(to bottom, var(--header-bg) 0%, var(--header-bg) 55%, transparent 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 16px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.site-header a { text-decoration: none; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-header img { width: 90px; height: 50px; object-fit: contain; }
.site-header .brand { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.site-header .breadcrumb-sep { color: var(--muted); font-size: 1rem; margin: 0 2px; flex-shrink: 0; }
.site-header .breadcrumb-cur {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent);
}
.site-header-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.site-header-nav a {
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none;
}
.site-header-nav a:hover { color: var(--accent); }
.site-header-nav .nav-cta {
  background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 8px; font-weight: 700;
}
.site-header-nav .nav-cta:hover { color: #fff; opacity: 0.9; }

.page-wrap { max-width: 100%; margin: 40px 0; padding: 0 60px 80px; }
article {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px 60px;
}
.post-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--accent);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px;
}
h1 { font-family: 'Instrument Serif', Georgia, serif; font-size: 2.4rem; line-height: 1.2; color: var(--ink); margin-bottom: 14px; }
.meta { font-family: 'Inter', sans-serif; color: var(--muted); font-size: 0.85rem; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
h2 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 1.5rem; margin: 36px 0 14px; color: var(--ink); }
h3 { font-family: 'Newsreader', serif; font-weight: 600; font-size: 1.1rem; margin: 24px 0 10px; color: var(--ink-soft); }
p { margin-bottom: 16px; font-size: 1.02rem; color: var(--ink-soft); }
strong { color: var(--ink); }
ul, ol { margin: 0 0 16px 24px; }
li { margin-bottom: 8px; color: var(--ink-soft); }
hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
a { color: var(--accent); }
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.92rem; font-family: 'Inter', sans-serif; }
thead th { background: var(--accent); color: #fff; padding: 10px 14px; text-align: left; }
td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--ink-soft); }
tr:nth-child(even) td { background: var(--panel-bg); }

/* Cross-links between the three legal pages */
.legal-crosslinks {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.9rem;
}
.legal-crosslinks a { font-weight: 500; }
.legal-crosslinks a.current { color: var(--ink-soft); font-weight: 700; pointer-events: none; }

/* Mirrors the real site footer (App.js's <footer className="site-footer">) */
.site-footer {
  background: var(--page-bg); color: var(--ink-soft);
  padding: 48px 24px 24px; font-family: 'Inter', sans-serif; font-size: 0.9rem;
  border-top: 1px solid var(--border);
}
.footer-container { max-width: 820px; margin: 0 auto 16px; }
.footer-container a { color: var(--ink-soft); margin-right: 18px; text-decoration: none; }
.footer-container a:hover { color: var(--accent); }
.footer-copy { max-width: 820px; margin: 0 auto; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 640px) {
  article { padding: 28px 22px; }
  h1 { font-size: 1.9rem; }
}