/* Правки под телефоны поверх сборки сайта.
   Отдельным файлом, чтобы не трогать основной стиль и не потерять при пересборке. */

/* iPhone с вырезом и домашней полосой: нижняя плашка «Обсудить ситуацию»
   упиралась в системную полосу — добавляем безопасный отступ. */
@supports (padding: env(safe-area-inset-bottom)) {
  .fixed.inset-x-0.bottom-0 {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  header.fixed {
    padding-top: env(safe-area-inset-top);
  }
}

/* Safari на iOS меняет высоту окна при появлении адресной строки, из-за чего
   экран «прыгает». Динамические единицы этого не делают. */
@supports (height: 100svh) {
  .min-h-screen { min-height: 100svh; }
  .min-h-\[92vh\] { min-height: 92svh; }
}

/* Длинные адреса и слова не должны растягивать страницу вбок */
body { overflow-x: hidden; }
p, li, dd, td { overflow-wrap: anywhere; }

/* На узких экранах цель для пальца должна быть не меньше 44 px */
@media (max-width: 767px) {
  a[href^="tel:"], a[href^="mailto:"], a[href*="t.me/"], nav a, footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  footer li { margin: 2px 0; }
}

/* «Обо мне»: на телефоне снимок идёт первым, до текста — страница начинается
   с лица, а не со стены текста. На десктопе порядок остаётся обычным. */
@media (max-width: 767px){
  .about-photo{order:-1}
  .about-photo figure{margin:0 0 2rem !important}
}

/* Нижняя плашка «Обсудить ситуацию» закреплена поверх страницы и накрывала
   последние строки — футер и кнопки уходили под неё. Освобождаем место. */
@media (max-width: 767px){
  body{padding-bottom:88px}
}

/* Мобильное меню раскрывается внутри шапки, а фон у шапки появляется только
   после прокрутки. Открытое на самом верху страницы меню оказывалось прозрачным:
   пункты накладывались на текст первого экрана. */
header.fixed:has(button[aria-expanded="true"]),
header.fixed[data-menu="open"]{
  background-color: var(--background);
}
/* и плашка снизу не должна висеть поверх раскрытого меню */
body:has(header button[aria-expanded="true"]) .fixed.inset-x-0.bottom-0,
body[data-menu="open"] .fixed.inset-x-0.bottom-0{
  opacity:0; pointer-events:none;
}

/* Под раскрытым меню просвечивал текст страницы и читался как каша.
   Затемняем всё, что ниже шапки, пока меню открыто. */
body:has(header button[aria-expanded="true"])::after,
body[data-menu="open"]::after{
  content:""; position:fixed; inset:0; z-index:40;
  background:rgba(15,13,11,.78); pointer-events:none;
}

/* Пальцем надо попадать с первого раза: кнопка меню, ссылки-стрелки
   («Все практики →», «Подробнее →») и галочка согласия были 15–36 px. */
@media (max-width: 767px){
  header button[aria-expanded]{
    min-width:44px; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  a.tracking-\[0\.18em\]:not([class*="border"]):not([class*="bg-"]){
    padding-top:13px; padding-bottom:13px;
  }
  input[type="checkbox"]{width:20px; height:20px}
  /* подпись под именем в шапке была 10 px — на телефоне это уже нечитаемо */
  .text-\[0\.625rem\]{font-size:.6875rem}
}