/**
 * Mega Menu CSS – inspiriert von dorsten.de
 *
 * Level 1: Horizontale Hauptnavigation
 * Level 2: Spaltenüberschriften im Dropdown
 * Level 3: Unterpunkte unter jeder Spalte
 *
 * @package Stadt_Dorsten_WordPress_Theme
 */

/* =======================================================
   DESKTOP MEGA MENU (ab 992px)
   ======================================================= */
@media (min-width: 992px) {

    /* -------------------------------------------------------
       Positionierungskontext: .site-header .container
       (hat max-width: var(--container-width) = Content-Breite)
       ------------------------------------------------------- */
    .header-wrapper {
        /* overflow NICHT hidden – Mega-Menü ragt heraus */
    }

    /* #masthead: static, damit es NICHT als Positionierungseltern dient */
    #masthead.site-header {
        position: static !important;
    }

    /* .container als Positionierungseltern: Content-Breite + zentriert */
    .site-header .container {
        position: relative !important;
    }

    /* Alle weiteren Zwischen-Elemente: static,
       damit absolute Kinder sich am .container orientieren */
    .site-header-inner,
    .main-navigation,
    #site-navigation,
    #primary-menu,
    #primary-menu > .navigation-item--level-1 {
        position: static !important;
    }

    /* -------------------------------------------------------
       Level 2 – Das Mega-Dropdown-Panel
       ------------------------------------------------------- */
    #primary-menu > li > .navigation-level--level-2 {
        /* Positionierung: volle Breite des #masthead (= Content-Breite) */
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;

        /* Layout: Spalten nebeneinander, max. 4 pro Zeile */
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2rem 0 !important;
        padding: 2rem var(--abstand-lg, 2.5rem) 2.5rem !important;

        /* Optik – leicht transparenter weißer Hintergrund */
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
        border-top: none !important;
        border-left: none !important;

        /* Kein Abstand zum Balken */
        margin-top: 0 !important;

        /* Standardmäßig versteckt */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(0) !important;
        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;

        /* Über allem */
        z-index: 10000 !important;
        min-width: unset !important;
        max-width: none !important;
        width: auto !important;

        /* Reset */
        list-style: none !important;
        margin: 0 !important;
    }

    /* -------------------------------------------------------
       Dropdown ANZEIGEN: .mega-menu-open Klasse (via JS)
       ------------------------------------------------------- */
    #primary-menu > li.mega-menu-open > .navigation-level--level-2 {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ALTE Hover-Regel: nur für Level-1 Items deaktivieren (NICHT für Level-2/3 innerhalb des Mega-Menüs) */
    .main-navigation #primary-menu > li:hover > ul {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Level-3 innerhalb des offenen Mega-Menüs immer sichtbar */
    .main-navigation #primary-menu > li.mega-menu-open .navigation-level--level-3 {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Mega-menu-open überschreibt die Hover-Blockierung */
    .main-navigation #primary-menu > li.mega-menu-open > ul,
    .main-navigation li.mega-menu-open:hover > ul {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* -------------------------------------------------------
       Level 2 Items – Spaltenüberschriften
       ------------------------------------------------------- */
    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 {
        flex: 0 0 25%;
        min-width: 0;
        max-width: 25%;
        padding: 0 1.5rem;
        box-sizing: border-box;
    }

    /* Erste Spalte: kein linkes Padding */
    #primary-menu .navigation-level--level-2 > .navigation-item--level-2:first-child {
        padding-left: 0;
    }

    /* Letzte Spalte: kein rechtes Padding */
    #primary-menu .navigation-level--level-2 > .navigation-item--level-2:last-child {
        padding-right: 0;
    }

    /* Keine Trennlinie zwischen Spalten (wie dorsten.de) */
    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 + .navigation-item--level-2 {
        border-left: none;
    }

    /* Level 2 Link = Spaltenheader (fett, ohne Unterlinie wie dorsten.de) */
    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link {
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #333 !important;
        font-size: 0.95em !important;
        padding: 0 0 0.75rem 0 !important;
        margin-bottom: 0.4rem;
        border-bottom: none !important;
        display: block !important;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-decoration: none !important;
        transition: color 0.2s ease;
    }

    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link:hover {
        color: var(--farbe-dorsten-gruen, #80B022) !important;
    }

    /* -------------------------------------------------------
       Level 3 Container – statisch innerhalb Level 2
       ------------------------------------------------------- */
    #primary-menu .navigation-level--level-3 {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-top: none !important;
        border-left: none !important;
        background: transparent !important;
        min-width: unset !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        /* visibility/opacity/pointer-events erbt vom Eltern-Panel */
    }

    /* -------------------------------------------------------
       Level 3 Items – Untermenü-Links
       ------------------------------------------------------- */
    #primary-menu .navigation-level--level-3 > .navigation-item--level-3 {
        margin: 0;
        padding: 0;
        display: block;
    }

    #primary-menu .navigation-level--level-3 > .navigation-item--level-3 > .navigation-link {
        font-size: 0.92em !important;
        font-weight: 400 !important;
        color: var(--farbe-dorsten-grau, #575756) !important;
        padding: 3px 0 !important;
        display: block !important;
        text-decoration: none !important;
        line-height: 1.5;
        transition: color 0.2s ease;
        border: none !important;
        border-bottom: none !important;
        background: none !important;
        white-space: normal;
    }

    #primary-menu .navigation-level--level-3 > .navigation-item--level-3 > .navigation-link:hover {
        color: var(--farbe-dorsten-gruen, #80B022) !important;
    }

    /* Level 3 Link: Icons (fa-fw) ausblenden im Mega-Menü */
    #primary-menu .navigation-level--level-3 .navigation-link i.fa-fw,
    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link i.fa-fw {
        display: none;
    }

    /* -------------------------------------------------------
       Level 4+ ausblenden (nicht im Mega-Menü)
       ------------------------------------------------------- */
    #primary-menu .navigation-level--level-3 ul {
        display: none !important;
    }

    /* -------------------------------------------------------
       Overlay hinter dem Mega-Menü (dezent, wie dorsten.de)
       ------------------------------------------------------- */
    .mega-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none;
    }

    .mega-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* -------------------------------------------------------
       Aktiver Level-1 Menüpunkt Hervorhebung
       ------------------------------------------------------- */
    #primary-menu > .navigation-item--level-1.mega-menu-open > .navigation-link {
        color: var(--farbe-dorsten-gruen, #80B022) !important;
    }

    /* Grüner Balken nur unter dem aktiven Menüpunkt */
    #primary-menu > .navigation-item--level-1 {
        position: relative;
    }

    #primary-menu > .navigation-item--level-1 > .navigation-link {
        position: relative;
    }

    /* Grüner Akzent-Balken: nur unter dem gehoverten Menüpunkt-Link */
    #primary-menu > .navigation-item--level-1 > .navigation-link::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 12px;
        background: var(--farbe-dorsten-gruen, #80B022);
        z-index: 10001;
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s ease, opacity 0.25s ease;
        pointer-events: none;
    }

    #primary-menu > .navigation-item--level-1.mega-menu-open > .navigation-link::after {
        opacity: 1;
        transform: scaleX(1);
    }

    /* &-Kästchen bei offenem Menü ebenfalls grün */
    #primary-menu > .navigation-item--level-1.mega-menu-open > .navigation-link .nav-and {
        background: var(--farbe-dorsten-gruen, #80B022) !important;
        color: #fff !important;
    }

    /* Grünes Kästchen vor Level-1 bei offenem Menü */
    .navigation-item--level-1.mega-menu-open > .navigation-link::before {
        background-color: var(--farbe-dorsten-gruen, #80B022) !important;
    }
}

