/*
 * Служебные страницы старой вёрстки: сонник, имена, алфавитные указатели,
 * поиск, страницы Куръана. Приведены к оформлению сайта 20.08.2026.
 *
 * Общего у них три вещи, и все они жили на «Manrope Light» (шрифта в проекте
 * нет, браузер подставлял системный):
 *   - заголовок страницы 32px,
 *   - строка-переключатель `tags_filter` со ссылками браузерным синим,
 *   - поле поиска `.search-query` Arial 13px высотой 26.
 *
 * 🛑 Селекторы выбраны так, чтобы НЕ задеть страницу материала: там заголовок
 * лежит внутри `div.article__header` (то есть `.article > div > h1`), а здесь
 * `h1` - прямой ребёнок `.article`. Страницы статей пока живут на старом
 * оформлении, их черёд - когда будет макет материала.
 */

/* ---------- Заголовок и вводный текст ---------- */

.article > h1.article__header {
    margin: 0 0 var(--sp-16);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-feed-title-big);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

.article__text--small {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.6;
}

.article__text--small p {
    margin: 0 0 var(--sp-12);
}

/* Заголовок вводного текста (он стоит ПОД поиском - см. Sonnik/index.html.twig).
   Своего правила у `h2` внутри этого блока не было, браузер рисовал его
   системной антиквой поверх Golos Text соседних абзацев. */
.article__text--small h2 {
    margin: 0 0 var(--sp-12);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-18);
    font-weight: var(--fw-demibold);
    line-height: 1.3;
}

.article__text--small p:last-child {
    margin-bottom: 0;
}

/* Ссылки внутри текста - фирменным оранжевым вместо браузерного синего. */
.article__text--small a {
    color: var(--c-accent);
}

/* ---------- Строка-переключатель («Найти сон с помощью…») ---------- */

.tags_filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8) var(--sp-12);
    margin: var(--sp-20) 0;
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.tags_filter .text--label {
    color: var(--c-text-muted);
    font-size: var(--fs-14);
}

/* 🛑 В разметке это `ul`, и на страницах старой вёрстки у списков свои
   маркеры через ::before - снимаем вместе с полями. */
.tags_filter__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags_filter__items li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags_filter__items li::before {
    content: none;
}

/* Пилюли - те же, что у рубрик главной и переключателя на странице намаза. */
.tags_filter__items a,
.tags_filter__items .link-dashed {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 30px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    /* 🛑 Семейство задаём самой ссылке: у `.link-dashed` в старом `main.css`
       свой `font-family`, и наследование от `.tags_filter` его не перебивает. */
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1;
    text-decoration: none;
}

.tags_filter__items a:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.tags_filter__items .active a {
    border-color: transparent;
    background: var(--c-sand-bg);
    font-weight: var(--fw-demibold);
}

/* ---------- Поле поиска по разделу ---------- */

/* 🛑 Своя подложка обязательна к сбросу: у формы в старом `main.css` серый
   фон #ebeae5 с радиусом 17 и полями - вокруг нового поля оставался овал. */
.form-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 420px;
    margin: 0 0 var(--sp-20);
    padding: 0;
    border-radius: 0;
    background: none;
}

.form-search .search-query {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 var(--sp-40) 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.form-search .search-query::placeholder {
    color: var(--c-text-meta);
    font-style: normal;
}

.form-search .search-query:focus {
    outline: none;
    border-color: var(--c-accent-amber);
}

/* Кнопка «найти» - в разметке пустая ссылка с фоновой иконкой из спрайта.
   Ставим её внутрь поля справа и рисуем лупу сами, чтобы не тянуть спрайт. */
.form-search .process {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    color: var(--c-text-muted);
    text-indent: 0;
}

.form-search .process::before {
    display: block;
    width: 13px;
    height: 13px;
    border: 1.5px solid currentcolor;
    border-radius: 50%;
    content: '';
}

.form-search .process::after {
    position: absolute;
    right: 11px;
    bottom: 11px;
    display: block;
    width: 6px;
    height: 1.5px;
    background: currentcolor;
    content: '';
    transform: rotate(45deg);
}

.form-search .process:hover {
    color: var(--c-accent);
}

/* ---------- Алфавитный указатель ---------- */

/*
 * Буквы на страницах «Сонник на букву», «Имена на букву», «Термины на букву».
 * Оформление лежало инлайновым `<style>` в самих шаблонах: прямоугольники
 * 32×39 с серой рамкой без радиуса, активная буква - зелёная (#2e7d32).
 * Стили вынесены сюда, из шаблонов блоки удалены.
 */
.alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin: 0 0 var(--sp-20);
    padding: 0;
    list-style: none;
}

.alphabet li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.alphabet li::before {
    content: none;
}

/* Квадрат 36×36; двухсимвольные подписи раздвигают его по ширине. */
.alphabet li a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--sp-5);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1;
    text-decoration: none;
}

