/* Paginile juridice: politica de confidentialitate si termenii.
   Depinde de tokens.css, base.css si components.css.

   Un document juridic se citeste altfel decat o pagina de prezentare: randul
   pe randul, de sus in jos, uneori de doua ori. De aceea aici nu e nici grila,
   nici carduri - o singura coloana ingusta si mult aer intre sectiuni. */

.legal { padding-block: var(--s-60) var(--s-100); }

/* Masura de lectura, nu latimea containerului. Peste ~70 de caractere pe rand,
   ochiul pierde inceputul randului urmator - iar aici sunt randuri pe care
   omul chiar trebuie sa le urmareasca. */
.legal__wrap { max-width: 720px; }

.legal__head { margin-bottom: var(--s-50); }

.legal__title { margin-block: var(--s-20) var(--s-12); }

.legal__date { margin: 0; color: var(--text-3); font-size: var(--size-small); }

/* Primul paragraf, cel care spune despre ce e vorba. */
.legal__lead {
  color: var(--text-1);
  padding-bottom: var(--s-30);
  border-bottom: 1px solid var(--line-07);
}

.legal h2 {
  margin-block: var(--s-50) var(--s-20);
  color: var(--text-1);
}

.legal__sub {
  margin-block: var(--s-30) var(--s-12);
  font-size: var(--size-body);
  font-weight: var(--w-medium);
  color: var(--text-1);
}

.legal p { margin-block: 0 var(--s-20); }

.legal__list { margin-block: 0 var(--s-20); padding-inline-start: var(--s-20); }

.legal__list li { margin-bottom: var(--s-10); }

/* Textul ingrosat marcheaza ce se poate citi sarind - numele campurilor,
   termenele, institutiile. */
.legal strong { color: var(--text-1); font-weight: var(--w-medium); }

.legal a { color: var(--blue); }
.legal a:hover { color: var(--text-1); }

/* Numele cookie-urilor sunt siruri exacte, deci se scriu cu litera fixa. */
.legal code {
  padding: 2px 6px;
  border-radius: var(--r-chip);
  background: var(--surface-1);
  border: 1px solid var(--line-07);
  font-size: var(--size-small);
}