/* ============================================================
   legal.css - Layout for the legal pages (privacy.html, terms.html)
   ------------------------------------------------------------
   Goal: this is the "section" stylesheet for the legal/utility
   pages, the way sections.css is for the landing page. It arranges
   a slim top bar, a readable long-form prose column, a table of
   contents, callout notes, and a slim footer.

   It reuses the shared layers unchanged: tokens.css (every value
   below is a var(--…), nothing hardcoded), base.css (.container,
   .container-narrow, heading scale) and components.css (.logo /
   .logo-img / .logo-word). The legal pages do NOT load sections.css
   or any JS - they are static content only.

   Authored MOBILE-FIRST (base = phone; min-width enhances upward
   on the canonical breakpoint scale documented in tokens.css).

   Load order on the legal pages: tokens -> base -> components ->
   legal (this file, last).
   ============================================================ */

/* ─── Slim top bar - always visible (unlike the landing nav, which is
   hidden until revealed by JS on desktop). Sticky so "Back to site"
   stays reachable on a long page. ─── */
.legal-bar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.legal-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 64px;
}
.legal-bar .logo {
  display: inline-flex; align-items: center; gap: var(--logo-gap);
}
.legal-bar-back {
  color: var(--color-ink-secondary);
  font-size: 14px; line-height: 18px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-pill);
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.legal-bar-back:hover { background: var(--color-bg-secondary); color: var(--color-ink); }

/* ─── Prose column - long-form reading. The width is capped by the shared
   .container-narrow helper; this block sets vertical rhythm and the
   typography for running legal text. ─── */
.legal .container { padding-top: var(--space-9); padding-bottom: var(--space-10); }

/* keep a jumped-to section clear of the sticky top bar (TOC anchor links) */
.legal section[id] { scroll-margin-top: var(--space-10); }

.legal-meta {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-7);
  color: var(--color-ink-secondary);
  font-size: 14px;
}
.legal-lead {
  font-size: 18px; line-height: 1.7;
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-7);
}

/* section headings - a hairline above each top-level section sets it apart */
.legal h2 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-divider);
}
.legal h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 18px;
}

.legal p { margin-bottom: var(--space-4); line-height: 1.7; }
.legal ul, .legal ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: var(--space-2); line-height: 1.7; }
.legal strong, .legal b { color: var(--color-ink); font-weight: 700; }

/* in-prose links - visible brand-pink underline (base.css strips link styling) */
.legal a { color: var(--color-rausch); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--color-rausch-hover); }

/* ─── Table of contents - compact two-column anchor list in a soft panel ─── */
.legal-toc {
  margin: var(--space-6) 0 var(--space-9);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: var(--space-6); }
.legal-toc li { break-inside: avoid; margin-bottom: var(--space-2); }
.legal-toc li:last-child { margin-bottom: 0; }
.legal-toc a {
  color: var(--color-ink); text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.5;
}
.legal-toc a:hover { color: var(--color-rausch); text-decoration: underline; }

/* ─── Callout note - for short, important reader-facing asides ─── */
.legal-note {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.legal-note p { margin-bottom: 0; color: var(--color-ink); }

/* ─── Slim footer - lighter than the marketing footer; copyright + links ─── */
.legal-foot {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-10);
}
.legal-foot-inner {
  padding-top: var(--space-5); padding-bottom: var(--space-5);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: var(--space-2);
}
.legal-foot-copy { color: var(--color-ink-secondary); font-size: 14px; line-height: 18px; }
.legal-foot-links { display: flex; gap: var(--space-4); }
.legal-foot-links a {
  color: var(--color-ink); font-size: 14px; line-height: 18px;
  transition: text-decoration var(--motion-fast) var(--ease-standard);
}
.legal-foot-links a:hover { text-decoration: underline; }

/* ─── Responsive - mirror the landing page's breakpoints (md, then xl) ─── */
@media (min-width: 745px) {
  .legal-bar-inner { padding-left: 40px; padding-right: 40px; height: 72px; }
  .legal-toc ul { columns: 2; }
  .legal-foot-inner { flex-direction: row; align-items: center; gap: var(--space-4); }
}
@media (min-width: 1129px) {
  .legal-bar-inner { padding-left: 80px; padding-right: 80px; }
}