/* =============================================================
   DAZZLETIC – Header  ([dazzletic_header])
   Elemente: Mixtape-Icon · Logo · Suche ([dazzletic_search]).
   Mobile-First; Desktop ab 981px (deckt sich mit dem Mega-Menu-
   Breakpoint 980px, ab dem der Hamburger erscheint).
   Nutzt die Design-System-Tokens (mit Fallbacks) – die Suche selbst
   wird von search.css gestylt und hier nur positioniert.
   ============================================================= */

.dz-header {
    /* Responsive-anpassbare Header-Abstände – pro Breakpoint überschreibbar,
       indem nur diese Variablen neu gesetzt werden (siehe Media-Queries).
       Oben/unten getrennt, damit das (mittig sitzende) Logo bei ungleichen
       Werten korrekt auf die Mitte des Inhaltsstreifens ausgerichtet bleibt. */
    --dz-header-pt: 58px;             /* Innenabstand oben  */
    --dz-header-pb: 27px;             /* Innenabstand unten (bis zur grauen Linie) */
    --dz-header-px: 0px;              /* Innenabstand seitlich */
    --dz-header-gap: 45px;            /* Abstand unter der grauen Linie bis zum Content */

    position: relative;
    width: 100%;
    background: var(--c-white, #fff);
    margin-bottom: var(--dz-header-gap);
}

/* Die Divi-Row, die den Header enthält, ist auf Divis Standard-Breite (1400px,
   globale Divi-Variable, per !important am Modul gesetzt) begrenzt – der Content
   läuft dagegen bis --container-max (1416px). Auf breiten Screens wäre der Header
   sonst 8px je Seite schmaler. Zwilling mit .dz-divi-wrapped, weil Divi dort seine
   Regeln mit „.et-db #et-boc .et-l" präfixiert (siehe 09-divi.css). */
.et-l--header .et_pb_row:has(.dz-header),
.dz-divi-wrapped #et-boc .et-l--header .et_pb_row:has(.dz-header) {
    max-width: var(--container-max, 1416px) !important;
}

.dz-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;   /* Mobile: Mixtape links, Suche rechts */
    gap: 12px;
    padding: var(--dz-header-pt) var(--dz-header-px) var(--dz-header-pb);  /* mobil: 58px 0 27px 0 */
    /* Graue Trennlinie – auf Mobile IMMER sichtbar (nicht nur bei offener Suche). */
    border-bottom: var(--bw-1, 1px) solid var(--c-neutral-2, #E4E4E4);
}

/* Bei geöffneter Suche übernimmt der ::after-Streifen die (nach unten
   verschobene) Trennlinie – die Linie an der Bar würde sonst doppelt wirken. */
.dz-header.is-search-open .dz-header__bar {
    border-bottom-color: transparent;
}

/* ---------- Logo – immer exakt mittig (unabhängig von den Seiten) ---------- */
.dz-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Vertikal auf die Mitte des Inhaltsstreifens (zwischen ungleichem oberen/
       unteren Innenabstand) ausrichten statt auf die Mitte der Gesamt-Box –
       so bleibt das Logo bündig mit den Icons, egal wie pt/pb gesetzt sind. */
    transform: translate(-50%, calc(-50% + (var(--dz-header-pt) - var(--dz-header-pb)) / 2));
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.dz-header__logo img,
.dz-header__logo svg {
    height: 26px;
    width: auto;
    display: block;
}

.dz-header__wordmark {
    font-family: var(--font-heading, "League Spartan", sans-serif);
    font-weight: var(--fw-semibold, 600);
    font-size: 26px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-black, #000);
    line-height: 1;
}

