/* ремонт-подмосковье.рф — точечные правки поверх темы.

   Отдельный файл, а не CSS темы: тема — зеркало старого сайта, её файлы
   лучше оставить нетронутыми, иначе при следующей сверке с оригиналом
   правки потеряются или их примут за расхождение выгрузки.

   1) Горизонтальный сдвиг на телефонах.
      У .container в теме боковой отступ 6px, а бутстраповские .row живут
      с margin: 0 -12px. Лишние 6px с каждой стороны вылезают за экран:
      при ширине 375px документ получает 388px, и страницу можно таскать
      пальцем вбок — на телефоне это читается как «сайт разъезжается».
      Прячем именно этот вылет: в отступах ничего не лежит, контент
      остаётся ровно там же, где был.

      overflow-x у body, а не у html: пока у html значение visible,
      браузер берёт прокрутку страницы с body, и сам body при этом
      не становится отдельным скролл-контейнером — position: fixed
      (кнопка звонка, «наверх», модалки) продолжает работать как прежде. */
@media (max-width: 991.98px) {
  body { overflow-x: hidden; }
}

/* 2) Крупный заголовок первого экрана под длинный текст.

      Тема рассчитывала этот блок на два слова: «Бригада белорусов» на всех
      385 региональных страницах. В H1 такой заголовок ничего не сообщал
      ни человеку, ни поиску, поэтому наверх поднялась тема страницы —
      «Реконструкция деревянного дома в Павловском Посаде», 50 знаков.

      А размер шрифта в теме фиксированный и растёт с шириной экрана:
      60px, 85px от 1200px и 140px от 1400px. На 140px пятьдесят знаков —
      это пять строк почти на 800px высоты, и подзаголовок с ценой уезжает
      за первый экран. Яндекс прямо требует обратного: суть страницы
      должна быть видна сразу, без прокрутки.

      clamp вместо ступеней: 72px на широком мониторе — три строки даже у
      самого длинного заголовка, дальше размер плавно уменьшается вместе с
      окном. Класс отдельный, поэтому короткие заголовки темы (в том числе
      «Белорусская бригада» на главной) остаются в прежнем крупном виде. */
.hero-slider-single-item .title--seo {
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.1;
}

/*    Подзаголовок тоже приходится трогать. В теме он 80px — меньше
      прежних 140px, и порядок читался. Рядом с уменьшенным H1 он стал бы
      крупнее заголовка, то есть первое, что видит человек, — не тема
      страницы, а приписка к ней. Держим его заметно мельче H1. */
.hero-slider-single-item .title--seo + .sub-title {
  font-size: clamp(22px, 2.9vw, 44px);
  line-height: 1.15;
}

/* 3) Поля формы — 16px.

      В теме они 14px, и на этом Safari для iOS при тапе в поле увеличивает
      всю страницу, чтобы «помочь прочитать» мелкий текст. Обратно он её не
      отматывает: человек дозаполняет заявку на съехавшем вбок экране и
      руками возвращает масштаб. Порог у Safari ровно 16px — с этого кегля
      зума нет.

      Не в медиазапросе: зумит и айфон, и айпад в любой ориентации, а на
      большом экране разница между 14px и 16px внутри поля высотой 60px
      глазом не ловится. */
.wpcf7-form-control,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea,
.wpcf7-form select {
  font-size: 16px;
}

/*    Чекбокс согласия под правило попадать не должен: 16px раздули бы сам
      квадратик, а он и так лежит в кликабельном label во всю ширину блока. */
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  font-size: inherit;
}

/* 4) Кнопка меню на телефоне.

      Иконка бургера — 24×34px, и это единственный вход в меню с телефона
      при рекомендованных 48×48. Увеличивать саму иконку нельзя: она встанет
      вплотную к краю экрана и разъедется с логотипом. Поэтому растягиваем
      только область нажатия — прозрачным ::after поверх иконки. Внешне
      не меняется ничего, палец начинает попадать.

      ::after, а не ::before: сам значок icofont рисуется через ::before
      вложенного <i>, но занимать псевдоэлемент ссылки всё равно не стоит. */
.mobile-header .offcanvas-toggle {
  position: relative;
}
.mobile-header .offcanvas-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}