/*!
 * Мобильное меню (замена pushy.css) -- чистый CSS, без jQuery.
 * Настройка внешнего вида -- через переменные ниже, менять остальной
 * файл для этого не требуется.
 */

:root {
  --menu-width: 280px;
  --menu-bg: #0e0e0e;
  --menu-text-color: #ddd;
  --menu-text-color-hover: #ee2d52;
  --menu-header-bg: #333;
  --menu-border-color: #222;
  --menu-overlay-color: rgba(0, 0, 0, 0.5);
  --menu-transition-duration: 0.3s;
  --menu-transition-easing: cubic-bezier(0.16, 0.68, 0.43, 0.99);
  --menu-z-index: 9999;
}

/* Панель меню.
   [FIX] position:fixed отсчитывается от окна браузера только пока ни у
   одного из родителей .pushy нет transform (или filter/perspective/
   will-change:transform) -- такой родитель сам становится точкой отсчёта
   для fixed-потомков. #container ниже как раз получает transform при
   открытии меню (эффект сдвига страницы) -- если разметка какой-то
   страницы вложит .pushy внутрь #container, меню сломается именно на
   ней. pushy.min.js защищается от этого сам, принудительно перенося
   .pushy в прямые дети <body> при загрузке -- но здесь .pushy и
   #container всё равно оставлены СОСЕДЯМИ, как и задумано, чтобы этот
   перенос вообще не требовался на страницах с верной разметкой. */
.pushy {
  position: fixed;
  width: var(--menu-width);
  height: 100%;
  top: 0;
  z-index: var(--menu-z-index);
  background: var(--menu-bg);
  overflow: auto;
  visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

.pushy.pushy-left {
  left: 0;
}

.pushy.pushy-right {
  right: 0;
}

/* Заголовки разделов меню */
nav.pushy span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--menu-text-color);
  padding: 10px 15px;
  display: block;
  background-color: var(--menu-header-bg);
}

nav.pushy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav.pushy ul:first-child {
  margin-top: 10px;
}

nav.pushy ul li {
  border-bottom: 1px solid var(--menu-border-color);
  padding: 10px 15px 10px 5px;
}

.pushy a,
.pushy a.service-link {
  display: block;
  color: var(--menu-text-color);
  text-decoration: none;
  outline: 0;
  padding-left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.pushy a.service-link {
  font-weight: 600;
}

.pushy a:hover,
.pushy a:focus-visible {
  color: var(--menu-text-color-hover);
}

/* Открытое меню -- видимость и положение задаёт JS через классы на body,
   само движение (сдвиг панели и содержимого страницы) -- ниже, чистым CSS */
.pushy-open-left .pushy,
.pushy-open-right .pushy {
  visibility: visible;
}

.pushy-left {
  transform: translate3d(calc(-1 * var(--menu-width)), 0, 0);
}

.pushy-right {
  transform: translate3d(var(--menu-width), 0, 0);
}

.pushy-open-left .pushy,
.pushy-open-right .pushy {
  transform: translate3d(0, 0, 0);
}

/* Сдвиг основного содержимого страницы вместе с открытием меню */
.pushy-open-left #container,
.pushy-open-left .push {
  transform: translate3d(var(--menu-width), 0, 0);
}

.pushy-open-right #container,
.pushy-open-right .push {
  transform: translate3d(calc(-1 * var(--menu-width)), 0, 0);
}

#container,
.pushy,
.push {
  transition: transform var(--menu-transition-duration) var(--menu-transition-easing);
}

/* Полупрозрачная подложка позади открытого меню */
.site-overlay {
  display: none;
}

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--menu-z-index) - 1);
  background-color: var(--menu-overlay-color);
  animation: mobile-menu-fade 0.3s;
}

@keyframes mobile-menu-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Вложенные подменю (раскрываются по клику) */
.pushy-submenu > a {
  position: relative;
}

.pushy-submenu > a::after {
  content: '';
  display: block;
  height: 11px;
  width: 8px;
  position: absolute;
  top: 50%;
  right: 15px;
  background: url("../img/arrow.svg") no-repeat;
  transform: translateY(-50%);
  transition: transform 0.2s;
}

.pushy-submenu ul {
  padding-left: 15px;
  transition: max-height 0.2s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.pushy-submenu-open ul {
  max-height: 1000px;
}

.pushy-submenu-open > a::after {
  transform: translateY(-50%) rotate(90deg);
}