/* ==========================================================================
   mobile-menu-fix.css — единое мобильное меню для 1auk.ru
   Подключается ПОСЛЕДНИМ на всех страницах (перед </head>).

   Зачем: на сайте три разных реализации шапки.
     1) 143 статьи — .nav-shell > nav.main-nav. Сетка пунктов сжималась до ширины
        самого длинного пункта и центрировалась (justify-content: space-around
        из @media(max-width:1240px)) → пункты выглядели по центру, а не слева.
     2) 22 служебные/городские — то же, но меню длинное (18 пунктов).
     3) 6 страниц с «плоской» шапкой (/faq/, /about/, /cookies/, /consent/,
        /offer/, ещё одна) — меню стояло в потоке внутри position:fixed шапки,
        шапка раздувалась до ~540px и накрывала контент, а .phone и .telegram
        висели в шапке текстом и распирали её.
     4) Главная — свой .nav-shell-v3 / .nav-v3.

   Здесь всё приводится к одному виду: оверлей-панель под шапкой, пункты
   на всю ширину и по левому краю, служебные ссылки из шапки убраны.
   Правила действуют только на узких экранах и только при открытом меню,
   поэтому десктоп и закрытая шапка не меняются.

   Откат: удалить <link rel="stylesheet" href="/mobile-menu-fix.css?v=1">
   со страниц (бэкап в /root/backups/1auk-mobile-menu-<UTC>) или отдать пустой файл.
   ========================================================================== */

