/* Стили шапки сайта (раньше были встроены в blocks/header.ftl и передавались в каждой странице) */

.navbar-nav .nav-link.product_activated {
    position: relative;
    color: #2363B0 !important;
}

.navbar-nav .nav-link.product_activated::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #2363B0;
    border-radius: 8px 8px 0 0;
}

/* Полное меню показывается с 1200px (navbar-expand-xl). По умолчанию пункты в одну строку;
   на ноутбуках (1200–1799px) — по словам, см. ниже */
.header .navbar-nav .nav-link,
.header .login-btn {
    white-space: nowrap;
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header .burger-menu { margin-left: 0; }
}
/* «Региональное подразделение»: 18 филиалов — на невысоких экранах прокрутка внутри меню;
   пункт второй слева, меню раскрывается вправо от него */
.header .regional-menu {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    left: 0;
    right: auto;
    min-width: 340px;
}
.header .regional-menu .dropdown-item { white-space: normal; }
/* «Изменения и разъяснения» — у правого края меню, поэтому его список выравниваем по правому краю */
.header .info-menu {
    left: auto;
    right: 0;
    min-width: 340px;
}
.header .info-menu .dropdown-item { white-space: normal; }
/* Списки продуктов («Частным / Корпоративным клиентам») — длинные названия программ в одну строку
   давали меню ~610px, и на 1200–1399px «Корпоративным клиентам» вылезало за правый край
   (горизонтальная прокрутка на всех страницах). Ограничиваем ширину и переносим строки. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .header .product-menu { max-width: 480px; }
    .header .product-menu .dropdown-item { white-space: normal; }
}
/* С пунктами «Региональное подразделение» и «Изменения и разъяснения» меню не влезает в одну строку
   даже на 1920px: их названия всегда в 2 строки. Ширина — по тексту (min-content), а не фиксированная:
   иначе вокруг перенесённого текста остаётся пустое место и отступы до соседних пунктов неровные. */
@media (min-width: 1200px) {
    .header .navbar-nav .nav-link.regional-toggle,
    .header .navbar-nav .nav-link.wrap-toggle {
        white-space: normal;
        width: min-content;
        line-height: 1.15;
        text-align: center;
        display: flex;
        align-items: center;
    }
}
/* Ноутбуки (1200–1799px): названия из двух слов — каждое слово на своей строке («Частным / клиентам»).
   Так меню помещается целиком с обычным шрифтом и полной кнопкой «Личный кабинет».
   Ширины проверены замером по ru и kz на 1200–1920px. */
@media (min-width: 1200px) and (max-width: 1799.98px) {
    .header .navbar-nav .nav-link {
        margin: 0;
        padding: 0.5rem 0.55rem;
        font-size: 14px;
        white-space: normal;
        width: min-content;   /* перенос после каждого слова */
        line-height: 1.15;
        text-align: center;
        display: flex;
        align-items: center;
    }
    /* пункты не сжимаем — иначе браузер ужимает их неравномерно */
    .header .navbar-nav > li { flex-shrink: 0; }
}
/* С 1400px контейнер шире — раздвигаем пункты: промежуток ~35px, как на экранах от 1800px
   (до кнопки входа остаётся ~30px запаса, проверено замером ru/kz) */
@media (min-width: 1400px) and (max-width: 1799.98px) {
    .header .navbar-nav .nav-link { padding: 0.5rem 1.1rem; }
}
/* Крестик закрытия бургер-меню: крупный, заметный, в круге */
.header .burger-close {
    position: static;
    align-self: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEF5FD;
    color: #2363B0;
    transition: background 0.2s, color 0.2s;
}
.header .burger-close:hover,
.header .burger-close:focus-visible {
    background: #2363B0;
    color: #fff;
}
.header .burger-dropdown .burger-close svg { margin: 0; }

/* Компактная кнопка входа (до 1200px) */
.header .header-login-compact {
    padding: 0.35rem 0.9rem;
    text-decoration: none;
}
/* Самые маленькие телефоны (320–374px): ужимаем логотип и отступы, чтобы всё влезло */
@media (max-width: 374.98px) {
    .header .navbar-brand img { height: 36px !important; }
    .header .navbar-brand { margin-right: 0; }
    .header .language-dropdown { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .header .dropdown.d-xl-none { margin-right: 0.5rem !important; }
    .header .header-login-compact { margin-left: 0.5rem !important; }
}
/* Узкий телефон: только иконка в круге, чтобы шапка не вылезала за экран */
@media (max-width: 399.98px) {
    .header .header-login-compact {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .header .header-login-compact .header-login-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}