/*
 * Блок «Шапка». Источник: макет Figma, десктоп 0:2654 (верх кадра),
 * мобильная 0:6 (верх кадра). Значения сняты 17.08.2026.
 *
 * Мобильная и десктопная шапки в макете устроены по-разному:
 *   мобильная - лого | компактный намаз | бургер, ниже поле поиска;
 *   десктоп   - лого | полный намаз, линия, строка рубрик с иконкой поиска.
 * Разметка одна, раскладку различает CSS - данные те же самые.
 *
 * 🛑 Блок ЖИВЁТ НА СТРАНИЦАХ СТАРОЙ ВЁРСТКИ, рядом с main.css (1938 строк,
 * селекторы по тегам, ноль медиазапросов). Поэтому:
 *   - глобальный сброс из styles/base.css сюда НЕ подключается, он снёс бы
 *     старую страницу; всё нужное объявлено ниже локально, внутри .it-header;
 *   - каждое правило начинается с .it-header, чтобы старые правила по тегам
 *     не перебивали новые и наоборот.
 */

/* ---------- Локальный сброс: заменяет base.css для этого блока ---------- */

.it-header,
.it-header *,
.it-header *::before,
.it-header *::after {
    box-sizing: border-box;
}

.it-header {
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.4;
}

.it-header ul,
.it-header li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 🛑 Шрифт задаём НА САМИХ элементах, а не только на .it-header в расчёте
   на наследование: в main.css есть прямые правила по тегам (у ссылок там
   "Manrope Light"), а прямое правило всегда бьёт унаследованное значение,
   какой бы специфичной ни была родительская запись. Проверено замером:
   до этой правки пункты меню рисовались Manrope, хотя Golos был загружен. */
.it-header a,
.it-header span,
.it-header div,
.it-header li,
.it-header button,
.it-header input {
    font-family: var(--font-main);
}

.it-header a {
    color: inherit;
    text-decoration: none;
}

.it-header a:hover {
    color: var(--c-accent);
}

.it-header img {
    display: block;
    max-width: 100%;
    height: auto;
}

.it-header button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Рекламное место 1 - над шапкой, самой первой строкой страницы (разметка:
   `redesign/blocks/top_banner.html.twig`). В макете оно в той же колонке, что
   и контент, а не во всю ширину экрана. Картинку отдаёт старый контроллер.

   На мобильной этот же узел переезжает в ленту, и поля ему там задаёт уже
   `.content` - снимаются в legacy-bridge.css. */
.it-header__banner {
    padding: var(--sp-10) 0 0;
}

/* 🛑 Место бывает ПУСТЫМ - баннер снят или у него вышел срок (так сейчас с
   «Коран.Тафсир», снят 18.09.2026). Пустой узел всё равно остаётся элементом
   мобильной колонки и съедает два промежутка `gap` подряд: замер 24.09.2026
   на `/prayers/` дал 50px между крошками и заголовком вместо 35.
   Признак пустоты - отсутствие самого баннера внутри (он приходит картинкой
   в ссылке), а не пустой текст: внутри всегда лежит `.it-container`. */
.it-header__banner:not(:has(img, a, iframe)) {
    display: none;
}

/* Блок лежит ВНЕ .it-header, поэтому общий box-sizing из локального
   сброса на него не распространяется - задаём отдельно, иначе поля
   контейнера прибавлялись бы к ширине вместо того, чтобы входить в неё. */
.it-header__banner,
.it-header__banner * {
    box-sizing: border-box;
}

.it-header__banner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Контейнер: layout.css вместе с шапкой не подключается (см. assets/header.js),
   поэтому ширину контента блок задаёт себе сам. Значения те же самые. */
/* Контейнер резиновый: ширину задают поля, а не фиксированное число.
   На десктопе поля 80px на ЛЮБОМ разрешении (решение Дмитрия 17.08.2026),
   контент занимает всё остальное. Макетные 1120 - частный случай той же
   формулы при экране 1280, отдельно их не прописываем. */
