/* site-header.css — единая шапка сайта (31.08.2026).

   Источник правды для контрола Controls/SiteHeader.ascx. Собрано из инлайновых блоков

   .sg-topnav, которые были скопированы на 13 страниц (NewsPage, MatchPage, TeamPage,

   LeaguePage, StatsPage, ArticlePage, ToolPage, Bookmaker*, WorldCup, H2h, Referee*).

   Правится ТОЛЬКО здесь: страницы свой инлайн-CSS шапки не держат.



   Что НЕ здесь: раскладка главной (.sg-topnav-live растягивается под широкий грид) —

   она в topnav-live.css, у неё своя логика выравнивания под таблицу. Переключатель

   спорта — topnav-sport.css. Поиск — CSS инжектит topnav-search.js. */



.sg-topnav { width:100vw; margin-left:calc(50% - 50vw); background:#f5f5f5; border-bottom:1px solid #ddd; font-size:12px; color:#777; font-family:-apple-system,sans-serif; }

.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 a { color:#1565C0; text-decoration:none; font-weight:500; display:inline-flex; align-items:center; }

.sg-topnav a:hover { text-decoration:underline; }

.sg-topnav .sg-brand { padding:0; line-height:0; }

.sg-topnav .sg-brand img { width:18px; height:18px; border-radius:50%; animation:sgTopnavPulse 2s ease infinite; transition:transform 0.2s; }

.sg-topnav .sg-brand:hover img { animation:none; transform:scale(1.18); }

@keyframes sgTopnavPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(230,81,0,0.45)} 50%{opacity:.85;box-shadow:0 0 0 5px rgba(230,81,0,0)} }

