.wp-block-acf-menu {
padding: unset !important;
border: unset !important;
border-radius: unset !important;
}
.wp-block-acf-menu a {
transition: var(--time);
}
.wp-block-acf-menu ul,
.wp-block-acf-menu ul li {
list-style: none;
padding: unset;
margin: unset;
}
.wp-block-acf-menu ul.navigation-container li {
display: flex;
gap: 0.2em;
align-items: center;
}
.wp-block-acf-menu ul.navigation-container li:not(.megamenu) {
position: relative;
}
.wp-block-acf-menu ul.navigation-container li a {
display: flex;
border-bottom: unset;
width: 100%;
align-items: center;
gap: .25em;
}
.wp-block-acf-menu > ul.navigation-container {
display: flex;
align-items: center;
gap: var(--blockGap);
position: unset;
}
.wp-block-acf-menu > ul.navigation-container > li > a {
padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);
padding-left: var(--padding-left);
padding-right: var(--padding-left);
}
.wp-block-acf-menu > ul > li.has-children svg path {
stroke: currentColor;
opacity: .4;
}
.wp-block-acf-menu > ul.navigation-container > li:not(.megamenu) > ul.submenu {
position: absolute;
left: calc(-1 * var(--submenu-typography-padding-left-right));
top: 100%;
display: flex;
gap: var(--submenu-gap);
flex-direction: column;
}
.wp-block-acf-menu > ul.navigation-container > li > ul.submenu ul.submenu {
position: absolute;
top: calc(-1 * var(--submenu-typography-padding-top-bottom));
left: 100%;
}
.wp-block-acf-menu .wp-element-button {
display: inline-flex;
} .wp-block-acf-menu > ul.navigation-container > li.megamenu > ul.submenu {
max-width: var(--wp--style--global--wide-size);
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(.95); !important;
top: calc(100% - 50px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--submenu-gap);
padding-top: var(--submenu-typography-padding-top-bottom);
padding-bottom: var(--submenu-typography-padding-top-bottom);
padding-left: var(--submenu-typography-padding-left-right);
padding-right: var(--submenu-typography-padding-left-right);
}
.wp-block-acf-menu > ul.navigation-container > li.megamenu.active > ul.submenu {
transform: translateX(-50%) scale(1); !important;
}
.wp-block-acf-menu ul.navigation-container li.megamenu .submenu li > a {
padding: 0 !important;
}
header.scrolled .wp-block-acf-menu > ul.navigation-container > li.megamenu > ul.submenu {
top: calc(100% - 23px);
}  .editor-styles-wrapper .wp-block-acf-menu ul.navigation-container a,
.wp-block-acf-menu ul.navigation-container li.menu-item > a {
color: var(--menu-link);
}
.wp-block-acf-menu ul.navigation-container li.menu-item a:hover {
color: var(--menu-hover);
}
.wp-block-acf-menu ul.navigation-container li.menu-item.ancestor > a,
.wp-block-acf-menu ul.navigation-container li.menu-item.current > a {
color: var(--menu-current);
}
.wp-block-acf-menu ul.navigation-container > li.menu-item.ancestor > a,
.wp-block-acf-menu ul.navigation-container > li.menu-item.current > a {
text-decoration: underline color-mix(in srgb, currentColor 20%, transparent) 1px;
text-underline-offset: .4em;
}
.wp-block-acf-menu ul.navigation-container .wp-block-social-links.is-style-logos-only li svg {
fill: var(--menu-link) !important;
} .wp-block-acf-menu ul.navigation-container  > li {
font-family: var(--menu-typography-font-family);
font-size: var(--menu-typography-font-size);
font-weight: var(--menu-typography-font-weight);
line-height: var(--menu-typography-line-height);
letter-spacing: var(--menu-typography-letter-spacing);
text-transform: var(--menu-typography-letter-case);
}  .wp-block-acf-menu ul.navigation-container .submenu {
background-color: var(--submenu-background);
}
.wp-block-acf-menu ul.navigation-container .submenu li.menu-item a {
color: var(--submenu-link);
justify-content: space-between;
}
.wp-block-acf-menu ul.navigation-container .submenu li.menu-item a:hover {
color: var(--submenu-hover);
}
.wp-block-acf-menu ul.navigation-container .submenu li.menu-item.current > a {
color: var(--submenu-current);
} .wp-block-acf-menu ul.navigation-container .submenu > li {
font-family: var(--submenu-typography-font-family);
font-size: var(--submenu-typography-font-size);
font-weight: var(--submenu-typography-font-weight);
line-height: var(--submenu-typography-line-height);
letter-spacing: var(--submenu-typography-letter-spacing);
text-transform: var(--submenu-typography-letter-case);
}
.wp-block-acf-menu ul.navigation-container .submenu > li:first-child > a {
padding-top: var(--submenu-typography-padding-top-bottom);
}
.wp-block-acf-menu ul.navigation-container .submenu > li:last-child > a {
padding-bottom: var(--submenu-typography-padding-top-bottom);
}
.wp-block-acf-menu ul.navigation-container .submenu > li > a {
padding-left: var(--submenu-typography-padding-left-right);
padding-right: var(--submenu-typography-padding-left-right);
} .editor-styles-wrapper .wp-block-acf-menu ul.navigation-container ul.submenu {
opacity: 1;
transform: none;
}
.wp-block-acf-menu ul.navigation-container ul.submenu {
opacity: 0;
pointer-events: none;
transition: var(--time);
transform: scale(.95);
transform-origin: top center;
width: max-content;
}
.wp-block-acf-menu ul.navigation-container  li.active > ul.submenu {
opacity: 1;
pointer-events: initial;
transform: scale(1);
}
.wp-block-acf-menu ul  li.has-children svg {
transition: var(--time);
}
.wp-block-acf-menu > ul > li.active.has-children > a > svg {
transform: rotate(180deg);
}
.wp-block-acf-menu ul.submenu svg {
transform: rotate(-90deg);
}  .wp-block-acf-menu ul.mobile-navigation-container {
margin: 0;
}
.wp-block-acf-menu ul.mobile-navigation-container  > li {
font-family: var(--mobile-menu-typography-font-family);
font-size: var(--mobile-menu-typography-font-size);
font-weight: var(--mobile-menu-typography-font-weight);
line-height: var(--mobile-menu-typography-line-height);
letter-spacing: var(--mobile-menu-typography-letter-spacing);
text-transform: var(--mobile-menu-typography-letter-case);
} .wp-block-acf-menu ul.mobile-navigation-container {
background-color: var(--mobile-menu-background);
}
.wp-block-acf-menu ul.mobile-navigation-container li.menu-item a {
color: var(--mobile-menu-link);
justify-content: space-between;
}
.wp-block-acf-menu ul.mobile-navigation-container li.menu-item a:hover {
color: var(--mobile-menu-hover);
}
.wp-block-acf-menu ul.mobile-navigation-container li.menu-item.ancestor > a,
.wp-block-acf-menu ul.mobile-navigation-container li.menu-item.current > a {
color: var(--mobile-menu-current);
}
.wp-block-acf-menu ul.mobile-navigation-container > li:first-child > a {
padding-top: var(--mobile-menu-typography-padding-top-bottom);
}
.wp-block-acf-menu ul.mobile-navigation-container {
padding-bottom: var(--mobile-menu-typography-padding-top-bottom);
}
.wp-block-acf-menu ul.mobile-navigation-container > li {
padding-left: var(--mobile-menu-typography-padding-left-right);
padding-right: var(--mobile-menu-typography-padding-left-right);
}
.wp-block-acf-menu ul.mobile-navigation-container li {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.wp-block-acf-menu ul.mobile-navigation-container li .submenu {
flex-basis: 100%;
max-height: 0vh;
transition: var(--time);
opacity: 0;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
font-size: smaller;
}
.wp-block-acf-menu ul.mobile-navigation-container li.active > .submenu {
max-height: 700px;
opacity: 1;
pointer-events: initial;
padding-top: .5em;
padding-bottom: .5em;
}
.wp-block-acf-menu > ul.mobile-navigation-container li.active.has-children > svg {
transform: rotate(180deg);
}
.wp-block-acf-menu .mobile-navigation-container ul.submenu svg {
transform: rotate(0);
}
.wp-block-acf-menu .mobile-navigation-container svg.nav-arrow path {
stroke: var(--mobile-menu-link);
}
.wp-block-acf-menu .mobile-navigation-container svg.nav-arrow {
padding: .3em;
box-sizing: content-box;
cursor: pointer;
}
button.mobile-navigation-button {
font-size: 40px;
border: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: transparent;
position: relative;
z-index: 5;
transition: var(--time);
cursor: pointer;
}
button.mobile-navigation-button:not(.active) {
color: var(--open-icon-color);
background-color: color-mix(in srgb, var(--open-icon-color) 10%, transparent)
}
button.mobile-navigation-button.active {
color: var(--close-icon-color);
background-color: color-mix(in srgb, var(--close-icon-color) 10%, transparent)
}
button.mobile-navigation-button:not(.active) .open,
button.mobile-navigation-button.active .close {
opacity: 1;
}
button.mobile-navigation-button.active .open,
button.mobile-navigation-button:not(.active) .close {
opacity: 0;
}
button.mobile-navigation-button .open,
button.mobile-navigation-button .close {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--time);
}
.wp-block-acf-menu ul.mobile-navigation-container {
background-color: var(--mobile-menu-background);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
opacity: 0;
z-index: 4;
transform: translateY(-50px);
transition: var(--time);
display: flex;
flex-direction: column;
gap: var(--mobile-gap);
overflow-y: scroll;
}
.wp-block-acf-menu ul.mobile-navigation-container.active {
pointer-events: initial;
opacity: 1;
transform: translateX(0px);
}
.editor-styles-wrapper .megamenu > .submenu {
display: none !important;
}
.wp-block-acf-menu ul.mobile-navigation-container .submenu {
display: flex;
flex-direction: column;
}
.mobile-navigation-container.left,
.wp-block-acf-menu ul.mobile-navigation-container.left .submenu {
align-items: flex-start;
}
.wp-block-acf-menu ul.mobile-navigation-container.left li {
justify-content: flex-start;
}
.mobile-navigation-container.center,
.wp-block-acf-menu ul.mobile-navigation-container.center .submenu {
align-items: center;
text-align: center;
}
.wp-block-acf-menu ul.mobile-navigation-container.center li {
justify-content: center;
text-align: center;
}
.mobile-navigation-container.right,
.wp-block-acf-menu ul.mobile-navigation-container.right .submenu {
align-items: flex-end;
text-align: right;
}
.wp-block-acf-menu ul.mobile-navigation-container.right li {
justify-content: flex-end;
text-align: right;
}