/*
  Страницы-документы: /privacy-policy/ и /forma-soglasiya/.

  Обёртка (.legal-stub) появилась как заглушка «заголовок + абзац», чтобы
  ссылки из чекбоксов согласия в модалке заявки не вели на 404. С правок
  05.08 (п.8) внутрь неё лёг настоящий документ с promis.ru — разделы,
  нумерация, списки, таблица cookie. Имя класса оставлено прежним: в
  эталонном Eleventy обе страницы по-прежнему заглушки (тексты живут
  только в полях WordPress), и переименование развело бы копии там, где
  расхождения нет.

  Оформление намеренно скромное: это юридический текст, а не блок продаж.
  Своего фрейма в Figma у него нет, поэтому размеры здесь — не перенос
  макета, а типографика документа, собранная из существующих токенов
  (--fs-body/--lh-body для основного текста) плюс несколько локальных
  custom properties на то, чему токена в проекте не заведено.
*/
.legal-stub {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: calc(var(--header-height) + 80px) var(--page-gutter) 120px;
}

.legal-stub__title {
  margin: 0 0 20px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-ink);
}

/*
  Тело документа. Всё внутри приходит из визуального редактора админки и
  проходит через wp_kses с белым списком (theme/inc/typo.php ->
  lekoborud_legal_allowed_html), поэтому селекторы здесь — по голым тегам:
  классов у этой разметки нет и быть не может, редактор их не расставляет.
*/
.legal-doc {
  --legal-gap: 16px;          /* отбивка между абзацами и списками */
  --legal-section-gap: 40px;  /* воздух перед заголовком раздела */
  --legal-border: #e2e2e8;    /* линии таблицы; светлее --color-slider-border, но темнее --color-divider — тот на границах таблицы не читается */
  --legal-th-bg: #f0f0f6;     /* шапка таблицы; тот же тон, что у плашек --color-support-card-bg */

  max-width: 860px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  /*
    Длинная ссылка или «АО«ПРОМИС»/ИНН» без пробелов не должны расширять
    страницу вбок — на 390 это первое, что распирает вёрстку.
  */
  overflow-wrap: break-word;
}

.legal-doc > *:first-child {
  margin-top: 0;
}

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

.legal-doc p {
  margin: 0 0 var(--legal-gap);
}

.legal-doc h2,
.legal-doc h3,
.legal-doc h4 {
  margin: var(--legal-section-gap) 0 var(--legal-gap);
  font-weight: var(--fw-semibold);
  color: var(--color-heading-dark);
}

.legal-doc h2 {
  font-size: 24px;
  line-height: 32px;
}

.legal-doc h3 {
  font-size: 19px;
  line-height: 27px;
}

.legal-doc h4 {
  font-size: var(--fs-trust-title);
  line-height: var(--lh-trust-title);
}

/*
  base.css снимает маркеры и отступы со ВСЕХ ul (там это верно: почти
  каждый список на сайте — это сетка карточек). В документе список должен
  выглядеть списком, поэтому здесь возвращаем и маркеры, и втяжку.
*/
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--legal-gap);
  padding-left: 22px;
}

.legal-doc ul {
  list-style: disc;
}

.legal-doc ol {
  list-style: decimal;
}

.legal-doc li {
  margin-bottom: 8px;
}

.legal-doc li:last-child {
  margin-bottom: 0;
}

/* base.css гасит подчёркивание и цвет у всех ссылок — в тексте документа
   ссылка обязана быть видна как ссылка. */
.legal-doc a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
  <a> без адреса. В форме согласия на promis.ru почта info@promis.ru
  обёрнута в <a> без href — на их сайте это выглядит обычным текстом, у
  нас же правило выше покрасило бы её красным и подчеркнуло, то есть
  посетитель увидел бы ссылку, которая никуда не ведёт. Сам текст не
  трогаем (документ переносится дословно, дефект передан клиенту
  списком), а вид возвращаем к обычному.
*/
.legal-doc a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.legal-doc strong,
.legal-doc b {
  font-weight: var(--fw-semibold);
}

/*
  Таблица. На ПК — колонки равной ширины во всю ширину текста
  (table-layout:fixed): в таблице cookie три смысловые колонки, и разница
  в длине текста между ними не повод делать их разными.
  Мобильный вариант — в медиазапросе ниже.
*/
.legal-doc table {
  width: 100%;
  margin: 0 0 var(--legal-gap);
  border-collapse: collapse;
  table-layout: fixed;
}

.legal-doc th,
.legal-doc td {
  padding: 12px 14px;
  border: 1px solid var(--legal-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.legal-doc th {
  font-weight: var(--fw-semibold);
  background: var(--legal-th-bg);
}

/*
  Мобильная версия. Пропорционального пересчёта по 390, как на страницах с
  макетом, здесь нет намеренно: макета этих страниц не существует, а
  юридический текст на телефоне должен читаться, а не масштабироваться
  вместе с шириной экрана. Поэтому — обычные фиксированные значения.
*/
@media (max-width: 599.98px) {
  .legal-stub {
    padding: calc(var(--header-height) + 40px) 20px 80px;
  }

  .legal-stub__title {
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 34px;
  }

  .legal-doc {
    --legal-section-gap: 28px;

    max-width: none;
    font-size: 14px;
    line-height: 23px;
  }

  .legal-doc h2 {
    font-size: 20px;
    line-height: 27px;
  }

  .legal-doc h3 {
    font-size: 17px;
    line-height: 24px;
  }

  .legal-doc ul,
  .legal-doc ol {
    padding-left: 18px;
  }

  /*
    Таблица на 390: три колонки во всю ширину экрана дают ~100px на
    колонку, и текст начинает рваться посередине слова
    («обеспечиваю/т», «интерактивны/х») — для юридического документа это
    хуже, чем прокрутка. Поэтому таблица становится собственным
    прокручиваемым блоком: колонки получают естественную ширину, слова
    не рвутся, а СТРАНИЦА вбок по-прежнему не едет — прокрутка живёт
    внутри блока и наружу не выходит (проверено: scrollWidth страницы
    равен 390).
  */
  .legal-doc table {
    display: block;
    max-width: 100%;
    width: max-content;
    overflow-x: auto;
    table-layout: auto;
  }

  .legal-doc th,
  .legal-doc td {
    padding: 8px;
    min-width: 150px;
    /* Наследуемый от .legal-doc break-word здесь не нужен: колонка теперь
       шире слова, а с ним таблица продолжала бы рвать текст. */
    overflow-wrap: normal;
  }
}