/* ============================================
   Hoofdmenu (components/nav.njk)
   Waarden gemeten op het origineel (Elementor Pro nav-menu).
   ============================================ */

.menu {
  --menu-icon: 25px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.menu__list,
.menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: normal;
}

.menu__item { position: relative; }

.menu__link,
.menu__sublink {
  display: flex;
  align-items: center;
  position: relative;
  font-family: var(--font-main);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  text-decoration: none;
}

/* <button> voor het submenu gedraagt zich als de links */
button.menu__link {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  white-space: nowrap;
}

.menu__arrow {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-block: -10px;
  padding: 10px 0 10px 10px;
}
.menu__arrow .icon { width: 1em; height: 1em; fill: currentColor; }

.menu__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.25em;
  border: 0 solid;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0);
  font-size: var(--menu-icon);
  line-height: 1.5;
  cursor: pointer;
}
.menu__toggle .icon { width: 1em; height: 1em; fill: currentColor; }
.menu__icon-close,
.menu.is-open .menu__icon-open { display: none; }
.menu.is-open .menu__icon-close { display: block; }

/* --- Uitklappaneel (menu--mobile altijd, menu--desk ≤1024px) ------------- */
.menu--mobile .menu__toggle { display: flex; }
.menu--mobile .menu__list,
.menu--desk .menu__list { --panel-mt: 10px; }

.menu--mobile .menu__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9997;
  width: 100%;
  margin-top: var(--panel-mt);
  max-height: 0;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: max-height 0.3s, transform 0.3s;
  font-size: 13px;
}
.menu--mobile.is-open .menu__list {
  max-height: 100vh;
  transform: scaleY(1);
}
.menu--mobile .menu__link,
.menu--mobile .menu__sublink {
  justify-content: center;
  padding: 10px 20px;
  font-size: var(--fs-accent);
  letter-spacing: 0.2px;
}
.menu--mobile .menu__sub { display: none; }
.menu--mobile .menu__item--sub.is-open > .menu__sub { display: block; }
.menu--mobile .menu__sublink { border-inline-start: 8px solid transparent; letter-spacing: normal; }

/* --- Horizontaal menu, desktopbalk boven 1024px ------------------------- */
@media (min-width: 1025px) {
  /* rij zoals de nav-container van het origineel (voorkomt 0,016px verschuiving) */
  .menu--desk { flex: 1 0 auto; flex-direction: row; align-items: flex-start; }
  .menu--desk .menu__list {
    margin-top: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: auto;
    position: relative;
    z-index: 2;
  }
  .menu--desk .menu__item { display: flex; }
  .menu--desk .menu__link {
    flex-grow: 1;
    padding: 10px 0;
    color: var(--color-white);
    font-size: 16px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: 0.4s;
  }
  .menu--desk .menu__item:not(:first-child) > .menu__link { margin-inline-start: 16px; }
  .menu--desk .menu__item:not(:last-child) > .menu__link { margin-inline-end: 16px; }
  .menu--desk .menu__link:hover,
  .menu--desk .menu__link:focus,
  .menu--desk .menu__item--sub.is-open > .menu__link { color: var(--color-mist); }
  .menu--desk .menu__link.is-active { color: var(--color-copper); }

  .menu--desk .menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    z-index: 3;
    min-width: 10em;
    border: 0 solid;
    background-color: var(--color-primary);
    font-size: 13px;
  }
  .menu--desk .menu__item--sub.is-open > .menu__sub { display: block; }
  .menu--desk .menu__sublink {
    padding: 13px 20px;
    border-inline-start: 8px solid transparent;
    color: var(--color-white);
    font-size: var(--fs-accent);
    white-space: nowrap;
    transition: 0.4s;
  }
  .menu--desk .menu__sublink:hover,
  .menu--desk .menu__sublink:focus,
  .menu--desk .menu__sublink.is-active { color: var(--color-accent); }
  .menu--desk .menu__sublink.is-active { color: var(--color-copper); background-color: var(--color-white); }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .menu--desk {
    flex: 0 0 auto;
    width: 624.047px;
    max-width: 100%;
  }
  .menu--desk .menu__list { margin-top: 0; }
}

@media (max-width: 1024px) {
  .menu--desk {
    --menu-icon: 25px;
    flex: 0 1 auto;
    align-self: center;
    width: 149px;
    max-width: 149px;
  }
  .menu--desk .menu__toggle { display: flex; color: var(--color-text); }
  .menu--desk .menu__list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9997;
    width: 100%;
    margin-top: 10px;
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height 0.3s, transform 0.3s;
    background-color: var(--color-primary);
    font-size: 13px;
  }
  .menu--desk.is-open .menu__list { max-height: 100vh; transform: scaleY(1); }
  .menu--desk .menu__link,
  .menu--desk .menu__sublink {
    justify-content: center;
    padding: 10px 20px;
    color: var(--color-white);
    background-color: var(--color-primary);
    font-size: var(--fs-accent);
    letter-spacing: 0.2px;
  }
  .menu--desk .menu__sublink { border-inline-start: 8px solid transparent; letter-spacing: normal; }
  .menu--desk .menu__link:hover, .menu--desk .menu__link:focus,
  .menu--desk .menu__sublink:hover, .menu--desk .menu__sublink:focus { color: var(--color-accent); }
  .menu--desk .menu__link.is-active,
  .menu--desk .menu__sublink.is-active { color: var(--color-copper); background-color: var(--color-white); }
  .menu--desk .menu__sub { display: none; }
  .menu--desk .menu__item--sub.is-open > .menu__sub { display: block; }
}

@media (max-width: 880px) {
  .menu--desk { align-self: flex-end; }
}

/* --- Mobiele balk: witte uitklap ------------------------------------------ */
.menu--mobile {
  flex: 0 1 auto;
  align-self: center;
  width: 149px;
  max-width: 100%;
}
.menu--mobile .menu__toggle { margin-left: auto; color: var(--color-white); }
.menu--mobile .menu__list { background-color: var(--color-white); }
.menu--mobile .menu__link,
.menu--mobile .menu__sublink { color: var(--color-text); background-color: var(--color-white); }
.menu--mobile .menu__link:hover, .menu--mobile .menu__link:focus,
.menu--mobile .menu__sublink:hover, .menu--mobile .menu__sublink:focus { color: var(--color-accent); }
.menu--mobile .menu__link.is-active,
.menu--mobile .menu__sublink.is-active { color: var(--color-copper); }

@media (max-width: 880px) {
  .menu--mobile { align-self: flex-end; }
}

@media (max-width: 767px) {
  .menu--mobile {
    --menu-icon: 33px;
    align-self: center;
    width: 206px;
  }
  .menu--mobile .menu__list { margin-top: 16px; }
  .menu--mobile .menu__link,
  .menu--mobile .menu__sublink { padding-top: 16px; padding-bottom: 16px; }
}