.it-header__banner .it-container,
.it-header .it-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* Планшет: шапка сужается вместе с содержимым страницы (см.
   --container-tablet). 🛑 Правило нужно здесь ОТДЕЛЬНО: у шапки своя копия
   `.it-container` с более высокой специфичностью, и общее правило из
   layout.css её не перебивает - иначе контент 680, а шапка 984. */
@media (min-width: 700px) and (max-width: 999px) {
    .it-header__banner .it-container,
    .it-header .it-container {
        max-width: var(--container-tablet);
    }
}

@media (min-width: 1000px) {
    .it-header__banner .it-container,
    .it-header .it-container {
        padding: 0 var(--container-pad-desktop);
    }
}

/* ---------- Верхняя строка ---------- */

.it-header__bar {
    display: flex;
    /* По верху - вся строка, включая бургер (решение Дмитрия 20.08.2026:
       сначала кнопку оставляли по центру, потом вернули к общему правилу). */
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-12);
    padding: var(--sp-17) 0 var(--sp-20);
}

/* 🛑 На мобильной строка и так впритык (лого + табло + бургер - см. разбор
   узких телефонов ниже), для даты по хиджре в НЕЙ места нет. Отдаём ей
   отдельную строку под общим рядом - `flex-wrap` на самом баре плюс
   `flex-basis: 100%` у даты в namaz.css (перенос на новую строку внутри
   flex-контейнера). Строка помечена ПРОСТО заданием `flex-wrap`, а не
   ограничена `max-width: 999px`: на десктопе ряд не переносится сам по себе
   (в нём места достаточно), поэтому дополнительное условие не нужно - но
   если понадобится строгая граница, брать общий порог 999/1000px, как везде
   в проекте. */
@media (max-width: 999px) {
    /* 🛑 Ряд собран ГРУППАМИ, а не равномерно (замечание Дмитрия 17.09.2026:
       ближайший намаз «стоит через геп, как отдельный блок»). До этого стоял
       `justify-content: space-between`, и он раздавал остаток поровну между
       ВСЕМИ соседями: дата, табло и ближайшее время оказывались друг от друга
       на том же расстоянии, что и от логотипа с бургером, - три части одних
       и тех же часов читались как три отдельных блока.

       Теперь: внутри группы «дата + табло + ближайший намаз» - единые 8px
       между блоками, а весь остаток свободного места уходит в два
       `margin-left: auto` (перед группой и перед бургером). Границы групп
       задаёт смысл, а не деление ширины поровну.

       🛑 8px, а не 4 (замечание Дмитрия 17.09.2026: «между двумя календарями
       мало места совсем, должен быть единообразный gap»): 4px тут равнялись
       промежутку ВНУТРИ даты (цифра → месяц), и граница между датой и табло
       переставала читаться. Правило простое - внутри блока 4px, между
       блоками 8px.

       🛑 23.09.2026 промежуток всё же снижен до 4px (просьба Дмитрия «на
       мобильной всё должно вмещаться в одну строку шапки» - четыре
       промежутка в ряду отдают строке 16px, больше любого другого резерва).
       Граница между датой и табло от этого НЕ теряется, и правило «внутри
       блока меньше, чем между блоками» остаётся в силе: имя месяца добирает
       своё собственной отбивкой в 6px (`namaz.css`), то есть от табло его
       отделяет 10px против 4px внутри самой даты. Меняешь одно - смотри на
       второе, порознь они больше не читаются.

       ⚠️ Сами отступы группы времени живут в `namaz.css`: он подключается
       ПОСЛЕ этого файла, и его `margin` у даты перебил бы объявленное здесь
       при равной специфичности. Здесь остаётся только то, что относится к
       самой строке шапки. */
    .it-header__bar {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--sp-4);
    }

    /* Бургер прижат к правому краю всегда - остаток строки перед ним.

       🛑 Селектор из ДВУХ классов намеренно: в локальном сбросе выше стоит
       `.it-header button { margin: 0 }` (специфичность 0,1,1), и правило в
       один класс ему проигрывает - `margin-left` молча оставался нулевым, а
       весь остаток строки забирал себе первый `auto` слева от группы. */
    .it-header .it-header__burger {
        margin-left: auto;
    }
}

