/* Меню smartcave.kz в шапке страниц Chessnut (nav.js): лендинг Move,
   страницы раздела и страница Go. Шрифт берётся у страницы.
   Шторка справа повторяет меню витрины: белая, заголовок по центру,
   подменю открывается сдвигом списка, первая строка подменю ведёт в сам
   раздел. Цвета свои, не из темы страницы. */

/* пока шторка открыта, страница под ней не прокручивается (как в styles.css) */
.has-sheet { overflow: hidden; }

.nav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 92vw);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: #171a20;
  font-family: inherit;
  /* как в меню витрины: 14px, иначе крупный шрифт страницы делает список огромным */
  font-size: 0.875rem;
  transition: transform 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
  transform: translateX(100%);
}
.nav[open] { transform: none; }
@starting-style { .nav[open] { transform: translateX(100%); } }
.nav::backdrop {
  background: rgb(0 0 0 / 0);
  transition: background-color 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}
.nav[open]::backdrop { background: rgb(0 0 0 / 0.35); }
@starting-style { .nav[open]::backdrop { background: rgb(0 0 0 / 0); } }

.nav__body {
  height: 100%;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.nav__head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin: -6px -6px 16px;
  font-weight: 500;
}
.nav__title { grid-column: 2; text-align: center; }
.nav__back, .nav__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #171a20;
  cursor: pointer;
}
.nav__back { grid-column: 1; }
.nav__back[hidden] { display: none; }
.nav__close { grid-column: 3; }
.nav__back svg, .nav__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__close svg { width: 16px; height: 16px; }

.nav__list { display: grid; gap: 6px; }
.nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #171a20;
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav__item:hover { background: #f4f4f5; }
.nav__item[aria-current="page"] { font-weight: 650; }
.nav__chevron { flex: none; width: 12px; height: 12px; fill: none; stroke: #5a5470; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav :focus-visible { outline: 2px solid #4678B4; outline-offset: 2px; }

.nav__list.is-moving[data-dir="forward"] { animation: nav-forward 220ms ease; }
.nav__list.is-moving[data-dir="backward"] { animation: nav-backward 220ms ease; }
@keyframes nav-forward { from { opacity: 0; transform: translateX(24px); } }
@keyframes nav-backward { from { opacity: 0; transform: translateX(-24px); } }

@media (prefers-reduced-motion: reduce) {
  .nav, .nav::backdrop { transition: none; }
  .nav__list.is-moving { animation: none; }
}