@media (max-width: 900px) {
  /* ---------- 1. Панель меню: единый оверлей под шапкой ---------- */
  /* На 6 страницах с «плоской» шапкой (…/faq/, /about/ и соседние) у header стоит
     backdrop-filter: blur(16px). По спецификации он делает шапку содержащим блоком
     для position: fixed, и панель привязывается к шапке (съезжает на её padding
     и сжимается по содержимому), а не к экрану. Пока меню открыто — снимаем размытие;
     визуально это незаметно, потому что панель и так закрывает шапку. */
  .site-header.open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ---------- 0. Закрытое меню не должно быть видно ----------
     На тех же 6 страницах services-menu.css задаёт .main-nav
     «display: grid !important» без привязки к .open, поэтому меню было видно
     всегда: шапка раздувалась до ~540px и накрывала первый экран. Это и была
     первая жалоба. Здесь меню прячется, пока шапка не открыта. */
  .site-header:not(.open) .nav-shell,
  .site-header:not(.open) .nav-shell-v3,
  .site-header:not(.open) #main-navigation,
  .site-header:not(.open) #main-nav,
  .site-header:not(.open) nav.main-nav,
  .site-header:not(.open) nav.nav {
    display: none !important;
  }

  .site-header.open .nav-shell,
  .site-header.open .nav-shell-v3,
  .site-header.open #main-navigation,
  .site-header.open #main-nav,
  .site-header.open nav.main-nav,
  .site-header.open nav.nav {
    position: fixed !important;
    top: 72px !important;
    left: 12px !important;
    right: auto !important;
    /* ширина задаётся явно: с width:auto панель на части страниц сжималась
       по содержимому (shrink-to-fit) и выходила уже, чем экран */
    width: calc(100vw - 24px) !important;
    /* старые стили центрировали панель через left:50% + translateX(-50%);
       без сброса transform панель уезжает влево за край экрана */
    transform: none !important;
    max-height: calc(100dvh - 84px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 9001 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(14, 41, 71, 0.24) !important;
    padding: 8px !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* на главной шапка выше — опускаем панель */
  .site-header-v3.open .nav-shell-v3 {
    top: 88px !important;
    max-height: calc(100dvh - 100px) !important;
  }

  /* ---------- 2. Вложенный список пунктов: одна колонка на всю ширину ----------
     Внимание: только списки ВНУТРИ панели. На 6 страницах с «плоской» шапкой
     (#main-nav у /faq/, /about/ и соседних) панель и список — один и тот же
     элемент, и правило position: static здесь его бы разжаловало из оверлея
     обратно в поток. Эта ошибка уже была — не повторять. */
  .site-header.open .nav-shell > .main-nav,
  .site-header.open .nav-shell-v3 > .nav-v3,
  .site-header.open #main-navigation > .main-nav,
  .site-header.open #main-navigation > nav.nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ---------- 3. Пункт: на всю ширину, текст слева ---------- */
  .site-header.open .main-nav > a,
  .site-header.open .nav-v3 > a,
  .site-header.open .main-nav > .nav-cities,
  .site-header.open .main-nav .nav-extra {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0 16px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(16, 38, 66, 0.08);
    white-space: normal !important;
  }

  .site-header.open .main-nav > a:last-child,
  .site-header.open .nav-v3 > a:last-child {
    border-bottom: 0;
  }

  /* скрытые на планшетах пункты в мобильном меню показываем — меню должно быть полным */
  .site-header.open .main-nav .nav-extra {
    display: flex !important;
  }

  /* ---------- 4. Аккордеон «Услуги»: заголовок слева, панель на всю ширину ---------- */
  .site-header.open .services-nav {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(16, 38, 66, 0.08);
  }

  .site-header.open .services-nav__trigger {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0 16px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
  }

  .site-header.open .services-nav__panel {
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  .site-header.open .services-nav__panel a {
    display: flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 16px 10px 28px !important;
    box-sizing: border-box !important;
    border-bottom: 0 !important;
    white-space: normal !important;
  }

  /* ---------- 5. Служебные ссылки не должны висеть в шапке ---------- */
  /* .phone и .telegram есть в «плоской» шапке (/faq/ и соседние) и распирают её;
     на остальных страницах телефон и так скрыт на мобильных. */
  .site-header > .header-actions > .phone,
  .site-header > .header-actions > .telegram,
  .site-header-v3 > .head > .head-actions-v3 > .phone-v3,
  .site-header-v3 > .head > .head-actions-v3 > .telegram {
    display: none !important;
  }
}

/* ---------- 6. Шапка «плоских» страниц: как на всех остальных ----------
   На /faq/, /about/, /cookies/, /consent/, /offer/, /privacy/, /spasibo/ шапка
   собиралась по отдельному шаблону: текстовая кнопка «Меню» в рамке, телефон
   и «Telegram» текстом. На остальных 176 страницах — логотип и две круглые
   иконки (бургер и чат). Здесь тот же вид: класс site-header-flat ставится
   разметкой только этим семи страницам, остальных правила не касаются. */
@media (max-width: 900px) {
  .site-header-flat {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-header-flat .brand {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-header-flat .brand img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 40px !important;
    display: block !important;
  }

  /* бургер: круглая тёмная кнопка с тремя полосами, без текста */
  .site-header-flat .menu-toggle {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #102642 !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: 0 14px 34px rgba(16, 38, 66, 0.11) !important;
    cursor: pointer;
  }

  .site-header-flat .menu-toggle span {
    display: block !important;
    width: 16px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 2px !important;
  }

  /* чат: такая же круглая кнопка со знаком сообщения */
  .site-header-flat .chat-link {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    border-radius: 50% !important;
    background: #102642 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 14px 34px rgba(16, 38, 66, 0.11) !important;
  }

  .site-header-flat .chat-link svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
}

/* на очень узких экранах панель не должна вылезать за край */
@media (max-width: 380px) {
  .site-header.open .nav-shell,
  .site-header.open .nav-shell-v3,
  .site-header.open #main-navigation,
  .site-header.open #main-nav,
  .site-header.open nav.main-nav,
  .site-header.open nav.nav {
    left: 8px !important;
    right: auto !important;
    width: calc(100vw - 16px) !important;
    padding: 6px !important;
  }

  .site-header.open .main-nav > a,
  .site-header.open .nav-v3 > a {
    padding: 0 12px !important;
    font-size: 15px !important;
  }
}