.it-header__brand {
    display: flex;
    flex-direction: column;
    /* 🛑 Зазор восстановлен (17.09.2026, реальная жалоба - «на мобильном не
       выбирается город, будто перехватывает клик по логотипу»). Убирали его
       19.08.2026 ради визуальной плотности (коммит c47a781), но получили
       буквально 2px между картинкой логотипа и надписью «Казань» (замер:
       logo.bottom 36.2, caption.top 38.2) - а сама надпись всего 15px высотой.
       На тач-экране это не читается как «плотно», это читается как «одна
       область» - палец, целящийся в верх буквы «К», физически задевает
       логотип. 4px не портят вид (сверено визуально), но дают надписи
       собственную, однозначную зону нажатия. */
    gap: var(--sp-4);
    flex: none;
}

/* Логотип - один SVG 173x32. На мобильной уменьшаем целиком, пропорции
   держит height: auto.

   🛑 130px → 112px (17.09.2026, просьба Дмитрия): освобождаем место в строке
   под компактную дату по хиджре (namaz.css, `.it-header--hijri-inline`) -
   свободного места в ряду не было вообще, ни на одной ширине. Логотип на
   104×19 всё ещё читается, проверено визуально.

   🛑 112 → 104px (17.09.2026): отбивке между датой и табло в 10px (правка
   Дмитрия, `namaz.css`) не хватало ровно 3px, и компактная дата уходила на
   отдельную строку на ВСЕХ ширинах. 8px логотипа дают эти 3px плюс запас,
   чтобы решение не стояло на грани.

   🛑 104 → 92px (23.09.2026, просьба Дмитрия уместить всю шапку в одну
   строку): 92px до этого стояли только на экранах ≤360px, теперь это размер
   для всей мобильной - без этих 12px строка не складывалась на 375px
   (iPhone SE и mini), а на 393px не хватало запаса, чтобы имя месяца шло
   одной строкой. Отдельного шага для узких телефонов больше нет: значение
   и так минимальное из тех, где логотип читается. */
.it-header__logo {
    display: block;
    flex: none;
    width: 92px;
}

.it-header__logo img {
    width: 100%;
    height: auto;
}

/* Выбор города отдаёт старый контроллер со своей разметкой и своим
   обработчиком - внутрь не лезем, только возвращаем на место.
   🛑 В main.css у него `position: absolute; left: 60px; top: 33px` - он
   цеплялся к старому контейнеру шапки. Того контейнера больше нет, поэтому
   без этой правки блок уезжает наверх и ложится поверх рекламного баннера
   (так и было после первого выката 17.08.2026). Возвращаем в поток, а
   выпадающий список цепляем к строке шапки - см. правило ниже.
   🛑 Тут стоял `position: relative`, и панель цеплялась к этой обёртке. Убран
   20.08.2026: обёртка шириной 130px, растянуть от неё панель нечем. */
.it-header__town {
    position: static;
    font-size: var(--fs-10);
    color: var(--c-text-meta);
}

.it-header__town .town-select-container {
    position: static;
}

/* 🛑 Панель городов считается от СТРОКИ шапки, а не от обёртки города: у той
   ширина 130px, а в `main.css` панели задано `width: 1330px` - число из
   старой вёрстки с фиксированным кадром. Контейнер у нас резиновый, и на
   кадре 1280 панель выходила за правый край на 145px: одиннадцать городов
   последней колонки (Арск, Болгар, Воронеж, Иркутск, Курск…) не было видно
   вовсе, причём горизонтальной прокрутки страница не давала - проверено
   замером 20.08.2026.
   Ширину экрана (`100vw`) для этого использовать нельзя: там, где есть полоса
   прокрутки, она шире видимой области, и панель сама создаёт горизонтальную
   прокрутку. `.it-header__bar` равен ширине содержимого контейнера на любом
   разрешении - привязываемся к нему парой `left`/`right`. */
.it-header__bar {
    position: relative;
}

.it-header__town .town-select-dropdown {
    left: 0;
    right: 0;
    width: auto;
    top: calc(100% + var(--sp-8));
}

/* Стрелка-треугольник у названия города тоже absolute (main.css, :after
   с right:-15px) и без этого цепляется к обёртке, улетая к правому краю
   логотипа. Привязываем её к самому тексту. */
