@charset "UTF-8";
/* ==========================================================================
   HEADER-STICKY: липкая шапка и её компактный вид (задача ШАПКА-ЛИПКАЯ-1).

   Эталон — архивный снимок 2017 года
   https://web.archive.org/web/20170505203411/http://clubber.ru/user/persons.php
   (архивная разметка шапки и её CSS скачаны в _clubber/_hs_ref*.css/.html).
   Из эталона взяты числа: компактная шапка 60 px, кнопка «Меню» 9x12 px с
   иконкой-гамбургером, тёмная панель меню (#000, рамка 2 px, скругление 5 px,
   отступы 20/20/15, пункты по 100 px в две строки). Акцент взят не #41abe1
   (как в 2017), а #00aeef — так решил ДИЗАЙН-ЭТАЛОН-1 (common.css:1114),
   чтобы шапка не выбивалась из остального сайта.

   Как устроено (важно для правок):
   1) Шапка прилипает (position: sticky) и НЕ меняет своё место в потоке:
      высота потока всегда --cb-hs-full (её измеряет JS один раз при загрузке и
      при изменении размера окна). Если бы высота шапки менялась, весь контент
      под ней прыгал бы вверх на 45 px в момент сворачивания.
   2) Чёрная полоса нужной высоты — псевдоэлемент ::before (в обычном виде
      --cb-hs-full, в компактном 60 px). Поэтому видимая полоса плавно
      «сжимается», а поток остаётся на месте.
   3) Компактный вид — только класс cb-hs-compact на #header. Никаких замеров
      в обработчике прокрутки: он лишь переключает класс (см. js/header_sticky.js).
   4) Панель меню собирает JS из настоящего #headerMenu (те же девять ссылок),
      в шаблоне её нет.

   Падение без JS: классы cb-hs* не добавляются, шапка остаётся как была.
   Падение без CSS-переменных: сработают литералы в fallback-значениях var().
   ========================================================================== */

/* --- 1. Каркас: шапка прилипает к верху, место в потоке не меняется --------- */
#header.cb-hs {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;                       /* выше контента, ниже окна выбора города (1200) */
  height: var(--cb-hs-full, 105px);   /* = собственная высота шапки: поток не двигается */
  min-height: 0;
  background-color: transparent;      /* чёрную полосу рисует ::before нужной высоты */
}

/* Чёрная полоса шапки: обычная высота -> компактная 60 px */
#header.cb-hs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;                        /* за содержимым шапки, но над контентом страницы */
  height: var(--cb-hs-full, 105px);
  background-color: #000;
  transition: height .16s ease;
}

#header.cb-hs.cb-hs-compact::before {
  height: var(--cb-hs-bar, 60px);
}

/* --- 2. Компактный вид -------------------------------------------------- */
/* Верхняя полоса ровно 60 px, содержимое по центру (как в эталоне: 60 px). */
#header.cb-hs-compact .cb-head-top {
  height: var(--cb-hs-bar, 60px);
  padding-top: 0;
  padding-bottom: 0;
}

/* Вторая полоса меню (девять пунктов) в компактном виде гаснет, но место в
   шапке сохраняет: высота #header задана целиком, поэтому ничего не прыгает. */
#header.cb-hs .cb-head-menu-row {
  transition: opacity .16s ease;
}

#header.cb-hs-compact .cb-head-menu-row {
  opacity: 0;
  visibility: hidden;
}

/* Поиск и соцсети в компактном виде скрыты (в эталоне их тоже нет). */
#header.cb-hs-compact #siteSearch,
#header.cb-hs-compact .cb-head-right .social {
  display: none;
}

/* Логотип и блок справа остаются; логотип прижимаем к левому краю. */
#header.cb-hs-compact .cb-head-right {
  gap: 14px;
}

/* «Ваш город: Красноярск» слева от «Войти или зарегистрироваться» — как в
   эталоне (там город стоял левее ссылки входа). */
#header.cb-hs-compact #userPanel {
  flex-direction: row-reverse;
}

/* Полоса личного кабинета в компактном виде скрыта. visibility вместо
   display: none — чтобы не менять высоту потока (иначе контент прыгнул бы). */
body.cb-hs-compact #cabinetBar {
  visibility: hidden;
}

/* --- 3. Кнопка «МЕНЮ» (видна только в компактном виде) ------------------- */
#header .cb-head-menu-btn {
  display: none;
  flex: 0 0 auto;
  margin-left: 14px;
  padding: 9px 12px;
  border-radius: 5px;
  color: #00aeef;
  color: var(--cb-accent, #00aeef);
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background-color .15s ease, color .15s ease;
  transition: background-color .15s ease, color .15s ease;
}

#header.cb-hs-compact .cb-head-menu-btn {
  display: inline-block;
}

#header .cb-head-menu-btn:hover,
#header .cb-head-menu-btn.cb-hs-active {
  color: #fff;
  background-color: #00aeef;
  background-color: var(--cb-accent, #00aeef);
}

