/* Старое выдвижное меню сайта, возвращено по просьбе оператора 2 ноября.
 *
 * В пакете prototype-adaptive-96 бургер открывал меню на весь экран.
 * Здесь возвращена боевая панель справа 360px: затемнение страницы,
 * логотип сверху, пункты, телеграм и кнопка разбора внизу.
 *
 * Правила взяты из constructor-v3-components-v9 и constructor-v3-menu-v1,
 * из их блоков @media(max-width:900px), один в один. Изменены две вещи:
 *   1. порог 900 -> 1199, потому что бургер теперь работает до 1199;
 *   2. каждому объявлению проставлен !important.
 *
 * Про слой: файл подключается ДО adaptiv-prototip.css, поэтому слой
 * pravki объявляется первым. Для важных объявлений порядок слоёв
 * обратный — важное из первого слоя сильнее. Так эти правила побеждают
 * полноэкранное меню из пакета, не трогая сам файл пакета.
 */
@layer pravki {
@media (max-width:1199px){

  body.menu-locked{overflow:hidden}
  body.menu-locked .lead-fabs{display:none!important}
  .site-header-demo .menu-toggle{
    position:fixed!important;
    top:14px!important;
    right:14px!important;
    z-index:1202!important;
    display:grid!important;
    width:46px!important;
    height:46px!important;
    padding:13px 12px!important;
    align-content:center!important;
    gap:5px!important;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:0 4px 20px rgba(0,0,0,.16)!important;
  }
  .site-header-demo.is-menu-open::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:1198!important;
    background:rgba(0,0,0,.78)!important;
  }
  .site-header-demo.is-menu-open .menu-toggle{
    background:transparent!important;
    box-shadow:none!important;
  }
  .site-header-demo.is-menu-open .menu-toggle i{
    position:absolute!important;
    top:22px!important;
    left:12px!important;
    width:24px!important;
  }
  .site-header-demo.is-menu-open .menu-toggle i:nth-child(1){transform:rotate(45deg)}
  .site-header-demo.is-menu-open .menu-toggle i:nth-child(2){opacity:0}
  .site-header-demo.is-menu-open .menu-toggle i:nth-child(3){transform:rotate(-45deg)}
  .site-header-demo>nav{
    display:none!important;
  }
  .site-header-demo.is-menu-open>nav{
    position:fixed!important;
    inset:0 0 0 auto!important;
    z-index:1199!important;
    display:flex!important;
    width:min(360px,100vw)!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:104px 26px 190px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-content:stretch!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:5px!important;
    background:#fff!important;
    transform:none!important;
  }
  .site-header-demo.is-menu-open .site-logo{
    position:fixed!important;
    top:31px!important;
    right:min(82px,calc(100vw - 238px))!important;
    z-index:1201!important;
    display:block!important;
    width:221px!important;
    max-width:calc(100vw - 92px)!important;
    margin:0!important;
  }
  .site-header-demo.is-menu-open .site-logo img{
    width:100%!important;
    height:auto!important;
  }
  .site-header-demo.is-menu-open>nav>a,
  .site-header-demo.is-menu-open>nav>.menu-dropdown>summary{
    display:block!important;
    width:100%!important;
    padding:11px 4px!important;
    border-bottom:1px solid #f09b4e!important;
    color:#e68125!important;
    font-size:16px!important;
    font-weight:500!important;
    line-height:22px!important;
    text-align:left!important;
  }
  .site-header-demo.is-menu-open .menu-dropdown{
    width:100%!important;
  }
  .site-header-demo.is-menu-open .menu-dropdown>summary::after{
    content:"+"!important;
    float:right!important;
    color:#e68125!important;
    font-size:20px!important;
  }
  .site-header-demo.is-menu-open .menu-dropdown[open]>summary::after{
    content:"−"!important;
  }
  .site-header-demo.is-menu-open .menu-dropdown>div.services-mega{
    position:static!important;
    display:grid!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:18px 4px 8px!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .site-header-demo.is-menu-open .services-mega__column--wide ul{
    columns:1!important;
  }
  .site-header-demo.is-menu-open .services-mega__column h2,
  .site-header-demo.is-menu-open .services-mega__column .services-mega__title{
    text-align:left!important;
  }
  .site-header-demo.is-menu-open .header-socials{
    position:fixed!important;
    right:28px!important;
    bottom:88px!important;
    z-index:1200!important;
    display:flex!important;
    gap:14px!important;
    margin:0!important;
  }
  .site-header-demo.is-menu-open .header-consult{
    position:fixed!important;
    right:22px!important;
    bottom:25px!important;
    z-index:1200!important;
    display:grid!important;
    width:min(316px,calc(100vw - 44px))!important;
    height:46px!important;
    margin:0!important;
    border-width:3px!important;
    background:#fff!important;
  }


  .site-header-demo.is-menu-open .services-mega__column--services ul,
  .services-mega__column--services ul { display:block!important; columns:1!important; }

}
}

