/* ================================================================
   МЕНЮ НА ТЕЛЕФОНЕ — кнопка в шапке и выпадающий список разделов.

   Единственное место, где описан внешний вид этого меню. Разметку собирает
   assets/js/nav-mobile.js, состав разделов приходит из шапки страницы.

   Заведено 04.09.2026: на узком экране пункты шапки скрыты
   (`.nav-links{display:none}` в main.css), а кнопки, которая бы их открыла,
   на сайте не было вовсе — с телефона нельзя было попасть в «О клинике»,
   «Отзывы» и «Контакты» иначе как через подвал.

   Файл самостоятельный: страницы отзывов и услуг main.css не подключают,
   поэтому все нужные цвета продублированы запасными значениями.
   ================================================================ */

.nav-burger{
  display: none;                     /* на широком экране меню и так видно */
  width: 42px; height: 42px;
  /* Кнопка круглая и остаётся круглой. Строка шапки — флекс-раскладка: когда
     содержимому тесно, браузер ужимает всех, кому не запрещено, и круг
     становился овалом 26×42 (замер на экране 390px, 05.09.2026) — ровно та же
     беда, что и со сплющенным логотипом. */
  flex-shrink: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent;
  border: 1px solid var(--divider, rgba(196,191,175,.12));
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.nav-burger svg{ display: block; }
/* Значок кнопки — линии SVG: в режиме для слабовидящих их цвет задают общие
   правила режима (`button svg * { stroke: … }`), как у глаза и трубки. */

.nav-mobile{
  display: none;
  position: fixed; left: 0; right: 0;
  top: var(--nav-h, 76px);
  bottom: 0;
  z-index: 60;
  background: var(--bg, #0B0B0A);
  border-top: 1px solid var(--divider, rgba(196,191,175,.12));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile__list{
  display: flex; flex-direction: column;
  padding: 8px clamp(16px, 5vw, 28px) 40px;
}
.nav-mobile__list a{
  padding: 15px 0;
  border-bottom: 1px solid var(--divider, rgba(196,191,175,.12));
  color: var(--fg-strong, #F4F1EA);
  text-decoration: none;
  font-size: 17px;
}
.nav-mobile__list a.active{ color: var(--accent-strong, #9BC0AC); }
.nav-mobile__phone{
  margin-top: 20px;
  border-bottom: 0 !important;
  color: var(--accent-strong, #9BC0AC) !important;
  font-size: 18px !important;
}


/* Кнопка и панель включаются там же, где стили прячут обычное меню. */
@media (max-width: 960px){
  .nav-burger{ display: inline-flex; }
  /* :not([hidden]) обязательно. Простое `display:block` перебивало встроенное
     правило браузера «скрытый элемент не показывать», и закрытая панель
     сплошным тёмным полотном закрывала ВСЮ страницу ниже шапки. Поймано
     снимком: страница отзывов на 390 px была пустой (§👁 v3.16). */
  .nav-mobile:not([hidden]){ display: block; }
  /* Правила для прежних видов шапки (`.site-header`, `.dr-header`) убраны
     07.09.2026: шапка на сайте одна, её строка описана в site-header.css. */
  /* Панель открывается сразу под шапкой. Своё число (64px) здесь стояло выше
     настоящего низа шапки на 13-94px — шапки на сайте четырёх видов и все
     разной высоты, — и открытый список наезжал на саму шапку: он лежит выше
     по слоям.
     Порядок источников: измеренная скриптом высота той шапки, что на странице
     (`--nav-mobile-top`, nav-mobile.js) → расчётная высота из main.css
     (`--nav-h`) → 76px, если страница не подключает ни того, ни другого. */
  .nav-mobile{ top: var(--nav-mobile-top, var(--nav-h, 76px)); }
}