/* ==========================================================================
   Мобильное меню-шторка: страница как крышка

   Меню лежит слоем НИЖЕ страницы и неподвижно. Двигается страница: уезжает
   влево и открывает нишу справа. Отсюда всё остальное — z-index ниши ниже
   обёртки, непрозрачный фон у обёртки, тень от её края в нишу.

       закрыто:        [==== страница ====]        (ниша под ней, не видна)
       тащим:      [==== страница ===]▐меню▌
       открыто:  [= стр =]▐===== меню =====▌

   Только до 1024 px — порог тот же, что у бургера в 02-header.css и у
   isMobile() в main.js. Выше меню обычной строкой стоит в шапке.
   ========================================================================== */

@media (max-width: 1024px) {

  :root { --drawer-width: min(86vw, 21rem); }

  .page-shell {
    position: relative;
    z-index: 1;
    /* Обязателен: сквозь прозрачную обёртку просвечивала бы ниша. */
    background: var(--c-white);

    /* Тень стоит всегда, а не появляется вместе с открытым меню. Она уходит
       вправо от правого края страницы, то есть при закрытом меню целиком за
       экраном — видно её ровно с того мгновения, как страницу потянули.
       Пока она включалась вместе с классом, при отпускании пальца тень
       вспыхивала разом, и это читалось как рывок. */
    box-shadow: 16px 0 36px -6px rgba(19, 44, 79, .30);

    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  }

  body.has-drawer-open .page-shell {
    transform: translateX(calc(-1 * var(--drawer-width)));
  }

  /* Пока меню открыто или его тащат, горизонталь и вертикаль забираем себе.
     В покое touch-action не трогаем: `pan-y` на обёртке отняло бы у каруселей
     внутри право на горизонтальный жест (браузер пересекает touch-action по
     всей цепочке предков), и ленты услуг и отзывов перестали бы листаться
     пальцем. Открытие ловим жестом в JS, см. main.js. */
  body.has-drawer-open .page-shell,
  body.is-drawer-dragging .page-shell { touch-action: none; }

  body.is-drawer-dragging .page-shell,
  body.is-drawer-dragging .page-shell::after { transition: none; }

  /* Во время жеста содержимое не реагирует на палец: иначе кнопки, над
     которыми он проезжает, моргают состояниями. Сама обёртка события
     получает — на ней висят обработчики. */
  body.is-drawer-dragging .page-shell * { pointer-events: none; }

  /* Прозрачный перехватчик поверх уехавшей страницы: принимает палец на себя,
     чтобы под ним не нажимались ссылки. Выше липкой шапки. */
  .page-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-float) + 1);
    background: transparent;
    visibility: hidden;
  }

  body.has-drawer-open .page-shell::after,
  body.is-drawer-dragging .page-shell::after { visibility: visible; }

  /* ── Ниша ──────────────────────────────────────────────────────────────── */

  .drawer {
    position: fixed;
    inset: 0 0 0 auto;      /* справа: бургер тоже справа, жест идёт к нему */
    z-index: 0;             /* НИЖЕ страницы — в этом весь смысл */
    width: var(--drawer-width);
    background: var(--c-white);
    /* Скругление вешаем на нишу, а не на страницу: у страницы края за
       экраном, там его всё равно не видно. */
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    visibility: hidden;
    transition: visibility .38s;
  }

  body.has-drawer-open .drawer,
  body.is-drawer-dragging .drawer { visibility: visible; }

  /* Админ-панель WordPress висит fixed поверх всего и срезала верх ниши:
     логотип и выход в меню оказывались наполовину под ней. Видно это только
     авторизованному, но правит сайт как раз он. */
  .admin-bar .drawer { top: 32px; }

  .drawer__panel {
    /* Не 100dvh, а высота самой ниши: она задана парой top/bottom и уже
       учитывает сдвиг под админ-панель. */
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;  /* прокрутка меню не утекает в страницу */
    padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  }

  /* Тело страницы прибито, пока меню открыто. Смещение хранит скрипт. */
  body.has-drawer-open {
    position: fixed;
    width: 100%;
  }
}

@media (max-width: 782px) {
  /* На узком экране полоса админки выше — 46 px вместо 32. */
  .admin-bar .drawer { top: 46px; }
}

/* Выше порога ниши нет совсем: меню возвращается строкой в шапку. */
@media (min-width: 1025px) {
  .drawer { display: none; }
}