@layer pravki {
/* Главная, десктоп: оранжевая линия под первым экраном опущена
 * до низа фотографии. Высота первого экрана была 48.3333vw, фотография
 * свисала ниже на 10.5833vw (проверено на 1200, 1280, 1512 и 1920 —
 * обе величины держатся в этих долях). Сумма и есть новая высота. */
@media (min-width:1200px){
  body.home-copy .home-hero{ height:58.9166667vw!important; }
}
}

@layer pravki {
/* Сброс противоположных краёв.
 * В боевом CSS эти правила жили в вилке до 900, где у шапки не было
 * ни top, ни left. Теперь вилка до 1199, и распрямлённые десктопные
 * правила задают им top — из-за чего кнопка разбора уезжала наверх,
 * на логотип, а телеграм выше экрана. Поэтому гасим ненужный край. */
@media (max-width:1199px){
  /* Главная причина, по которой логотип, телеграм и кнопка разбора
   * разъезжались: у шапки стоит transform: translateX(-50%) для
   * центрирования. Элемент с transform становится системой отсчёта для
   * position:fixed внутри себя — и «прижать к низу экрана» превращалось
   * в «прижать к низу шапки», то есть к самому верху страницы.
   * Снимаем transform и ставим шапку в левый край обычным способом. */
  .site-header-demo{ transform:none!important; left:0!important; right:auto!important; }

  .site-header-demo .menu-toggle{ left:auto!important; bottom:auto!important; }
  .site-header-demo.is-menu-open .site-logo{ left:auto!important; bottom:auto!important; }
  .site-header-demo.is-menu-open .header-socials{ top:auto!important; left:auto!important; }
  .site-header-demo.is-menu-open .header-consult{ top:auto!important; left:auto!important; }
}
}