.it-header__town .town-select-caption {
    position: relative;
    display: inline-block;
}

/* 🛑 Сама стрелка (main.css, :after) сидела на фиксированном `top: 8px` -
   при кегле 10px/лайнхайте 14px это на ~3px ниже реального центра строки
   (высота треугольника 5px, значит его середина на 10.5px при высоте
   строки 15px). Центруем по факту через transform, а не новым числом -
   тогда не важно, как ещё изменится кегль или паддинги. */
.it-header__town .town-select-caption:after {
    top: 50%;
    transform: translateY(-50%);
}

/* 🛑 Подсветка выбранного города стояла НЕ на его названии: в `main.css` у
   пунктов списка `height: 9px; line-height: 9px` при кегле 14px, то есть
   строка вдвое ниже самих букв. Пока фона нет, это не видно - буквы просто
   вылезают за свою строку. У активного пункта фон чёрный, и видно сразу:
   плашка выше текста, название из неё вываливается вниз.
   Высоту строки считаем от кегля, а вертикальные отступы уменьшаем ровно на
   столько же - пункт остаётся прежних 25px, и сетка колонок не едет
   (17 + 4 + 4 = 25, было 9 + 8 + 8). */
.it-header__town .town-select-dropdown ul li {
    height: auto;
    line-height: 17px;
    padding: var(--sp-4) var(--sp-8);
}

/* 🛑 Длинные названия наезжали на соседнюю колонку («Набережные Челны» на
   «Нижнекамск», «Старое Дрожжаное» на «Тверь»): в `main.css` у пунктов
   `white-space: nowrap` и `flex: 1 0 8%`, то есть ширина колонки считается
   от доли строки, а не от текста, и не влезшее просто вылезает поверх.
   Делаем сетку с колонками не уже 150px и разрешаем перенос по словам -
   длинное название встаёт в две строки внутри своей ячейки, а строка сетки
   подстраивается по высоте, так что соседние ряды не наезжают. Число колонок
   сетка подбирает сама под ширину панели. Мобильная раскладка ниже
   переопределяет колонки на две. */
.it-header__town .town-select-dropdown ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    column-gap: var(--sp-16);
    row-gap: var(--sp-8);
}

.it-header__town .town-select-dropdown ul li {
    flex: none;
    min-width: 0;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    align-self: start;
}

.it-header__town .town-select-dropdown ul li:empty {
    display: none;
}

/*
 * ---------- Выбор города на мобильной (20.08.2026) ----------
 *
 * В мобильном макете выбора города нет вовсе, поэтому вид собран по смыслу,
 * а не снят с макета. Что чинится: в `main.css` у списка стоит `width: 1330px`
 * и элементы `white-space: nowrap` высотой 9px - на экране 390 панель
 * растягивала страницу до 1350px (горизонтальная прокрутка на ВСЕХ страницах,
 * стоило её открыть), а попасть пальцем в строку было нельзя.
 *
 * Ширину панели чинит общее правило выше (привязка к `.it-header__bar`) - оно
 * же лечит десктоп. Здесь - только внутреннее устройство списка.
 */
@media (max-width: 999px) {
    .it-header__town .town-select-dropdown {
        padding: var(--sp-16);
        border-radius: var(--r-6);
        /* Городов под сотню - панель прокручивается внутри себя, а не
           вытягивает страницу. overscroll-behavior: докрутив список до края,
           пользователь не начинает листать страницу под панелью. */
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .it-header__town .town-select-dropdown .title {
        margin-bottom: var(--sp-12);
        font-size: var(--fs-18);
    }

    .it-header__town .town-select-dropdown ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4);
    }

    /* Строка списка - зона нажатия: минимум 40px в высоту, название
       переносится по словам («Набережные Челны» в одну строку не влезает). */
    .it-header__town .town-select-dropdown ul li {
        display: flex;
        flex: none;
        align-items: center;
        min-width: 0;
        min-height: 40px;
        height: auto;
        margin: 0;
        padding: var(--sp-8) var(--sp-10);
        border-radius: var(--r-4);
        font-size: var(--fs-14);
        line-height: 1.2;
        white-space: normal;
    }

    /* Три пустых <li> в конце разметки - распорки для старой flex-раскладки.
       В сетке они дают дырки. */
    .it-header__town .town-select-dropdown ul li:empty {
        display: none;
    }
}

