/* kein Block-Abstand (blockGap) zwischen Header und Inhalt – auf der Startseite war er schon 0, auf Unterseiten entstand ein weißer Streifen */
.wp-site-blocks > header.wp-block-template-part + * {
    margin-block-start: 0;
}

@media (min-width: 1150px) {
    header {
        z-index: 10 !important;
        position: relative;
    }

    nav>div {
        padding-top: 1.2rem !important;
        max-width: 800px !important;
        margin: 0 auto !important;
    }

    .curadies-menu-logo {
        margin-bottom: -10px !important;
    }

    .medic-nav .wp-block-navigation__submenu-container {
        /* core/list lädt auf Seiten mit Listen-Block global ul{box-sizing:border-box} */
        box-sizing: content-box !important;
        min-width: 300px !important;
        /*
         * Höhe folgt der Anzahl der Menüpunkte. Abstand letzter Punkt → Welle = Abstand Grafik-Oberkante → Oberpunkt;
         * Textbreite so, dass rechts derselbe Abstand zur Grafik bleibt wie links.
         */
        --medic-submenu-padding-bottom: 51px;
        --medic-submenu-item-width: 161px;
        padding-bottom: var(--medic-submenu-padding-bottom);
        padding-top: 4.7rem;
        padding-left: 5.2rem;
        margin-top: -3.5rem;
        margin-left: -4.1rem;
        z-index: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    /*
     * Hintergrundgrafik als 9-Slice: Ecken oben und Welle unten bleiben in Originalgröße,
     * nur der Mittelteil (Seitenränder + Fläche) wächst mit der Höhe. Breite = SVG-Breite (308px).
     */
    .medic-nav .wp-block-navigation__submenu-container::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 10px;
        top: 7px;
        bottom: 7px;
        width: 308px;
        box-sizing: border-box;
        border-style: solid;
        border-width: 20px 20px 50px 20px;
        border-image: url(/wp-content/themes/medic-theme/assets/images/untermenue-hintergrund.svg) 20 20 50 20 fill stretch;
        pointer-events: none;
    }

    /* erstes Menü: Grafik sitzt 7px höher und 5px weiter rechts, daher eigene Maße */
    .medic-nav li:nth-child(1) .wp-block-navigation__submenu-container {
        --medic-submenu-padding-bottom: 65px;
        --medic-submenu-item-width: 171px;
    }

    .medic-nav li:nth-child(1) .wp-block-navigation__submenu-container::after {
        left: 15px;
        top: 0;
        bottom: 14px;
    }

    #modal-1-content>ul>li a {
        z-index: -1 !important;
    }

    #modal-1-content>ul>li:hover a {
        z-index: 1 !important;
    }


    .medic-nav .wp-block-navigation__submenu-container>li {
        max-width: var(--medic-submenu-item-width);
    }

    .medic-nav .wp-block-navigation__submenu-container>li>a {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: .3rem !important;
        padding-bottom: .3rem !important;
    }

    .wp-block-pages-list__item .has-child>a {
        font-size: var(--wp--preset--font-size--small) !important;
    }

    .medic-nav:last-child .wp-block-navigation__submenu-container {
        right: unset !important;
    }

    ul.wp-block-navigation__submenu-container::before {
        content: "";
        position: absolute !important;
        left: 4rem !important;
        /* oben und unten gleicher Versatz zum Innenabstand (.5rem) → Strich endet bündig mit dem letzten Punkt */
        top: calc(4.7rem + .5rem) !important;
        bottom: calc(var(--medic-submenu-padding-bottom) + .5rem) !important;
        width: 2px;
        background: var(--wp--preset--color--contrast);
    }

}


/* mobiles Layout eher auslösen */
@media (max-width: 1150px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
}

