/**
 * Типографика контента (front).
 *
 * Стили наследуются от контейнера: достаточно обернуть текст в `.content`
 * (а также реально используемые на сайте `.text-content` и `.prose`) — обычный
 * HTML из WYSIWYG (TinyMCE) внутри получает оформление БЕЗ дополнительных классов.
 *
 * Скоупится только под эти контейнеры, поэтому служебные таблицы/списки сайта
 * (.bonus-tx, .org-list, корзина и т.п.) не затрагиваются.
 */

.content,
.text-content,
.prose {
    color: rgb(29 29 29);
    font-size: 1rem;
    line-height: 1.6;
}

/* Сброс верхнего отступа у первого и нижнего у последнего блока — чтобы контент
   не «отодвигался» от своей секции. */
.content > :first-child,
.text-content > :first-child,
.prose > :first-child {
    margin-top: 0;
}
.content > :last-child,
.text-content > :last-child,
.prose > :last-child {
    margin-bottom: 0;
}

/* --- Заголовки --- */
.content :where(h1, h2, h3, h4, h5, h6),
.text-content :where(h1, h2, h3, h4, h5, h6),
.prose :where(h1, h2, h3, h4, h5, h6) {
    margin: 1.6em 0 0.6em;
    font-weight: 700;
    line-height: 1.25;
    color: rgb(29 29 29);
}
.content h1, .text-content h1, .prose h1 { font-size: 1.875rem; }
.content h2, .text-content h2, .prose h2 { font-size: 1.5rem; }
.content h3, .text-content h3, .prose h3 { font-size: 1.25rem; }
.content h4, .text-content h4, .prose h4 { font-size: 1.125rem; }
.content h5, .text-content h5, .prose h5 { font-size: 1rem; }
.content h6, .text-content h6, .prose h6 {
    font-size: 0.9375rem;
    color: rgb(171 171 171);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* --- Параграфы и базовый текст --- */
.content p, .text-content p, .prose p {
    margin: 0 0 1em;
}

/* --- Ссылки --- */
.content a, .text-content a, .prose a {
    color: rgb(0 68 187);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease;
}
.content a:hover, .text-content a:hover, .prose a:hover {
    color: var(--main, #81c341);
}

/* --- Inline-форматирование --- */
.content :where(strong, b),
.text-content :where(strong, b),
.prose :where(strong, b) { font-weight: 700; }

.content :where(em, i),
.text-content :where(em, i),
.prose :where(em, i) { font-style: italic; }

.content u, .text-content u, .prose u { text-underline-offset: 2px; }

.content :where(s, del, strike),
.text-content :where(s, del, strike),
.prose :where(s, del, strike) { text-decoration: line-through; }

.content ins, .text-content ins, .prose ins {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Над- и подстрочные знаки (надёжно, на случай сброса в бандле). */
.content :where(sub, sup),
.text-content :where(sub, sup),
.prose :where(sub, sup) {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.content sub, .text-content sub, .prose sub { bottom: -0.25em; }
.content sup, .text-content sup, .prose sup { top: -0.5em; }

.content small, .text-content small, .prose small {
    font-size: 0.8125rem;
    color: rgb(171 171 171);
}

.content mark, .text-content mark, .prose mark {
    background: #f7ffea;
    color: inherit;
    padding: 0.1em 0.25em;
    border-radius: 3px;
}

/* --- Списки --- */
.content :where(ul, ol),
.text-content :where(ul, ol),
.prose :where(ul, ol) {
    margin: 0 0 1em;
    padding-left: 1.5rem;
}
.content ul, .text-content ul, .prose ul { list-style: disc; }
.content ol, .text-content ol, .prose ol { list-style: decimal; }

.content li, .text-content li, .prose li {
    margin: 0.35em 0;
    padding-left: 0.25rem;
}
/* Акцентные маркеры у маркированных списков. */
.content ul > li::marker,
.text-content ul > li::marker,
.prose ul > li::marker {
    color: var(--main, #81c341);
}

/* Вложенность: смена маркеров и компактный отступ. */
.content :where(ul, ol) :where(ul, ol),
.text-content :where(ul, ol) :where(ul, ol),
.prose :where(ul, ol) :where(ul, ol) {
    margin: 0.35em 0 0.35em;
}
.content ul ul, .text-content ul ul, .prose ul ul { list-style: circle; }
.content ul ul ul, .text-content ul ul ul, .prose ul ul ul { list-style: square; }

/* Списки определений. */
.content dl, .text-content dl, .prose dl { margin: 0 0 1em; }
.content dt, .text-content dt, .prose dt { font-weight: 700; }
.content dd, .text-content dd, .prose dd { margin: 0 0 0.6em 1.5rem; }

/* --- Цитаты --- */
.content blockquote,
.text-content blockquote,
.prose blockquote {
    margin: 0 0 1em;
    padding: 0.5em 0 0.5em 1.25rem;
    border-left: 3px solid var(--main, #81c341);
    color: rgb(90 90 90);
    font-style: italic;
}
.content blockquote p:last-child,
.text-content blockquote p:last-child,
.prose blockquote p:last-child { margin-bottom: 0; }

/* --- Таблицы --- */
.content table,
.text-content table,
.prose table {
    width: 100%;
    margin: 0 0 1.25em;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.content :where(th, td),
.text-content :where(th, td),
.prose :where(th, td) {
    padding: 12px 14px;
    border: 1px solid rgb(236 236 236);
    text-align: left;
    vertical-align: top;
}
/* Шапка таблицы и ячейки-заголовки (в т.ч. колонка-заголовок -> th в tbody). */
.content th,
.text-content th,
.prose th {
    background: #f7ffea;
    font-weight: 700;
    color: rgb(29 29 29);
}
.content thead th,
.text-content thead th,
.prose thead th {
    border-bottom-color: rgb(208 226 184);
}
/* Зебра + подсветка строки. */
.content tbody tr:nth-child(even),
.text-content tbody tr:nth-child(even),
.prose tbody tr:nth-child(even) {
    background: #fbfbfb;
}
.content tbody tr:hover,
.text-content tbody tr:hover,
.prose tbody tr:hover {
    background: #f8f8f8;
}
.content caption,
.text-content caption,
.prose caption {
    caption-side: bottom;
    padding-top: 0.5em;
    font-size: 0.8125rem;
    color: rgb(171 171 171);
    text-align: left;
}

/* --- Код --- */
.content :where(code, kbd, samp, pre),
.text-content :where(code, kbd, samp, pre),
.prose :where(code, kbd, samp, pre) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
}
.content :not(pre) > code,
.text-content :not(pre) > code,
.prose :not(pre) > code {
    background: #f8f8f8;
    border: 1px solid rgb(236 236 236);
    border-radius: 4px;
    padding: 0.12em 0.4em;
}
.content pre,
.text-content pre,
.prose pre {
    margin: 0 0 1.25em;
    padding: 1rem 1.125rem;
    background: #f8f8f8;
    border: 1px solid rgb(236 236 236);
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.5;
}
.content pre code,
.text-content pre code,
.prose pre code {
    background: none;
    border: 0;
    padding: 0;
}

/* --- Горизонтальная линия --- */
.content hr,
.text-content hr,
.prose hr {
    height: 0;
    margin: 2em 0;
    border: 0;
    border-top: 1px solid rgb(236 236 236);
}

/* --- Изображения и встраивания --- */
.content :where(img, video, iframe),
.text-content :where(img, video, iframe),
.prose :where(img, video, iframe) {
    max-width: 100%;
    height: auto;
}
.content img,
.text-content img,
.prose img {
    border-radius: 10px;
}
.content figure,
.text-content figure,
.prose figure { margin: 0 0 1.25em; }
.content figcaption,
.text-content figcaption,
.prose figcaption {
    margin-top: 0.5em;
    font-size: 0.8125rem;
    color: rgb(171 171 171);
    text-align: center;
}

/* --- Адаптив --- */
@media (max-width: 640px) {
    .content,
    .text-content,
    .prose { font-size: 0.9375rem; }

    .content h1, .text-content h1, .prose h1 { font-size: 1.5rem; }
    .content h2, .text-content h2, .prose h2 { font-size: 1.3125rem; }
    .content h3, .text-content h3, .prose h3 { font-size: 1.125rem; }

    /* Таблицы становятся прокручиваемыми по горизонтали, чтобы не ломать вёрстку.
       Сырой HTML из WYSIWYG нельзя обернуть, поэтому скроллим саму таблицу. */
    .content table,
    .text-content table,
    .prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content :where(th, td),
    .text-content :where(th, td),
    .prose :where(th, td) { padding: 10px 12px; }
}