/* =======================================================
   RESPONSIVITÄT
   ======================================================= */

/* Große Desktops (1400px+) */
@media (min-width: 1400px) {
    #primary-menu > li > .navigation-level--level-2 {
        padding: 2.5rem 3rem 3rem !important;
    }
}

/* Mittlere Desktops (992px-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #primary-menu > li > .navigation-level--level-2 {
        padding: 1.5rem 1.5rem 2rem !important;
    }

    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 {
        min-width: 120px;
        max-width: 25%;
        padding: 0 1rem;
    }

    #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link {
        font-size: 0.85em !important;
    }

    #primary-menu .navigation-level--level-3 > .navigation-item--level-3 > .navigation-link {
        font-size: 0.84em !important;
        padding: 2px 0 !important;
    }
}

/* =======================================================
   TASTATUR-ZUGÄNGLICHKEIT
   ======================================================= */
@media (min-width: 992px) {
    #primary-menu .navigation-level--level-2 .navigation-link:focus-visible,
    #primary-menu .navigation-level--level-3 .navigation-link:focus-visible {
        outline: 2px solid var(--farbe-dorsten-gruen, #80B022);
        outline-offset: 2px;
    }

    /* Dropdown per Tastatur erreichbar */
    #primary-menu > li.mega-menu-focus > .navigation-level--level-2 {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }
}

/* =======================================================
   PRINT – Mega-Menü ausblenden
   ======================================================= */
@media print {
    .navigation-level--level-2,
    .navigation-level--level-3,
    .mega-menu-overlay {
        display: none !important;
    }
}