/**
 * iqitmegamenu — front layout.
 *
 * Structure and behaviour only: what the menu needs to work and what the BO settings
 * switch on or off. Colours, borders, typography and sizes come from the per-shop
 * stylesheet generated by generateCss() (views/css/iqitmegamenu_s_<id_shop>.css);
 * everything else is the theme's job.
 *
 * Breakpoint: the desktop menu is replaced by the theme's offcanvas below Bootstrap's lg,
 * which is where themes/edgard shows its hamburger (header-block--menu-toggle, .d-lg-none).
 */

/* ---------------------------------------------------------------- root / bar */

/* hor_width = 1 — menu locked to the theme container */
.megamenu--boxed .container {
  padding-left: 0;
  padding-right: 0;
}

/* Below the breakpoint the bar holds nothing: the horizontal nav is hidden and the mobile
   navigation is the theme's offcanvas, rendered outside the bar. */
@media (max-width: 991.98px) {
  .megamenu__bar {
    display: none;
  }
}

/* hor_sticky — .is-sticky is toggled by front_sticky.js */
.megamenu__bar.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 90;
}

.megamenu__bar.is-sticky .megamenu__badge {
  display: none;
}

@media (max-width: 991.98px) {
  .megamenu__bar.is-sticky {
    position: static;
  }
}

/* hor_s_transparent */
.megamenu__bar--transparent.is-sticky {
  opacity: 0.85;
  transition: opacity 300ms ease-in-out;
}

.megamenu__bar--transparent.is-sticky:hover {
  opacity: 1;
}

/* ------------------------------------------------------------------- the nav */

.megamenu__nav {
  width: 100%;
}

.megamenu__nav--horizontal {
  /* positioning context for the submenu panels */
  position: relative;
}

@media (max-width: 991.98px) {
  .megamenu__nav--horizontal {
    display: none;
  }
}

.megamenu__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* hor_center */
.megamenu__nav--centered .megamenu__list {
  justify-content: center;
}

/* tab.float */
.megamenu__item--right {
  margin-left: auto;
}

.megamenu__item--1 .megamenu__link {
  padding-left: 0;
}

.megamenu__link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  line-height: 1;
}

.megamenu__link:hover {
  border-color: var(--bs-primary);
}

.megamenu__title {
  display: inline-block;
  vertical-align: middle;
}

.megamenu__icon,
.megamenu__icon-img {
  display: inline;
  width: auto;
  vertical-align: middle;
  margin-right: 4px;
}

.megamenu__item--icon-only .megamenu__icon,
.megamenu__item--icon-only .megamenu__icon-img {
  margin-right: 0;
}

/* ----------------------------------------------------------------- the badge */

.megamenu__badge {
  position: absolute;
  top: -15px;
  right: 5px;
  display: inline-block;
  padding: 4px 6px;
}

.megamenu__badge-arrow::before {
  content: "\e91e";
  position: absolute;
  right: 5px;
  bottom: -10px;
  font-family: "icomoon";
  font-size: 15px;
}

.megamenu__badge--inner {
  position: relative;
  top: 0;
  right: 0;
  margin-left: 5px;
  padding: 2px 4px;
  vertical-align: middle;
}

.megamenu__badge--inner .megamenu__badge-arrow::before {
  top: 0;
  bottom: auto;
  right: auto;
  left: -4px;
  margin-top: 1px;
  z-index: 2;
}

/* --------------------------------------------------------------- the submenu */

.megamenu__submenu {
  position: absolute;
  display: none;
  visibility: hidden;
  opacity: 0;
  padding: 0;
}

/* .is-shown is set by front_horizontal.js before the panel fades in */
.megamenu__submenu.is-shown {
  display: block;
}

/* .is-overflowing is set when the panel would run past the nav's right edge */
.megamenu__submenu.is-overflowing {
  right: 0;
}

.megamenu__item.is-open > .megamenu__submenu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.megamenu__panel {
  margin: 0 auto;
}

/* hor_animation = 1 */
.megamenu__nav--fade .megamenu__submenu,
.megamenu__nav--fade .megamenu__flyout,
.megamenu__nav--fade .megamenu__submenu-wrap {
  transition: visibility 300ms ease-in-out, opacity 300ms ease-in-out;
}

/* hor_animation = 2 */
.megamenu__nav--slide-up .megamenu__submenu {
  margin-top: 15px;
  transition: all 300ms ease-in-out;
}

