/* Правовые страницы: оферта, политика, реквизиты.

   Отдельный файл, а не куски в style.css: эти три страницы читают иначе,
   чем блог. Их не читают подряд — в них ищут пункт. Отсюда всё ниже:
   номера пунктов держатся строкой, таблица реквизитов выравнена по левой
   колонке, между документами есть переключатель.

   Подключается только на /oferta/, /politika/ и /rekvizity/ — остальным
   страницам эти правила не нужны. */

/* Переключатель между тремя документами. Человек, попавший на оферту из
   подвала, должен видеть, что рядом есть ещё два, — иначе он вернётся
   в подвал и будет искать там. */
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.legal-tabs a{
  padding:7px 13px;border-radius:9px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);color:var(--txt-2);
  text-decoration:none;transition:border-color .2s, color .2s, background .2s;
}
.legal-tabs a:hover{border-color:var(--acc);color:var(--txt)}
.legal-tabs a[aria-current="page"]{
  background:var(--acc);border-color:transparent;color:var(--acc-ink);font-weight:600;
}

/* Первый абзац — суть документа: кто с кем и о чём договаривается.
   Крупнее остального, чтобы её прочитали даже те, кто дальше не пойдёт. */
.legal .lead{font-size:16.5px;line-height:1.62;color:var(--txt)}

/* Пункты. Абзац с номером не должен разрываться так, чтобы номер остался
   на предыдущей строке один. */
.legal p{margin:0 0 13px;line-height:1.66}
.legal h2{margin-top:38px;scroll-margin-top:80px}
.legal h3{margin-top:24px;font-size:16px;font-weight:600}
.legal ul,.legal ol{margin:0 0 15px}
.legal li{margin-bottom:8px;line-height:1.6}

/* Порядок оказания услуги — единственное место, где нумерация несёт
   смысл: это последовательность шагов, а не список пунктов договора. */
.legal ol.steps{counter-reset:шаг;list-style:none;padding-left:0;margin:16px 0 18px}
.legal ol.steps li{
  counter-increment:шаг;position:relative;padding-left:38px;margin-bottom:13px;
}
.legal ol.steps li::before{
  counter-increment:none;content:counter(шаг);
  position:absolute;left:0;top:1px;
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--acc-ink);background:var(--acc);
}

/* Таблица реквизитов. Левая колонка — название поля, и она должна быть
   одной ширины во всех строках, иначе значения пляшут. */
.legal table.req{
  width:100%;border-collapse:collapse;margin:16px 0 20px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  /* Сброс обязателен. В style.css у .article table стоит min-width:520px —
     это для широких таблиц блога, которые прокручиваются внутри .tbl-wrap.
     Здесь обёртки нет и прокрутка не нужна: таблица реквизитов узкая и
     должна переноситься. Без сброса она распирала страницу на телефоне
     до 520 px и появлялась горизонтальная прокрутка. */
  min-width:0;
  /* Фиксированная раскладка, иначе браузер подбирает ширину левой колонки
     по самому длинному слову в КАЖДОЙ таблице отдельно — и три таблицы
     подряд получают три разные колонки. Здесь ширина задана один раз и
     держится во всех. */
  table-layout:fixed;
}
.legal table.req th,.legal table.req td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;
  /* При фиксированной раскладке длинное слово вылезает за колонку,
     если не разрешить перенос внутри слова. */
  overflow-wrap:anywhere;
}
.legal table.req tr:last-child th,
.legal table.req tr:last-child td{border-bottom:0}
.legal table.req th{
  width:210px;font-weight:500;color:var(--txt-2);
  background:color-mix(in srgb,var(--panel) 46%,transparent);
}
.legal table.req td{font-variant-numeric:tabular-nums}
/* Широкая таблица (цели и основания) — две равные колонки, обе с текстом. */
.legal table.req.wide th{width:auto;font-weight:600;color:var(--txt)}
.legal table.req.wide tr:first-child th{
  background:color-mix(in srgb,var(--panel) 62%,transparent);
}
.legal table.req.wide td{font-variant-numeric:normal}

/* Предупреждение — не оформление, а содержание: это единственное место,
   где мы просим человека что-то не делать ради его же безопасности. */
.legal .warn{
  margin:18px 0;padding:14px 16px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--acc) 42%,var(--line));
  background:color-mix(in srgb,var(--acc) 9%,transparent);
  font-size:14.5px;line-height:1.6;
}
.legal code{
  padding:2px 6px;border-radius:5px;font-size:.9em;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  border:1px solid var(--line);
}

@media(max-width:640px){
  /* На узком экране подпись поля над значением читается лучше, чем
     сплющенная колонка в 90 px. */
  .legal table.req,.legal table.req tbody,
  .legal table.req tr,.legal table.req th,.legal table.req td{display:block;width:auto}
  .legal table.req tr{border-bottom:1px solid var(--line)}
  .legal table.req tr:last-child{border-bottom:0}
  .legal table.req th{
    width:auto;border-bottom:0;padding-bottom:2px;
    font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  }
  .legal table.req td{border-bottom:0;padding-top:0}
  .legal ol.steps li{padding-left:33px}
}