.wp-block-menu {
    --menu-gap: 2em;
}

.wp-block-menu a[href] {
    text-decoration-color: transparent;
}

.wp-block-menu a[href]:focus,
.wp-block-menu a[href]:hover {
    text-decoration-color: currentcolor;
}

.wp-block-menu > .menu {
    align-items: flex-start;
}

.wp-block-menu > .menu > .menu-item > .sub-menu {
    list-style: none;
    padding-inline-start: 0;
}

.wp-block-menu .menu-item > a {
    text-underline-offset: 0.35em;
    text-decoration-thickness: 1px;
    font-family: var(--wp--preset--font-family--heading);
}

.wp-block-menu .current-menu-ancestor > a,
.wp-block-menu .current-menu-parent > a,
.wp-block-menu .current-menu-item > a {
    text-decoration-color: var(--wp--preset--color--primary);
    font-style: italic;
}

.wp-block-menu .menu-item-has-children {
    position: relative;
}

.wp-block-menu .menu-item-has-children > a {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.wp-block-menu .wp-block-menu-dialog {
    background-color: var(--wp--preset--color--contrast);

}

.wp-block-menu--submenu-toggle .submenu-toggle-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.wp-block-menu.submenu-no-collapse {
    --submenu-gap: 1.5rem;
    --submenu-top: 1.5rem;
}
.wp-block-menu.submenu-no-collapse > .menu {
    align-items: unset;
}
.wp-block-menu.submenu-no-collapse > .menu > li > a {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 400;
}
.wp-block-menu.submenu-no-collapse .current-menu-ancestor > a, .wp-block-menu.submenu-no-collapse .current-menu-parent > a, .wp-block-menu.submenu-no-collapse .current-menu-item > a {
    text-decoration-color: currentColor;
    font-style: normal;
}

@media screen and (max-width: 767px) {
    .wp-block-menu--submenu-toggle .menu-item-has-children .submenu-toggle[aria-expanded=true]+.sub-menu {
        display: flex;
        flex-direction: column;
        gap: var(--menu-gap, 1rem);
        margin-top: var(--menu-gap, 1rem);
        padding-inline-start: 1.5rem !important;
        padding-block-start: 0;
    }
}

@media screen and (min-width: 768px) {
    .wp-block-menu:not(.submenu-no-collapse) .menu-item-has-children > a::after {
        background-color: currentcolor;
        content: '';
        display: block;
        height: 1.2em;
        mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3982 15.6629C12.1785 15.8826 11.8224 15.8826 11.6027 15.6629L5.86788 9.92804C5.64821 9.70837 5.64821 9.35227 5.86788 9.13259L6.13305 8.86739C6.35271 8.64772 6.70887 8.64772 6.92854 8.86739L12.0005 13.9393L17.0724 8.86739C17.2921 8.64772 17.6482 8.64772 17.8679 8.86739L18.1331 9.13259C18.3527 9.35227 18.3527 9.70837 18.1331 9.92804L12.3982 15.6629Z' fill='black'/%3E%3C/svg%3E%0A");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
        width: 1.2em;
    }

    .wp-block-menu:not(.submenu-no-collapse) .menu-item-has-children .sub-menu {
        background-color: var(--wp--preset--color--contrast);
        border: 1px solid var(--wp--preset--color--gold-light);
        color: var(--wp--preset--color--base);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        left: 0;
        min-width: 15ch;
        opacity: 0;
        padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) !important;
        position: absolute;
        top: -100vh;
        transition: opacity 0.5s ease;
        visibility: hidden;
        width: 100%;
        z-index: 10;
    }

    .wp-block-menu:not(.submenu-no-collapse) .menu-item-has-children:hover .sub-menu {
        margin-top: 0rem;
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .stretch-menu {
        align-items: stretch;
        & > .menu {
            align-items: stretch;
            & > li {
                display: flex;
                & > a {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}