.wp-block-menu {
    line-height: 1.25;
}

.wp-block-menu a {
    text-decoration: none;
}

.wp-block-menu a:hover {
    text-decoration: underline;
    color: currentColor;
}

.wp-block-menu[data-location="header"] {
    --menu-gap: var(--wp--preset--spacing--40);
}

.wp-block-menu[data-location="header"],
.wp-block-menu[data-location="header"] > .menu,
.wp-block-menu[data-location="header"] > .menu > .menu-item,
.wp-block-menu[data-location="header"] > .menu > .menu-item > a {
    align-self: stretch;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item,
.wp-block-menu[data-location="header"] > .menu > .menu-item > a {
    display: flex;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item > a {
    align-items: center;
}

.wp-block-menu-dialog {
    background-color: var(--wp--preset--color--neutral-light);
    padding: 0;
}

.wp-block-menu--overlay[data-location="header"] .menu {
    margin-top: var(--wp--preset--spacing--50);
}

.wp-block-menu-close {
    right: var(--wp--style--root--padding-right);
    top: var(--wp--preset--spacing--50);
}

.wp-block-menu--submenu-toggle {
    --submenu-top: var(--wp--preset--spacing--20);
}

.wp-block-menu--submenu-toggle .sub-menu {
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    padding-inline-start: var(--wp--preset--spacing--30);
}

.wp-block-menu--submenu-toggle .menu-item-has-children > .submenu-toggle[aria-expanded=true] + .sub-menu {
    display: flex;
}

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

.wp-block-menu > .menu > .menu-item-has-children {
    --margin: var(--wp--preset--spacing--40);
    --spacing: var(--wp--preset--spacing--40);
    --offset: calc(var(--spacing) * -1);
}

.wp-block-menu > .menu > .menu-item-has-children > a {
    position: relative;
    z-index: 1;
}

.wp-block-menu > .menu > .menu-item > .sub-menu {
    --submenu-gap: var(--wp--preset--spacing--30);

    animation: reveal-submenu 0.25s ease-in-out forwards;
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--neutral);
    border-radius: var(--wp--preset--spacing--30);
    display: none;
    left: var(--offset);
    opacity: 0;
    padding: var(--spacing);
    position: absolute;
    margin-block-start: var(--margin);
    top: 100%;
    width: 225%;
}

.wp-block-menu > .menu > .menu-item:last-of-type > .sub-menu {
    left: unset;
    right: var(--offset);
}

.wp-block-menu > .menu > .menu-item-has-children:focus-within > .sub-menu,
.wp-block-menu > .menu > .menu-item > .sub-menu:focus-within,
.wp-block-menu > .menu > .menu-item > .sub-menu:hover,
.wp-block-menu > .menu > .menu-item > a:focus + .sub-menu,
.wp-block-menu > .menu > .menu-item > a:hover + .sub-menu {
    display: flex;
}

.wp-block-menu > .menu > .menu-item > .sub-menu::before {
    background-color: transparent;
    border-top-left-radius: 1rem;
    border-top-right-radius: 50%;
    bottom: 100%;
    content: '';
    height: calc(var(--margin) + 1em);
    left: 0;
    position: absolute;
    width: 100%;
}

.wp-block-menu > .menu > .menu-item:last-of-type > .sub-menu::before {
    border-top-left-radius: 50%;
    border-top-right-radius: 1rem;
}

.wp-block-menu > .menu > .menu-item-has-children:focus-within > a::after,
.wp-block-menu > .menu > .menu-item:has(> .sub-menu:focus-within) > a::after,
.wp-block-menu > .menu > .menu-item:has(> .sub-menu:hover) > a::after,
.wp-block-menu > .menu > .menu-item:has(> a:focus + .sub-menu) > a::after,
.wp-block-menu > .menu > .menu-item:has(> a:hover + .sub-menu) > a::after {
    border-top-width: 0;
    border-bottom-width: 0.4em;
}

.wp-block-menu > .menu > .menu-item-has-children > a::after {
    content: '';
    border-bottom: 0 solid currentColor;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-top: 0.4em solid currentColor;
    display: inline-block;
    height: 0;
    margin-inline-start: 0.5em;
    transition: all 0.25s ease-out;
    transition-property: border-bottom-width, border-top-width;
    width: 0;
    vertical-align: middle;
}

@keyframes reveal-submenu {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}