/* =========================================================
 * 📄 /styles_core/front/blocks/topo_header.css
 * ТОПО / Единый desktop-хедер публичной части
 *
 * Назначение:
 * - единый вид меню на всех публичных разделах;
 * - широкая композиция под каталог, словарь, карту и проект;
 * - спокойный «атласный» стиль без отдельного оформления страниц.
 *
 * Важно:
 * - мобильный хедер этим файлом не перестраиваем;
 * - правая зона оставлена с запасом под служебные кнопки.
========================================================= */

@media (min-width: 901px) {

    .topo-header {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
        background: var(--topo-header-bg, #FBF5EC);
        border-bottom: 1px solid var(--topo-header-line, rgba(61, 41, 3, 0.08));
        box-shadow: 0 2px 10px rgba(61, 41, 3, 0.025);
    }

    /*
     * Личный кабинет (раздел «Библиотека») — шапка в гамме раздела:
     * цвета задаёт .topo-header--kabinet в base/topo_palette.css
     * (см. $isKabinetPage в header.php).
     */

    /*
     * Зазор под шапкой. На страницах с закреплёнными боковыми колонками
     * (фильтры и паспорт стоят на 10px ниже шапки) средняя колонка
     * прокручивается вместе со страницей и раньше уезжала прямо под
     * шапку — сверху карточки «подрезало» шапкой, а не тем же зазором,
     * что над фильтрами и паспортом. Полоса цвета фона страницы под
     * шапкой (часть sticky-шапки, едет вместе с ней) закрывает эти 10px:
     * список исчезает на той же линии, где начинаются боковые колонки.
     * Только где есть такие колонки (.catalog-v2 — каталог, словарь,
     * слова, статьи, источники; оглавление «Проекта» — на 1rem ниже),
     * чтобы не закрывать верх карты и обычных страниц.
     */
    body:has(.catalog-v2) .topo-header::after,
    body:has(.project-layout) .topo-header::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* top:100% — от верха нижней рамки шапки: сдвиг на 1px под неё
           и на столько же короче, чтобы не залезть на боковые колонки. */
        margin-top: 1px;
        height: calc(var(--topo-header-gap, 10px) - 1px);
        background: var(--color-bg);
        pointer-events: none;
    }

    body:has(.project-layout) .topo-header {
        --topo-header-gap: 1rem;
    }


    .topo-header__inner {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr) 170px;
        align-items: center;
        gap: 34px;

        width: min(calc(100% - 80px), 1480px);
        min-height: 92px;
        margin: 0 auto;
    }

    .topo-header__logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        text-decoration: none;
    }

    .topo-header__logo img {
        display: block;
        width: 188px;
        max-width: 100%;
        height: auto;
    }

    .topo-header__nav {
        display: flex;
        align-items: stretch;
        align-self: stretch;
        min-width: 0;
    }

    .topo-header__menu {
        display: flex;
        align-items: stretch;
        gap: 38px;

        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .topo-header__menu-item {
        position: relative;
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .topo-header__link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 92px;
        padding: 0 2px;

        color: var(--topo-header-fg, var(--color-fg));
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;

        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.025em;

        opacity: 0.88;

        transition:
            color 160ms ease,
            opacity 160ms ease;
    }

    .topo-header__link:hover {
        color: var(--topo-header-active, var(--color-primary));
        opacity: 1;
    }

    .topo-header__menu-item.active .topo-header__link,
    .topo-header__link.active {
        color: var(--topo-header-active, var(--color-primary));
        opacity: 1;
    }

    /* Одна спокойная линия активного раздела */
    .topo-header__menu-item.active .topo-header__link::after,
    .topo-header__link.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 18px;
        width: calc(100% + 8px);
        max-width: 78px;
        height: 1px;
        background: currentColor;
        transform: translateX(-50%);
    }

    /* Старую верхнюю метку отключаем: у активного пункта одна линия. */
    .topo-header__menu-item.active .topo-header__link::before,
    .topo-header__link.active::before {
        content: none;
    }

    .topo-header__tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;

        min-width: 170px;
        min-height: 92px;
    }

    /* На desktop бургер не нужен. Правая зона остаётся резервом. */
    .topo-header__burger {
        display: none !important;
    }
}

/* На средних desktop-ширинах чуть уплотняем меню,
   сохраняя ту же визуальную систему. */
@media (min-width: 901px) and (max-width: 1220px) {
    .topo-header__inner {
        grid-template-columns: 180px minmax(0, 1fr) 110px;
        gap: 22px;
        width: min(calc(100% - 40px), 1480px);
    }

    .topo-header__logo img {
        width: 164px;
    }

    .topo-header__menu {
        gap: 24px;
    }

    .topo-header__tools {
        min-width: 110px;
    }
}