/* Desktop menu */

.is-style-dropdown .wp-block-menu > .menu .menu-item > a {
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.25s ease-out;
}

.is-style-dropdown .wp-block-menu > .menu .menu-item > a:visited {
    color: var(--wp--preset--color--neutral-dark);
}

.is-style-dropdown .wp-block-menu .menu .menu-item > a:hover {
    color: var(--wp--preset--color--neutral-contrast);
}

.is-style-dropdown .wp-block-menu > .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--50);
    position: relative;
}

.is-style-dropdown.has-text-align-right .wp-block-menu > .menu {
    justify-content: flex-end;
}

.is-style-dropdown.has-text-align-right .wp-block-menu > .menu > .menu-item > .sub-menu {
    text-align: left;
}

/* Dropdown menu button */

.is-style-dropdown .wp-block-menu > .menu > .menu-item-has-children a:after {
    transition: transform 1ms ease-out;
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item-has-children:has(>.sub-menu:hover) > a:after,
.is-style-dropdown .wp-block-menu > .menu > .menu-item-has-children:focus-within > a:after,
.is-style-dropdown .wp-block-menu > .menu > .menu-item-has-children > a:focus:after,
.is-style-dropdown .wp-block-menu > .menu > .menu-item-has-children > a:hover:after {
    transform: rotateY(180deg);
    transition-duration: 0.5s;
}

/* Dropdown menu */

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

.is-style-dropdown .wp-block-menu > .menu > .menu-item > .sub-menu {
    animation: dropdown-menu-reveal 0.5s ease-out forwards;
    background-color: var(--wp--preset--color--base, inherit);
    border: 1px solid #e0e0e0;
    display: none;
    flex-direction: column;
    margin-block-start: var(--wp--preset--spacing--30);
    min-width: 8em;
    position: absolute;
    z-index: 10;
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item > .sub-menu:before {
    bottom: 100%;
    background-color: transparent;
    border: 1px solid transparent;
    content: '';
    display: block;
    height: var(--wp--preset--spacing--30);
    left: 0;
    position: absolute;
    width: 100%;
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item-has-children > a::after {
    content: "▼";
    display: inline-block;
    margin-left: 1ch;
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item > .sub-menu > .menu-item a {
    color: var(--wp--preset--color--neutral-darkest);
    display: block;
    padding: 0.5em;
    transition: all 0.25s ease-out;
    transition-property: background-color, color;
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item > .sub-menu > .menu-item a:visited {
    color: var(--wp--preset--color--neutral-dark);
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item > .sub-menu > .menu-item a:hover {
    background-color: var(--wp--preset--color--neutral-lightest);
    color: var(--wp--preset--color--neutral-contrast);
}

.is-style-dropdown .wp-block-menu > .menu > .menu-item > .sub-menu > .menu-item a:active {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    transition-duration: 32ms;
}

.is-style-dropdown .wp-block-menu > .menu .menu-item.current_page_parent > a,
.is-style-dropdown .wp-block-menu > .menu .menu-item.current-page-parent > a {
    text-decoration-color: var(--wp--preset--color--neutral);
}

.is-style-dropdown .wp-block-menu > .menu .menu-item.current-menu-item > a {
    text-decoration-color: currentColor;
}

.is-style-dropdown .wp-block-menu > .menu .menu-item.current-menu-item.menu-item-has-children > a {
    cursor: default;
}

.is-style-dropdown .wp-block-menu > .menu .menu-item.current-menu-item:not(.menu-item-has-children) > a {
    pointer-events: none;
}

@keyframes dropdown-menu-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.25em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile menu */

.menu-mobile-toggle,
.menu-mobile-close {
    appearance: none;
    background-color: var(--wp--preset--color--neutral-lightest);
    border: none;
    border-radius: 10em;
    color: var(--wp--preset--color--contrast);
    display: inline-block;
    font-size: var(--wp--preset--font-size--medium);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    transition: all 0.25s ease-out;
    transition-property: background-color, color;
}

.menu-mobile-toggle:hover,
.menu-mobile-close:hover {
    background-color: var(--wp--preset--color--neutral-light);
}

.menu-mobile-toggle:active,
.menu-mobile-close:active {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    transition-duration: 32ms;
}

.menu-mobile-dialog > form[method="dialog"] {
    text-align: end;
}

.menu-mobile-dialog {
    animation: menu-reveal 0.25s ease-out forwards;
    border-radius: 1em;
    border-width: 0;
    padding: 0;
}

.menu-mobile-dialog .wp-block-menu {
    font-size: var(--wp--preset--font-size--medium);
    padding: var(--wp--preset--spacing--50);
}

.menu-mobile-dialog .wp-block-menu > .menu > .menu-item {
    margin-block-end: var(--wp--preset--spacing--40);
}

.menu-mobile-dialog .wp-block-menu > .menu > .menu-item > a {
    font-weight: 600;
}

.menu-mobile-dialog .wp-block-menu > .menu > .menu-item:last-of-type {
    margin-block-end: 0;
}

.menu-mobile-dialog .wp-block-menu > .menu > .menu-item .sub-menu {
    padding: 0 var(--wp--preset--spacing--30);
}

.menu-mobile-dialog::backdrop {
    background-color: var(--wp--preset--color--contrast);
    opacity: 0.5;
}

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