/*
	Styling voor de hover-variant van de horizontale navigatie (HorizontalHover.cshtml).
	Alles is gescoped onder .topbar--horizontal-hover zodat de originele horizontale
	navigatie (horizontal.cshtml) volledig ongewijzigd blijft.

	Uitgangspunten:
	- De gesloten navigatie ziet er identiek uit aan de originele.
	- Dropdowns openen op hover (en focus, t.b.v. toetsenbordbediening) i.p.v. klik.
	- Een subitem met children opent een fly-out menu ernaast (extra niveau).
*/
/* #region Horizontal Hover Navigation */
.topbar--horizontal-hover .navigation-container .navbar {
  /* Nav-item is het ankerpunt voor het absoluut gepositioneerde dropdownmenu. */
  /* Wrapper rond een subitem dat zelf weer children heeft (extra niveau). */
}
.topbar--horizontal-hover .navigation-container .navbar .nav-item {
  position: relative;
}
.topbar--horizontal-hover .navigation-container .navbar .nav-item.dropdown {
  /* Niveau 2: dropdown onder het hoofd-item. */
  /* Openen op hover én op focus (toetsenbord). */
}
.topbar--horizontal-hover .navigation-container .navbar .nav-item.dropdown > .dropdown-menu {
  display: block;
  /* Overschrijft Bootstrap's display:none; zichtbaarheid regelen we hieronder. */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0.15s ease-in-out;
  z-index: var(--z-topbar);
}
.topbar--horizontal-hover .navigation-container .navbar .nav-item.dropdown:hover > .dropdown-menu,
.topbar--horizontal-hover .navigation-container .navbar .nav-item.dropdown:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.topbar--horizontal-hover .navigation-container .navbar .dropdown-submenu {
  position: relative;
  /* Het subitem met children: pijl naar rechts, tekst en pijl uitgelijnd. */
  /* Niveau 3+: fly-out menu naast het subitem. */
}
.topbar--horizontal-hover .navigation-container .navbar .dropdown-submenu > .dropdown-item--has-children {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.topbar--horizontal-hover .navigation-container .navbar .dropdown-submenu > .dropdown-item--has-children .submenu-arrow {
  flex-shrink: 0;
  height: 0.75rem;
  transform: rotate(-90deg);
  /* chevron-down -> wijst naar rechts */
  width: auto;
}
.topbar--horizontal-hover .navigation-container .navbar .dropdown-submenu > .dropdown-menu--flyout {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 15rem;
  margin-top: 0;
  border-radius: var(--radius-default);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0.25rem);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0.15s ease-in-out;
  z-index: var(--z-topbar);
}
.topbar--horizontal-hover .navigation-container .navbar .dropdown-submenu:hover > .dropdown-menu--flyout,
.topbar--horizontal-hover .navigation-container .navbar .dropdown-submenu:focus-within > .dropdown-menu--flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
/* #endregion */