/** ##### WP-Navigation Html Struktur ##### */
/* 
Menü(nav) => nav.wp-block-navigation
  Einträge(ul) => ul.wp-block-navigation.wp-block-navigation__container
    Eintrag mit Untermenü(li) => li.wp-block-navigation-item.wp-block-navigation-submenu
      Button(button) => button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle
        Label(span) => span.wp-block-navigation-item__label
      Icon(span) => li.wp-block-navigation-item.wp-block-navigation-submenu span.wp-block-navigation__submenu-icon
        Unser Icon(::before) => span.wp-block-navigation__submenu-icon::before
        Standard Icon(svg) => li.wp-block-navigation-item.wp-block-navigation-submenu span.wp-block-navigation__submenu-icon svg
      Untermenü(ul) => ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container
                    => .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
                        .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
                        .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container
    Eintrag normal(li) => li.wp-block-navigation-item.wp-block-navigation-link
      Link(a) => a.wp-block-navigation-item__content
*/
/** ##### WP-Navigation Html Struktur ##### */

/** ##### Navigationsmenü in Leiste ##### */
/* Backdrop (definiert in custon header): Wird getriggert wenn Submenü geöffnet ist, aber nicht im geöffneten Nav */
body:has(
    .wp-block-navigation
      .has-child
      .wp-block-navigation-submenu__toggle[aria-expanded="true"]
      ~ ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container
  ):not(.nav_menu.nav_menu.navOpen)::before {
  opacity: 1;
}
.wp-block-group:has(.wp-block-ermisch-block-custom-header) {
  opacity: unset;
  z-index: 999;
}

/* Navigationsitem (hatte manchmal keinen Pointer) */
li.wp-block-navigation-item.wp-block-navigation-link {
  cursor: pointer;
}

/* Geöffnetes Menü */
.wp-block-navigation
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container {
  border: none;
  white-space: nowrap;
  padding: var(--wp--preset--spacing--md-32);
  gap: var(--wp--preset--spacing--sm-16);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  color: var(--wp--preset--color--primary);
}

/* Button ist primary color wenn Menü ist geöffnet */
.wp-block-navigation
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
  color: var(--wp--preset--color--primary);
}

/* Farbwechsel bei Hover für Einträge(li) */
li.wp-block-navigation-item.wp-block-navigation-link:hover,
li.wp-block-navigation-item.wp-block-navigation-submenu:hover {
  transition: color 200ms ease-in-out;
  color: var(--wp--preset--color--primary);
}

li.wp-block-navigation-item.wp-block-navigation-submenu
  button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
  padding-right: unset;
}

/* Farbwechsel bei Hover für Einträge - ändere auch die Farbe des Svgs */
li.wp-block-navigation-item.wp-block-navigation-link:hover
  button.wp-block-navigation-item__content
  ~ span.wp-block-navigation__submenu-icon::before,
