/* ==========================================================================
   legal.css — попап с юридическим документом

   Устройство окна такое же, как у попапа сертификата (gift.css), с одной
   разницей: прокручивается не карточка целиком, а только текст внутри неё.
   Документ длинный, и крестик должен оставаться на месте, а не уезжать
   вверх вместе с первым экраном.
   ========================================================================== */

.legal-modal {
  position: fixed;
  inset: 0;
  /* Тот же слой, что у лайтбокса и попапа сертификата: ниже шапки (990)
     и полосы прогресса (1000) окно оказалось бы под ними. */
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.legal-modal[hidden] {
  display: none;
}

.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
}

.legal-modal__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  padding: var(--pad-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  background-color: var(--main-bg);
  animation: legal-modal-in var(--dur) var(--ease);
}

@keyframes legal-modal-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

.legal-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 96px;
  background-color: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.legal-modal__close:hover,
.legal-modal__close:focus-visible {
  background-color: var(--card-bg-hover);
  color: var(--primary300);
}

/* --------------------------------------------------------------------------
   Текст документа
   -------------------------------------------------------------------------- */

/* Кегли и отступы сняты с самой страницы документа на референсе
   (getComputedStyle на `areyoukidy.me/terms/`): заголовок 48/48, заголовки
   разделов 42/42, текст 16/19.2, отступы .67em и .83em.

   ⚠️ Единственное место в проекте, где размеры шрифта заданы числами, а не
   токенами --fs-*. Причина: на референсе этот документ НЕ масштабируется —
   48 и 42 стоят и на 1920, и на 375. Токены же спускаются по ступеням
   (--fs-hero 48 → 42 → 30), и уже на 1440 попап разошёлся бы с оригиналом.
   Требование «размеры прямо как там» токенами невыразимо. */

.legal-modal__body {
  /* Своя прокрутка: страница под окном заблокирована, и без неё нижние
     разделы были бы недоступны. tabindex="0" в разметке — чтобы список
     листался стрелками сразу после открытия. */
  overflow-y: auto;
  /* Страховка: заголовки набраны капсом, и одно длинное слово шире карточки
     утащило бы весь документ вбок. Прокрутка тут только вертикальная. */
  overflow-wrap: break-word;
  color: var(--text-gray);
  font-size: 16px;
  line-height: 1.2;
}

/* Контейнер получает фокус при открытии (чтобы документ сразу листался
   стрелками), и браузер рисует вокруг всего текста рамку. Гасим: это
   не элемент управления, а полотно, и активная поверхность тут очевидна.
   У крестика и ссылок внутри фокус виден как обычно. */
.legal-modal__body:focus {
  outline: none;
}

.legal-modal__title {
  /* Место под крестик: без отступа заголовок заезжал бы ему под низ. */
  padding-right: 64px;
  margin-bottom: .67em;
  color: var(--text-color);
  font-size: 48px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.legal-modal__body h3 {
  margin-top: .83em;
  margin-bottom: .83em;
  color: var(--text-color);
  font-size: 42px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.legal-modal__body p {
  margin-bottom: 1em;
}

.legal-modal__body strong {
  color: var(--text-color);
  font-weight: var(--fw-bold);
}

.legal-modal__body a {
  color: var(--primary300);
}

.legal-modal__body a:hover {
  text-decoration: underline;
}

.legal-modal__body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .legal-modal {
    padding: 12px;
  }

  .legal-modal__card {
    max-height: calc(100vh - 24px);
  }

  /* Единственное отступление от референса. Он держит 48/42 на любой ширине,
     но там документ — страница во весь экран, а у нас карточка 350px:
     «КОНФИДЕНЦИАЛЬНОСТИ» на 42px просто шире её, и текст уезжал вбок.
     Спускаемся на ту же ступень, что и вся типографика лендинга (30/26). */
  .legal-modal__title {
    padding-right: 56px;
    font-size: 30px;
  }

  .legal-modal__body h3 {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-modal__card {
    animation: none;
  }
}