.it-header__burger {
    flex: none;
    width: 25px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.it-header__burger span {
    display: block;
    height: 2px;
    background: var(--c-accent);
    border-radius: var(--r-3);
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* Открытое меню - кнопка становится крестиком: крайние полоски съезжаются к
   середине и поворачиваются, средняя гаснет. Числа не произвольные: кнопка
   18px высотой, полоски по 2px разложены `space-between`, то есть их центры
   на 1, 9 и 17 - сдвиг ровно на 8px сводит крайние к центру.
   Отдельной иконки крестика здесь не нужно, и это лучше подмены картинки:
   переход видно глазом, поэтому понятно, что кнопка та же самая. */
.it-header--menu-open .it-header__burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.it-header--menu-open .it-header__burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
}

.it-header--menu-open .it-header__burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Поиск ---------- */

/*
 * Строка поиска на мобильной - узел макета 4100:154 (снято 20.08.2026).
 * Полоса во всю ширину экрана с песочным градиентом, внутри поле 45px:
 * белое, рамка 2px, радиус 4, мягкая оранжевая тень. Поля полосы - по 20
 * сверху и снизу (в макете 85 = 20 + 45 + 20).
 *
 * Фон выводится за края контейнера отрицательными полями, padding возвращает
 * поле на место - тот же приём, что у раскрытого меню выше.
 */
.it-header__search {
    position: relative;
    display: block;
    margin: 0 calc(-1 * var(--container-pad)) var(--sp-20);
    padding: var(--sp-20) var(--container-pad);
    background: var(--grad-search);
}

.it-header__search-input {
    display: block;
    width: 100%;
    height: 45px;
    padding: 0 var(--sp-40) 0 var(--sp-16);
    background: var(--c-white);
    border: 2px solid var(--c-accent-amber);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-search);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.it-header__search-input::placeholder {
    color: var(--c-text-meta);
}

/* Лупа лежит внутри поля, а точка отсчёта - форма вместе с полосой, поэтому
   к отступам поля прибавляются поля самой полосы. */
.it-header__search-submit {
    position: absolute;
    top: var(--sp-20);
    right: calc(var(--container-pad) + var(--sp-16));
    height: 45px;
    color: var(--c-text);
}

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

/* Обёртка лупы - точка отсчёта для поля: оно выпадает под самой лупой,
   а не под шапкой целиком. Без неё между ними оставался зазор в высоту
   нижней строки шапки. */
.it-header__search-wrap {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
}

/* Никакой подложки: только само поле. Рамку и фон даёт сам input. */
.it-header__search-popup {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--sp-10));
    z-index: 20;
    width: min(280px, calc(100vw - var(--sp-32)));
}

.it-header--search-open .it-header__search-popup {
    display: block;
}

.it-header__search-popup-form {
    position: relative;
}

/* 🛑 Своих border/radius/тени/кегля у поля здесь НЕТ - оно берёт оформление
   мобильного поля целиком (решение Дмитрия 20.08.2026): белое, рамка 2px
   янтарная, радиус 4, мягкая оранжевая тень, кегль 14, высота 45. Полосу с
   песочным градиентом при этом на десктоп НЕ тащим - там поиск выпадает под
   лупой, подложки у него нет. Своё здесь одно - обнуление нижнего поля: у
   input'а в старом `main.css` оно своё, а шапка стоит и на тех страницах. */
.it-header__search-popup .it-header__search-input {
    margin-bottom: 0;
}

/* 🛑 Браузер рисует по фокусу свой outline - в Chrome это жирная чёрная
   рамка поверх нашей. Снимаем её. Рамка остаётся янтарной: она и так
   заметно отличается от остальной шапки, подсвечивать нечем. */
.it-header__search-popup .it-header__search-input:focus {
    outline: none;
}

/* В открытом поле справа стоит КРЕСТИК, а не лупа: искать можно по Enter,
   а закрыть иначе нечем - лупа выше уже занята открытием. */