.alphabet li a:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/* Выбранная буква - песочная заливка, как активная пилюля рубрик. */
.alphabet li.active a {
    border-color: transparent;
    background: var(--c-sand-bg);
    color: var(--c-text);
    font-weight: var(--fw-demibold);
}

/* ---------- Список тем (сонник и словарь терминов) ---------- */

/*
 * Разметка досталась от старой сетки Bootstrap: три `.span4` внутри
 * `.row-fluid`. Самой сетки в проекте нет, поэтому колонки шли одна под
 * другой во всю ширину, а темы были синими подчёркнутыми ссылками 16px.
 *
 * 🛑 Селекторы с `:has(.list-themes)` - `.row-fluid` и `.span4` встречаются
 * ещё на десятке страниц (блоги, конференции, фетвы, кроссворды), и общее
 * правило по ним поехало бы там.
 */
.row-fluid:has(.list-themes) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-20);
    margin-top: var(--sp-20);
}

@media (min-width: 700px) {
    .row-fluid:has(.list-themes) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .row-fluid:has(.list-themes) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.span4:has(.list-themes) {
    width: auto;
    margin: 0;
}

.list-themes {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-main);
}

.list-themes__item {
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.list-themes__item::before {
    content: none;
}

.list-themes__item a {
    color: var(--c-text);
    /* 🛑 Семейство - самой ссылке: у `.link`/`.link-underlined` в старом
       `main.css` своё, наследование от списка его не перебивает. */
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.4;
    text-decoration: none;
}

.list-themes__item a:hover {
    color: var(--c-accent);
}

/* Тема верхнего уровня - полужирным, с отбивкой от предыдущей группы. */
.list-themes__item--headline {
    margin-top: var(--sp-16);
}

.list-themes__item--headline:first-child {
    margin-top: 0;
}

.list-themes__item--headline a {
    font-weight: var(--fw-demibold);
}

/* ---------- Результаты поиска и указатели ---------- */

/* Списки снов, имён и букв в этих шаблонах идут без своего класса - только
   обёртка сетки старой вёрстки. Задаём по ней, чтобы не плодить классы в
   пяти шаблонах сразу. */
.main .nine-twelfths {
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.6;
}

.main .nine-twelfths a:not(.process) {
    color: var(--c-text);
}

.main .nine-twelfths a:not(.process):hover {
    color: var(--c-accent);
}

/* ---------- Список записей справочника (22.08.2026) ---------- */

/*
 * Страницы «на букву» и «по теме» в справочниках терминов и снов, а также
 * результаты поиска на их главных: список ссылок `.list-1`.
 *
 * Что было: ссылки браузерным синим с подчёркиванием, шрифт «Manrope Light»
 * (в проекте его нет, браузер подставлял системный), а три колонки старой
 * бутстраповской сетки (`.span4`) шли ОДНА ПОД ДРУГОЙ во всю ширину - на букву
 * «А» это 170 терминов простынёй в один столбец.
 *
 * 🛑 Селекторы через `:has(.list-1)` - `.row-fluid` и `.span4` встречаются ещё
 * на десятке страниц (блоги, конференции, фетвы, кроссворды), и общее правило
 * по ним поехало бы там. Тот же приём, что выше у списка тем.
 *
 * 🛑 `auto-fit`, а не `auto-fill`: на страницах «на букву» колонок три, а в
 * результатах поиска - одна, и она должна занимать всю ширину. `auto-fill`
 * оставил бы её в первом треке из трёх, то есть узкой полосой в треть колонки.
 */
.row-fluid:has(.list-1) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-8) var(--sp-20);
    margin-top: var(--sp-20);
}

.span4:has(.list-1) {
    width: auto;
    margin: 0;
}

