/* Main menu category list dropdown (Views/Shared/Components/MainMenu/Default.cshtml): the third level and
   keeping the panels inside the viewport; everything else uses the theme's list dropdown styles as they are */

/* a subcategory with children: chevron at the end of the row, its children open beside the dropdown */
.header .menu .menu__list-view > .evlo-main-menu__item--has-children {
  position: relative;
}

.header .menu .menu__list-view > .evlo-main-menu__item--has-children > .menu__item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.header .menu .evlo-main-menu__subcaret {
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1;
}

/* the third level sits next to the dropdown, its first row in line with the hovered one:
   20px is the theme's dropdown padding, 12px the top padding of every row but the first */
.header .menu .evlo-main-menu__list-view--level-3 {
  top: -8px;
  inset-inline-start: calc(100% + 20px);
  /* placed past its row's edge, the panel would otherwise shrink to its narrowest; the theme's min/max width still apply */
  width: max-content;
  /* main-menu.js lifts a panel that would run below the viewport; one taller than the viewport scrolls,
     16px leaves the same 8px gap at both viewport edges as the script */
  margin-top: calc(var(--evlo-main-menu-shift, 0px) * -1);
  max-height: calc(100dvh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.header .menu .menu__list-view > .menu__item:first-child > .evlo-main-menu__list-view--level-3 {
  top: -20px;
}

/* bridges the dropdown padding, so the pointer keeps the row hovered on its way to the third level;
   it belongs to the row, as the scrolling panel would clip it */
.header .menu .menu__list-view > .evlo-main-menu__item--has-children::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 100%;
  width: 20px;
}

/* near the viewport edge a panel opens on the other side (main-menu.js sets the flip class) */
.header .menu > .evlo-main-menu__item--flip {
  position: relative;
}

.header .menu > .evlo-main-menu__item--flip > .menu__list-view {
  inset-inline-end: 0;
  width: max-content;
}

.header .menu .menu__list-view > .evlo-main-menu__item--flip > .evlo-main-menu__list-view--level-3 {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + 20px);
}

.header .menu .menu__list-view > .evlo-main-menu__item--flip::after {
  inset-inline-start: auto;
  inset-inline-end: 100%;
}