/* =============================================================
 * dorabotki.css
 * Доработки шапки и блока «Документация»:
 *   1) «посл. изм.» в правом верхнем углу заголовка карточки
 *      «Документация»;
 *   2) плавное сжатие пунктов меню (шрифт + отступы) через
 *      CSS-контейнерные запросы при нехватке места;
 *   3) мобильное меню-гамбургер на экранах ≤992px (Bootstrap lg).
 * Подключается после assets/css/notify.css в index.php.
 * ============================================================= */

/* ===== Доработка 1: «посл. изм.» в правом верхнем углу карточки «Документация» ===== */
.doc-sidebar-title.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.doc-sidebar-title .last-updated {
    font-family: inherit;
    font-weight: 400;
    font-size: .72rem;
    color: #8a8a8a;
    text-align: right;
    line-height: 1.2;
}
.doc-sidebar-footer { display: none; }

/* ===== Доработка 2: сжатие пунктов меню (шрифт + отступы) =====
   Чистый CSS через контейнерные запросы. На широких экранах —
   исходные размеры Bootstrap; по мере сужения шапки шрифт и
   отступы плавно уменьшаются, чтобы пункты помещались.
   Никакого JS для масштабирования. */
#navbarCollapse { container-type: inline-size; flex-wrap: nowrap; }
#navbarCollapse .navbar-nav { flex-wrap: nowrap; flex-shrink: 0; }

#navbarCollapse .navbar-nav .nav-item > .nav-link,
#navbarCollapse .top_buttons .navbar-btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}
#navbarCollapse .top_buttons .navbar-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Сжатие пунктов меню (≥ lg), по мере уменьшения доступной ширины
   контейнера #navbarCollapse. Две фазы:
   1) СНАЧАЛА уменьшаем отступы (горизонтальные padding) — это почти не
      заметно, но сразу «собирает» пункты, если они не помещаются;
   2) ТОЛЬКО ПОТОМ, когда отступы уже на минимуме, уменьшаем шрифт. */
@container (max-width: 1240px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link { padding-left: .8rem; padding-right: .8rem; }
    #navbarCollapse .top_buttons .navbar-btn { padding-left: .65rem; padding-right: .65rem; }
}
@container (max-width: 1180px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link { padding-left: .65rem; padding-right: .65rem; }
    #navbarCollapse .top_buttons .navbar-btn { padding-left: .55rem; padding-right: .55rem; }
}
@container (max-width: 1130px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link { padding-left: .5rem; padding-right: .5rem; }
    #navbarCollapse .top_buttons .navbar-btn { padding-left: .45rem; padding-right: .45rem; }
}
@container (max-width: 1080px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link { padding-left: .35rem; padding-right: .35rem; }
    #navbarCollapse .top_buttons .navbar-btn { padding-left: .35rem; padding-right: .35rem; }
}
/* Отступы на минимуме — теперь уменьшаем шрифт */
@container (max-width: 1040px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link,
    #navbarCollapse .top_buttons .navbar-btn { font-size: .94rem; }
}
@container (max-width: 1000px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link,
    #navbarCollapse .top_buttons .navbar-btn { font-size: .88rem; }
}
@container (max-width: 960px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link,
    #navbarCollapse .top_buttons .navbar-btn { font-size: .82rem; }
}
@container (max-width: 920px) {
    #navbarCollapse .navbar-nav .nav-item > .nav-link,
    #navbarCollapse .top_buttons .navbar-btn { font-size: .76rem; }
}

/* ===== Вертикальное выравнивание лого / меню / кнопки «Скачать» =====
   .navbar-btn в проекте никак не стилизуется (нет CSS, нет класса .btn),
   поэтому это обычный inline-<a> с базовой линией — кнопка «чуть съезжала»
   относительно меню и логотипа. Делаем flex-центрирование и приводим кнопку
   к виду в стиле сайта (#335EEA). */
.navbar-brand { display: inline-flex; align-items: center; }
#navbarCollapse { align-items: center; }
#navbarCollapse .navbar-nav { align-items: center; }
#navbarCollapse .top_buttons { display: flex; align-items: center; }
#navbarCollapse .top_buttons .navbar-btn {
    display: inline-flex; align-items: center; align-self: center;
}

/* ===== Мобильное меню (гамбургер) =====
   Брейкпоинт — 992px (Bootstrap lg), совпадает с navbar-expand-lg
   и с проверкой window.innerWidth < 992 в JS «Ещё». Ниже 992px
   навигация сворачивается в выпадающий блок, а CSS-сжатие
   (контейнерные запросы) отключаем — в мобильном меню пункты
   идут в столбец с исходными размерами. */
@media (max-width: 991.98px) {
    #mainNav .navbar-toggler { display: block; }
    #navbarCollapse {
        container-type: normal;
        flex-wrap: wrap;
    }
    #navbarCollapse .navbar-nav { flex-wrap: wrap; flex-shrink: 1; }
    #navbarCollapse .navbar-nav .nav-item > .nav-link,
    #navbarCollapse .top_buttons .navbar-btn {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    #navbarCollapse .top_buttons { width: 100%; margin-top: .5rem; }

    /* На мобильных «Ещё» как отдельный пункт не нужен: прячем сам переключатель,
       а его подпункты показываем сразу в общем списке меню (без выпадашки). */
    #navbarCollapse .navbar-nav .nav-item.dropdown > a.dropdown-toggle { display: none; }
    #navbarCollapse .navbar-nav .nav-item.dropdown .dropdown-menu {
        display: block; position: static; float: none; border: 0;
        background: transparent; padding: 0; margin: 0; box-shadow: none;
    }
    #navbarCollapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
        padding: .5rem 1rem; color: #333; white-space: nowrap;
    }
    #navbarCollapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
        background: #eef1f8; color: #335EEA;
    }
}

/* ===== Эффект подчёркивания пунктов верхнего меню (как в макете, вариант 4) =====
   Синяя черта «выезжает» из центра при наведении и у активного пункта.
   Пункт «Ещё» (dropdown-toggle) исключён, чтобы не затиралась стрелочка
   выпадающего списка (каретка Bootstrap рисуется через .dropdown-toggle::after). */
#navbarCollapse .navbar-nav .nav-item > .nav-link {
    position: relative;
    transition: color .15s ease;
}
#navbarCollapse .navbar-nav .nav-item > .nav-link:not(.dropdown-toggle):hover { color: #335EEA; }
#navbarCollapse .navbar-nav .nav-item > .nav-link:not(.dropdown-toggle).active { color: #335EEA; font-weight: 600; }
#navbarCollapse .navbar-nav .nav-item > .nav-link:not(.dropdown-toggle)::after {
    content: ""; position: absolute; left: 1rem; right: 1rem; bottom: -2px;
    height: 2px; background: #335EEA; transform: scaleX(0); transform-origin: center;
    transition: transform .2s ease;
}
#navbarCollapse .navbar-nav .nav-item > .nav-link:not(.dropdown-toggle):hover::after,
#navbarCollapse .navbar-nav .nav-item > .nav-link:not(.dropdown-toggle).active::after { transform: scaleX(1); }