.list-1 {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-1 li {
    margin: 0;
    padding: var(--sp-4) 0;
    list-style: none;
}

.list-1 li::before {
    content: none;
}

.list-1 li a {
    /* 🛑 Семейство задаём самой ссылке: у `.link`/`.link--style-1` в старом
       main.css своё, наследование от списка его не перебивает. */
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.4;
    text-decoration: none;
}

.list-1 li a:hover {
    color: var(--c-accent);
}

/* ---------- Перелинковка на страницах справочников (24.08.2026) ---------- */

/*
 * Блоки «Тема:» и «Смотри также:» на страницах термина и сна, плюс переходы по
 * темам сонника под заголовком. Ссылки в них шли браузерным синим с
 * подчёркиванием - на 2537 страницах справочников это единственное, что
 * выбивалось из оформления сайта.
 *
 * 🛑 Класса `.link-dashed` тут мало: он оформлен ТОЛЬКО внутри
 * `.tags_filter__items`, а в этих блоках правил для него нет вовсе - ссылка
 * оставалась браузерной. Поэтому целимся в сами блоки.
 */
.tag-list__items a,
.see-more__items a,
.article__breadcrumbs a {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    text-decoration: none;
    border-bottom: 1px dashed var(--c-line);
}

.tag-list__items a:hover,
.see-more__items a:hover,
.article__breadcrumbs a:hover {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

.tag-list__title,
.see-more__title {
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

/* Переходы по темам сонника под заголовком - в строку, а не столбиком. */
.article__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-12);
    margin: 0 0 var(--sp-12);
    padding: 0;
    list-style: none;
}

.article__breadcrumbs li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article__breadcrumbs li::before {
    content: none;
}

/* ---------- «Имя по-арабски» (22.08.2026) ---------- */

/*
 * Страница-сервис `/arabname/`: поле ввода и написание имени арабскими
 * буквами под ним. Прежняя разметка держалась на классах старой вёрстки
 * (`form-control--name` шириной 354px и `.result.delta`), поле было высотой
 * 32px и не совпадало ни с одним другим полем сайта.
 */
.it-arabname {
    margin: var(--sp-20) 0 var(--sp-30);
}

/* Поле - как строка поиска на служебных страницах: та же высота и та же
   янтарная рамка при фокусе. */
.it-arabname__input {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    height: 40px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.it-arabname__input:focus {
    border-color: var(--c-accent-amber);
    outline: none;
}

/*
 * Результат. Арабское письмо идёт справа налево - направление задаём явно,
 * иначе строка выравнивается по левому краю и читается наоборот.
 * Кегль крупный: это главное содержимое страницы, ради него сюда и приходят.
 */
.it-arabname__result {
    direction: rtl;
    min-height: 64px;
    margin-top: var(--sp-16);
    padding: var(--sp-16);
    border-radius: var(--r-4);
    background: var(--c-sand-light);
    color: var(--c-text);
    font-size: 32px;
    line-height: 1.6;
    text-align: center;
    word-break: break-word;
}

/*
 * ---------- Шапка серии «Тафсир Куръана» (24.09.2026) ----------
 *
 * Раздел идёт по порядку сур, то есть сверху стоит 2021 год, а свежие выпуски
 * лежат на последней странице. Заказчик прочитал это как «раздел забросили»,
 * поэтому рядом со списком показываем объём серии, дату последнего выпуска,
 * переключатель порядка и переход к последним материалам. Сам порядок по
 * умолчанию оставлен прежним - он согласован 03.09.2026.
 */

.it-series {
    margin: 0 0 var(--sp-20);
    padding: var(--sp-16);
    border-radius: var(--r-6);
    background: var(--c-surface);
}

/* Шрифт объявляем каждому элементу: страница живёт на старой вёрстке, где
   main.css задаёт начертание прямо по тегам, и наследование ему проигрывает. */
.it-series,
.it-series p,
.it-series a {
    font-family: var(--font-main);
}

.it-series__meta {
    margin: 0 0 var(--sp-12);
    color: var(--c-text-muted);
    font-size: 15px;
    line-height: 1.35;
}

.it-series__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8);
}

.it-series__switch,
.it-series__last {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--c-line);
    border-radius: 17px;
    background: var(--c-white);
    color: var(--c-text);
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}

.it-series__switch:hover,
.it-series__last:hover {
    border-color: var(--c-brown);
}

.it-series__switch.is-active {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-white);
}

/* Переход к свежим выпускам - не переключатель, а действие: отделяем его
   от пары «порядок» и оформляем ссылкой, а не заполненной кнопкой. */
.it-series__last {
    margin-left: auto;
    border-style: dashed;
    color: var(--c-accent);
}

@media (max-width: 999px) {
    .it-series {
        padding: var(--sp-12);
    }

    /* 🛑 Кнопки чуть мельче: на 390px две кнопки порядка в прежнем размере
       давали 303px при контейнере ровно в 303 - каждая уходила на свою строку,
       и блок занимал четыре строки. */
    .it-series__switch,
    .it-series__last {
        height: 32px;
        padding: 0 12px;
        font-size: 14px;
    }

    .it-series__last {
        margin-left: 0;
    }
}

/*
 * ---------- Статья об имени на странице имени (24.09.2026) ----------
 *
 * Просьба Заказчика: материалы редакции об именах показывать в разделе. На
 * странице конкретного имени это ссылка на статью именно о нём - таких статей
 * шестнадцать на 2015 имён, поэтому блок появляется редко и не должен
 * выглядеть обязательной частью страницы.
 */

.it-name__article {
    display: block;
    margin: var(--sp-16) 0 var(--sp-20);
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--c-line);
    border-radius: var(--r-6);
    color: var(--c-text);
    font-family: var(--font-main);
    text-decoration: none;
    transition: border-color .15s;
}

.it-name__article:hover {
    border-color: var(--c-accent);
}

.it-name__article-label {
    display: block;
    margin-bottom: var(--sp-4);
    color: var(--c-text-meta);
    font-size: 13px;
}

.it-name__article-title {
    display: block;
    font-size: 16px;
    font-weight: var(--fw-demibold);
    line-height: 1.3;
}