/*
 * DGQ Accessible Menu - minimal styles
 * Goal: keep existing :hover behavior untouched, only ensure that
 * .dgq-submenu-open also displays the submenu and style the toggle button.
 */

/* Ensure open class forces visible sub-menu without harming existing hover */
#main-nav .menu li.dgq-submenu-open > .sub-menu,
#menu-hauptnavigation-1 li.dgq-submenu-open > .sub-menu {
  display: block !important; /* in case theme hides by default */
  visibility: visible;
  opacity: 1;
  max-height: none !important; /* override accordion-like patterns */
  height: auto !important;
  overflow: visible;
  pointer-events: auto; /* in case theme disables interactions when hidden */
  /* Fix: In einigen Theme-Setups wird das Submenu per transform nach oben versetzt.
     Erzwinge hier eine neutrale Position, damit es direkt UNTER dem Menüpunkt öffnet. */
  transform: none !important;
}

/* Base styles for the toggle button */
.dgq-submenu-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem; /* fixed hit area width so layout is predictable */
  height: 1.75rem; /* keep icon tappable on mobile without affecting flow */
  margin: 0 !important; /* avoid accidental layout shifts by margins */
  font-size: 0; /* prevent font metrics from affecting height when absolute */
}

/* Positioning context for the toggle: keep LI relative in all states so the
   absolutely-positioned arrow never changes its reference box */
#main-nav .menu li.menu-item-has-children,
#main-nav .menu li.menu-item-has-children.dgq-submenu-open,
#menu-hauptnavigation-1 li.menu-item-has-children,
#menu-hauptnavigation-1 li.menu-item-has-children.dgq-submenu-open,
#navigationsleiste .menu li.menu-item-has-children,
#navigationsleiste .menu li.menu-item-has-children.dgq-submenu-open,
.mobile-nav .menu li.menu-item-has-children,
.mobile-nav .menu li.menu-item-has-children.dgq-submenu-open,
nav .menu li.menu-item-has-children,
nav .menu li.menu-item-has-children.dgq-submenu-open {
  position: relative;
}

/* BUGFIX: Never change LI to position:absolute when open – that caused the
   arrow and background to jump and the layout to break on click. */

/* Absolutely position the toggle button to the right inside the LI.
   Use high specificity and !important to prevent theme states from overriding
   (fixes issue where arrow jumped to the left on open). We include both direct
   child selector and the adjacent sibling variant (a + button) to be robust. */
#main-nav .menu li.menu-item-has-children > .dgq-submenu-toggle,
#main-nav .menu li.menu-item-has-children > a + .dgq-submenu-toggle,
#menu-hauptnavigation-1 li.menu-item-has-children > .dgq-submenu-toggle,
#menu-hauptnavigation-1 li.menu-item-has-children > a + .dgq-submenu-toggle,
#navigationsleiste .menu li.menu-item-has-children > .dgq-submenu-toggle,
#navigationsleiste .menu li.menu-item-has-children > a + .dgq-submenu-toggle,
.mobile-nav .menu li.menu-item-has-children > .dgq-submenu-toggle,
.mobile-nav .menu li.menu-item-has-children > a + .dgq-submenu-toggle,
nav .menu li.menu-item-has-children > .dgq-submenu-toggle,
nav .menu li.menu-item-has-children > a + .dgq-submenu-toggle {
  position: absolute !important;
  right: -0.2rem !important;
  left: auto !important; /* guard against any float/left rules from theme */
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 1001; /* stay above submenus on mobile so the arrow never disappears */
  pointer-events: auto; /* ensure button is clickable even if overlays exist */
}

/* Add right padding to the link so text doesn't overlap the toggle.
   Enforce in all states (closed/open/hover) to avoid text shifting. */
#main-nav .menu li.menu-item-has-children > a,
#main-nav .menu li.menu-item-has-children > a:hover,
#main-nav .menu li.menu-item-has-children > a:focus,
#main-nav .menu li.menu-item-has-children.dgq-submenu-open > a,
#main-nav .menu li.current-menu-item > a,
#main-nav .menu li.current-menu-ancestor > a,
#menu-hauptnavigation-1 li.menu-item-has-children > a,
#menu-hauptnavigation-1 li.menu-item-has-children > a:hover,
#menu-hauptnavigation-1 li.menu-item-has-children > a:focus,
#menu-hauptnavigation-1 li.menu-item-has-children.dgq-submenu-open > a,
#menu-hauptnavigation-1 li.current-menu-item > a,
#menu-hauptnavigation-1 li.current-menu-ancestor > a,
#navigationsleiste .menu li.menu-item-has-children > a,
#navigationsleiste .menu li.menu-item-has-children > a:hover,
#navigationsleiste .menu li.menu-item-has-children > a:focus,
#navigationsleiste .menu li.menu-item-has-children.dgq-submenu-open > a,
#navigationsleiste .menu li.current-menu-item > a,
#navigationsleiste .menu li.current-menu-ancestor > a,
.mobile-nav .menu li.menu-item-has-children > a,
.mobile-nav .menu li.menu-item-has-children > a:hover,
.mobile-nav .menu li.menu-item-has-children > a:focus,
.mobile-nav .menu li.menu-item-has-children.dgq-submenu-open > a,
.mobile-nav .menu li.current-menu-item > a,
.mobile-nav .menu li.current-menu-ancestor > a,
nav .menu li.menu-item-has-children > a,
nav .menu li.menu-item-has-children > a:hover,
nav .menu li.menu-item-has-children > a:focus,
nav .menu li.menu-item-has-children.dgq-submenu-open > a,
nav .menu li.current-menu-item > a,
nav .menu li.current-menu-ancestor > a {
  display: block; /* stabilize box metrics across states */
  padding-right: 1.5rem !important; /* keep some space without pushing width */
  box-sizing: border-box; /* prevent padding from increasing overall width */
}

    /* Size and icon (simple chevron using borders) */
