/**
 * Dekaii Header Menu – Per-Letter Flip (Hover)
 * Beim Hover dreht sich jeder Buchstabe einmal (rotateY 360°), nacheinander
 * von vorne bis hinten durchs Wort, und bleibt dann stehen.
 * Buchstaben bleiben weiß, Spationierung unverändert, dezenter Glow.
 * Struktur wird von assets/js/header-menu.js erzeugt.
 */

/* Menü-Font wie der Landingpage-Button ("Explore Projects"): Chakra Petch.
   Überschreibt das Parent-Theme (Bebas Neue). */
#qodef-page-header .qodef-header-navigation > ul > li > a,
#qodef-page-header .qodef-header-navigation .qodef-menu-item-text,
#qodef-page-header .qodef-header-navigation .dk-ch {
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 600;
}

/* Theme-Standard-Hover (Linie mittig durch den Text) deaktivieren –
   wir ersetzen ihn durch den Buchstaben-Flip. */
#qodef-page-header .qodef-header-navigation > ul > li > a > span:before,
#qodef-page-header .qodef-header-navigation > ul > li > a:hover > span:before {
    display: none !important;
    content: none !important;
    transform: none !important;
}

#qodef-page-header .qodef-header-navigation .qodef-menu-item-text.dk-roll {
    display: inline-block;
    white-space: nowrap;
    perspective: 600px;               /* 3D-Tiefe für den Flip */
}

#qodef-page-header .qodef-header-navigation .dk-ch {
    display: inline-block;
    white-space: pre;                 /* Leerzeichen/Abstände erhalten */
    transition:
        transform 0.6s cubic-bezier(0.45, 0, 0.2, 1),
        text-shadow 0.3s ease;
    transition-delay: var(--dk-delay, 0s);
}

/* Hover: einmal drehen (Welle von vorne nach hinten) */
#qodef-page-header .qodef-header-navigation a:hover .dk-ch {
    transform: rotateY(360deg);
}

/* Hover über NICHT-aktive Punkte: Farb-Loop weiß→cyan→pink→cyan→weiß,
   läuft endlos solange die Maus hovert (zusätzlich zum Buchstaben-Flip). */
@keyframes dk-menu-color-loop {
    0%, 100% {
        color: #ffffff;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 14px rgba(255, 255, 255, 0.3);
    }
    25%, 75% {
        color: #21d4fd;
        text-shadow: 0 0 6px rgba(33, 212, 253, 0.75), 0 0 16px rgba(33, 212, 253, 0.4);
    }
    50% {
        color: #ff2d9b;
        text-shadow: 0 0 6px rgba(255, 45, 155, 0.75), 0 0 16px rgba(255, 45, 155, 0.4);
    }
}

#qodef-page-header .qodef-header-navigation li:not(.current-menu-item):not(.current_page_item) a:hover .dk-ch {
    animation: dk-menu-color-loop 2.2s linear infinite;
}

/* Aktive Punkte behalten beim Hover den weißen Glow (kein Farb-Loop) */
#qodef-page-header .qodef-header-navigation .current-menu-item a:hover .dk-ch,
#qodef-page-header .qodef-header-navigation .current_page_item a:hover .dk-ch {
    text-shadow:
        0 0 6px rgba(255, 45, 155, 0.85),
        0 0 16px rgba(255, 45, 155, 0.5);
}

/* Aktive Seite: Menüpunkt in Neon-Pink (wie Button-Outline), mit Glow */
#qodef-page-header .qodef-header-navigation .current-menu-item > a,
#qodef-page-header .qodef-header-navigation .current_page_item > a,
#qodef-page-header .qodef-header-navigation .current-menu-item > a .qodef-menu-item-text,
#qodef-page-header .qodef-header-navigation .current_page_item > a .qodef-menu-item-text,
#qodef-page-header .qodef-header-navigation .current-menu-item > a .dk-ch,
#qodef-page-header .qodef-header-navigation .current_page_item > a .dk-ch {
    color: #ff2d9b !important;
    text-shadow:
        0 0 6px rgba(255, 45, 155, 0.85),
        0 0 16px rgba(255, 45, 155, 0.5);
}

/* Divided-Header: DEKAII-Logo exakt mittig halten. Theme setzt beide Spalten
   auf width:100%; da die rechte Spalte zusätzlich die Such-/Widget-Spalte
   trägt, wird ihr min-content größer und drückt das Logo nach links.
   flex:1 1 0 + min-width:0 erzwingt gleiche Spaltenbreiten → Logo zentriert. */
.qodef-header--divided #qodef-page-header .qodef-divided-header-left-wrapper,
.qodef-header--divided #qodef-page-header .qodef-divided-header-right-wrapper {
    flex: 1 1 0 !important;
    min-width: 0;
}

