/* Typography for the legal pages' long-form copy (#496).
 *
 * The copy lives in data/translations.template.json as HTML -- headings,
 * paragraphs, lists, links -- because it is long and it is translated into
 * fifteen languages. styles/tailwind.css is a prebuilt file whose content
 * globs do not reach the translations, so utility classes written inside those
 * strings would silently do nothing. These rules style plain elements under
 * one class instead, so a translator writes <h3> and <ul> and nothing else.
 *
 * Logical properties throughout (padding-inline-start, not padding-left):
 * Arabic sets dir="rtl" on the document and the list markers, indents and the
 * notice's accent border must follow it to the right-hand side.
 */
.legal-prose { font-size: 0.875rem; line-height: 1.7; color: hsl(var(--fg)); }
.legal-prose h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 0.5rem; }
.legal-prose h3 { font-size: 0.95rem; font-weight: 700; margin: 1.25rem 0 0.35rem; }
.legal-prose p { margin: 0.5rem 0; }
.legal-prose ul, .legal-prose ol { margin: 0.5rem 0; padding-inline-start: 1.25rem; }
.legal-prose ul { list-style: disc; }
.legal-prose ol { list-style: decimal; }
.legal-prose li { margin: 0.3rem 0; }
.legal-prose a { color: hsl(var(--brand-400)); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-prose a:hover { color: hsl(var(--brand-500)); }
.legal-prose strong { font-weight: 600; }
.legal-prose code { font-size: 0.8rem; padding: 0.05rem 0.3rem; border-radius: 0.25rem; background: hsl(var(--fg) / 0.06); overflow-wrap: anywhere; }
.legal-prose address { font-style: normal; }
.legal-prose > section + section { margin-top: 2rem; }
.legal-notice {
  font-size: 0.8rem; line-height: 1.5; color: hsl(var(--fgm));
  border-inline-start: 3px solid hsl(var(--brand-400));
  padding: 0.5rem 0.9rem; margin-bottom: 1.5rem;
  background: hsl(var(--fg) / 0.03); border-radius: 0.375rem;
}
.legal-meta { font-size: 0.8rem; color: hsl(var(--fgm)); margin-bottom: 2rem; }
/* The right to object (Art. 21 GDPR) must be "presented clearly and
   separately from any other information" (Art. 21(4)). Bold text in the
   middle of the rights list was neither, so it is a box of its own, first in
   its section. */
.legal-objection {
  border: 1px solid hsl(var(--brand-400) / 0.6);
  border-inline-start-width: 4px;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: hsl(var(--brand-400) / 0.06);
}
.legal-prose .legal-objection h3 { margin-top: 0; }