/* Обвязка сайта, общая для новой главной и внутренних страниц — 07.09.2026.

   Здесь то, что должно выглядеть одинаково и на v4, и на внутренних:
   мобильная шапка (кнопка меню, раскрытое меню, верхняя полоса)
   и кнопка «наверх». Файл подключается ТОЛЬКО на этих страницах —
   v2, v3 и светлая версия заморожены как эталоны, их оформление
   не должно поехать от общей правки (в blocks/header/header.css,
   который грузится везде, такие правила писать нельзя).

   Ключ — два класса на <body>: tsv4-page (главная) и tsb-inner
   (все остальные страницы). */

/* ── Кнопка «наверх» ─────────────────────────────────── */
/* В теме это светлый квадрат 32x32 с радиусом 2px; в настройках темы
   он перекрашен в янтарный и на светлой странице читается как жёлтая
   плашка ни от чего. Приводим к кругу в тёмном тоне сайта. */
body:is(.tsv4-page,.tsv5-page) #back-to-top,
body.tsb-inner #back-to-top{
  width:44px;height:44px;line-height:42px;
  right:20px;bottom:20px;
  background:rgba(27,27,29,.82) !important;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s,transform .2s;
}
body:is(.tsv4-page,.tsv5-page) #back-to-top:hover,
body.tsb-inner #back-to-top:hover{
  background:#e95c0c !important;border-color:#e95c0c;transform:translateY(-2px);
}
body:is(.tsv4-page,.tsv5-page) #back-to-top::before,
body.tsb-inner #back-to-top::before{
  color:#fff !important;font-size:20px;margin:0;
}

/* ── Меню в тесном диапазоне 992–1199px ──────────────── */
/* Между 992 и 1199 контейнер сайта 970px, а меню в размере главной (14px,
   обычный регистр) занимает 771px — вместе с логотипом 157px это ровно
   вся строка, без зазора. На 992 меню упиралось в правый край экрана
   и выходило из сетки на 3px.

   Общий header.css ужимает меню в этом же диапазоне, но его правило
   (.site-header #mainmenu > li > a) весит меньше версии
   (body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li > a) и молча не применяется.
   Поэтому повторяем здесь: этот файл грузится после home-v4.css
   и после inner.css, значит при равном весе выигрывает он. */
@media (min-width:992px) and (max-width:1199px){
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li > a,
  body.tsb-inner .site-header #mainmenu > li > a{
    font-size:12.5px;padding:8px 7px;letter-spacing:0;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li.nav-cta > a,
  body.tsb-inner .site-header #mainmenu > li.nav-cta > a{
    font-size:12.5px;padding:8px 12px;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-4 .social-list a,
  body.tsb-inner .site-header .info .col-md-4 .social-list a{font-size:12px}
}

