/*
 * ========================================================================
 * MWD Core Plugin: Definitive Breakpoint & Mobile Menu Overlay Styles
 * Finale, durchsetzungsstarke Version
 * ========================================================================
 */

/*
 * TEIL 1: Den Umbruchpunkt erzwingen (Desktop vs. Mobile Ansicht)
 */

.mwd-custom-breakpoint-active .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
}
.mwd-custom-breakpoint-active .wp-block-navigation__responsive-container {
    display: none;
}

/*
 * TEIL 2: Das Styling für das geöffnete Menü-Overlay definieren
 */

/* Das Haupt-Overlay, wenn das Menü geöffnet ist (.is-menu-open) */
body.mwd-custom-breakpoint-active .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important; /* Sehr hoher z-index für das Menü */
    background-color: var(--wp--preset--color--base, white) !important;
    color: var(--wp--preset--color--contrast, white) !important;
    padding: 1.5rem !important;
    box-sizing: border-box !important;
}

/* Den inneren Dialog-Bereich zentrieren */
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__responsive-dialog {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Den "Schließen"-Button oben rechts positionieren */
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
}

/* Den Container für die Menüpunkte (die <ul>-Liste) korrekt formatieren */
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
    font-size: var(--wp--preset--font-size--large, 1.25rem) !important;
    text-align: center !important;
}
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__container .wp-block-navigation-link {
    color:var(--wp--preset--color--white) !important;
}
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__container .wp-block-navigation-link a {
    padding:5px !important;
    text-decoration: none !important;
    transition: all 0.5s;
}
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__container .wp-block-navigation-link a:hover {
    color: var(--wp--preset--color--base) !important;
    background-color: var(--wp--preset--color--white) !important;
}
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__responsive-container-close {
    color:var(--wp--preset--color--white) !important;
    z-index:9999999;
}
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation__responsive-container-close svg {
    width:40px;
    height:40px;
}

.wp-block-navigation-item {
    transition:all 0.5s;
}

.wp-block-navigation-item a {
    text-decoration:none;
    padding:3px;
    transition:all 0.5s;
}
.wp-block-navigation-item:hover{
    background-color: var(--wp--preset--color--base);
}
.wp-block-navigation-item:hover a{
    color:var(--wp--preset--color--white) !important;
}
/* Abstand zwischen den einzelnen Menüpunkten */
body.mwd-custom-breakpoint-active .is-menu-open .wp-block-navigation-item {
    margin-bottom: 1.2em !important;
}


/*
 * TEIL 3: NEU - Z-Index-Konflikt mit dem Slider beheben
 * =================================================================
 */

/*
 * Diese Regel sorgt dafür, dass alle Swiper-Slider einen niedrigeren
 * z-index als unser Menü haben. Der .swiper-Selektor ist Standard
 * für die Swiper.js-Bibliothek.
*/
.has-modal-open {
    margin-top:0 !important;
}
.has-modal-open main {
    opacity:0 !important
}