/* ═══════════════════════════════════════════════════════════════════════════
   Верхняя полоса шапки (компьютер/планшет): слева «режим для слабовидящих» и соцсети,
   справа сервисы и языки. Подключается после home-redesign.css.

   Левая часть не сжимается уже своего содержимого, правая занимает остаток —
   поэтому они не наезжают друг на друга. Если сервисы не помещаются, скрипт в _Layout
   (topbar-fit) включает ступени сжатия по очереди, ровно столько, сколько нужно:
     .tn-l1 — «режим для слабовидящих» становится значком-глазом (подсказка и текст для экранного диктора остаются);
     .tn-l2 — короткие подписи («Ғылыми еңбектер» вместо полного названия);
     .tn-l3 — второстепенные сервисы уходят в меню «Тағы ▾».
   Ширина зависит от языка, шрифта и режима для слабовидящих — поэтому меряем, а не угадываем
   по ширине экрана. Без скрипта — запасной вариант по @media ниже.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Меню «Тағы» выпадает вниз за пределы полосы: по вертикали не обрезаем, по горизонтали — да (бегущий блик ::before). */
#header-container .top-navbar,
.container-fluid.top-navbar,
.top-navbar {
    overflow: visible !important;
    overflow-x: clip !important;
}

.top-navbar .row > .col-10.d-flex {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: max-content;
}

.top-navbar .row > .col.d-flex {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Режим для слабовидящих: значок + текст */
.top-navbar #accessibility-mode-button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.top-navbar .tn-a11y-ico { flex: 0 0 auto; }

/* Сервисы */
.top-navbar .tn-short,
.top-navbar .tn-more { display: none; }

.top-navbar .tn-more { position: relative; }
.top-navbar .tn-more > summary {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.top-navbar .tn-more > summary::-webkit-details-marker { display: none; }
.top-navbar .tn-more > summary svg { transition: transform .2s ease; }
.top-navbar .tn-more[open] > summary svg { transform: rotate(180deg); }
.top-navbar .tn-more > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.top-navbar .tn-more__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10001;
    display: grid;
    gap: 2px;
    min-width: 270px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(4, 28, 15, .28);
    animation: tn-drop .16s ease;
}
@keyframes tn-drop { from { opacity: 0; transform: translateY(-4px); } }
.top-navbar .tn-more__menu a {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #0f172a !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.top-navbar .tn-more__menu a:hover,
.top-navbar .tn-more__menu a:focus-visible { background: #f0fdf4; outline: none; }
.top-navbar .tn-more__menu b { font-size: .84rem; font-weight: 700; }
.top-navbar .tn-more__menu small { color: #64748b; font-size: .74rem; }

/* Ступени сжатия (включает скрипт topbar-fit) */
.top-navbar.tn-l1 #accessibility-mode-button { padding: 0.4rem 0.55rem !important; margin-right: .5rem !important; }
.top-navbar.tn-l1 #accessibility-mode-button .tn-a11y-text,
.top-navbar .tn-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.top-navbar.tn-l2 .tn-extra .tn-full { display: none; }
.top-navbar.tn-l2 .tn-extra .tn-short { display: inline; }

.top-navbar.tn-l3 .tn-extra { display: none !important; }
.top-navbar.tn-l3 .tn-more { display: block; }

/* Запасной вариант без скрипта */
@media screen and (max-width: 1199.98px) {
    .top-navbar:not(.tn-fit) .tn-extra { display: none !important; }
    .top-navbar:not(.tn-fit) .tn-more { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .top-navbar .tn-more__menu { animation: none; }
    .top-navbar .tn-more > summary svg { transition: none; }
}