.dgq-submenu-toggle::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease-in-out;
}

/* Rotate when open */
li.dgq-submenu-open > .dgq-submenu-toggle::before,
li.dgq-submenu-open > a + .dgq-submenu-toggle::before {
  transform: rotate(-135deg);
}

/* Focus styles for accessibility */
.dgq-submenu-toggle:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Optional: if top-level items are in a flex row, prevent line breaks */
#main-nav .menu > li > a + .dgq-submenu-toggle { white-space: nowrap; }

/* Desktop: Stelle sicher, dass das Submenu direkt unter dem LI öffnet.
   Wir setzen keinen position-Wert, um Theme-Logik nicht zu brechen, 
   korrigieren aber die vertikale Ausrichtung. */
#main-nav .menu > li > .sub-menu,
#menu-hauptnavigation-1 > li > .sub-menu {
  top: 100% !important;
  margin-top: 0 !important;
}

/* Desktop Hauptmenü: Der <a>-Tag muss die volle Höhe des umgebenden <li> einnehmen.
   Wir entfernen vertikale Innenabstände am LI und geben sie dem Link selbst, damit kein
   grauer Streifen unterhalb entsteht und das Submenu direkt darunter öffnet. */
#main-nav .menu > li {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#main-nav .menu > li > a {
  display: block;
  box-sizing: border-box;
  padding-top: 0.9rem; /* vertikale Innenabstände am Link, nicht am LI */
  padding-bottom: 0.9rem;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* MOBILE/HAMBURGER SUPPORT
   Some theme styles keep submenus open on mobile (e.g., current-menu-ancestor).
   We explicitly hide all submenus by default on small screens and only show
   when our open class is present. This preserves accordion behavior. */
@media (max-width: 1024px) {
  /* Hide submenus by default on mobile */
  #main-nav .menu li.menu-item-has-children > .sub-menu,
  #navigationsleiste .menu li.menu-item-has-children > .sub-menu,
  .mobile-nav .menu li.menu-item-has-children > .sub-menu,
  nav .menu li.menu-item-has-children > .sub-menu {
    display: none !important;
    max-height: 0 !important;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: none !important;
    pointer-events: none;
    position: static !important; /* verhindert Überlagerung des Pfeils durch absolut/fixed platzierte Menüs */
    z-index: auto !important;
  }

  /* Show only the toggled open one */
  #main-nav .menu li.menu-item-has-children.dgq-submenu-open > .sub-menu,
  #navigationsleiste .menu li.menu-item-has-children.dgq-submenu-open > .sub-menu,
  .mobile-nav .menu li.menu-item-has-children.dgq-submenu-open > .sub-menu,
  nav .menu li.menu-item-has-children.dgq-submenu-open > .sub-menu {
    display: block !important;
    max-height: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: static !important; /* Submenu fließt unterhalb des LI, überdeckt nicht den Pfeil */
    z-index: auto !important;
  }

  /* Stabilisiere Top-Level Link-Höhe auf Mobilgeräten: 
     Stelle sicher, dass der <a> die volle LI-Höhe einnimmt und der Pfeil rechts nicht
     zu einer Zeilenumbruch-Situation führt. */
  #main-nav .menu > li > a,
  #navigationsleiste .menu > li > a,
  nav .menu > li > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }

  /* MOBILE: Fixiere den Pfeil vertikal, damit er beim Öffnen des Submenus
     NICHT nach unten „mitspringt“. Statt vertikal zu zentrieren (top:50%),
     verankern wir ihn mit einem festen Abstand vom oberen Rand. */
  #main-nav .menu li.menu-item-has-children > .dgq-submenu-toggle,
  #main-nav .menu li.menu-item-has-children > a + .dgq-submenu-toggle,
  #navigationsleiste .menu li.menu-item-has-children > .dgq-submenu-toggle,
  #navigationsleiste .menu li.menu-item-has-children > a + .dgq-submenu-toggle,
  .mobile-nav .menu li.menu-item-has-children > .dgq-submenu-toggle,
  .mobile-nav .menu li.menu-item-has-children > a + .dgq-submenu-toggle,
  nav .menu li.menu-item-has-children > .dgq-submenu-toggle,
  nav .menu li.menu-item-has-children > a + .dgq-submenu-toggle {
    top: 1.1rem !important;     /* fester vertikaler Offset */
    transform: none !important; /* keine Zentrierung per translateY */
  }
}

/* Entfernt: harte LI-Höhenvorgabe führte in Firefox zu zu niedrigen Zeilenhöhen. */