/* Стили контента из визуального редактора.

   main.css — готовый JIT-билд демо-вёрстки; утилит для списков, заголовков
   и картинок внутри произвольного HTML там нет, а пересобирать чужой билд мы
   не можем. Поэтому оформление .cms-content живёт отдельным файлом.

   Значения берут переменные демо-темы, чтобы контент не выпадал из палитры
   и корректно работал в тёмной теме. */

/* Отступы между блоками задаёт «сова»: каждый следующий элемент получает
   верхний зазор. НЕ обнуляем margin у p отдельно — иначе (специфичнее «совы»)
   абзац после списка прилипал к нему снизу, а над списком зазор был. Базовый
   reset и так держит margin:0, так что «сова» правит поток одна. */
.cms-content > * + * {
    margin-top: 16px;
}

.cms-content h2,
.cms-content h3,
.cms-content h4 {
    margin-top: 32px;
    color: var(--fg);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.cms-content h2 { font-size: 28px; line-height: 1.2; }
.cms-content h3 { font-size: 22px; line-height: 1.3; }
.cms-content h4 { font-size: 18px; line-height: 1.4; }

/* Списки — обычным потоком, БЕЗ display:flex: флекс «блокифицирует» <li>
   (они перестают быть list-item), и маркеры съезжают с разным отступом.
   Отступ пунктов друг от друга — через li + li, а не gap. */
.cms-content ul,
.cms-content ol {
    padding-left: 24px;
    list-style-position: outside;
}

.cms-content ul { list-style-type: disc; }
.cms-content ol { list-style-type: decimal; }

.cms-content li + li {
    margin-top: 6px;
}

.cms-content li::marker {
    color: var(--fg-subtle, currentColor);
}

.cms-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cms-content a:hover {
    color: var(--accent-hover, var(--accent));
}

.cms-content strong,
.cms-content b {
    color: var(--fg);
    font-weight: 600;
}

.cms-content blockquote {
    padding-left: 16px;
    border-left: 3px solid var(--border-strong, currentColor);
    color: var(--fg-subtle, inherit);
    font-style: italic;
}

.cms-content img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

.cms-content table {
    width: 100%;
    border-collapse: collapse;
}

.cms-content th,
.cms-content td {
    padding: 8px 12px;
    border: 1px solid var(--border, currentColor);
    text-align: left;
}

/* ── Юридические страницы (политика конфиденциальности) ───────────────
   Правка автора 01.09, мокап Privacy: 14 нумерованных разделов в одну
   колонку, между разделами тонкая линейка — иначе простыня однородного
   текста не читается и разделы сливаются. Линейка рисуется границей
   заголовка, а не элементом в контенте: менеджер правит текст в админке,
   и <hr> оттуда рано или поздно пропадёт или размножится. */
.cms-legal h2 {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid var(--border);
    font-size: 23px;
}

/* Первый заголовок идёт сразу за строкой «Обновлено» — там линейка лишняя. */
.cms-legal > :first-child + h2 {
    border-top: 0;
    padding-top: 0;
}

.cms-legal p,
.cms-legal li {
    font-size: 15px;
    line-height: 1.75;
}

/* Места, которые дозаполняет заказчик и юрист: [№1]…[№8]. Подсвечены
   намеренно — пока плашки видны, никто не примет черновик за финальный
   документ. После заполнения исчезают вместе с разметкой.

   Жирным красным (правка автора 02.09): жёлтая плашка на светлом фоне
   терялась, а эти места надо видеть с первого взгляда. Цвета захардкожены,
   как и раньше — это редакторский маркер, а не часть палитры контента; для
   тёмной темы свой набор, иначе тёмно-красный на тёмном не читается. */
.cms-content .ph {
    background: #FEF3F2;
    border: 1px dashed #F3A29A;
    border-radius: 6px;
    padding: 1px 7px;
    color: #B42318;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

[data-theme="dark"] .cms-content .ph {
    background: rgba(180, 35, 24, 0.18);
    border-color: #B42318;
    color: #FF9C93;
}