body.dark-theme .sg-topnav { background:#222; border-bottom:1px solid #333; color:#888; }

body.dark-theme .sg-topnav a { color:#64b5f6; }



/* Текущий раздел: подчёркнут, не «залит» — заливок в шапке на сайте нет. */

.sg-topnav a.is-active { color:#1b5e20; font-weight:700; text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:1px; }

body.dark-theme .sg-topnav a.is-active { color:#81c784; }



.sg-topnav-right { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }

/* Три зоны десктопной шапки: спорт слева - разделы по центру - утилиты справа
   (31.08.2026, владелец: «почему язык и настройки не расположены справа по краю»).
   Раньше кластер шёл в общем потоке центрированной строки и вставал где придётся.
   На главной он прижат абсолютом под ширину грида; здесь грида нет, поэтому
   auto-margin: спорт отжимает свободное место вправо, кластер - влево, разделы
   оказываются ровно между ними. order:99 нужен потому, что ссылки второго ряда
   идут в DOM ПОСЛЕ кластера (row1/row2 - display:contents) и без него встали бы
   правее него. Специфичность в три класса - чтобы перебить margin-right:10px
   для .sportbar-inline из topnav-sport.css, который грузится следом. */
@media (min-width:769px) {
    .sg-topnav .sg-topnav-inner .sportbar-inline { margin-right:auto; }
    .sg-topnav .sg-topnav-inner .sg-topnav-right { order:99; margin-left:auto; }
}

.lang-dropdown { position:relative; display:inline-block; }

.lang-current { background:#fff; color:#333; border:1px solid #ccc; border-radius:4px; padding:4px 8px; font-size:11px; cursor:pointer; display:flex; align-items:center; gap:4px; white-space:nowrap; }

.lang-current:hover { border-color:#2e7d32; }

.lang-current .fi { font-size:12px; }

.lang-list { display:none; position:absolute; top:100%; right:0; background:#fff; border:1px solid #ccc; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.15); z-index:9999; min-width:140px; max-height:300px; overflow-y:auto; margin-top:2px; }

.lang-dropdown.open .lang-list { display:block; }

.lang-list a { display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:12px; color:#333; cursor:pointer; text-decoration:none; white-space:nowrap; }

.lang-list a:hover { background:#e8f5e9; }

.lang-list .fi { font-size:14px; }

body.dark-theme .lang-current { background:#2a2a2a; color:#e0e0e0; border-color:#444; }

body.dark-theme .lang-list { background:#2a2a2a; border-color:#444; }

body.dark-theme .lang-list a { color:#e0e0e0; }

body.dark-theme .lang-list a:hover { background:#333; }

.theme-btn { background:#fff; color:#555; border:1px solid #ccc; border-radius:4px; padding:4px 8px; font-size:13px; line-height:1; cursor:pointer; }

.theme-btn:hover { border-color:#2e7d32; }

body.dark-theme .theme-btn { background:#2a2a2a; color:#e0e0e0; border-color:#444; }

.sg-topnav #mainSignInBtn { display:inline-block; font-size:12px; padding:5px 14px; border:1px solid #ccc; border-radius:4px; color:#333; text-decoration:none; font-weight:600; background:#fff; }

.sg-topnav #mainSignInBtn:hover { border-color:#2e7d32; text-decoration:none; }

body.dark-theme .sg-topnav #mainSignInBtn { background:#2a2a2a; color:#e0e0e0; border-color:#444; }

#tgUserName { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }

#tgUserName img { flex:0 0 auto; }



/* Договорённый мобильный хидер (как на главной): desktop — display:contents (всё инлайн),

   mobile — row1 (скроллируемые ссылки + кластер) / row2 (центрированные ссылки), ЧМ→короткий. */

.sg-topnav .sg-topnav-row1, .sg-topnav .sg-nav-left, .sg-topnav .sg-topnav-row2 { display:contents; }

.sg-topnav .wc-short { display:none; }

.sg-topnav a.wc-navhot { color:#1b5e20; font-weight:700; }

body.dark-theme .sg-topnav a.wc-navhot { color:#81c784; }



/* Липкая шапка (31.08.2026, жалоба владельца «на странице новости нельзя свободно взять

   и вернуться на главную»): на длинной статье шапка уезжала вверх вместе с брендом,

   поиском и настройками. z-index ниже .lang-list (9999), но выше контента страниц. */

.sg-topnav.sg-sticky { position:sticky; top:0; z-index:1200; }

html.tg-app .sg-topnav { display:none; }



@media (max-width:768px) {

    .sg-topnav .sg-topnav-inner { display:block; padding:0; }

    .sg-topnav .sg-topnav-row1 { display:flex; align-items:center; gap:10px; padding:8px 10px 4px; }

    .sg-topnav .sg-nav-left { display:flex; align-items:center; gap:15px; overflow-x:auto; min-width:0; flex:1 1 auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:3px; }

    .sg-topnav .sg-nav-left::-webkit-scrollbar { height:3px; }

    .sg-topnav .sg-nav-left::-webkit-scrollbar-thumb { background:#cfd8dc; border-radius:3px; }

    .sg-topnav .sg-nav-left > a { flex:0 0 auto; }

    .sg-topnav .sg-topnav-right { position:static; transform:none; flex:0 0 auto; display:inline-flex; gap:6px; right:auto; }

    .sg-topnav .sg-topnav-row2 { display:block; text-align:center; padding:2px 10px 9px; }

    .sg-topnav .sg-topnav-row2 > a { display:inline-block; margin:0 9px; }

    .sg-topnav .wc-full { display:none; }

    .sg-topnav .wc-short { display:inline; }

    .sg-topnav .lang-current { padding:3px 6px; font-size:10px; }

    .sg-topnav .theme-btn { padding:3px 7px; font-size:12px; }

    .sg-topnav #mainSignInBtn { padding:3px 9px !important; font-size:11px !important; }

    .sg-topnav #tgUserName { font-size:11px !important; }

    /* Мобильная шапка в две строки съедает ~58px экрана. При прокрутке вниз второй ряд

       (Гайды/Инструменты/Букмекеры/FAQ) убирается — класс вешает site-header.js. */

    .sg-topnav.sg-sticky.sg-nav-compact .sg-topnav-row2 { display:none; }

}

/* Тёмная тема на страницах, где класс тела - .dark, а не .dark-theme (/picks и др.):
   шапка не должна светиться белым посреди тёмной страницы. Дублируем только те правила,
   что задают цвет; остальное классу тела безразлично. */
body.dark .sg-topnav { background:#222; border-bottom:1px solid #333; color:#888; }
body.dark .sg-topnav a { color:#64b5f6; }
body.dark .sg-topnav a.is-active { color:#81c784; }
body.dark .lang-current { background:#2a2a2a; color:#e0e0e0; border-color:#444; }
body.dark .lang-list { background:#2a2a2a; border-color:#444; }
body.dark .lang-list a { color:#e0e0e0; }
body.dark .lang-list a:hover { background:#333; }
body.dark .theme-btn { background:#2a2a2a; color:#e0e0e0; border-color:#444; }
body.dark .sg-topnav #mainSignInBtn { background:#2a2a2a; color:#e0e0e0; border-color:#444; }
body.dark .sportbar-inline .sport-item { color:#8a94a3; }
body.dark .sg-topnav .sportbar-inline { border-right-color:#2a3038; }