/* hor_animation = 3 */
.megamenu__nav--slide-down .megamenu__submenu {
  margin-top: -15px;
  transition: all 300ms ease-in-out;
}

.megamenu__nav--slide-up .megamenu__item.is-open > .megamenu__submenu,
.megamenu__nav--slide-down .megamenu__item.is-open > .megamenu__submenu {
  margin-top: 0;
}

/* ----------------------------------------------- "show all" link, panel foot */

.megamenu__all {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bs-border-color);
}

/* ------------------------------------------------------- submenu grid layout */

.megamenu__col--absolute {
  position: absolute;
  z-index: 2;
  width: auto !important;
  margin: 0;
  padding: 0;
}

.megamenu__col-title {
  display: block;
}

.megamenu__col-title--inline {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

/* the builder's "5 per row" option has no Bootstrap equivalent */
.megamenu .col-15 {
  flex: 0 0 auto;
  width: 20%;
}

/* ---------------------------------------------------- link lists / flyouts */

.megamenu__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.megamenu__links > li {
  position: relative;
}

/* view = 1 — links laid out in a row instead of a column */
.megamenu__links--inline > li {
  display: inline-block;
  margin-right: 12px;
}

.megamenu__links--inline-block {
  display: inline-block;
  vertical-align: middle;
}

.megamenu__links-link {
  color: var(--bs-primary);
}

.megamenu__links-link:hover {
  text-decoration: underline;
}

.megamenu__tree-link {
  position: relative;
}

.megamenu__tree-thumb {
  display: block;
}

.megamenu__flyout {
  position: absolute;
  left: 100%;
  z-index: 3;
  width: auto;
  margin: 0;
  padding: 8px 10px;
  list-style: none;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
}

.megamenu__links-item--parent:hover > .megamenu__tree-link > .megamenu__flyout,
.megamenu__tree-item--parent:hover > .megamenu__tree-link > .megamenu__flyout {
  visibility: visible;
  opacity: 1;
}

/* ------------------------------------------------------- tabbed submenu */

.megamenu__tabs {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.megamenu__tabs-nav {
  flex: 0 0 auto;
  width: 16.6667%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.megamenu__tabs-item {
  position: relative;
}

.megamenu__tabs-link {
  position: relative;
  display: block;
  padding: 14px 16px;
}

.megamenu__tabs-caret {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* hides the nav border where the active tab meets its pane */
.megamenu__tabs-mask {
  position: absolute;
  top: 0;
  z-index: 1;
  display: none;
  height: 100%;
}

.megamenu__tabs-item.is-active .megamenu__tabs-mask {
  display: block;
}

.megamenu__tabs-pane {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

.megamenu__tabs-pane.is-active {
  display: block;
}

/* ------------------------------------------------------------ vertical menu */

.megamenu__vertical {
  position: relative;
  float: left;
  width: 250px;
}

.megamenu__vertical > .megamenu__nav--vertical > .megamenu__list {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.megamenu__vertical.is-expanded > .megamenu__nav--vertical > .megamenu__list,
#index .megamenu__vertical--home-open > .megamenu__nav--vertical > .megamenu__list {
  visibility: visible;
  opacity: 1;
}

/* on the home page the expanded vertical menu collapses once the bar sticks */
#index .is-sticky .megamenu__vertical--home-open > .megamenu__nav--vertical > .megamenu__list {
  visibility: hidden;
  opacity: 0;
}

#index .is-sticky .megamenu__vertical.is-expanded > .megamenu__nav--vertical > .megamenu__list {
  visibility: visible;
  opacity: 1;
}

.megamenu__nav--vertical .megamenu__list {
  width: 100%;
  max-width: 100%;
}

.megamenu__nav--vertical .megamenu__list > li {
  display: block;
  width: 100%;
}

.megamenu__nav--vertical .megamenu__link {
  display: block;
}

.megamenu__nav--vertical .megamenu__caret {
  position: absolute;
  right: 8px;
}

.megamenu__nav--vertical .megamenu__badge--vertical {
  top: -8px;
  right: 14px;
}

.megamenu__nav--vertical .megamenu__submenu-wrap {
  position: absolute;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
}

.megamenu__nav--vertical .megamenu__item.is-open .megamenu__submenu-wrap {
  visibility: visible;
  opacity: 1;
}