/* ==============================================================
   informatik.academy – Mobilmenü, minimalistisch
   Für Code Snippets Pro, Snippet-Typ: CSS
   >>> LOCATION MUSS "Site front-end" SEIN, nicht "Administration area" <<<

   Braucht das JS-Snippet "Stil - Shrink" in der erweiterten Fassung:
   dort sorgt ein kleiner Zusatz dafür, dass der Burger das Menü auch
   wieder schließt. Ohne ihn öffnet das Menü, das X reagiert aber nicht.

   ABHÄNGIGKEIT: Variablen aus "Stil - Simple Custom CSS"
   (--ia-header, --ia-blau, --ia-luft-seite, --ia-luft, --ia-luft-oben)
   sowie --header-offset, das jenes JS laufend misst.

   IDEE: Aus dem Hamburger wird durch Drehen seiner beiden Striche ein
   Kreuz – am selben Element, an derselben Stelle. Dafür wird der Header
   beim Öffnen über das Overlay gehoben und der Schließen-Button des
   Cores ausgeblendet. Das Menü selbst ist eine schmale Karte, die sich
   rechts unter den Header legt.
   ============================================================== */

/* === 1. Burger: zwei Striche, die sich zum X drehen =========== */
.wp-block-navigation__responsive-container-open {
  position: relative; z-index: 2;
  width: 26px; height: 26px;
  background: none !important; border: 0 !important; padding: 0 !important;
}
.wp-block-navigation__responsive-container-open svg { display: none !important; }

.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
  content: ""; position: absolute; left: 2px; right: 2px;
  height: 1.5px; border-radius: 2px;
  background: var(--ia-blau);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.wp-block-navigation__responsive-container-open::before { top: 9px; }
.wp-block-navigation__responsive-container-open::after  { top: 15px; }

/* Die 6px Abstand werden beim Öffnen auf 0 gefahren und gekreuzt */
.header-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open::before {
  transform: translateY(3px) rotate(45deg);
}
.header-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open::after {
  transform: translateY(-3px) rotate(-45deg);
}

/* Header über das Overlay heben, sonst verschwindet das X hinter dem
   Schleier. Overlay liegt auf 10000 (aus "Stil - Simple Custom CSS"). */
.header-nav:has(.is-menu-open) { z-index: 10001 !important; }

/* UND – das ist der Knackpunkt – der Burger muss auch INNERHALB des
   Headers über dem Overlay liegen. Overlay und Burger sind Geschwister
   im selben Stapelkontext: ohne diese Regel liegt das Overlay mit 10000
   über dem Burger, das X ist dann zwar zu sehen, fängt aber keinen
   Klick mehr ab – man kommt aus dem Menü nicht mehr heraus. */
.header-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
  z-index: 10002 !important;
}

/* Der eigene Schließen-Button des Cores wird nicht mehr gebraucht */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  display: none !important;
}

/* === 2. Weiße Vollfläche raus, Schleier rein ==================
   Der Container bleibt bildschirmfüllend, aber durchsichtig. Er ist
   damit weiterhin die Klickfläche, über die der Außenklick schließt. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: transparent !important;
  padding: 0 !important;
  overflow: visible;
}

/* Der Schleier hängt am BODY, nicht am Container.
   Grund: Der Container steckt im Header. Ein Schleier darin legt sich
   zwangsläufig auch über die Kopfleiste – die wurde dadurch mitgrau.
   Am body liegt er auf 9998, also unter dem Header (9999 bzw. 10001
   bei offenem Menü) und über dem Seiteninhalt. Kopfleiste bleibt
   normal, der Rest der Seite dunkelt ab.

   pointer-events:none, damit Klicks durch ihn hindurch an den
   darüberliegenden Container gehen und das Menü schließen.

   Bewusst kein backdrop-filter: zwei vollflächige Glasebenen
   übereinander haben im Test den Renderer blockiert.               */
body:has(.wp-block-navigation__responsive-container.is-menu-open)::before {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  background: rgba(18, 20, 26, .42);
  animation: ia-schleier .3s ease both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  max-width: none !important; position: relative; z-index: 1; display: block;
}