/* ---------- Mixtape-Icon (Button-Optik) ---------- */
.dz-header__mixtape {
    order: 0;                         /* Mobile: linke Seite */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;                      /* Tap-Target, ohne sichtbaren Rahmen */
    height: 34px;
    color: var(--c-black, #000);
    text-decoration: none;
    transition: color .2s ease;
}

.dz-header__mixtape:hover {
    color: var(--c-purple-credit, #903DFC);
}

/* ---------- Mobile-Menü-Button (Icon aus dem Theme) ----------
   Der Hamburger kommt aus dem Plugin „dazzletic-mega-menu" (drei <span>-Linien).
   Er wird per JS in die Header-Leiste (.dz-header__bar) verschoben und hier
   durch das Theme-Icon assets/img/mobile-menu.svg ersetzt.
   Das SVG ist eine Rastergrafik → als Hintergrundbild (keine Einfärbung nötig).
   Beide Orte abgedeckt (Header-Leiste bzw. Fallback in der Nav); der
   2-Klassen-Selektor überschreibt das Plugin-CSS unabhängig von der
   Stylesheet-Reihenfolge. */
.dz-header__bar .wpmm-hamburger,
.wpmm-nav .wpmm-hamburger {
    width: 30px;
    height: 30px;
    background: url("../img/mobile-menu.svg") center / contain no-repeat;
}

.dz-header__bar .wpmm-hamburger__line,
.wpmm-nav .wpmm-hamburger__line {
    display: none;
}

/* In der Header-Leiste rechts neben der Suche einordnen (Mobile/Tablet).
   Mixtape bleibt links; die Suche schiebt sich per auto-Margin mit dem
   Hamburger nach rechts. Der Hamburger steht als letztes Flex-Element. */
.dz-header__bar .wpmm-hamburger {
    order: 2;
    flex: 0 0 auto;
}

.dz-header__search {
    margin-left: auto;
}

.dz-header__mixtape svg {
    display: block;
    width: 24px;
    height: auto;
}

/* ---------- Suche ---------- */
.dz-header__search {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Mobile: nur die Lupe zeigen, das Textfeld ist eingeklappt */
.dz-header__search .ds-search-wrapper {
    position: relative;
}

.dz-header__search #ds-search-icon {
    position: static;                 /* aus der Pille lösen → reines Icon */
    cursor: pointer;
    display: inline-flex;
}

.dz-header__search #ds-search-input {
    display: none;                    /* Mobile eingeklappt */
}

/* Mobile: Suche geöffnet.
   Die geklickte Lupe (#ds-search-icon) bleibt an ihrem Platz in der Bar –
   es klappt nur das Eingabefeld als Vollbreite-Zeile direkt unter der Bar
   auf, und zwar OHNE eigenes Lupen-Symbol.
   Damit das Feld über die ganze Header-Breite laufen kann, lösen wir den
   Positionierungs-Anker vom kleinen .ds-search-wrapper (Icon-Box) auf die
   relative .dz-header; das Icon selbst bleibt dabei statisch in der Bar. */
.dz-header.is-search-open .dz-header__search .ds-search-wrapper {
    position: static;
}

.dz-header.is-search-open #ds-search-input {
    display: block;
    position: absolute;
    left: var(--space-gutter, 16px);
    right: var(--space-gutter, 16px);
    top: calc(100% - 2px);
    width: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 16px;                          /* kein linker Icon-Platz nötig */
    background: var(--c-white, #fff);
    border: var(--bw-1, 1px) solid var(--c-black, #000);   /* abgerundeter Rahmen → klar als Suchfeld erkennbar */
    border-radius: var(--r-md, 30px);
    font: inherit;
    z-index: 20;
}

.dz-header.is-search-open #ds-search-input:focus {
    outline: none;
}

/* Weißer Streifen hinter dem (eingerückten) Suchfeld: verhindert, dass im
   Abstand zur Bar oder seitlich neben dem Feld Seiteninhalte durchscheinen.
   Liegt hinter dem Feld (z-index 20); die Ergebnis-Overlay (weit höherer
   z-index) deckt den unteren Teil ab, sobald Treffer angezeigt werden. Bei
   offenem, aber leerem Feld bleibt so die Trennlinie unten sichtbar. */
.dz-header.is-search-open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 64px;
    background: var(--c-white, #fff);
    border-bottom: var(--bw-1, 1px) solid var(--c-neutral-2, #E4E4E4);
    z-index: 19;
}

/* ============================================================
   DESKTOP  (ab 981px – wie Mega-Menu)
   ============================================================ */
@media (min-width: 981px) {
    /* Symmetrische Abstände; Trennlinie und Content-Abstand sind reine
       Mobile-Vorgaben. Logo-Korrektur wird durch pt = pb automatisch 0.
       Seitlich bleibt --dz-header-px 0: den Gutter liefert bereits die
       dz-section des Theme-Builder-Headers – ein zweiter würde die Leiste
       beidseitig einrücken (Header schmaler als Hero & Co.). */
    .dz-header {
        --dz-header-pt: 16px;
        --dz-header-pb: 16px;
        --dz-header-gap: 0px;
    }

    .dz-header__bar {
        justify-content: flex-end;    /* Logo mittig (absolut), Rest rechts */
        gap: 16px;
        min-height: 72px;
        border-bottom: 0;
    }

    .dz-header__logo img,
    .dz-header__logo svg { height: 32px; }
    .dz-header__wordmark { font-size: 32px; }

    /* Suche als sichtbare Pille, Mixtape rechts daneben */
    .dz-header__search { order: 1; margin-left: 0; }  /* Rechts-Ausrichtung via flex-end */
    .dz-header__mixtape { order: 2; width: 48px; height: 40px; }

    .dz-header__search .ds-search-wrapper { width: clamp(220px, 24vw, 320px); }
    .dz-header__search #ds-search-icon { position: absolute; }  /* zurück in die Pille (left/top aus search.css) */
    .dz-header__search #ds-search-input { display: block; }
}

/* ============================================================
   SEHR SCHMAL  (≤360px)
   Wird der Header so schmal, dass sich das (mittig sitzende) Logo
   und die Symbole überlagern würden, blenden wir das Mixtape-Icon
   aus und setzen das Logo nach links – so bleibt genug Platz für
   Suche + Hamburger rechts.
   Der Breakpoint hängt von der tatsächlichen Logo-Breite ab und
   kann bei Bedarf angepasst werden.
   ============================================================ */
@media (max-width: 360px) {
    .dz-header__mixtape {
        display: none;
    }

    .dz-header__logo {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        margin-right: auto;   /* Logo links, Icons rechts gebündelt */
    }
}