/* ==========================================================================
   Текстові сторінки (Privacy Policy — Figma 931:1457 / 931:1581)

   Десктоп: секція темна, крок 117 від шапки до заголовка, 32 до тексту,
   низ 100. Текстовий блок з відступом 95 від краю, абзаци шириною 640.
   Мобайл: крок 42 від шапки, 32 до тексту, поля 16, низ 70.
   ========================================================================== */

.legal {
  background-color: var(--color-dark);
  color: var(--color-ivory);
}

.legal__container {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px між заголовком і текстом */
}

.legal__title {
  color: var(--color-cerise);
}

.legal__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px між блоками */
}

.legal__block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px між заголовком блоку і текстом */
}

/* «Last updated» у макеті має той самий стиль, що й заголовки розділів,
   але це не заголовок, тому лишається абзацом. */
.legal__heading,
.legal__updated {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-ivory);
}

.legal__text {
  color: var(--color-ivory);
}

.legal__text + .legal__text {
  margin-top: 0.75rem;
}

.legal__text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal__text a:hover {
  color: var(--color-beige);
}

/* --------------------------------------------------------------------------
   Десктоп
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  /* Шапка накриває секцію, тому її висота входить у верхній відступ:
     90 (шапка) + 117 (крок) = 207. */
  .legal__container {
    padding: 12.9375rem 5.9375rem 6.25rem; /* 207 / 95 / 100 */
  }

  /* Абзаци в макеті мають фіксовану ширину 640, заголовки — по контенту. */
  .legal__text {
    max-width: 40rem; /* 640px */
  }
}

/* --------------------------------------------------------------------------
   Мобайл
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* Логотип 69 + крок 42 = 111 від верху секції. */
  .legal__container {
    padding: 6.9375rem 1rem 4.375rem; /* 111 / 16 / 70 */
  }

  .legal__title {
    font-size: var(--fs-h1);
  }
}