/* ── Мобильная шапка ─────────────────────────────────── */
/* Граница 992px — та же, на которой тема прячет меню и показывает кнопку. */
@media (max-width:992px){

  /* Тема прячет верхнюю полосу целиком (header .info{display:none}), и вместе
     с ней с телефона пропадают номер, мессенджеры, «Служба поддержки»
     и «Личный кабинет» — то есть всё, чем со смартфона как раз и пользуются.
     Возвращаем полосу и разрешаем ей переноситься на две строки. */
  body:is(.tsv4-page,.tsv5-page) .site-header .info,
  body.tsb-inner .site-header .info{display:block}
  body:is(.tsv4-page,.tsv5-page) .site-header .info .row,
  body.tsb-inner .site-header .info .row{display:block}
  body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-8,
  body.tsb-inner .site-header .info .col-md-8{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
    float:none;width:100%;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-4,
  body.tsb-inner .site-header .info .col-md-4{
    float:none;width:100%;text-align:left;margin-top:10px;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-4 .social-list,
  body.tsb-inner .site-header .info .col-md-4 .social-list{
    display:flex;flex-wrap:wrap;gap:8px;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-4 .social-list a,
  body.tsb-inner .site-header .info .col-md-4 .social-list a{
    padding:6px 12px;font-size:12px;
  }
  /* На телефоне обе кнопки в размере 12px не встают в строку (нужно ~360px
     при 343 доступных) и разъезжаются на три строки — шапка вырастает
     до 200px и съедает фотографию. В 11px они помещаются рядом. */
  @media (max-width:600px){
    body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-4 .social-list a,
    body.tsb-inner .site-header .info .col-md-4 .social-list a{
      padding:5px 10px;font-size:11px;
    }
    body:is(.tsv4-page,.tsv5-page) .site-header .info .col-md-4 .social-list,
    body.tsb-inner .site-header .info .col-md-4 .social-list{gap:6px}
  }
  /* ── Порядок в шапке (правка 10.09.2026) ──────────────
     Логотип с кнопкой меню уходит наверх, полоса с телефоном, мессенджерами
     и кнопками — под него. Разметку темы не трогаем: в <header> ровно два
     блока, .info и .container, поэтому хватает флекса с порядком.
     Так первым на экране оказывается то, чем пользуются: знак и меню. */
  body:is(.tsv4-page,.tsv5-page) .site-header,
  body.tsb-inner .site-header{display:flex;flex-direction:column}
  /* z-index обоим обязателен, и вот почему. У .info в теме стоит z-index:100
     при position:static — обычно это правило спит. Но флекс-элементу z-index
     действует и без позиционирования, и как только шапка стала флексом,
     полоса поднялась над раскрытым меню: сквозь него просвечивали телефон
     и кнопки. Явные 1 и 2 задают порядок наложения раз и навсегда. */
  /* width:100% контейнеру обязателен. У .container из бутстрапа стоят
     margin-left/right:auto, и во флекс-колонке такие поля забирают всю
     свободную ширину: элемент перестаёт растягиваться и садится по своему
     содержимому — строка с логотипом ужалась с 345 до 231px и уехала
     к середине. Явная ширина возвращает её на место. */
  body:is(.tsv4-page,.tsv5-page) .site-header > .container,
  body.tsb-inner .site-header > .container{order:1;z-index:2;width:100%}
  body:is(.tsv4-page,.tsv5-page) .site-header > .info,
  body.tsb-inner .site-header > .info{order:2;z-index:1;width:100%}

  /* Отбивка переехала вместе с полосой: раньше она отделяла .info сверху
     от строки с логотипом снизу, теперь наоборот. На внутренних страницах
     у .info есть ещё border-bottom из inner.css — он оказывается по нижней
     кромке шапки и работает как её граница. */
  body:is(.tsv4-page,.tsv5-page) .site-header .info,
  body.tsb-inner .site-header .info{padding-bottom:0;margin-bottom:0;padding-top:12px;margin-top:12px}

  /* Кнопка меню. В теме — серый квадрат #333 со скруглением 2px, чужой
     и на фотографии, и на тёмной полосе. С 10.09.2026 она фирменная
     оранжевая (до этого была прозрачной с белой обводкой): на снимке
     баннера белая обводка терялась, а оранжевую видно сразу. Оранжевый
     тот же, что у кнопок сайта, #e95c0c. */
  body:is(.tsv4-page,.tsv5-page) #menu-btn,
  body.tsb-inner #menu-btn{
    width:44px;height:44px;margin-top:2px;padding:0;
    display:flex;align-items:center;justify-content:center;
    line-height:1;
    background:#e95c0c;
    border:1px solid #e95c0c;
    border-radius:12px;
    transition:background .2s,border-color .2s;
  }
  body:is(.tsv4-page,.tsv5-page) #menu-btn::before,
  body.tsb-inner #menu-btn::before{
    font-size:19px;color:#fff;margin:0;line-height:1;
  }
  /* Отклик даём тем же оранжевым потемнее — как у остальных кнопок сайта.
     Раскрытое состояние и так читается: значок меняется с полосок на крест. */
  body:is(.tsv4-page,.tsv5-page) #menu-btn:hover,
  body.tsb-inner #menu-btn:hover,
  body:is(.tsv4-page,.tsv5-page) #menu-btn.active,
  body.tsb-inner #menu-btn.active{background:#d24f06;border-color:#d24f06}

  /* ── Меню раскрывается поверх страницы (правка 10.09.2026) ─────
     Было: nav лежал в потоке внутри шапки, и раскрытое меню растило её
     с 265 до 708px — на внутренних страницах содержимое уезжало вниз
     на 443px, будто страница прыгает. Стало: nav вынут из потока и висит
     под строкой с логотипом, шапка своей высоты не меняет вовсе.

     Точка отсчёта — .col-md-12, та самая строка с логотипом и кнопкой;
     left/right по 15px повторяют её внутренние поля, поэтому меню встаёт
     ровно под логотипом. На главной шапка сама лежит поверх баннера
     (position:absolute, z-index 50 в home-v4.css), на внутренних —
     relative с тем же z-index; в обоих случаях меню оказывается выше
     содержимого страницы. */
  /* flow-root обязателен вместе с absolute у nav. Логотип и кнопка меню
     в теме прижаты флотами, и раньше высоту строке задавал сам nav. Стоило
     вынуть его из потока — строка схлопнулась, и меню (top:100%) поехало
     вверх, накрыв логотип. flow-root возвращает строке высоту по флотам
     и, в отличие от overflow:hidden, не режет вылезающее меню. */
  body:is(.tsv4-page,.tsv5-page) .site-header .col-md-12,
  body.tsb-inner .site-header .col-md-12{position:relative;display:flow-root}
  /* width:auto обязателен: в теме у nav стоит width:100%, а при заданной
     ширине правая привязка не работает вовсе — меню вылезало за экран
     ровно на padding колонки. Со сброшенной шириной края держат left/right. */
  body:is(.tsv4-page,.tsv5-page) .site-header nav,
  body.tsb-inner .site-header nav{
    position:absolute;top:100%;left:15px;right:15px;width:auto;z-index:60;
  }
  /* Плашка согласия на cookie висит фиксированной полосой с z-index 9999
     и накрывала низ раскрытого меню — кнопку «Подобрать помещение».
     Пока меню открыто, поднимаем всю шапку над ней. :has() без поддержки
     просто не сработает, и мы вернёмся к прежнему поведению. */
  body:is(.tsv4-page,.tsv5-page) .site-header:has(#menu-btn.active),
  body.tsb-inner .site-header:has(#menu-btn.active){z-index:10001}

  /* Раскрытое меню. На главной шапка прозрачная и лежит на фотографии —
     без своей подложки пункты меню читались бы прямо по снимку. Поэтому
     меню оформлено отдельной тёмной карточкой; на внутренних страницах
     она же просто повторяет фон шапки. */
  body:is(.tsv4-page,.tsv5-page) .site-header nav #mainmenu,
  body.tsb-inner .site-header nav #mainmenu{
    background:#1b1b1d;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:8px 10px;margin-top:14px;
    box-shadow:0 26px 60px -22px rgba(0,0,0,.85);
    overflow:hidden;   /* страховка от флотов темы */
  }
  /* float:none обязателен. Тема раскладывает пункты меню флотами, и в мобильном
     блоке их не сбрасывает: список остаётся нулевой высоты, тёмная подложка
     схлопывается в полоску, а пункты повисают поверх страницы. */
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu li,
  body.tsb-inner .site-header #mainmenu li{
    float:none;display:block;width:100%;
    border-bottom:1px solid rgba(255,255,255,.08);
    letter-spacing:0;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu li:last-child,
  body.tsb-inner .site-header #mainmenu li:last-child{border-bottom:none;margin-bottom:0}
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li > a,
  body.tsb-inner .site-header #mainmenu > li > a{
    display:block;padding:12px 12px;border-radius:12px;
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
    font-size:15px;font-weight:500;text-transform:none;letter-spacing:.2px;
    color:#fff;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu a:hover,
  body.tsb-inner .site-header #mainmenu a:hover{background:rgba(255,255,255,.10);color:#fff}
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li.current-menu-item > a,
  body.tsb-inner .site-header #mainmenu > li.current-menu-item > a{color:#e95c0c}
  /* Кнопка «Подобрать помещение» остаётся кнопкой и в мобильном меню. */
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li.nav-cta,
  body.tsb-inner .site-header #mainmenu > li.nav-cta{border-bottom:none;margin-top:6px}
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li.nav-cta > a,
  body.tsb-inner .site-header #mainmenu > li.nav-cta > a{
    background:#e95c0c;color:#fff;text-align:center;
    border-radius:999px;font-weight:600;
  }
  body:is(.tsv4-page,.tsv5-page) .site-header #mainmenu > li.nav-cta > a:hover,
  body.tsb-inner .site-header #mainmenu > li.nav-cta > a:hover{background:#d24f06}
}
