/**
 * Einfaches Dropdown-Menü CSS
 *
 * Klassisches Dropdown-Menü als Alternative zum Mega-Menü.
 * Wird geladen wenn im Customizer "Einfaches Dropdown-Menü" gewählt ist.
 *
 * Level 1: Horizontale Hauptnavigation
 * Level 2: Einfaches Dropdown (vertikal)
 * Level 3: Flyout nach rechts
 *
 * @package Stadt_Dorsten_WordPress_Theme
 */

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

    /* -------------------------------------------------------
       Positionierung
       ------------------------------------------------------- */
    .menu-design-simple .main-navigation li {
        position: relative;
    }

    /* -------------------------------------------------------
       Level 2 – Dropdown-Panel
       ------------------------------------------------------- */
    .menu-design-simple #primary-menu > li > .navigation-level--level-2 {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10000;
        min-width: 280px;
        max-width: 340px;

        /* Layout */
        display: block;
        padding: 0;
        margin-top: 0;

        /* Optik */
        background: #fff;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
        border-top: 20px solid var(--farbe-dorsten-gruen, #80B022);

        /* Versteckt */
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

        list-style: none;
    }

    /* Dropdown ANZEIGEN bei Hover */
    .menu-design-simple #primary-menu > li:hover > .navigation-level--level-2,
    .menu-design-simple #primary-menu > li:focus-within > .navigation-level--level-2 {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* -------------------------------------------------------
       Level 2 Items
       ------------------------------------------------------- */
    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2 {
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2:last-child {
        border-bottom: none;
    }

    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link {
        display: block;
        padding: 10px 18px;
        font-size: 0.95em;
        font-weight: 500;
        color: var(--farbe-dorsten-grau, #575756);
        text-decoration: none;
        line-height: 1.4;
        transition: background-color 0.15s ease, color 0.15s ease;
        white-space: normal;
    }

    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link:hover,
    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2 > .navigation-link:focus {
        background-color: var(--farbe-dorsten-hellgruen-bg, #f2f6ea);
        color: var(--farbe-dorsten-gruen, #80B022);
    }

    /* Pfeil für Items mit Level-3 Untermenü */
    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2.menu-item-has-children > .navigation-link::after {
        content: '\f105'; /* fa-angle-right */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8em;
        color: var(--farbe-dorsten-hellgrau, #9d9d9c);
        transition: color 0.15s ease;
    }

    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2.menu-item-has-children > .navigation-link {
        position: relative;
        padding-right: 35px;
    }

    .menu-design-simple #primary-menu .navigation-level--level-2 > .navigation-item--level-2.menu-item-has-children > .navigation-link:hover::after {
        color: var(--farbe-dorsten-gruen, #80B022);
    }

    /* -------------------------------------------------------
       Level 3 – Flyout nach rechts
       ------------------------------------------------------- */
    .menu-design-simple #primary-menu .navigation-level--level-3 {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 10001;
        min-width: 250px;
        max-width: 320px;

        display: block;
        padding: 0;
        margin: 0;
        margin-left: -1px;

        background: #fff;
        box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.10);
        border-top: none;
        border-left: none;

        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(6px);
        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

        list-style: none;
    }

    /* Level 3 anzeigen bei Hover */
    .menu-design-simple #primary-menu .navigation-item--level-2:hover > .navigation-level--level-3,
    .menu-design-simple #primary-menu .navigation-item--level-2:focus-within > .navigation-level--level-3 {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    /* -------------------------------------------------------
       Level 3 Items
       ------------------------------------------------------- */
    .menu-design-simple #primary-menu .navigation-level--level-3 > .navigation-item--level-3 {
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .menu-design-simple #primary-menu .navigation-level--level-3 > .navigation-item--level-3:last-child {
        border-bottom: none;
    }

    .menu-design-simple #primary-menu .navigation-level--level-3 > .navigation-item--level-3 > .navigation-link {
        display: block;
        padding: 8px 16px;
        font-size: 0.9em;
        font-weight: 400;
        color: var(--farbe-dorsten-grau, #575756);
        text-decoration: none;
        line-height: 1.4;
        transition: background-color 0.15s ease, color 0.15s ease;
        white-space: normal;
    }

    .menu-design-simple #primary-menu .navigation-level--level-3 > .navigation-item--level-3 > .navigation-link:hover,
    .menu-design-simple #primary-menu .navigation-level--level-3 > .navigation-item--level-3 > .navigation-link:focus {
        background-color: var(--farbe-dorsten-hellgruen-bg, #f2f6ea);
        color: var(--farbe-dorsten-gruen, #80B022);
    }

    /* -------------------------------------------------------
       Level 4+ ausblenden (nicht unterstützt)
       ------------------------------------------------------- */
    .menu-design-simple #primary-menu .navigation-level--level-3 ul {
        display: none !important;
    }

    /* -------------------------------------------------------
       Level-1 Hover-Akzent (grüner Unterstrich)
       ------------------------------------------------------- */
    .menu-design-simple #primary-menu > .navigation-item--level-1 > .navigation-link {
        position: relative;
    }

    .menu-design-simple #primary-menu > .navigation-item--level-1 > .navigation-link::after {
        content: none;
    }

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

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

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

/* =======================================================
   PRINT – Dropdown ausblenden
   ======================================================= */
@media print {
    .menu-design-simple .navigation-level--level-2,
    .menu-design-simple .navigation-level--level-3 {
        display: none !important;
    }
}