/* === 3. Die Karte: rechts, so schmal wie nötig ================ */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  position: relative;
  isolation: isolate;           /* hält das Glas-Pseudo über dem Schleier */
  width: max-content;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 2 * var(--ia-luft-seite)));
  /* margin-left:auto schiebt sie nach rechts, der Header-Abstand kommt
     aus der laufend gemessenen Höhe --header-offset */
  margin: calc(var(--header-offset) + var(--ia-luft-oben) + 6px) var(--ia-luft-seite) var(--ia-luft) auto;
  max-height: calc(100dvh - var(--header-offset) - var(--ia-luft-oben) - var(--ia-luft) - 18px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 14px 16px;
  border-radius: 16px;
  animation: ia-karte .5s cubic-bezier(.16, 1, .3, 1) both;
}

/* Glas liegt bewusst auf einem Pseudo-Element, nicht auf der Karte:
   ein Element mit backdrop-filter würde zum Bezugsrahmen für alles
   position:fixed darin – dieselbe Falle wie beim Back-to-Top-Button. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.5);
  background: color-mix(in srgb, var(--ia-header) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
          backdrop-filter: saturate(180%) blur(22px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 2px 4px rgba(0,0,0,.08),
    0 20px 48px rgba(0,0,0,.30);
}

/* === 4. Einträge: rechtsbündig, Emoji außen ===================
   row-reverse setzt das Emoji ans rechte Ende – dadurch stehen alle
   Icons auf einer Linie, die Beschriftungen laufen nach links aus.  */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important; flex-direction: column !important;
  align-items: flex-end !important; justify-content: flex-start !important;
  gap: 4px !important; width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
  width: 100% !important;
  animation: ia-eintrag .45s cubic-bezier(.16, 1, .3, 1) both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(1) { animation-delay: .06s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(2) { animation-delay: .11s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(3) { animation-delay: .16s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:nth-child(4) { animation-delay: .21s; }

/* Keine Pillen im Menü – nur Text. Die Pillen bleiben dem Header. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout a {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important; min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 2px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ia-blau) !important;
  font-size: 1rem !important; font-weight: 400 !important;
  text-align: right !important;
  transition: transform .2s ease, opacity .2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout a:hover {
  background: transparent !important; box-shadow: none !important;
  transform: translateX(-3px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > a::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout a::before {
  margin-bottom: 0 !important; font-size: 1em !important; opacity: .85;
}

/* === 5. Anmelden abgesetzt – ist ein Punkt eigener Art ======== */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout {
  width: 100%;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(28, 40, 72, .16);
  animation: ia-eintrag .45s cubic-bezier(.16, 1, .3, 1) .22s both;
}

/* === 6. Unterpunkte: klar zugeordnet, trotzdem leise ==========
   Senkrechte Haarlinie rechts statt Kasten, kleinere Schrift,
   zurückgenommene Deckkraft. Beim Hovern kommt der Punkt nach vorn. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  width: 100% !important; min-width: 0 !important;
  opacity: 1 !important; visibility: visible !important;
  border: 0 !important;
  border-right: 1px solid rgba(28, 40, 72, .28) !important;
  border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  padding: 2px 10px 2px 0 !important;
  margin: 0 6px 6px 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-end !important; gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 6px 0 !important;
  border-radius: 0;
  color: var(--ia-blau) !important;
  opacity: .62;
  text-align: right !important; width: 100%;
  justify-content: flex-end !important;
  font-size: .86rem !important; letter-spacing: .02em;
  transition: opacity .2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  opacity: 1; background: transparent !important;
}

/* === 7. Animationen =========================================== */
@keyframes ia-schleier { from { opacity: 0 } to { opacity: 1 } }
@keyframes ia-karte {
  from { opacity: 0; transform: translateY(-10px) scale(.97) }
  to   { opacity: 1; transform: none }
}
@keyframes ia-eintrag {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container-open::before,
  .wp-block-navigation__responsive-container-open::after { transition: none !important; }
  body:has(.wp-block-navigation__responsive-container.is-menu-open)::before,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-loginout { animation: none !important; }
}