@media (max-width: 1150px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }

    .wp-block-site-logo {
        order: 0 !important;
    }

    /* Logos in der mobilen Ansicht kleiner als auf dem Desktop (dort 210px / 75px), fluid nach Bildschirmbreite */
    .wp-block-site-logo img {
        width: clamp(130px, 36vw, 170px) !important;
        height: auto;
    }

    header .curadies-menu-logo {
        flex-basis: clamp(46px, 13vw, 60px) !important;
    }

    nav {
        order: 2 !important;
        justify-content: flex-end !important;
        max-width: 24px !important;
    }

    header>div>div>figure {
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
        display: flex !important;
        order: 1 !important;
    }

    /* volle Höhe; die Menüleiste liegt darüber, unten bleibt Platz für sie */
    nav>.wp-block-navigation__responsive-container {
        max-width: 100% !important;
        padding-top: 2.5rem !important;
        padding-bottom: 7rem !important;
        background-color: var(--wp--preset--color--accent-2) !important;
    }

    body:has(.wp-block-navigation__responsive-container.is-menu-open) .on-screen-menu {
        z-index: 100001;
    }

    /*
     * Beim Öffnen sperrt WordPress das Scrollen; die Scrollleiste (Desktop-Browser) verschwindet, die Seite
     * wird breiter und das Logo samt Header wächst. Platz der Scrollleiste immer freihalten (nicht nur bei
     * offenem Menü), sonst ändert sich beim Öffnen auch die Einheit vw, an der die Logo-Größe hängt.
     */
    html {
        scrollbar-gutter: stable;
    }

    /* freigehaltener Streifen bei offenem Menü in Menüfarbe statt weiß */
    html.has-modal-open {
        background-color: var(--wp--preset--color--accent-2);
    }

    /* Hauptpunkte: 48px hohe Tippfläche, feine Trennlinien */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        gap: 0 !important;
        width: 100%;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
        width: 100%;
        border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        box-sizing: border-box;
        padding-block: .7rem !important;
    }

    /* Chevron zeigt, dass der Punkt aufklappbar ist; dreht sich beim Öffnen */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        content: "";
        flex: none;
        width: .5rem;
        height: .5rem;
        margin-right: .35rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-25%) rotate(45deg);
        transition: transform .2s ease;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.is-submenu-open > .wp-block-navigation-item__content::after {
        transform: translateY(25%) rotate(-135deg);
    }

    /* Unterpunkte: kompakt, mit senkrechter Linie wie im Desktop-Dropdown, Luft zum nächsten Hauptpunkt */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        display: none;
        width: auto;
        margin: -.2rem 0 .9rem .1rem !important;
        padding: .1rem 0 .1rem 1rem !important;
        border-left: 2px solid var(--wp--preset--color--contrast) !important;
        gap: 0 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.is-submenu-open > .wp-block-navigation__submenu-container {
        display: block;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: .4rem 0 !important;
    }

    /* Öffnen/Schließen: 44px Tippfläche, Icon bleibt an seiner Position */
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close {
        padding: 10px !important;
        margin: -10px !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .current-menu-item>.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .current_page_item>.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .is-current-url>.wp-block-navigation-item__content {
        color: var(--wp--preset--color--accent, currentColor);
        font-weight: 600;
    }

    .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor>.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .current_page_ancestor>.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .is-url-ancestor>.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .is-submenu-open>.wp-block-navigation-item__content {
        color: var(--wp--preset--color--accent, currentColor);
    }

    /*
     * TEST: Header (Logo) bleibt bei offenem Menü sichtbar, das Menü öffnet darunter.
     * Das Burger-Icon wird zum X und schließt das Menü (siehe assets/js/mobile-menu.js).
     * Zum Zurücknehmen diesen Block und den markierten Teil im JS entfernen.
     */
    body:has(.wp-block-navigation__responsive-container.is-menu-open) header.wp-block-template-part {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100001;
        background-color: var(--wp--preset--color--base);
    }

    nav > .wp-block-navigation__responsive-container.is-menu-open {
        top: var(--medic-header-height, 97px) !important;
        padding-top: 1.5rem !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    /* WordPress hält oben Platz für das Schließen-X frei – das sitzt hier im Header */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 0 !important;
    }

    .wp-block-navigation__responsive-container-open {
        position: relative;
    }

    body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open svg {
        visibility: hidden;
    }

    body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::before {
        content: "";
        position: absolute;
        inset: 10px;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}