/**
 * Dropdown behaviour for the horizontal main menu.
 *
 * The Foundation dropdown-menu component is not compiled into this theme, so
 * child <ul> items rendered by menu--main.html.twig had no positioning and
 * stacked behind sibling menu items. These rules turn the second level into a
 * hover/focus dropdown. Only the desktop menu (.nav-wrapper.show-for-large) is
 * targeted; the mobile off-canvas / drilldown nav is untouched.
 */

/* Anchor the dropdown to its top-level item. */
.nav-wrapper .menu.large-horizontal > li {
  position: relative;
}

/* The submenu: hidden until the parent is hovered or focused. */
.nav-wrapper .menu.large-horizontal > li > ul.vertical-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 240px;
  margin: 0;
  padding: 0.5rem 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 2px solid currentColor;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.nav-wrapper .menu.large-horizontal > li:hover > ul.vertical-menu,
.nav-wrapper .menu.large-horizontal > li:focus-within > ul.vertical-menu {
  display: block;
}

/* Submenu items stack full width. */
.nav-wrapper .menu.large-horizontal > li > ul.vertical-menu > li {
  display: block;
  width: 100%;
}

.nav-wrapper .menu.large-horizontal > li > ul.vertical-menu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.nav-wrapper .menu.large-horizontal > li > ul.vertical-menu a:hover,
.nav-wrapper .menu.large-horizontal > li > ul.vertical-menu a:focus {
  background: rgba(0, 0, 0, 0.05);
}

/**
 * Dropdown link colour.
 *
 * The top-level menu links are white on dark-header pages; that colour is
 * inherited into the white dropdown box, making the text invisible. Force a
 * dark colour for every link inside the dropdown at all depths.
 */
.nav-wrapper .menu.large-horizontal ul.vertical-menu a {
  color: #16191d;
}

.nav-wrapper .menu.large-horizontal ul.vertical-menu a:hover,
.nav-wrapper .menu.large-horizontal ul.vertical-menu a:focus {
  color: #16191d;
}

/* Deeper levels (3rd+) fly out to the right of their parent item. */
.nav-wrapper .menu.large-horizontal ul.vertical-menu li {
  position: relative;
}

.nav-wrapper .menu.large-horizontal ul.vertical-menu ul.vertical-menu {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1001;
  display: none;
  min-width: 220px;
  margin: 0;
  padding: 0.5rem 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.nav-wrapper .menu.large-horizontal ul.vertical-menu li:hover > ul.vertical-menu,
.nav-wrapper .menu.large-horizontal ul.vertical-menu li:focus-within > ul.vertical-menu {
  display: block;
}

/**
 * Dropdown-arrow position.
 *
 * Foundation renders the triangle as an absolutely-positioned ::after anchored
 * to the link. In this horizontal menu the link is not a reliable positioning
 * context, so the triangle drops below the label. We lay the link out as an
 * inline flex row and render the arrow as an inline flex item, so it always
 * sits next to the label and is vertically centred with it. Foundation's
 * border/colour geometry for the triangle is kept.
 */
.nav-wrapper .menu.large-horizontal li.is-dropdown-submenu-parent > a {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
}

.nav-wrapper .menu.large-horizontal li.is-dropdown-submenu-parent > a::after {
  position: static;
  display: inline-block;
  top: auto;
  right: auto;
  left: auto;
  margin: 0 0 0 0.4em;
}