/*
  Shared layout + typography for /about, /contact, /terms,
  /privacy, /cookies. Kept in one file (loaded via extraStyles)
  so every legal / info page gets the same visual rhythm —
  narrow measure, long-form type, clear h2 hierarchy, subtle
  banner for "template, not legally reviewed" notices.

  Lives in public/*.css (not page-scoped <style is:global>) so
  a route swap via Astro's ClientRouter doesn't drop the styles
  mid-navigation.
*/

.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px clamp(24px, 4vw, 48px) 96px;
}
.legal-head { margin-bottom: 48px; }
.legal-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 0 0 16px;
}
.legal-head h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.legal-lede {
  margin: 0;
  color: var(--fg-dim);
  font-size: 1.1rem;
  line-height: 1.55;
}

.legal-body h2 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin: 40px 0 12px;
  line-height: 1.25;
}
.legal-body h3 {
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 28px 0 8px;
}
.legal-body p,
.legal-body ul,
.legal-body ol {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}
.legal-body ul,
.legal-body ol {
  padding-left: 24px;
}
.legal-body li { margin-bottom: 6px; }
.legal-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body a:hover { text-decoration-thickness: 2px; }
.legal-body strong { font-weight: 600; }
.legal-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-sunken);
  padding: 1px 6px;
  border-radius: 4px;
}

/*
  Banner shown at the top of every page that contains
  auto-generated template text. Keeps the "template" status
  visible until an actual legal review has been done and the
  placeholders filled in. Remove the banner from each page
  when its content has been signed off.
*/
.legal-banner {
  padding: 16px 18px;
  background: var(--chartreuse);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  margin: 0 0 32px;
  font-size: 0.9rem;
  line-height: 1.55;
}
.legal-banner strong { font-weight: 600; }

.legal-meta {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}

.legal-toc {
  margin: 32px 0 40px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.legal-toc-head {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin: 0 0 12px;
}
.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.7;
}
.legal-toc li { margin-bottom: 2px; }

@media (max-width: 640px) {
  .legal-wrap { padding: 48px 20px 72px; }
  .legal-head h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
}