/* ==========================================================================
   Legal pages — shared hero + prose patterns for privacy/, terms/ and
   reports/. Consolidated from privacy.css/terms.css/reports.css, which
   previously duplicated this pattern under drifted names
   (.legal-content__body vs .legal-prose__block vs explicit .legal-text
   classes; a stray --legal-text custom property in terms.css). Values
   verified against _crawl/privacy.html, _crawl/terms.html and
   _crawl/reports.html.

   Two markup styles are supported by design, since the three pages already
   shipped with different body markup and rewriting 250+ lines of legal copy
   to force identical markup was judged riskier than supporting both:
     - explicit classes on each element (privacy/index.html):
       .legal-heading / .legal-subheading / .legal-text / .legal-list
     - bare h2/h3/p/ul/li inside the .legal-content__blocks wrapper
       (terms/index.html, reports/index.html) — styled via descendant
       selectors below. Both resolve to the same rules.
   ========================================================================== */

/* The legal hero (.legal-hero*) lives in the critical stylesheet, inlined on every page. */

/* ---- Legal content body ---- */
.legal-content {
  background: #fff;
  padding-block: 4rem;
}

.legal-content__blocks {
  display: flex;
  flex-direction: column;
}

/* Vertical rhythm: the blocks wrapper used to add a 2.5rem flex gap on top
   of these margins, which doubled every space on the page. Spacing now
   comes from the margins alone, set to the same values the Support page's
   body uses (.support-subheading 2rem/0.75rem, .bullet-list li + li
   0.5rem). */
.legal-content__blocks > :first-child {
  margin-top: 0;
}

.legal-heading,
.legal-content__blocks h2 {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.legal-subheading,
.legal-content__blocks h3 {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Fourth level: the reports page's per-report sub-headings ("What it
   contains", "File formats"…) sit under an h3 report name, itself under a
   Part A / Part B h2. Body-sized, but bold and ink so it still reads as a
   heading; both margins are set because the site stylesheet's reset stops at h3. */
.legal-content__blocks h4 {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.legal-text,
.legal-content__blocks p,
.legal-content__blocks li {
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.8;
}

/* Paragraph-to-paragraph continuation gets more room than paragraph-into-list. */
.legal-content__blocks p + p {
  margin-top: 1rem;
}

.legal-content__blocks p + ul,
.legal-content__blocks ul + p,
.legal-content__blocks ul + ul {
  margin-top: 0.75rem;
}

/* Explicit spacing overrides used by privacy/index.html's hand-placed
   modifiers; nested under .legal-content__blocks so they reliably win over
   the adjacency rules above regardless of source order. */
.legal-content__blocks .legal-text--mb {
  margin-bottom: 0.75rem;
}

.legal-content__blocks .legal-text--mt {
  margin-top: 0.75rem;
}

.legal-content__blocks a {
  color: var(--teal);
  text-decoration: none;
}

.legal-content__blocks a:hover {
  text-decoration: underline;
}

.legal-list,
.legal-content__blocks ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.legal-list li + li,
.legal-content__blocks li + li {
  margin-top: 0.5rem;
}

/* ---- Callout box ----
   tools/build-legal.mjs renders a markdown block quote as
   <blockquote class="legal-callout"> — the printed disclaimers and the
   principle statements on the reports page. Kept in the legal family (rather
   than a page-specific file) since it's a prose component any legal page can
   reuse. The margin reset cancels the browser's default blockquote indent;
   the margins below space the box. */
.legal-callout {
  margin: 1.5rem 0 0;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 128, 128, 0.2);
  background: var(--teal-mist);
  padding: 1.25rem 1.5rem;
}

.legal-callout p {
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}

.legal-callout + p {
  margin-top: 1.5rem;
}

/* ---- Data tables ----
   Reports-only today; kept in the legal family for the same reason as
   .legal-callout above. */
.legal-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}

.legal-table-wrap + p {
  margin-top: 1rem;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  color: #4b5563;
  font-size: 0.9375rem;
}

.legal-table th,
.legal-table td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
}

.legal-table thead tr {
  background: var(--bg-section);
}

.legal-table th {
  color: var(--ink);
  font-weight: 600;
}

.legal-table tbody tr:nth-child(odd) {
  background: #fff;
}

.legal-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 250, 0.5);
}

.legal-table__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
}

.legal-table__label {
  font-weight: 500;
}

.legal-table--filters th:first-child {
  width: 40%;
}

.legal-table--statuses th:first-child {
  width: 18%;
}

.legal-table--statuses th:nth-child(2) {
  width: 41%;
}