/* ============================================================
   NITRO RABBIT LABS — LEGAL PAGES
   Page-scoped styles for privacy.html, terms.html and sms-terms.html only.

   Link order on those pages:
     main.css (tokens + base) -> site.css (shared components) -> legal.css

   The pages reuse .page-intro, .section and .container from site.css; every
   rule below is either a new legal-* class or scoped under one, so no other
   page can be affected. All colour comes from the tokens in main.css.

   The document text is the owner's approved legal copy, transcribed
   verbatim. Section headings stay in capitals IN THE MARKUP because that is
   how the source documents set them; this file only sizes them so a column
   of capitals reads as structure rather than shouting.
   ============================================================ */

/* ---- Reading column ----
   One measure for the intro, the body and the related line so every left
   edge lines up. The font-size is set here (not on the paragraphs) so the
   ch unit below resolves against the 17px body text: 68ch is ~80 average
   characters of Inter per line. */
.legal-container {
  max-width: 68ch;
  font-size: 1.0625rem;
}

/* ---- Title block ---- */
.legal-intro { padding-bottom: clamp(24px, 3vw, 32px); }
.legal-intro h1 { max-width: none; margin-bottom: 14px; }

.legal-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.legal-dates__item { white-space: nowrap; }
/* Below 560px the two dates stack; the separator is hidden there so it
   never dangles at the end of the first line. It stays in the markup
   because it is part of the source document's date line. */
@media (max-width: 560px) {
  .legal-dates { flex-direction: column; }
  .legal-dates__sep { display: none; }
}

/* ---- Body ---- */
.legal-body {
  padding-top: clamp(28px, 4vw, 40px);
  padding-bottom: clamp(40px, 5vw, 56px);
  border-top: var(--border-hairline);
}

.legal-doc { overflow-wrap: break-word; }
.legal-doc p,
.legal-doc li {
  font-size: 1em;
  line-height: 1.7;
  color: var(--text-body);
}
.legal-doc p { margin: 0 0 1.15em; }
.legal-doc strong { font-weight: var(--fw-bold); color: var(--text-strong); }

/* Numbered section: capitals from the source, so smaller than the site h2
   and lightly tracked. The hairline above each one is the section break. */
.legal-doc h2 {
  margin: 2.6em 0 1em;
  padding-top: 1.6em;
  border-top: var(--border-hairline);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}
.legal-doc h3 {
  margin: 1.9em 0 0.55em;
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-strong);
}
/* An h3 straight under its h2 does not need the full gap above it. */
.legal-doc h2 + h3 { margin-top: 0; }

/* Section / subsection number: red-700 is 5.4:1 on the page canvas. */
.legal-num {
  margin-right: 0.35em;
  color: var(--nrl-red-700);
  font-variant-numeric: tabular-nums;
}

/* ---- Lists ---- */
.legal-doc ul {
  margin: -0.35em 0 1.15em;
  padding-left: 1.35em;
}
.legal-doc li { margin-bottom: 0.45em; padding-left: 0.2em; }
.legal-doc li:last-child { margin-bottom: 0; }
.legal-doc li::marker { color: var(--nrl-red-700); }

/* Opt-out keywords (SMS terms §7): nine one-word items read better as a
   short grid than a tall single column. DOM order is unchanged. */
.legal-doc .legal-list--keywords {
  columns: 3 8.5rem;
  column-gap: 24px;
}
.legal-list--keywords li { break-inside: avoid; font-weight: var(--fw-semibold); color: var(--text-strong); }

/* ---- Links ----
   Red-vs-body-ink is only 1.55:1, so colour alone cannot carry a link
   (WCAG 1.4.1): every link in the document is underlined. */
.legal-doc a,
.legal-related a {
  color: var(--nrl-red-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-doc a:hover,
.legal-related a:hover { color: var(--nrl-red-800); text-decoration-thickness: 2px; }
/* A phone number must never break between "+1" and the area code. */
.legal-doc a[href^="tel:"] { white-space: nowrap; }

/* ---- Conspicuous notice (the capitals preamble of the Terms) ---- */
.legal-notice {
  padding: 16px 20px;
  background: var(--surface-card);
  border: var(--border-hairline);
  border-left: 4px solid var(--nrl-nitro-red);
  border-radius: var(--radius-sm);
}
.legal-doc .legal-notice { font-size: 0.9375em; line-height: 1.6; color: var(--text-strong); }

/* Postal-style contact block (Privacy Policy §14). */
.legal-address { margin: 0 0 1.15em; font-style: normal; line-height: 1.7; color: var(--text-body); }

/* ---- Contents ---- */
.legal-toc {
  margin: 0 0 clamp(8px, 2vw, 16px);
  padding: 18px 22px;
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
}
.legal-toc__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 15rem;
  column-gap: 32px;
}
.legal-toc li { break-inside: avoid; padding: 3px 0; font-size: 15px; line-height: 1.45; }
.legal-toc a {
  display: inline-flex;
  gap: 8px;
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.legal-toc a:hover { color: var(--nrl-red-800); text-decoration-color: currentColor; }
.legal-toc__num {
  flex: none;
  min-width: 1.6em;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Related documents (navigation chrome, not legal text) ---- */
.legal-related { padding: 0 clamp(20px, 5vw, 56px) clamp(48px, 6vw, 72px); }
.legal-related p {
  margin: 0;
  padding-top: 20px;
  border-top: var(--border-hairline);
  font-size: 15px;
  color: var(--text-muted);
}
.legal-related__sep { margin: 0 6px; }

/* ---- Small screens ----
   (The anchor offset for the growing sticky header lives in main.css now,
   site-wide.) */
@media (max-width: 560px) {
  .legal-toc { padding: 16px 18px; }
  .legal-notice { padding: 14px 16px; }
}