.it-header__search-popup .it-header__search-submit {
    display: none;
}

/* Высота крестика равна высоте поля - иначе он не встанет по центру. */
.it-header__search-close {
    position: absolute;
    top: 0;
    right: var(--sp-8);
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-meta);
}

.it-header__search-close:hover {
    color: var(--c-text);
}

/* ---------- Меню ---------- */

/* На мобильной меню закрыто и раскрывается бургером */
.it-header__nav {
    display: none;
    padding-bottom: var(--sp-16);
}

.it-header--menu-open .it-header__nav {
    display: block;
}

.it-header__nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

.it-header__nav-link {
    font-size: var(--fs-nav-link);
}

/*
 * ---------- Мобильное меню (20.08.2026) ----------
 *
 * В макете содержимое открытого меню не нарисовано (в мобильном кадре есть
 * только сама кнопка), поэтому вид собран по смыслу: список во всю ширину,
 * разделители, зона нажатия 44px.
 *
 * 🛑 Раздел ограничен `max-width: 999px` целиком. Правила ниже ломают
 * десктопную строку рубрик: `visibility: hidden` спрятал бы её насовсем,
 * разделители подчеркнули бы каждый пункт, а `display: none` у обёртки
 * поиска убрал бы лупу.
 */
@media (max-width: 999px) {
    /* Меню раскрывается НАД строкой поиска (просьба Дмитрия 20.08.2026): в
       разметке оно идёт последним, порядок задаём раскладкой. Разметку не
       трогаем - на десктопе строка рубрик должна остаться под поиском. */
    .it-header .it-container {
        display: flex;
        flex-direction: column;
    }

    .it-header__bar    { order: 1; }
    .it-header__nav    { order: 2; }
    .it-header__search { order: 3; }

    /*
     * Раскрывается плавно - `grid-template-rows: 0fr → 1fr`.
     * 🛑 Обычный `display: none → block` не анимируется вовсе, а `max-height`
     * требует выдуманного числа: списка два, высота зависит от переносов, и
     * при заниженном потолке часть разделов просто не показалась бы.
     * `visibility` меняется скачком, но с задержкой на время закрытия - иначе
     * ссылки закрытого меню остаются доступны с клавиатуры и поиском по
     * странице.
     */
    .it-header__nav {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
        /* Раскрытое меню - полоса во всю ширину экрана своим фоном, чтобы его
           было видно как отдельную панель, а не как продолжение страницы
           (просьба Дмитрия 20.08.2026). Отрицательные поля выводят фон за
           поля контейнера, padding возвращает текст на место.
           Вертикальных полей здесь быть НЕ должно - см. ниже. */
        margin: 0 calc(-1 * var(--container-pad));
        padding: 0 var(--container-pad);
        background: var(--c-sand-light);
    }

    .it-header--menu-open .it-header__nav {
        display: grid;
        grid-template-rows: 1fr;
        visibility: visible;
        /* 🛑 Отбивки до строки поиска здесь быть не должно: у полосы поиска
           свой фон, и белый зазор между двумя подложками читался как щель
           (замечание Дмитрия 20.08.2026). Панели идут вплотную. */
        transition: grid-template-rows 0.28s ease, visibility 0s;
    }

    /* Обязательная пара к приёму с 0fr: без `min-height: 0` строка сетки не
       сжимается ниже содержимого, без `overflow: hidden` содержимое торчит
       наружу при закрытой строке. */
    .it-header__nav-lists {
        overflow: hidden;
        min-height: 0;
    }

    /* 🛑 Вертикальные поля панели висят на самих СПИСКАХ, а не на обёртке и не
       на `.it-header__nav`: их собственный padding входит в минимальный размер
       строки сетки, и при закрытом меню под шапкой оставалась бы полоска чужого
       фона (замерено: 24px при полях 8 сверху и 16 снизу). Отступ потомка
       `overflow: hidden` обрезает вместе с содержимым. */
    .it-header__nav-list:first-child {
        padding-top: var(--sp-8);
    }

    .it-header__nav-list--extra {
        padding-bottom: var(--sp-16);
    }

    /* Поиск на мобильной стоит отдельной строкой в самой шапке - лупа со
       всплывающим полем здесь не нужна. */
    .it-header__search-wrap {
        display: none;
    }

    /* Пункт - строка во всю ширину: разделитель снизу и зона нажатия 44px
       (в строку 12px с промежутком палец не попадает). */
    .it-header__nav-list {
        gap: 0;
    }

    /* Разделитель на бежевой подложке: обычный серый `--c-line` на ней почти
       не читается. */
    .it-header__nav-list li {
        border-bottom: 1px solid var(--c-brown-light);
    }

    .it-header__nav-list--extra li:last-child {
        border-bottom: 0;
    }

    .it-header__nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--sp-10) 0;
        font-size: var(--fs-16);
    }

    /* Кому включено «уменьшить движение» - меню открывается сразу. */
    @media (prefers-reduced-motion: reduce) {
        .it-header__nav,
        .it-header--menu-open .it-header__nav,
        .it-header__burger span {
            transition: none;
        }
    }
}

