/* ==========================================================================
   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.
   ========================================================================== */

/* ---- Legal hero (smaller than the marketing .hero, no art/blobs) ---- */
.legal-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, #fff, var(--teal-mist), var(--teal-tint));
}

.legal-hero__inner {
  position: relative;
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .legal-hero__inner {
    padding-block: 5rem;
  }
}

.legal-hero__title {
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.legal-hero__meta {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

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

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

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

.legal-subheading,
.legal-content__blocks h3 {
  color: var(--ink);
  font-size: 1.0625rem;
  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 {
  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 ("the short version") ----
   Reports-only today, but kept in the legal family (rather than a
   page-specific file) since it's a prose component that any legal page
   could reuse. */
.legal-callout {
  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: 1rem;
}

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

.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%;
}