.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: center;
}

.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.25em;
}

.wp-block-menu .current-menu-ancestor > a,
.wp-block-menu .current-menu-parent > a,
.wp-block-menu .current-menu-item > a {
    font-weight: 500;
}

.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 .submenu-toggle-icon svg {
    font-size: 1.125rem;
    height: 1em;
    width: 1em;
}

.wp-block-menu .wp-block-menu-dialog :not(.wp-element-button, .menu-button > a) {
    color: var(--wp--preset--color--primary) !important;
}

.wp-block-menu.submenu-no-collapse {
    --submenu-gap: 2rem;
    --submenu-top: 2rem;

    font-weight: 400;
}

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

.wp-block-menu.submenu-no-collapse > .menu > li > a {
    font-weight: 600;
}

.wp-block-menu li:not(.menu-item-has-children).menu-button > a {
    background-color: var(--wp--preset--color--contrast);
    border-radius: 50vw;
    color: var(--wp--preset--color--base);
    display: inline-block;
    font-weight: 500;
    padding: var(--wp--preset--spacing--10) calc(1.333em + 2px);
    text-decoration: none;
}

/* mobile only styles */

@media screen and (max-width: 991px) {
    .wp-block-menu .menu-item-has-children .sub-menu {
        display: flex;
        flex-direction: column;
        gap: var(--menu-gap, 1rem);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding-bottom: 0;
        padding-inline-start: 1.5rem !important;
        padding-top: 0;
        transition: all 0.3s ease;
        transition-property: visibility, opacity, max-height, padding;
        visibility: hidden;
    }

    .wp-block-menu--submenu-toggle .menu-item-has-children .submenu-toggle[aria-expanded=true] + .sub-menu {
        display: flex;
        max-height: 100vh;
        opacity: 1;
        padding-top: var(--menu-gap, 1rem);
        visibility: visible;
    }

    .wp-block-menu--submenu-toggle .menu .menu-item-has-children > a,
    .wp-block-menu--submenu-toggle .sub-menu .menu-item-has-children > a {
        flex-grow: 0;
        flex-shrink: 0;
    }

    .submenu-toggle {
        flex-grow: 1;
        justify-content: flex-end;
    }
}

/* desktop only styles */

@media screen and (min-width: 992px) {
    .wp-block-menu:not(.submenu-no-collapse) .menu-item-has-children > a::after {
        background-color: currentcolor;
        content: '';
        display: block;
        height: 0.7em;
        mask-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 0.589844L6 5.16984L1.41 0.589844L0 1.99984L6 7.99984L12 1.99984L10.59 0.589844Z' fill='black'/%3E%3C/svg%3E");
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
        width: 0.7em;
    }

    .wp-block-menu:not(.submenu-no-collapse) .menu-item-has-children .sub-menu {
        background-color: var(--wp--preset--color--neutral-light);
        border-radius: 0 1rem 1rem;
        color: var(--wp--preset--color--primary);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        left: 0;
        min-width: 30ch;
        opacity: 0;
        padding: var(--wp--preset--spacing--30) !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 .sub-menu::before {
        content: '';
        display: block;
        height: 1rem;
        position: absolute;
        top: -1rem;
        width: 100%;
    }

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

    .wp-block-menu .menu-item-has-children .sub-menu a {
        color: var(--wp--preset--color--primary) !important;
    }
}

/* navigation block style overrides */

header.wp-block-template-part {
    position: sticky;
    top: 0;
    top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
    z-index: 10;

    & > .wp-block-group {
        transition: background-color 0.3s ease;
    }
}

.transparent-sticky-menu header.wp-block-template-part {
    position: fixed;
    width: 100%;
}

.transparent-sticky-menu:not(.is-sticky) header.wp-block-template-part > .wp-block-group {
    background-color: transparent !important;
}

html .transparent-sticky-menu.sticky-menu-color--light.is-sticky header.wp-block-template-part :where(.wc-block-mini-cart__badge) {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

html .transparent-sticky-menu.sticky-menu-color--light:not(.is-sticky) header.wp-block-template-part {
    & .wp-block-navigation {
        color: var(--wp--preset--color--base);
    }

    & .wp-block-menu-icon {
        color: var(--wp--preset--color--base);
    }

    & .wp-block-button.is-style-outline .wp-block-button__link,
    & a:where(:not(.wp-element-button)) {
        color: var(--wp--preset--color--base);
    }

    & .wp-block-button:not(.is-style-outline) .wp-block-button__link {
        background-color: var(--wp--preset--color--base);
        color: var(--wp--preset--color--primary);
    }

    & .wp-block-menu:not(.wp-block-menu--overlay) li:not(.menu-item-has-children).menu-button > a {
        background-color: var(--wp--preset--color--base);
        color: var(--wp--preset--color--primary);
    }

    & .wp-block-site-logo,
    & .wp-block-image.header-logo {
        filter: brightness(0) invert(1);
    }

    & .wp-block-acf-animated-logo-svg .text {
        fill: var(--wp--preset--color--base);
    }

    & .wc-block-mini-cart__button {
        color: var(--wp--preset--color--base);
    }

    & :where(.wc-block-mini-cart__badge) {
        color: var(--wp--preset--color--primary);
    }
}

html:not(.has-modal-open) .transparent-sticky-menu.sticky-menu-color--dark:not(.is-sticky) header.wp-block-template-part {
    & .wp-block-navigation {
        color: var(--wp--preset--color--primary);
    }

    & .wp-block-button.is-style-outline .wp-block-button__link {
        color: var(--wp--preset--color--primary);
    }
}

@media screen and (min-width: 600px) {
    header.wp-block-template-part {
        top: var(--wp-admin--admin-bar--height, 0);
    }

    header.wp-block-template-part ul.wp-block-navigation .wp-block-navigation__submenu-container {
        border: none;
        box-shadow: 0 3px 4px 0 #00000040;
    }

    header.wp-block-template-part ul.wp-block-navigation > li.wp-block-navigation-item {
        padding: 0 1rem;
        z-index: 1;

        & > a {
            display: inline-block;
            padding: 0.75rem 0;
            text-decoration: underline;
            text-decoration-color: transparent;
            text-underline-offset: 5px;
        }

        &.current-menu-item > a,
        & > a.current-menu-ancestor,
        &:hover > a {
            text-decoration-color: currentcolor;
        }
    }

    .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
    .wp-block-navigation .has-child:not(.open-on-click, .open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
        min-width: 260px;
    }
}