/* =====================================================================
   MOBILE / FULLSCREEN-MENÜ (Hamburger)
   Gleiche Schrift + Hover-Flip + Farb-Loop + Aktiv-Glow wie Desktop.
   Struktur: <nav class="qodef-fullscreen-menu"> ul li a span.qodef-menu-item-text
   ===================================================================== */

/* iOS-Safari-Text-Autosizing verhindern: auf echten iPhones bläht Safari
   Textgrößen automatisch auf (text inflation), was die einzelnen
   .dk-ch-Buchstaben-Spans im Fullscreen-Menü zu groß macht. Im skalierten
   Desktop-Browser tritt das nicht auf. -> Größe fixieren. */
.qodef-fullscreen-menu,
.qodef-fullscreen-menu ul li a,
.qodef-fullscreen-menu .qodef-menu-item-text,
.qodef-fullscreen-menu .dk-ch {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Menü-Font wie Desktop: Chakra Petch (überschreibt Bebas Neue) */
.qodef-fullscreen-menu ul li a,
.qodef-fullscreen-menu .qodef-menu-item-text,
.qodef-fullscreen-menu .dk-ch {
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 600;
}

/* Mobile: Theme-Schriftgröße des Fullscreen-Menüs ist zu groß -> Punkte laufen
   rechts aus dem Viewport (WORKFLOW/CONTACT/PRIVACY abgeschnitten). Auf eine
   viewport-abhängige Größe begrenzen, damit jeder Punkt in EINE Zeile passt. */
@media (max-width: 1024px) {
    .qodef-fullscreen-menu ul li a,
    .qodef-fullscreen-menu .qodef-menu-item-text,
    .qodef-fullscreen-menu .dk-ch {
        font-size: clamp(1.4rem, 9vw, 2.6rem) !important;
        line-height: 1.25 !important;
        letter-spacing: 0.02em !important;
    }
}

/* Theme-Standard-Hover-Linie deaktivieren */
.qodef-fullscreen-menu ul li a > span:before,
.qodef-fullscreen-menu ul li a:hover > span:before {
    display: none !important;
    content: none !important;
    transform: none !important;
}

.qodef-fullscreen-menu .qodef-menu-item-text.dk-roll {
    display: inline-block;
    white-space: nowrap;
    perspective: 600px;
}

.qodef-fullscreen-menu .dk-ch {
    display: inline-block;
    white-space: pre;
    transition:
        transform 0.6s cubic-bezier(0.45, 0, 0.2, 1),
        text-shadow 0.3s ease;
    transition-delay: var(--dk-delay, 0s);
}

/* Hover/Tap: einmal drehen (Welle vorne -> hinten) */
.qodef-fullscreen-menu a:hover .dk-ch {
    transform: rotateY(360deg);
}

/* Hover über NICHT-aktive Punkte: Farb-Loop weiß→cyan→pink→cyan→weiß */
.qodef-fullscreen-menu li:not(.current-menu-item):not(.current_page_item) a:hover .dk-ch {
    animation: dk-menu-color-loop 2.2s linear infinite;
}

/* Aktive Punkte: weißer/pinker Glow beim Hover (kein Farb-Loop) */
.qodef-fullscreen-menu .current-menu-item a:hover .dk-ch,
.qodef-fullscreen-menu .current_page_item a:hover .dk-ch {
    text-shadow:
        0 0 6px rgba(255, 45, 155, 0.85),
        0 0 16px rgba(255, 45, 155, 0.5);
}

/* Aktive Seite: Neon-Pink + Glow */
.qodef-fullscreen-menu .current-menu-item > a,
.qodef-fullscreen-menu .current_page_item > a,
.qodef-fullscreen-menu .current-menu-item > a .qodef-menu-item-text,
.qodef-fullscreen-menu .current_page_item > a .qodef-menu-item-text,
.qodef-fullscreen-menu .current-menu-item > a .dk-ch,
.qodef-fullscreen-menu .current_page_item > a .dk-ch {
    color: #ff2d9b !important;
    text-shadow:
        0 0 6px rgba(255, 45, 155, 0.85),
        0 0 16px rgba(255, 45, 155, 0.5);
}

/* Touch-Geräte (kein echtes Hover): Buchstaben-Flip als sanfte
   Eingangs-Animation, wenn das Fullscreen-Menü geöffnet wird. */
@media (hover: none) {
    .qodef-fullscreen-menu.dk-open a .dk-ch {
        animation: dk-ch-flip-in 0.6s cubic-bezier(0.45, 0, 0.2, 1) both;
        animation-delay: var(--dk-delay, 0s);
    }
}
@keyframes dk-ch-flip-in {
    from { transform: rotateY(360deg); }
    to   { transform: rotateY(0deg); }
}