/* ============= DESKTOP ============= */
.main-menu > li {
  position: relative;
}

.submenu {
  display: none;
  min-width: 220px;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 999;
}

.submenu a,
.submenu span {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  color: #333;
}

.submenu a:hover {
  background: #f5f5f5;
}

.has-submenu:hover > .submenu {
  display: block;
}

/* Sub-submenu slides to the right */
.submenu .submenu {
  left: 100% !important;
  top: 0 !important;
}

/* Non-clickable parent */
.has-submenu > span {
  cursor: default;
  pointer-events: none;
  padding: 0.5rem 1rem;
}
.has-submenu > span::after {
  content: " down arrow";
  margin-left: 0.25rem;
  font-size: 0.8em;
}

/* ============= MOBILE ============= */
@media (max-width: 960px) {
  /* Hide desktop menu */
  .flex-l[direction="row"] {
    display: none !important;
  }

  /* Mobile dropdown */
  #mobile-dropdown {
    display: none;
    z-index: 9999 !important;
  }
  #mobile-dropdown.show {
    display: block;
  }

  .mobile-menu {
    display: block;
  }
  
  .submenu {
    display: none; 
  }
  
  .mobile-menu > li > div,
  .submenu > li > div {
    cursor: pointer;
  }

  /* Disable hover opening */
  .has-submenu:hover > .submenu {
    display: none !important;
  }

  .mobile-chevron {
    transition: transform 0.3s ease;
  }
  .has-submenu.open > div > .mobile-chevron {
    transform: rotate(180deg);
  }
  .has-submenu.open > div > .fas.fa-chevron-right {
    transform: rotate(90deg);
  }
  
  .has-submenu.open > .submenu {
    display: block !important;
  }

  /* Indentation */
  .submenu .submenu {
    padding-left: 1rem;
  }
}