/* ==================================================================
   LEGAL — kwizzbit/legal-* (Terms, Privacy, Cookies, Legal notices)
   Borrows the blog-post reading layout wholesale — cream background,
   720px measure, and the .blog-post__prose type ramp — so legal copy
   reads exactly like an article. This file adds ONLY the legal-specific
   chrome: eyebrow, last-updated line, table of contents, anchor offsets
   and a definitions list. See blog-post.css for the prose itself.
   ================================================================== */
.kwb-segment--legal { background: var(--wp--preset--color--cream); }

/* ── Eyebrow ─────────────────────────────────────────────── */
.legal__eyebrow {
  font-family: 'Pixelar', monospace;
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--coral);
  margin: 0 0 0.75rem;
}

/* ── Last-updated line ───────────────────────────────────── */
.legal__updated {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--custom--color--nav-ink);
  margin: 1rem 0 0;
}
.legal__updated time { font-weight: 700; color: var(--wp--preset--color--ink); }

/* ── Table of contents ───────────────────────────────────── */
.legal__toc {
  margin-top: clamp(0.5rem, 1.5vw, 0.875rem);  /* tighter to the title */
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); /* breathing room before the prose */
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.5);
}
.legal__toc-title {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--coral);
  margin: 0 0 0.75rem;
}
.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}
.legal__toc li {
  margin: 0 0 0.4rem;
  break-inside: avoid;
}
.legal__toc a {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: color 160ms var(--wp--custom--motion--ease-out);
}
.legal__toc a:hover { color: var(--wp--preset--color--coral); }

/* ── Prose tweaks specific to legal docs ─────────────────── */
/* Offset anchored headings so they clear the nav when deep-linked */
.legal__prose h2[id],
.legal__prose h3[id] { scroll-margin-top: 6rem; }

/* Definitions list (Terms §Definitions) */
.legal__prose dl { margin: 0; }
.legal__prose dt {
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  margin-top: 1em;
}
.legal__prose dd { margin: 0.2em 0 0; }

/* A quiet note block for "draft / contact" callouts */
.legal__note {
  margin-top: 1.5em;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--wp--preset--color--coral);
  background: rgba(255, 54, 35, 0.05);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .legal__toc ol { columns: 1; }
  .legal__eyebrow { font-size: 18px; } /* Pixelar eyebrow → 16px on mobile */
}