/* Header */
header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    -webkit-transition: top 0.6s ease-in-out;
    -o-transition: top 0.6s ease-in-out;
    transition: top 0.6s ease-in-out; /* Sanfte Bewegung */
}

body.admin-bar header {
    top: 32px;

    &.header-scrolledUp {
        top: 32px !important;
    }
}

/* logo */
header .wp-block-site-logo {
    transition: all .3s ease-in-out;
    max-width: 250px;

    /* mobile style */
    @media ( max-width: 1200px ) {
        max-width: 150px;
    }
}



/* Header Button Hover Effect */
.header-button .wp-block-button__link:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent) !important;
  }
  
  /* Underline the current menu item */
  .wp-block-navigation .current-menu-item > a, .wp-block-navigation .current-menu-ancestor > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

/* header transparent */
.header-transparent {
    transition: background-color .3s ease-in-out, border-bottom .3s ease-in-out;
    background-color: transparent !important;
    border-bottom: 2px solid var(--wp--preset--color--base, #fff) !important;
}

header.header-scrolledUp {
    .header-transparent {
        background-color: var(--wp--preset--color--contrast, #000) !important;
        border-bottom: 2px solid var(--wp--preset--color--contrast, #000) !important;
    }
}

.wp-site-blocks > header:has(.header-transparent) {
    position: fixed;
}


/* change mobile breakpoint to 1100px */
@media ( min-width: 1100px ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }
}
@media ( min-width: 600px ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }
}

.hauptmenu {
    /* navigation button style */
    .wp-block-navigation__responsive-container-open {
        background-color: var(--wp--preset--color--base, #fff) !important;
        color: var(--wp--preset--color--contrast, #000) !important;
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 10px;
        padding: .3lh .4lh;
        font-weight: bold;

        &:after {
            content: "Menü";
            text-transform: uppercase;
            font-size: .9em;
            font-weight: bold;
        }
    }

    /* mobile style */
    @media ( max-width: 1099px ) {
        &.wp-block-navigation.items-justified-right {
            --navigation-layout-justification-setting: flex-start;
            --navigation-layout-justify: flex-start;
        }

        .wp-block-navigation__responsive-container.is-menu-open {
            padding-top: 2rem;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
            padding-top: calc(4rem + 24px);
        }
    }


    /* submenu style */
    .wp-block-navigation__submenu-container {
        .wp-block-navigation-link {
            > .wp-block-navigation-item__content {
                display: flex;
                gap: 6px;
                align-items: center;
                padding-left: 0;

                &:before {
                    content: '';
                    background-image: url(../svg/arrow-icon.svg);
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    width: 14px;
                    width: .6lh;
                    height: 14px;
                    height: .6lh;
                    min-width: .6lh;
                    display: inline-block;
                    transition: transform 0.3s ease-in-out;
                }
            }
        }
    }
    


    /* desktop style */
    @media ( min-width: 1100px ) {
        .hauptmenu.wp-block-navigation {
            --submenu-height: auto;            
            /* submenu overlay */
            &:before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 0;
                background-color: #000;
                pointer-events: none;
                z-index: 1000;
                transition-property: opacity, display, translate, height, min-height;
                transition-duration: .3s;
                transition-timing-function: ease;
                transition-behavior: allow-discrete;

                @starting-style {
                    display: block;
                    height: 0;
                }
            }   

            &:has(button[aria-expanded="true"]) {
                &:before {
                    min-height: 50vh;
                    height: var(--submenu-height);
                }
            }
            

        } 

        .hauptmenu.wp-block-navigation .wp-block-navigation-item, .wp-block-buttons {
            z-index: 1200;

            &:has(button[aria-expanded="true"]) {
                z-index: 1111;

                > .wp-block-navigation__submenu-container {
                    min-width: min(100vw, 500px);
                    padding-top: 0.5rem;
                    &:before {
                        height: 40vh;
                    }
                }

                > a {
                    position: relative;
                    z-index: 1150;
                }
            }
        }
    }

    
    @media ( min-width: 1100px ) and (max-width: 1250px) {
        .hauptmenu.wp-block-navigation { font-size: 1rem !important;     flex-wrap: nowrap;
            --navigation-layout-wrap: nowrap; }
    }
}

/* set submenu on top of the menu */
.hauptmenu .wp-block-navigation__responsive-container {

    .wp-block-navigation__responsive-dialog {
        margin-top: 0 !important;
    }
}

.ontop {
    position: relative;
    z-index: 500000;
}