/*----------------------------------------*/
/*  Multi-level main navigation
/*  Adds the second-level flyout used by "Our Products > Water Level
/*  Controller". Built on top of the existing .main-menu styles in main.css -
/*  colours, radius, shadow and typography are inherited, not redefined.
/*----------------------------------------*/

/* Keep the parent row's text clear of the existing "\f105" chevron. */
.main-menu ul li .submenu li.menu-item-has-children > a {
  padding-right: 38px;
}

/* Closed state of the second level: sit beside the parent row, not below it. */
.main-menu ul li .submenu li.menu-item-has-children > .submenu {
  top: 0;
  left: 100%;
  min-width: 268px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 250ms var(--easing), transform 250ms var(--easing),
    visibility 250ms var(--easing);
}

/* Open state - overrides the generic ":hover > .submenu" rule from main.css,
   which would otherwise drop the flyout below the parent row. */
.main-menu ul li .submenu li.menu-item-has-children:hover > .submenu,
.main-menu ul li .submenu li.menu-item-has-children:focus-within > .submenu,
.main-menu ul li .submenu li.menu-item-has-children.is-open > .submenu {
  top: 0;
  left: 100%;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Keep the parent row highlighted while its flyout is open. */
.main-menu ul li .submenu li.menu-item-has-children:hover > a,
.main-menu ul li .submenu li.menu-item-has-children:focus-within > a,
.main-menu ul li .submenu li.menu-item-has-children.is-open > a {
  color: var(--color-primary-two);
  background-color: rgba(var(--color-primary-two-rgb), 0.1);
}

.main-menu ul li .submenu li.menu-item-has-children > .submenu li a {
  white-space: nowrap;
}

/* Keyboard access for the first level, matching the existing hover behaviour. */
.main-menu ul li.menu-item-has-children:focus-within > .submenu,
.main-menu ul li.menu-item-has-children.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 0px);
}

/* Flip the flyout to the left when the menu sits close to the viewport edge. */
.main-menu ul li.menu-last .submenu li.menu-item-has-children > .submenu,
.main-menu ul li .submenu.submenu--flip li.menu-item-has-children > .submenu,
.main-menu ul li .submenu li.menu-item-has-children.flyout-left > .submenu {
  left: auto;
  right: 100%;
  transform: translateX(8px);
}

.main-menu ul li.menu-last .submenu li.menu-item-has-children:hover > .submenu,
.main-menu
  ul
  li
  .submenu
  li.menu-item-has-children.flyout-left:hover
  > .submenu,
.main-menu
  ul
  li
  .submenu
  li.menu-item-has-children.flyout-left:focus-within
  > .submenu,
.main-menu ul li .submenu li.menu-item-has-children.flyout-left.is-open > .submenu {
  left: auto;
  right: 100%;
  transform: translateX(0);
}

/*----------------------------------------*/
/*  Off-canvas (mobile / tablet) menu
/*  main.js already appends a .xb-menu-toggle to every
/*  li.menu-item-has-children and tap-toggles its .sub-menu, so the third
/*  level only needs indentation and a clear tap target.
/*----------------------------------------*/
.xb-menu-primary > li > .sub-menu > li > .sub-menu {
  padding-left: 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  margin-left: 2px;
}

.xb-menu-primary > li > .sub-menu > li > .sub-menu > li > a {
  font-weight: 400;
  padding-left: 14px;
  font-size: 13px;
}

/* The generated toggle is absolutely positioned inside its link - give the
   nested rows the same comfortable hit area as the first level. */
.xb-menu-primary .sub-menu li.menu-item-has-children > a {
  padding-right: 36px;
}