/* ==========================================================================
   MIND OVER MUSCLE: legal pages (terms, privacy)
   Shared by algemene-voorwaarden.html, general-terms-and-conditions.html and
   privacy-policy.html. Readable article column on top of design system v3:
   no new colours, tokens only.
   ========================================================================== */

.legal-lang {
  margin-top: 4px;
}
.legal-lang a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- readable column ---------- */
.legal { display: grid; gap: clamp(36px, 4.5vw, 56px); }
.legal > * { max-width: 760px; }

/* ---------- identity / version card ---------- */
.legal-meta {
  display: grid;
  gap: 3px;
  padding: 22px 24px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.legal-meta strong { font-family: var(--f-head); font-weight: 700; color: var(--text); }
.legal-meta .legal-meta__version { margin-top: 8px; color: var(--faint); font-size: 13px; }

/* ---------- table of contents ---------- */
.legal-toc {
  padding: 22px 24px 24px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.legal-toc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 24px;
  margin-top: 14px;
}
.legal-toc__list li { font-size: 14.5px; line-height: 1.5; }
.legal-toc a { color: var(--muted); transition: color var(--t) var(--ease); }
.legal-toc a:hover { color: var(--text); }
@media (max-width: 560px) {
  .legal-toc__list { grid-template-columns: 1fr; }
}

/* ---------- article body ---------- */
.legal-article {
  display: grid;
  gap: 14px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.legal-article h2 { font-size: clamp(21px, 2.2vw, 27px); }
.legal-article > p { color: var(--text-2); font-size: 15.6px; line-height: 1.7; }
.legal-article ul {
  display: grid;
  gap: 9px;
  margin-top: 2px;
}
.legal-article ul li {
  position: relative;
  padding-left: 20px;
  color: var(--text-2);
  font-size: 15.6px;
  line-height: 1.65;
}
.legal-article ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.legal-article ul li strong { color: var(--text); font-weight: 700; }
.legal-article ul ul {
  margin-top: 8px;
  gap: 7px;
}
.legal-article a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.legal-divider { height: 1px; background: var(--line); }

/* ---------- closing identity block ---------- */
.legal-closing {
  display: grid;
  gap: 3px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.legal-closing strong { font-family: var(--f-head); font-weight: 700; color: var(--text); }

/* long Dutch compounds (e.g. Verwerkingsverantwoordelijke) must wrap on phones */
.legal > * { min-width: 0; }
.legal h2, .legal h3 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 680px) { .legal-toc a { display: inline-block; padding: 10px 0; } }