/* =========================================================
   ZAPPAZ MEGA MENU
   Eén kolom met subcategorieën naast één categorieafbeelding.
   ========================================================= */

/* De Impreza-navigatie is normaal de positioneringscontext voor de kleine
   dropdown. Bij een dynamisch Zappaz-menu gebruiken we de volledige breedte
   van de headercontainer. */
header .w-nav.type_desktop:has(.zappaz-mega-menu),
header .w-nav.type_desktop:has(.zappaz-mega-menu) > .w-nav-list.level_1,
header .w-nav.type_desktop .w-nav-item.level_1:has(.zappaz-mega-menu) {
  position: static;
}

header
  .w-nav.type_desktop
  .w-nav-item.level_1
  > .w-nav-list.level_2:has(.zappaz-mega-menu) {
  right: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 0.25rem 0.25rem;
  background: #fff;
}

header
  .w-nav.type_desktop
  .w-nav-list.level_2:has(.zappaz-mega-menu)
  > .w-nav-item,
header
  .w-nav.type_desktop
  .w-nav-list.level_2:has(.zappaz-mega-menu)
  .wpb_text_column,
header
  .w-nav.type_desktop
  .w-nav-list.level_2:has(.zappaz-mega-menu)
  .wpb_wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}

.zappaz-mega-menu {
  --zappaz-mega-image-max-width: 720px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.65fr);
  align-items: start;
  width: 100%;
  background: #fff;
}

.zappaz-mega-menu__content {
  padding: clamp(2rem, 3vw, 3.5rem) clamp(2rem, 4vw, 5rem);
}

.zappaz-mega-menu__title {
  display: inline-flex;
  margin-bottom: 1.25rem;
  color: var(--color-content-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.zappaz-mega-menu__title:hover,
.zappaz-mega-menu__title:focus-visible {
  color: var(--color-content-primary);
}

.zappaz-mega-menu .dynamic-subcategories {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zappaz-mega-menu .dynamic-subcategories li {
  min-width: 0;
  margin: 0;
  padding: 0;
  break-inside: avoid;
}

/* Vanaf elf subcategorieën wordt de lijst automatisch over twee
   evenwichtige kolommen verdeeld. Tot en met tien blijft het één kolom. */
.zappaz-mega-menu--two-columns .dynamic-subcategories {
  display: block;
  columns: 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

.zappaz-mega-menu .dynamic-subcategories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(38, 25, 15, 0.12);
  color: var(--color-content-text);
  font-size: 1rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease;
}

.zappaz-mega-menu .dynamic-subcategories a:hover,
.zappaz-mega-menu .dynamic-subcategories a:focus-visible {
  color: var(--color-content-primary);
}

.zappaz-mega-menu__link-arrow {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-0.3rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.zappaz-mega-menu .dynamic-subcategories a:hover .zappaz-mega-menu__link-arrow,
.zappaz-mega-menu
  .dynamic-subcategories
  a:focus-visible
  .zappaz-mega-menu__link-arrow {
  opacity: 1;
  transform: translateX(0);
}

.zappaz-mega-menu__visual {
  position: relative;
  display: grid;
  justify-self: center;
  align-self: center;
  width: min(100%, var(--zappaz-mega-image-max-width));
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 75px;
}

.zappaz-mega-menu__image-panel {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.zappaz-mega-menu__image-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.zappaz-mega-menu__image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.zappaz-mega-menu__image-panel.is-active:hover .zappaz-mega-menu__image {
  transform: scale(1.025);
}

.zappaz-mega-menu--without-image .zappaz-mega-menu__content {
  grid-column: 1 / -1;
  max-width: 32rem;
}

@media screen and (max-width: 1024px) {
  .zappaz-mega-menu {
    display: block;
    min-height: 0;
  }

  .zappaz-mega-menu__content {
    padding: 1.25rem 1.5rem;
  }

  .zappaz-mega-menu__visual {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .zappaz-mega-menu--two-columns .dynamic-subcategories {
    columns: 1;
  }

  .zappaz-mega-menu .dynamic-subcategories a {
    min-height: 2.75rem;
  }

  .zappaz-mega-menu__link-arrow {
    opacity: 1;
    transform: none;
  }
}

/* Header overlay for desktop, tablet and mobile navigation. */
.zappaz-header-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  visibility: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background: rgb(0 0 0 / 55%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

body.zappaz-desktop-menu-open .zappaz-header-overlay,
html.w-nav-open .zappaz-header-overlay {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

@media screen and (max-width: 1024px) {
  html.w-nav-open,
  html.w-nav-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.w-nav-open .zappaz-header-overlay {
    pointer-events: auto;
    touch-action: none;
  }
}