/**
 * Выпадающее подменю главного меню.
 * Основная работа идёт на CSS: подменю скрыто и раскрывается при наведении.
 * Класс sfHover ставит nav.js и держит состояние для клавиатуры.
 */

ul.main-nav {
  position: relative;
}

ul.main-nav li {
  position: relative;
}

ul.main-nav ul.sub-menu {
  display: none;
}

ul.main-nav li.menu-item-has-children:hover > ul.sub-menu,
ul.main-nav li.sfHover > ul.sub-menu,
ul.main-nav li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
}

ul.main-nav li.menu-item-has-children:hover > a,
ul.main-nav li.sfHover > a {
  color: #fff;
}

ul.main-nav li.menu-item-has-children > a::after {
  content: " \25BE";
  font-size: 10px;
  opacity: 0.6;
}

ul.main-nav li.menu-item-has-children > ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu {
  display: block;
}

@media (max-width: 767px) {
  ul.main-nav ul.sub-menu {
    position: static;
    width: 100%;
    margin-left: 0;
  }

  ul.main-nav li.menu-item-has-children:hover > ul.sub-menu,
  ul.main-nav li.sfHover > ul.sub-menu {
    position: static;
  }
}