/* Второй ряд пунктов: в макете его нет, но на сайте он есть и терять
   его нельзя - разделы намаза, Рамадана, сонника и дуа. */
.it-header__nav-list--extra {
    margin-top: var(--sp-12);
    padding-top: var(--sp-12);
    border-top: 1px solid var(--c-line);
}

.it-header__nav-list--extra .it-header__nav-link {
    color: var(--c-text-secondary);
    font-size: var(--fs-12);
}

.it-header__nav-search {
    display: none;
}

/* ---------- Десктоп ---------- */

@media (min-width: 1000px) {
    /* Размер из макета один в один */
    .it-header__logo {
        width: 173px;
    }

    /* На десктопе бургера и отдельного поля поиска в макете нет:
       поиск живёт иконкой в конце строки рубрик. */
    .it-header__burger,
    .it-header__search {
        display: none;
    }

    .it-header__nav {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-20);
        padding: var(--sp-12) 0;
        /* Сверху отбивки нет, 20px под строкой рубрик - отбивка до
           содержимого страницы (указания Дмитрия 19.08.2026) */
        margin: 0 0 var(--sp-20);
        border-top: 2px solid var(--c-text-black);
        border-bottom: 1px solid var(--c-line-soft);
    }

    .it-header__nav-lists {
        display: flex;
        flex-direction: column;
        gap: var(--sp-8);
        flex: 1 1 auto;
        min-width: 0;
    }

    .it-header__nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp-20);
    }

    .it-header__nav-list--extra {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .it-header__nav-link {
        white-space: nowrap;
    }

    .it-header__nav-search {
        display: block;
        flex: none;
        width: 17px;
        height: 17px;
        margin-top: var(--sp-4);
    }
}

/*
 * ---------- Узкие телефоны, 360px и меньше (23.08.2026) ----------
 *
 * 🛑 На 320px шапка вылезала за экран и давала горизонтальную прокрутку НА
 * ВСЕХ страницах сайта: в строку встают логотип 130 + табло намаза 162 +
 * бургер 25 с промежутками по 12, это 341px при 280 доступных. Сжаться им
 * нечем - у всех трёх стоит `flex: none`.
 *
 * Ловится только замером на 320: на 390 всё помещается, а 320 - это ещё
 * живые iPhone SE первого поколения и старые Android.
 */
@media (max-width: 360px) {
    /* Боковые поля страницы - 12 вместо 20, это сразу 16px в строку. */
    :root {
        --container-pad: 12px;
    }

    /* 🛑 Промежуток ряда здесь БОЛЬШЕ не задаём (снято 17.09.2026): с 23.08
        тут стояли 8px против тогдашних 12px базовых, а теперь база - 8px, и
        это правило лишь дублировало бы её. */

    /* 🛑 Своего размера логотипа здесь БОЛЬШЕ НЕТ (снято 23.09.2026): 92px
       стали базовым значением для всей мобильной, и отдельный шаг только
       дублировал бы его. Заводить его заново ради того, чтобы ужать строку
       ещё - не лучший ход: на 360px поля страницы и так урезаны до 12px,
       и следующий резерв тут не логотип, а сама дата. */
}