li.wp-block-navigation-item.wp-block-navigation-submenu:hover
  button.wp-block-navigation-item__content
  ~ span.wp-block-navigation__submenu-icon::before {
  /* Stroke is primary */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="%230F6DBF" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

/* Pfeil nach unten (span container)*/
ul.wp-block-navigation.wp-block-navigation__container
  li.wp-block-navigation-item.wp-block-navigation-submenu
  span.wp-block-navigation__submenu-icon,
.wp-block-navigation
  .wp-block-navigation-item.wp-block-navigation-submenu
  span.wp-block-navigation__submenu-icon {
  margin-left: var(--wp--preset--spacing--xxs-6);
  width: fit-content;
  height: fit-content;
}

/* Pfeil nach unten (standard Svg ausschalten)*/
li.wp-block-navigation-item.wp-block-navigation-submenu
  span.wp-block-navigation__submenu-icon
  svg,
.wp-block-navigation-item.wp-block-navigation-submenu
  span.wp-block-navigation__submenu-icon
  svg {
  display: none;
}

/* Pfeil nach unten (eigenes Icon in button)*/
span.wp-block-navigation__submenu-icon::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 200ms ease-in-out, background-image 200ms ease-in-out;
  /* Stroke is primary-foreground */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

/* Pfeil nach unten (eigenes Icon - wenn geklickt wurde, Aufklapp-Animation)*/
button.wp-block-navigation-item__content.wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ span.wp-block-navigation__submenu-icon::before {
  transform: rotate(180deg);
  /* Stroke is primary */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="%230F6DBF" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}
/** ##### Navigationsmenü in Leiste ##### */

/** ##### Navigationsmenü bei .nav_menu.navOpen (Tablet/Mobile) ##### */
/* IM Navmenü: Einträge sind linksbündig */
.nav_menu.navOpen ul.wp-block-navigation.wp-block-navigation__container {
  align-items: flex-start;
}

/* IM Navmenü: Menü hat 100% Breite und Einträge sind links */
.nav_menu.navOpen nav.wp-block-navigation {
  width: 100%;
  align-items: flex-start;
}

/* IM Navmenü: Ausklappbares Menü hat Border */
.nav_menu.navOpen li.wp-block-navigation-item.wp-block-navigation-submenu {
  border: 1px solid var(--wp--preset--color--primary-foreground);
  border-radius: 8px;
  padding-inline: var(--wp--preset--spacing--sm-16);
  padding-block: var(--wp--preset--spacing--xs-12);
}

/* IM Navmenü: SubMenü-li ist Grid */
.nav_menu.navOpen li.wp-block-navigation-item.wp-block-navigation-submenu {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: 100%;
}

/* IM Navmenü: Geöffnetes Menü */
.nav_menu.navOpen
  .wp-block-navigation
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ .wp-block-navigation__submenu-container,
.nav_menu.navOpen
  .wp-block-navigation
  .has-child:not(.open-on-click):hover
  > .wp-block-navigation__submenu-container,
.nav_menu.navOpen
  .wp-block-navigation
  .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within
  > .wp-block-navigation__submenu-container {
  position: unset !important;
  grid-column: span 3;
  grid-row: 2 / 3;
  white-space: normal;
  width: 100%;
  padding-top: var(--wp--preset--spacing--xs-12) !important;
  padding-block: unset;
  padding-inline: unset;
  gap: var(--wp--preset--spacing--xs-12);
}
/** ##### Navigationsmenü bei .nav_menu.navOpen (Tablet/Mobile) ##### */

/** ##### links-for-members ##### */
/* links-for-members: Nav hat fit content und border Radius; padding */
nav.wp-block-navigation.links-for-members {
  width: fit-content;
  border-radius: 8px;
  padding-inline: var(--wp--preset--spacing--sm-16);
  padding-block: var(--wp--preset--spacing--xxs-6);
}
/* links-for-members: border-radius */
.links-for-members ul.wp-block-navigation.wp-block-navigation__container {
  border-radius: inherit;
}
.links-for-members li.wp-block-navigation-item.wp-block-navigation-submenu {
  border-radius: inherit;
}
.links-for-members
  li.wp-block-navigation-item.wp-block-navigation-submenu
  span.wp-block-navigation__submenu-icon {
  border-radius: inherit;
}

/* links-for-members: etwas größere block padding wenn menü offen */
.nav_menu.navOpen nav.wp-block-navigation.links-for-members {
  /* padding-block: var(--wp--preset--spacing--xs-12); */
  padding: 0;
}

/* links-for-members: Pfeil nach unten andere standard Farbe und andere Größe */
.links-for-members span.wp-block-navigation__submenu-icon::before {
  width: 16px;
  height: 16px;
  /* Stroke is bg-dark-neutral */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="%233A3A3A" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
}

/* links-for-members: Geöffnetes Menü */
nav.wp-block-navigation.links-for-members
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container {
  top: calc(100% - 2px);
  white-space: normal;
  width: calc(100% + 2 * var(--wp--preset--spacing--sm-16));
  transform: translateX(calc(-1 * var(--wp--preset--spacing--sm-16)));
  padding: var(--wp--preset--spacing--sm-16);
}

/* IM Navmenü, links-for-members: Ausklappbares Menü */
.nav_menu.navOpen
  .links-for-members
  li.wp-block-navigation-item.wp-block-navigation-submenu {
  border: unset;
  border-radius: inherit;
  /* padding: unset; */
  padding-block: var(--wp--preset--spacing--xs-12);
}

/* IM Navmenü, links-for-members: Geöffnetes Menü, fix padding bottom */
.nav_menu.navOpen
  .wp-block-navigation.links-for-members
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded="true"]
  ~ .wp-block-navigation__submenu-container,
.nav_menu.navOpen
  .wp-block-navigation.links-for-members
  .has-child:not(.open-on-click):hover
  > .wp-block-navigation__submenu-container,
.nav_menu.navOpen
  .wp-block-navigation.links-for-members
  .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within
  > .wp-block-navigation__submenu-container {
  padding-bottom: unset;
}
/** ##### links-for-mebers ##### */