/* ==========================================================
   Mobile Dropdown Menu Overflow Fix
   Fixes: Location > Victoria > (city sub-menu) overflowing
   off-screen on mobile view.
   Load this AFTER assets/css/combined.min.css
   ========================================================== */

@media only screen and (max-width: 991px) {

  /* Reset the desktop "flyout" positioning (left:100%) that was
     leaking into mobile for nested sub-menus (e.g. Victoria's
     city list). This was causing horizontal overflow / the menu
     to render off the right edge of the screen. */
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children > .sub-menu,
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children > .sub-menu .sub-menu .sub-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  /* Make sure every nested level behaves like the top-level
     mobile sub-menu: full width, no shadow, no fixed max-height
     clipping, natural stacking. */
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .sub-menu {
    position: static;
    display: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    margin-left: 0;
    padding: 0 0 0 15px;
  }

  /* Show nested sub-menu only when its parent <li> is toggled open */
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .menu-item-has-children.sopen > .sub-menu,
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu .sub-menu.sopen {
    display: block !important;
  }

  /* Prevent any menu level from forcing horizontal scroll on the page */
  .navbar-area .nav-container .navbar-collapse .navbar-nav,
  .navbar-area .nav-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu {
    max-width: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
  }

  html, body {
    overflow-x: hidden;
  }

  /* Long city names / labels shouldn't force width beyond viewport */
  .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
    white-space: normal;
  }
}