@layer pravki {
/* Мега-меню «Услуги» на десктопе от 1200 до 1319.
 * Панель шириной min(1280px, 100vw - 40px), а содержимое жёсткое:
 * колонки 160+155+155+125+165+330 плюс пять зазоров по 30 и поля по 30
 * требуют 1300. До 1320 панель уже — и последняя колонка «По тематике
 * бизнеса» вылезала за белый фон (на 1200 — на 110 px, 18 ссылок),
 * а страница получала горизонтальную прокрутку до 90 px.
 * То же самое на боевом сайте: правило лежит в вилке от 901, замеры
 * на боевом и на прототипе совпадают до пикселя.
 * Поджимаем зазоры и три колонки с запасом, тематики не трогаем,
 * остаток делим поровну — содержимое встаёт в панель на всей вилке.
 * Проверено: переносов строк не прибавилось, стало даже на один меньше. */
@media (min-width:1200px) and (max-width:1319px){
  .site-header-demo .menu-dropdown>div.services-mega{
    grid-template-columns:150px 145px 145px 105px 165px minmax(0,330px)!important;
    gap:30px 16px!important;
    justify-content:center!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .site-header-demo .menu-dropdown>div.services-mega .services-mega__column--services ul{
    gap:2px 16px!important;
  }
  .services-mega__column--wide ul{ column-gap:20px!important; }
}
}

@layer pravki {
/* Цена в карточках тарифов на страницах услуг (.kb-home-tariffs), десктоп.
 * Общее правило .battle-tariffs .tariff-action даёт margin-right:-42px —
 * на больших карточках боевых тарифов поля 60, и строка просто
 * выезжала в поле, оставаясь внутри карточки. Но у карточек услуг
 * поля 28, и те же -42 выносили цену на 14 px за серый фон:
 * «100 000 ₽» обрезалось краем карточки на всех ширинах от 1200.
 * На боевом сайте ровно то же самое, замеры совпадают.
 * Убираем вынос, а освободившееся место набираем честно:
 * кнопка всё равно растягивается по колонке, поэтому её внутренние
 * поля на вид ничего не решают и служат лишь нижним пределом —
 * снимаем min-width и уменьшаем их, поля карточки 28 -> 22,
 * цена 26 -> 22. Зазор между кнопкой и ценой оставляем прежним.
 * В узком месте (1200, карточка 360) остаётся ещё 16 px запаса.
 * Проверено: цена встаёт вровень с текстом карточки, высота
 * карточек и кнопок не меняется, прокрутки нет. Ниже 1200
 * работает прежняя мобильная раскладка, её не трогаем. */
@media (min-width:1200px){
  .sh-new-copy .kb-home-tariffs .tariff{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .sh-new-copy .kb-home-tariffs .tariff-action{
    margin-right:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .sh-new-copy .kb-home-tariffs .tariff-action .btn{
    min-width:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .sh-new-copy .kb-home-tariffs .tariff-action .price{
    font-size:22px!important;
  }
}
}

@layer pravki {
/* Кнопка «Получить бесплатный разбор» в шапке и бургер, 768-1199.
 * Бургер в этой вилке position:fixed, right:14 — он вне потока, и ряд
 * шапки о нём ничего не знает. Поля шапки 32, поэтому кнопка кончалась
 * ровно там, где начинается кружок бургера: нахлёст 28 px на 99 страницах
 * из 102 на всех ширинах вилки. Ниже 768 кнопка скрыта, выше 1199 бургера
 * нет — вилка закрыта с обеих сторон.
 * Отодвигаем кнопку на 40: бургер занимает [ширина-60, ширина-14],
 * значит 28 нахлёста плюс 12 зазора. Весь правый куст (телеграм и кнопка)
 * сдвигается влево на те же 40, зазор до соцсетей остаётся 12.
 * Правка в слое pravki: у adaptiv-prototip тут margin:0!important,
 * а важные объявления более раннего слоя сильнее. */
@media (min-width:768px) and (max-width:1199px){
  .site-header-demo .header-consult{ margin-right:40px!important; }
}

/* Ссылка «Бесплатный разбор сайта ▶» в первом экране, десктоп от 1200.
 * У спана жёсткая ширина 108 px (.sh1-hero--art .yandex-audit-link span),
 * а шрифт тянется: clamp(17px, 1vw, 20px). Текст в 108 не влезает и идёт
 * поверх оранжевого кружка: на 1200-1512 это 5 px, на 1920 — 20 px.
 * На страницах с длинной подписью «Смотреть пример аудита» кружок падал
 * на середину слова — до 50 px. Всего 86 страниц.
 * То же самое на боевом сайте: замеры совпадают.
 * Отдаём ширину содержимому (max-content) и спану, и самой ссылке:
 * раскладка flex сама расставит текст, зазор 8 и кружок 50.
 * Ниже 1200 уже работает прежнее правило адаптива, его не трогаем.
 * Проверено на 102 страницах и 21 ширине: наездов нет, прокрутки нет,
 * ссылка никуда не уезжает и ни на что не налезает. */
@media (min-width:1200px){
  .sh1-hero--art .yandex-audit-link{ width:max-content!important; }
  .sh1-hero--art .yandex-audit-link>span{ width:max-content!important; }
}
}