#header .cb-head-menu-btn .cb-hmb-ico {
  display: inline-block;
  width: 20px;
  height: 18px;
  margin-right: 5px;
  vertical-align: middle;
  /* три полоски цветом текста (currentColor): голубые обычно, белые на hover */
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-position: 0 0, 0 8px, 0 16px;
  background-repeat: no-repeat;
}

#header .cb-head-menu-btn .cb-hmb-txt {
  vertical-align: middle;
}

/* --- 4. Тёмная панель меню (собирает JS из #headerMenu) ------------------ */
#header .cb-head-menu-panel {
  display: none;
  position: absolute;
  top: var(--cb-hs-bar, 60px);
  left: calc(50% - 585px);            /* левый край .wrapper (1170 px по центру) */
  width: 644px;                       /* 5 колонок по ~120 px: девять пунктов в две строки */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 20px 15px;
  background-color: #000;
  border: 2px solid #00aeef;
  border-color: var(--cb-accent, #00aeef);
  border-radius: 5px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  z-index: 20;
}

#header.cb-hs-compact.cb-hs-open .cb-head-menu-panel {
  display: block;
}

#header .cb-head-menu-panel .cb-hp-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* девять пунктов в две строки: 5 + 4 (в эталоне 7 пунктов ложились 4 + 3) */
#header .cb-head-menu-panel .cb-hp-list li {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
  margin: 0 0 10px;
  padding: 0;
  float: none;
  list-style: none;
}

#header .cb-head-menu-panel .cb-hp-list li a {
  display: inline-block;
  padding: 0;
  color: #00aeef;
  color: var(--cb-accent, #00aeef);
  font-size: 18px;
  line-height: 25px;
  text-decoration: none;
  white-space: nowrap;
}

#header .cb-head-menu-panel .cb-hp-list li a:hover {
  color: #fff;
}

/* текущий раздел — белым (в эталоне «Персоны» на своей странице белые) */
#header .cb-head-menu-panel .cb-hp-list li.active a {
  color: #fff;
}

/* Строка поиска. В макете её нет: в компактной шапке поле поиска скрыто, а
   искать нужно — поэтому поиск переехал в панель (см. отчёт, п.6). */
#header .cb-head-menu-panel .cb-hp-search {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

#header .cb-head-menu-panel .cb-hp-search-input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  color: #dfe9ee;
  background-color: #101c22;
  border: 1px solid #2b3a42;
  border-radius: 3px;
}

#header .cb-head-menu-panel .cb-hp-search-input:focus {
  outline: none;
  border-color: #00aeef;
  border-color: var(--cb-accent, #00aeef);
}

#header .cb-head-menu-panel .cb-hp-search-input::-webkit-input-placeholder {
  color: #8a949c;
}

#header .cb-head-menu-panel .cb-hp-search-input::-moz-placeholder {
  color: #8a949c;
}

/* --- 5. Узкий экран ----------------------------------------------------- */
@media only screen and (max-width: 1200px) {
  /* .wrapper (1170 px) уже не центрируется «с полями» — панель ставим от края */
  #header .cb-head-menu-panel {
    left: 10px;
  }
}

@media only screen and (max-width: 720px) {
  /* .wrapper — жёсткие 1170 px по центру, поэтому на узком экране левая часть
     шапки уезжала за край (логотип обрезан). В компактном виде верхнюю полосу
     растягиваем на всю ширину экрана — только её и только в компактном виде. */
  #header.cb-hs-compact .cb-head-top {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* панель на всю ширину экрана, как в макете на телефоне */
  #header .cb-head-menu-panel {
    left: 0;
    right: 0;
    width: auto;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  #header .cb-head-menu-panel .cb-hp-list li {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* город на узком экране убираем — остаются логотип и «МЕНЮ» */
  #header.cb-hs-compact .yourcity {
    display: none;
  }

  #header.cb-hs-compact .cb-head-menu-btn {
    margin-left: 8px;
    padding: 9px 8px;
    font-size: 15px;
  }

  #header.cb-hs-compact .cb-head-logo {
    width: 150px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 150px auto;
  }

  /* Блок «Войти или зарегистрироваться» на узком экране ужимается и переносится,
     а не растягивает шапку: иначе он выдавил бы логотип и «МЕНЮ» за экран. */
  #header.cb-hs-compact #userPanel {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 0;
  }

  #header.cb-hs-compact #userPanel .userinfo {
    min-width: 0;
  }

  #header.cb-hs-compact .cb-head-right .userpanel-guest p {
    white-space: normal;
    text-align: right;
    line-height: 1.25;
  }
}

@media only screen and (max-width: 420px) {
  /* «Войти или зарегистрироваться» длинное — на совсем узком экране прячем
     слово «или» (остаются две ссылки: «Войти» и «зарегистрироваться») */
  #header.cb-hs-compact .userpanel-guest .darkgray-col {
    display: none;
  }

  #header.cb-hs-compact .cb-head-logo {
    width: 120px;
    background-size: 120px auto;
  }

  #header.cb-hs-compact .cb-head-right .userpanel-guest {
    font-size: 13px;
  }
}