﻿/* Шапка сайта — общий файл (27.08.2026).
   Выделено из инлайнового блока live.aspx, чтобы хоккейные страницы получили ТУ ЖЕ шапку:
   слева переключатель спорта, разделы по центру, кластер язык/настройки/пользователь справа.
   Пока это копия: live.aspx продолжает нести свой инлайновый блок, чтобы правка не задела
   боевой футбольный грид. Долг: снять инлайн в live.aspx и подключить этот файл там же. */
/* Desktop тулбар: счётчик слева, остальное (фильтры/поиск/дата/режимы) по центру без зазоров. Мобайл (<=768) не трогаем. */
        @media (min-width:769px) {
            .toolbar { position:relative; justify-content:center; gap:8px; }
            .toolbar-left { position:absolute; left:20px; top:50%; transform:translateY(-50%); margin:0; }
        }
        /* Ландшафт/планшет 769–1499px: грид = min-width:1500px и скроллится; тянем шапку и тулбар
           до той же ширины, чтобы они скроллились вместе с гридом без пустоты справа. */
        @media (min-width:769px) and (max-width:1499px) {
            .sg-topnav-live { width:1500px; min-width:1500px; margin-left:0; }
            /* ссылки навигации — слева (как грид), а не по центру */
            .sg-topnav-live .sg-topnav-inner { justify-content:flex-start; }
            .toolbar { min-width:1500px; box-sizing:border-box; justify-content:flex-start; }
            /* counter в потоке (не absolute), иначе наезжает на фильтры при flex-start */
            .toolbar-left { position:static; transform:none; left:auto; top:auto; }
        }
        /* Класс вешает syncTopnavRight(), когда кластер язык/⚙/юзер не помещается в экран
           (шапка растянута под грид шире вьюпорта). Тогда он не absolute у правого края
           ШАПКИ, а sticky у правого края ЭКРАНА — виден без горизонтальной прокрутки,
           как в мобильной версии. !important — перебить инлайновый right. */
        @media (min-width:769px) {
            .sg-topnav-live.sg-nav-pinned .sg-topnav-right {
                position:sticky !important;
                right:12px !important;
                top:auto !important;
                transform:none !important;
                margin-left:auto;
                align-self:center;
                /* row2-ссылки идут после кластера в DOM (display:contents) — без order он бы
                   встал в середину ряда ссылок; order выносит его последним, вправо. */
                order:99;
            }
        }
        .sg-topnav-live { width:100vw; margin-left:calc(50% - 50vw); background:#f5f5f5; border-bottom:1px solid #ddd; font-size:12px; color:#777; position:relative; }
        .sg-topnav-live .sg-topnav-right { position:absolute; right:calc(50% - 760px); top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:10px; z-index:1000; }
        @media (max-width:1560px) { .sg-topnav-live .sg-topnav-right { right:16px; } }
        /* десктоп: обёртки строк прозрачны (display:contents) → 7 ссылок как прямые flex-дети по центру; короткий лейбл ЧМ скрыт */
        .sg-topnav-live .sg-topnav-row1, .sg-topnav-live .sg-nav-left, .sg-topnav-live .sg-topnav-row2 { display:contents; }
        .sg-topnav-live .wc-short { display:none; }
        @media (max-width:768px) {
            .sg-topnav-live .sg-topnav-inner { display:block; padding:0; }
            /* строка 1: ссылки слева (горизонтальный скролл при нехватке) + язык/⚙/юзер справа */
            .sg-topnav-live .sg-topnav-row1 { display:flex; align-items:center; gap:10px; padding:8px 10px 4px; }
            .sg-topnav-live .sg-nav-left { display:flex; gap:15px; overflow-x:auto; min-width:0; flex:1 1 auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:3px; }
            .sg-topnav-live .sg-nav-left::-webkit-scrollbar { height:3px; }
            .sg-topnav-live .sg-nav-left::-webkit-scrollbar-thumb { background:#cfd8dc; border-radius:3px; }
            .sg-topnav-live .sg-nav-left > a { flex:0 0 auto; }
            .sg-topnav-live .sg-topnav-right { position:static; float:none; transform:none; flex:0 0 auto; display:inline-flex; gap:6px; }
            /* строка 2: остальные ссылки по центру */
            .sg-topnav-live .sg-topnav-row2 { display:block; text-align:center; padding:2px 10px 9px; }
            .sg-topnav-live .sg-topnav-row2 > a { display:inline-block; margin:0 9px; }
            /* короткий лейбл ЧМ на мобиле */
            .sg-topnav-live .wc-full { display:none; }
            .sg-topnav-live .wc-short { display:inline; }
            /* чуть меньше иконки кластера */
            .sg-topnav-live .lang-current { padding:3px 6px; font-size:10px; }
            .sg-topnav-live .theme-btn { padding:3px 7px; font-size:12px; }
            .sg-topnav-live #mainSignInBtn { padding:3px 9px !important; font-size:11px !important; }
            .sg-topnav-live #tgUserName { font-size:11px !important; }
        }
        #tgUserName { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }
        #tgUserName img { flex:0 0 auto; }
        .sg-topnav-live .lang-list { max-height:calc(100vh - 56px); }
        .sg-topnav-inner { max-width:1600px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
        .sg-topnav-live a { color:#1565C0; text-decoration:none; font-weight:500; }
        .sg-topnav-live a:hover { text-decoration:underline; }
        .sg-topnav-live a.wc-navhot { color:#1b5e20; font-weight:700; }
        body.dark-theme .sg-topnav-live a.wc-navhot { color:#81c784; }
        body.dark-theme .sg-topnav-live { background:#222; border-bottom:1px solid #333; color:#888; }
        body.dark-theme .sg-topnav-live a { color:#64b5f6; }
        html.tg-app .sg-topnav-live { display:none; }
        html.tg-app .site-footer { display:none; }
        html.tg-app #sgCookieBanner { display:none !important; }
        html.tg-app #tgAuthBlock { display:none; }
        html.tg-app #settingsBtnTg { display:inline-flex !important; align-items:center; padding:5px 8px; font-size:15px; }
