/* Дописанное руками после переезда из Webflow.
   site.css трогать не стоит — он снят с публикации и форматирован,
   свои правила держим отдельно, чтобы диффы оставались читаемыми. */

/* Ошибки полей формы.

   Цвет #B42318 — тот же, что у готовой плашки ошибки формы (.form_message-error).
   Это системный статусный цвет, он сознательно не привязан к бренд-токенам:
   бренд-акцент сам красный, и ошибка на нём перестала бы читаться как ошибка.

   Рамка через box-shadow, а не border: у .form_input border-style: none,
   и появление настоящей рамки сдвигало бы поле на пиксель. */
.form_input.has-error {
  box-shadow: inset 0 0 0 1px #b42318;
}

.form_field-error {
  margin-top: 0.25rem;
  color: #b42318;
  font-size: 0.875rem;
  line-height: 1.4;
}

.form_checkbox-icon.has-error {
  border-color: #b42318;
}

/* Звёздочка обязательного поля: чуть приглушена, чтобы не спорить с текстом метки */
.form_required {
  color: #b42318;
}

/* Юридические страницы (политика конфиденциальности).

   В системе нет утилитарных классов под длинный текст — есть только
   heading-style-h2, text-size-medium и text-size-small. Поэтому типографика
   задана одним блоком, скоупленным классом .legal: в снятый site.css не лезем.

   Ширина ограничена 48rem: строка длиннее ~90 символов читается плохо,
   а container-large здесь даёт всю ширину сетки. Авто-отступы по бокам
   ставят колонку по центру страницы — выключка внутри остаётся левой. */
.legal {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.legal h1,
.legal h2 {
  font-family: var(--_typography---font-styles--heading);
}

.legal h1 {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  line-height: 1.2;
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.375rem;
  line-height: 1.3;
}

.legal p,
.legal li {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

.legal ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal a {
  color: inherit;
  text-decoration: underline;
}

.legal_updated {
  color: var(--_primitives---colors--neutral);
}

/* Таблицы: на телефоне три колонки не влезают, поэтому прокрутка
   внутри обёртки, а не распирание страницы по горизонтали. */
.legal_table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 1rem;
}

.legal th,
.legal td {
  padding: 0.75rem 1.25rem 0.75rem 0;
  border-bottom: 1px solid var(--_primitives---colors--neutral-lighter);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.legal th {
  font-weight: 600;
}

/* Отступ сверху на юридической странице.

   padding-section-large даёт 7rem, а фиксированный навбар занимает
   1.5rem margin + 4.5rem высоты — под ним остаётся около 1rem воздуха,
   и заголовок читается как приклеенный к плашке. На мобильных та же шкала
   падает до 4rem, а навбар там ниже незначительно, поэтому добавляем
   на каждом брейкпоинте отдельно. Селектор с секцией (0-2-0) перебивает
   утилиту (0-1-0) независимо от порядка подключения файлов. */
.section_legal .padding-section-large {
  padding-top: 10rem;
}

@media screen and (max-width: 991px) {
  .section_legal .padding-section-large {
    padding-top: 9rem;
  }
}

@media screen and (max-width: 767px) {
  .section_legal .padding-section-large {
    padding-top: 7rem;
  }
}

/* Кегль заголовков на узких экранах.

   «конфиденциальности» при 2.5rem — около 400px, плюс паддинги: слово
   не влезает в телефон и распирает страницу по горизонтали (проверено
   на 430px). Утилитарных адаптивных кеглей в системе нет, задаём здесь.
   overflow-wrap — страховка на случай слов ещё длиннее. */
.legal h1,
.legal h2 {
  overflow-wrap: break-word;
}

@media screen and (max-width: 767px) {
  .legal h1 {
    font-size: 2rem;
  }

  .legal h2 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 479px) {
  .legal h1 {
    font-size: 1.75rem;
  }
}

/* Заголовки секций на самом узком экране.

   В site.css на 479 у .heading-style-h2 стоит 3rem — крупновато.
   Селектор с тегом (0-1-1) нужен потому, что custom.css подключён
   ДО site.css: при равной специфичности победил бы site.css. */
@media screen and (max-width: 479px) {
  h2.heading-style-h2 {
    font-size: 2.5rem;
  }
}