/* ============================================================
   /assets/css/nav-nested.css   ·   версия 4
   Вложенные уровни меню (сниппет mnMenu3).

   ПОЧЕМУ ОТДЕЛЬНЫЕ КЛАССЫ
   Верхний уровень меню использует старые классы .nav__item_drop /
   .nav__drop — их стили лежат в main-new.css и работают. Вложенные
   уровни используют СВОИ имена: .nav__sub, .nav__sub-item,
   .nav__sub-link, .nav__sub-drop. Про них не знают ни main-new.css,
   ни стили страниц (direction-page.css, mrt-page.css, uzi-page.css,
   subservice-page.css), поэтому они не могут ни перекрыть наши
   правила, ни «залипнуть» в раскрытом состоянии.

   Ни одного !important: файл ни с чем не воюет.

   Проверка версии в консоли браузера:
     getComputedStyle(document.documentElement).getPropertyValue('--nav-nested')  →  "4"
   ============================================================ */

:root{--nav-nested:4}

/* ---------- списки и пункты вложенных уровней ---------- */
.nav__sub{
  margin:0;
  padding:0;
  list-style:none;
}

.nav__sub-item{position:relative}

.nav__sub-link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 14px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--dark);
  white-space:nowrap;
  transition:.18s;
}
.nav__sub-link:hover{background:var(--light);color:var(--primary-dark)}

/* стрелка › у пункта, внутри которого есть ещё уровень */
.nav__sub-link_has::after{
  content:"\203A";
  font-size:15px;
  line-height:1;
  color:var(--gray);
  margin-left:auto;
  padding-left:8px;
  transition:transform .18s;
}

/* ---------- КОМПЬЮТЕР: выпадашка вправо от пункта ---------- */
@media (min-width:681px){

  .nav__sub-drop{
    position:absolute;
    top:-10px;
    left:100%;
    min-width:250px;
    max-width:340px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 14px 34px rgba(31,45,61,.16);
    padding:10px;
    z-index:80;
    opacity:0;
    visibility:hidden;
    transform:translateX(6px);
    transition:.18s;
  }

  /* раскрывается только при наведении на СВОЙ пункт или фокусе внутри него */
  .nav__sub-item:hover > .nav__sub-drop,
  .nav__sub-item:focus-within > .nav__sub-drop{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }

  /* длинный плоский список — с прокруткой (класс ставит сниппет,
     только если внутри нет своих подменю, поэтому обрезать нечего) */
  .nav__sub-drop_scroll{
    max-height:calc(100vh - 140px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav__sub-drop_scroll::-webkit-scrollbar{width:8px}
  .nav__sub-drop_scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
}

/* ---------- ТЕЛЕФОН: аккордеон, без наведения ---------- */
@media (max-width:680px){

  .nav__sub-drop{
    display:none;
    margin:6px 0;
    padding:6px;
    background:#fff;
    border-radius:8px;
    box-shadow:none;
  }

  .nav__sub-item.open > .nav__sub-drop{display:block}

  .nav__sub-link{
    white-space:normal;
    padding:10px 12px;
    font-size:15px;
  }

  .nav__sub-item.open > .nav__sub-link_has::after{transform:rotate(90deg)}

  /* отступы, чтобы читалась иерархия */
  .nav__sub-drop .nav__sub-link{padding-left:20px}
  .nav__sub-drop .nav__sub-drop .nav__sub-link{padding-left:28px}
}