/* ============================================
   HEADER IMPROVEMENTS — kelvika.ru
   1) Плавающая шапка при скролле вверх (десктоп)
   2) Мобильная шапка: расширение, бургер слева
   3) Мобильное мега-меню: аккордеон
   ============================================ */


/* ============================================
   1) ПЛАВАЮЩАЯ ШАПКА ПРИ СКРОЛЛЕ ВВЕРХ
   Только для десктопа (≥992px)
   ============================================ */
@media (min-width: 992px) {
  /* Базовое поведение шапки: плавная анимация при появлении/скрытии */
  .header {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  /* Когда страница прокручена вниз и пользователь скроллит ВВЕРХ —
     показываем компактную плавающую шапку */
  body.is-header-floating .header {
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.10);
  }

  /* Скрытие шапки при скролле вниз */
  body.is-header-hidden .header {
    transform: translateY(-100%);
  }

  /* В компактном режиме скрываем верхнюю чёрную полосу
     и блок с лого/поиском/телефоном — оставляем только меню */
  body.is-header-floating .header .top-line {
    display: none;
  }

  body.is-header-floating .header > .container {
    /* Внутри этого контейнера лежит .header-container — компактим его */
    padding-top: 0;
    padding-bottom: 0;
  }

  body.is-header-floating .header .header-container {
    padding: 8px 0;
    transition: padding 0.25s ease;
    align-items: center;
  }

  /* Уменьшаем лого */
  body.is-header-floating .header .logo {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    margin-right: 25px;
  }

  body.is-header-floating .header .logo a img {
    height: 44px;
    width: auto;
    transition: height 0.25s ease;
  }

  /* Скрываем поисковую форму и телефон в плавающей шапке —
     место занимает меню */
  body.is-header-floating .header .search-form,
  body.is-header-floating .header .header-container .phone {
    display: none;
  }

  /* Кнопка «Заказать звонок» становится компактнее */
  body.is-header-floating .header .header-container .order-call {
    height: 40px;
    line-height: 40px;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    margin-left: auto;
    font-size: 15px;
  }

  /* В компактном режиме сразу под header-container идёт top-menu —
     уменьшаем его высоту и шрифты */
  body.is-header-floating .top-menu ul a {
    height: 42px;
    line-height: 42px;
    font-size: 17px;
  }

  /* Подгоняем верхнюю отбивку body —
     в обычном режиме оставляем как было (155px),
     в плавающем уменьшаем до фактической высоты компактной шапки */
  body.is-header-floating {
    /* высота компактной шапки ≈ 60px (header-container) + 42px (top-menu) = 102px,
       но padding-top body не меняем динамически чтобы не было прыжка контента —
       компактная шапка всегда position:fixed поверх */
  }
}


/* ============================================
   2) МОБИЛЬНАЯ ШАПКА: РАСШИРЕНИЕ + БУРГЕР СЛЕВА
   ≤991px
   ============================================ */
@media (max-width: 991px) {
  /* Расширяем top-line на всю ширину экрана — убираем боковые отступы у контейнера */
  .top-line .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Бургер — ПЕРВЫЙ элемент (слева). Перебиваем margin-left:auto */
  .top-line .sm-menu-btn {
    order: -1 !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
  }

  /* Город идёт после бургера */
  .top-line .city {
    order: 0;
  }

  /* Email и телефон — справа */
  .top-line-mess {
    order: 2;
    margin-left: auto;
  }

  .top-line .sm-phone {
    order: 3;
  }

  .top-line .top-line-email {
    order: 1;
  }

  /* Тоже расширяем нижний контейнер шапки — он тоже выглядит зажатым */
  .header > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ============================================
   3) МОБИЛЬНОЕ МЕГА-МЕНЮ: АККОРДЕОН
   ≤991px — заменяем grid на нормальный список
   ============================================ */
@media (max-width: 991px) {
  /* Открытое мобильное меню: даём ему скролл и нормальный фон */
  .top-menu.open {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 60px;
  }

  /* Пункты меню первого уровня в мобильном — отдельные строки */
  .top-menu ul li {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .top-menu ul a {
    height: auto;
    line-height: 1.4;
    padding: 16px 20px;
  }

  /* Пункт «Услуги» с мега-меню — переопределяем layout */
  .top-menu li.has-mega-menu,
  .top-menu li.menu-item-has-mega-menu {
    position: relative !important;
    padding-right: 60px;
  }

  /* Стрелка-индикатор для пункта «Услуги» */
  .top-menu li.has-mega-menu::after,
  .top-menu li.menu-item-has-mega-menu::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 24px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    pointer-events: none;
  }

  .top-menu li.has-mega-menu.is-open::after,
  .top-menu li.menu-item-has-mega-menu.is-open::after {
    transform: rotate(-135deg);
    top: 30px;
  }

  /* Мега-меню в мобильном — НЕ сетка, а вертикальный список */
  .top-menu .mega-menu {
    display: none !important;
    grid-template-columns: 1fr !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
  }

  .top-menu li.has-mega-menu.is-open > .mega-menu,
  .top-menu li.menu-item-has-mega-menu.is-open > .mega-menu {
    display: block !important;
  }

  /* Колонка мега-меню (раздел) — родительская услуга */
  .top-menu .mega-menu__column {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .top-menu .mega-menu__column:hover {
    background: transparent !important;
  }

  /* Заголовок раздела (родитель) — кликабельный, со стрелкой */
  .top-menu .mega-menu__column-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding: 14px 50px 14px 36px !important;
    margin: 0 !important;
    border-bottom: none !important;
    position: relative;
    color: #fff !important;
  }

  /* Стрелка для разворачивания подкатегорий */
  .top-menu .mega-menu__column.has-children .mega-menu__column-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.25s ease;
  }

  .top-menu .mega-menu__column.is-open .mega-menu__column-header::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  .top-menu .mega-menu__icon {
    width: 24px;
    height: 24px;
    color: #FFD000;
  }

  .top-menu .mega-menu__column-title {
    color: #fff !important;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Список подпунктов внутри колонки — изначально скрыт */
  .top-menu .mega-menu__items {
    display: none !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.25);
  }

  .top-menu .mega-menu__column.is-open > .mega-menu__items {
    display: block !important;
  }

  .top-menu .mega-menu__items li {
    border-bottom: none;
  }

  .top-menu .mega-menu__items a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    padding: 10px 20px 10px 60px !important;
    display: block;
    background: transparent !important;
  }

  .top-menu .mega-menu__items a:hover {
    color: #FFD000 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding-left: 64px !important;
  }
}