/* Menu block */

.wp-block-menu {
    --menu-gap: var(--wp--preset--spacing--50);
}

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

.wp-block-menu-dialog {
    background-color: var(--wp--preset--color--base);
}

.wp-block-menu--overlay .submenu-toggle {
    font-size: 1rem;
}

.wp-block-menu--overlay .submenu-toggle-icon {
    width: 1em;
    height: 1em;
    display: flex;
}

.wp-block-menu--overlay .submenu-toggle-icon > svg {
    width: inherit;
    height: inherit;
}

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

/* vertical menu */

.wp-block-menu.is-vertical.is-style-border-list {
    --menu-gap: 0;
}

.wp-block-menu.is-vertical.is-style-border-list .menu-item {
    width: 100%;
    border-bottom: 1px solid var(--wp--preset--color--cream-dark);
}

.wp-block-menu.is-vertical.is-style-border-list .menu-item > a {
    display: block;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    border-bottom-right-radius: 50px;
    text-align: left;
}

.wp-block-menu.is-vertical.is-style-border-list .menu-item > a:hover {
    background-color: var(--wp--preset--color--cream);
}

/* Desktop header menu */

.wp-block-menu[data-location="header"] {
    --submenu-gap: 0;
    --menu-gap: 1rem 2.5rem;

    display: none;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--tiny);
    align-items: stretch;
    height: 100%;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item {
    height: 100%;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item > a {
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    opacity: 0.7;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item-has-children {
    position: relative;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--50);
}

.wp-block-menu[data-location="header"] > .menu > .menu-item-has-children > a::after {
    border: 1px solid;
    border-left-width: 0;
    border-top-width: 0;
    content: '';
    height: 0.4em;
    display: block;
    transform: translateX(-50%) rotate(45deg);
    width: 0.4em;
    transition: transform 0.25s ease-out;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item > .sub-menu::before {
    content: "";
    height: 2rem;
    width: 100%;
    position: absolute;
    top:-2rem;
    left: 0;
    display: block;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item > .sub-menu:hover,
.wp-block-menu[data-location="header"] > .menu > .menu-item:focus-within > .sub-menu,
.wp-block-menu[data-location="header"] > .menu > .menu-item > a:focus ~ .sub-menu,
.wp-block-menu[data-location="header"] > .menu > .menu-item > a:hover ~ .sub-menu {
    visibility: visible;
    opacity: 1;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item.current-menu-item > a,
.wp-block-menu[data-location="header"] > .menu > .menu-item.current-menu-ancestor > a,
.wp-block-menu[data-location="header"] > .menu > .menu-item > a:focus,
.wp-block-menu[data-location="header"] > .menu > .menu-item > a:hover,
.wp-block-menu[data-location="header"] > .menu > .menu-item:focus-within > a,
.wp-block-menu[data-location="header"] > .menu > .menu-item:has(.sub-menu:hover) > a {
    opacity: 1;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item > a:hover::after,
.wp-block-menu[data-location="header"] > .menu > .menu-item:focus-within > a::after,
.wp-block-menu[data-location="header"] > .menu > .menu-item:has(.sub-menu:hover) > a::after {
    transform: translateX(-50%) translateY(0.25em) rotate(45deg);
}

.wp-block-menu[data-location="header"] > .menu > .menu-item > .sub-menu {
    box-sizing: border-box;
    background-color: var(--wp--preset--color--cream-light);
    color: var(--wp--preset--color--contrast);
    left: 0;
    display: flex;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
    position: absolute;
    top: calc(100% + 1rem);
    min-width: 300px !important;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    border-bottom-right-radius: 50px;
    border: 1px solid var(--wp--preset--color--cream-dark);
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item:last-child > .sub-menu {
    left: unset;
    right: 0;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item .sub-menu > .menu-item {
    text-align: start;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item .sub-menu > .menu-item > a {
    display: block;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
    border-bottom-right-radius: 50px;
    font-weight: 500;
}

.wp-block-menu[data-location="header"] > .menu > .menu-item .sub-menu > .menu-item > a:hover {
    background-color: var(--wp--preset--color--cream);
}

.wp-block-menu[data-location="header"] .sub-menu > .menu-item--divider-label {
    padding: 0 var(--wp--preset--spacing--60);
    margin-top: var(--wp--preset--spacing--50);
}

.wp-block-menu[data-location="header"]  > .menu > .menu-item .sub-menu > .menu-item--divider-label > a {
    padding: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--40)) 0 var(--wp--preset--spacing--50) 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-top: 1px solid var(--wp--preset--color--cream-dark);
    color: var(--wp--preset--color--cream-dark);
    pointer-events: none;
}

@media screen and (max-width: 1600px) {
    .wp-block-menu[data-location="header"] > .menu > .menu-item:nth-last-child(-n + 2) > .sub-menu {
        left: unset;
        right: 0;
    }
}

@media screen and (min-width: 782px) {
    .wp-block-menu[data-location="header"] {
        display: flex;
    }

    .wp-block-menu[data-location="mobile"] {
        display: none;
    }
}

/* Mobile menu */

.wp-block-menu--overlay[data-location="mobile"] {
    --submenu-top: 0.5em;
}

.wp-block-menu--overlay[data-location="mobile"] .wp-block-menu-dialog {
    background-color: var(--wp--preset--color--cream-light);
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--small);
    z-index: 100;
    border: 1px solid var(--wp--preset--color--cream-dark);
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1em);
    transition: all 0.3s ease-out;
    transition-property: visibility, opacity, transform;
}

.wp-block-menu--overlay[data-location="mobile"] .wp-block-menu-dialog[open] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.wp-block-menu--overlay[data-location="mobile"] .wp-block-menu-dialog--modeless {
    top: var(--header-height, 80px);
    right: 0;
    left: unset;
    max-width: 30rem;
    border-bottom-left-radius: var(--wp--preset--border-radius--x-large);
    max-height: calc(100dvh - var(--header-height, 80px) - var(--wp-admin--admin-bar--height,0px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--cream-dark) transparent;
    padding-bottom: var(--wp--preset--spacing--60);
    border-top: 1px solid var(--wp--preset--color--cream-dark);
}

.wp-block-menu--overlay[data-location="mobile"] .wp-block-menu-dialog--modeless .wp-block-menu-close {
    display: none;
}

.wp-block-menu--overlay[data-location="mobile"]:has(.wp-block-menu-dialog--modeless) .wp-block-menu-open {
    font-size: 1.25rem;
}

.wp-block-menu--overlay[data-location="mobile"]:has(.wp-block-menu-dialog--modeless) .wp-block-menu-open .wp-block-menu-icon {
    width: 1em !important;
    height: 1em !important;
    position: relative;
}

.wp-block-menu--overlay[data-location="mobile"]:has(.wp-block-menu-dialog--modeless[open]) .wp-block-menu-open .wp-block-menu-icon::before {
    content: "";
    background-color: currentColor;
    display: block;
    width: 150%;
    height: 150%;
    mask-image: url(../../assets/icons/close.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wp-block-menu--overlay[data-location="mobile"]:has(.wp-block-menu-dialog--modeless[open]) .wp-block-menu-open .wp-block-menu-icon svg {
    display: none;
}

.wp-block-menu--overlay[data-location="mobile"] .sub-menu {
    --submenu-bottom: var(--wp--preset--spacing--50);
    display: flex;
    align-self: flex-start;
    visibility: hidden;
    overflow: hidden;
    grid-column: span 2;
}

.wp-block-menu--overlay[data-location="mobile"] .sub-menu a {
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
    border-bottom-right-radius: 50px;
    display: block;
}

.wp-block-menu--overlay[data-location="mobile"] .sub-menu .menu-item > a:hover,
.wp-block-menu--overlay[data-location="mobile"] .sub-menu .menu-item > a:active,
.wp-block-menu--overlay[data-location="mobile"] .sub-menu .current-menu-item:not(.menu-item--divider-label) > a,
.wp-block-menu--overlay[data-location="mobile"] .sub-menu .current-menu-ancestor:not(.menu-item--divider-label) > a  {
    background-color: var(--wp--preset--color--cream);
}

.wp-block-menu--overlay[data-location="mobile"] .sub-menu .menu-item--divider-label {
    margin-top: var(--wp--preset--spacing--40);
    padding: 0 var(--wp--preset--spacing--50);
}

.wp-block-menu--overlay[data-location="mobile"] .sub-menu .menu-item--divider-label > a {
    padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50) 0;
    font-size: 0.75em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--wp--preset--color--cream-dark);
    border-top: 1px solid var(--wp--preset--color--cream-dark);
    pointer-events: none;
}

.wp-block-menu--overlay[data-location="mobile"] .submenu-toggle {
    width: unset;
    justify-content: flex-end;
}

.wp-block-menu--overlay[data-location="mobile"] .menu-item-has-children {
    display: grid;
    grid-template-rows: max-content 0fr;
    grid-template-columns: max-content 1fr;
    overflow: hidden;
    row-gap: 0;
    transition: grid-template-rows 0.3s ease-out;
}

.wp-block-menu--overlay[data-location="mobile"] .menu-item-has-children > a {
    max-width: unset;
}

.wp-block-menu--overlay[data-location="mobile"] .current-menu-item > a,
.wp-block-menu--overlay[data-location="mobile"] .current-menu-ancestor > a {
    font-weight: 600;
}

.wp-block-menu--overlay[data-location="mobile"] .menu-item-has-children:has( > .submenu-toggle[aria-expanded=true]) {
    grid-template-rows: max-content 1fr;
}

.wp-block-menu--overlay[data-location="mobile"] .menu-item-has-children .submenu-toggle[aria-expanded=true] + .sub-menu {
    display: flex;
    visibility: visible;
}

.wp-block-menu--overlay[data-location="mobile"] .menu-item-has-children .submenu-toggle:not([aria-expanded=true]) + .sub-menu {
    padding: 0;
    margin: 0;
}