/* Define global backdrop here, hidden per default*/
body::before {
  content: "";
  position: fixed;
  inset: 0;

  background-color: rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.3s ease;

  z-index: 900; /* wichtig: unter Header */
  pointer-events: none;
}
body:has(
    .nav_item_wrapper.is-open,
    .wp-block-navigation
      .has-child
      .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  )::before {
  opacity: 1;
  visibility: visible;
}
/* FIX Header not sticky (sticky Group)*/
header:has(> .is-position-sticky) {
  position: sticky;
  top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
}

header {
  position: relative;
  z-index: 1000;
}

/* NAV WRAPPER */
.nav_item_wrapper {
  position: static;
}

/* HAMBURGER */
.nav-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 24px;

  display: none;
  flex-direction: column;
  justify-content: space-between;

  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1101;
}

.nav-toggle span {
  height: 3px;
  background: #ffffff;
  display: block;
  transition: 0.3s;
}

/* MOBILE */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  /* DROPDOWN PANEL */
  .nav_item_container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    background: var(--wp--preset--color--bg-dark-neutral);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--md-32);

    padding: 40px 20px;

    /* stabil hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px) scale(0.98);

    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0s linear 0.25s;

    z-index: 999;
  }

  /* OPEN STATE */
  .nav_item_wrapper.is-open .nav_item_container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-block: 24px;
    padding-inline: 32px;
    border-bottom: 1px solid var(--wp--preset--color--muted);
    transform: translateY(0) scale(1);
    z-index: 950;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  .nav_item_container li {
    text-align: center;
  }

  .nav_item_container a {
    display: block;
    text-align: center;
  }

  .wp-block-navigation__container {
    flex-direction: column;
  }
  /* .wp-block-navigation-item {
    display: flex;
    flex-direction: column;
  }
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    position: relative;
    background: red;
  } */
}

/* X Animation */
.nav-toggle.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}