/* ============================================================================
   Lazy Meal Planner — legal page styles (Terms, Privacy)
   ----------------------------------------------------------------------------
   Long-form reading layout. Everything here is built from the custom
   properties in tokens.css; no colour, space or type value is hardcoded if a
   token already exists for it. tokens.css and site.css are shared foundations
   and are not edited from this file.

   Load order:
     fonts.css  →  tokens.css  →  site.css  →  legal.css
   ========================================================================== */

.legal__content { max-width: var(--measure); }

.legal__updated {
  margin-top: var(--space-s);
  color: var(--colour-text-muted);
}

/* ── In-page contents list ──────────────────────────────────────────────
   These documents are long and most people arrive looking for one specific
   section, not to read start to finish. */
.legal__toc {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  background-color: var(--colour-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.legal__toc .eyebrow { margin-bottom: var(--space-xs); }

.legal__toc ul {
  columns: 1;
  gap: var(--space-l);
}

.legal__toc li { break-inside: avoid; }

.legal__toc li + li { margin-top: var(--space-xxs); }

.legal__toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-target-min);
}

@media (min-width: 600px) {
  .legal__toc ul { columns: 2; }
}

/* ── Prose body ──────────────────────────────────────────────────────────
   Generous line-height and a capped measure for legibility — this is read by
   people who are worried about something, not skimming for a headline. */
.legal__prose {
  margin-top: var(--space-2xl);
}

/* No scroll-margin-top on the headings here. site.css already sets
   scroll-padding-top on <html> to clear the sticky header, and the two
   properties add: 104px + 64px left a 94px void under the header on an
   anchor jump, wider than the 64px that separates sections in normal
   reading. One mechanism, not two. */

.legal__prose h2 {
  margin-top: var(--space-3xl);
}

.legal__prose h2:first-child { margin-top: 0; }

.legal__prose h3 {
  margin-top: var(--space-xl);
}

.legal__prose p,
.legal__prose ul,
.legal__prose ol {
  max-width: none; /* the ancestor .legal__content already caps the measure */
}

/* ── Tables ──────────────────────────────────────────────────────────────
   The page itself must never scroll horizontally. Each table scrolls in its
   own box instead, so it stays readable at 320px without breaking the
   layout around it. */
.table-wrap {
  margin-top: var(--space-m);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

.legal__prose table {
  width: 100%;
  min-width: 32rem; /* forces the scroll rather than a painful line-wrapped squeeze */
  border-collapse: collapse;
  font-size: var(--text-small);
}

.legal__prose th,
.legal__prose td {
  padding: var(--space-s) var(--space-m);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--colour-rule);
}

.legal__prose th {
  background-color: var(--colour-surface-muted);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.legal__prose tr:last-child td { border-bottom: 0; }

.legal__prose td:first-child,
.legal__prose th:first-child { font-weight: var(--weight-medium); }