.menu-item.active {
    z-index: 100;
}

.menu-item .menu-content {
    transition: all 0.75s ease;
}

.menu-content a.wp-block-navigation-item__content {
    position: relative;
    width: 100%;
}

.menu-item ul.wp-block-navigation__container {
    gap: 0 !important;
    width: 100% !important;
}
.menu-item .wp-block-navigation__container li {
    height: 48px !important;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    font-weight: 600;
}

.menu-item .wp-block-navigation__container li:before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    height: 1px;
    width: 100%;
    background-color: #a0a0a0;
}

@media screen and (max-width: 1279px) {
    .menu-item:before {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        height: 1px;
        width: 100%;
        background-color: #a0a0a0;
    }

    .menu-item > * {
        width: 100%;
    }
    header .header-btn {
        display: none !important;
    }

    .menu-item .back-btn-container {
        padding: var(--wp--style--root--padding-right);
    }
    .menu-item .back-btn {
        position: relative;
        background-color: transparent;
        border: 0;
        font-size: 14px;
    }

    .menu-item .back-btn:after {
        transform: rotate(90deg);
        left: 0;
        top: calc(50% - 4px);
    }
    .menu-item .menu-content {
        transform: translateX(100%);
    }
    .menu-item
        .menu-content
        > div:not(.back-btn-container, .top-level-item-mobile-link) {
        height: calc(100svh - (var(--header-height) + 70px));
        padding-top: var(--wp--style--root--padding-right);
        padding-bottom: var(--wp--style--root--padding-right);
        margin-bottom: 2rem;
        position: relative;
        z-index: 5;
        overflow-y: scroll;
    }
    .menu-item.active .menu-content {
        transform: translateY(0);
    }
    .menu-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .menu-item {
        position: relative;
        padding: var(--wp--style--root--padding-right)
            var(--wp--style--root--padding-right) 0
            var(--wp--style--root--padding-right);
    }

    .menu-item > .top-level-item {
        display: flex;
        padding-bottom: var(--wp--style--root--padding-right);
        align-items: flex-end;
        position: relative;
    }

    .menu .menu-item > .is-dropdown:after {
        transform: rotate(-90deg);
        right: 0;
        bottom: calc(50% + 4px);
    }

    .menu .wp-block-column {
        padding: 0 !important;
    }

    .menu .menu-item > .is-dropdown:after,
    .menu-item .back-btn:after {
        height: 8px;
        width: 14px;
        position: absolute;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' version='1.1' viewBox='0 0 9.414 5.207'%3E%3Cpath fill='none' stroke='%23838a8d' stroke-linecap='square' stroke-linejoin='round' d='m.7.7 4 4 4-4'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        content: "";
    }

    .menu-item:last-child > .is-dropdown {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .menu-content a.wp-block-navigation-item__content:after {
        background-position: center;
    }
    .menu-item h2 {
        margin-top: var(--wp--preset--spacing--sm) !important;
    }

    .menu .has-mobile-overflow {
        overflow-y: scroll;
    }
}

@media screen and (max-width: 780px) {
    .menu .wp-block-cover {
        /* aspect-ratio: 1 / 1 !important; */
        height: calc(
            100vw - (var(--wp--style--root--padding-right) * 2)
        ) !important;
        min-height: unset !important;
    }
}
@media screen and (max-width: 1280px) {
    .menu .wp-block-cover {
        aspect-ratio: unset !important;
        height: 100% !important;
        min-height: 300px !important;
    }
}
@media screen and (min-width: 1280px) {
    .menu-item .menu-content {
        opacity: 0;
        transform: translateY(-100%);
        transition: all 0.75s ease;
    }
    .menu-item.active .menu-content {
        opacity: 1;
        transform: translateY(0);
    }

    .menu-item {
        height: 90px;
        display: flex;
        align-items: center;
    }

    .menu-item .is-dropdown {
        padding-right: calc(0.5rem + 12px);
    }
    .menu-item .top-level-item {
        position: relative;
        transition: color 0.75s ease;
    }

    .menu-item .is-dropdown:before {
        content: "";
        position: absolute;
        top: calc(50% - 4px);
        right: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='14px' height='8px' viewBox='0 0 9.414 5.207'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='round' d='m.7.7 4 4 4-4'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;

        display: block;
        height: 8px;
        width: 12px;
        transform: rotate(0deg) translateZ(0);
        backface-visibility: hidden;
        will-change: auto;
    }

    .menu-item .is-dropdown:before {
        transition:
            transform 0.75s ease,
            background-image 0.3s ease;
    }

    /* Safari override */
    @supports (-webkit-touch-callout: none) {
        .menu-item .is-dropdown:before {
            transition: transform 0.75s ease; /* disable bg-image fade in Safari */
        }
    }
    .menu-item.active .is-dropdown:before {
        transform: rotate(180deg) translateZ(0);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='14px' height='8px'  viewBox='0 0 9.414 5.207'%3E%3Cpath fill='none' stroke='%23e51d96' stroke-linecap='square' stroke-linejoin='round' d='m.7.7 4 4 4-4'/%3E%3C/svg%3E") !important;
    }

    body:not(.home) .menu-item .is-dropdown:before,
    body.home header.active .menu-item .is-dropdown:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='14px' height='8px'  viewBox='0 0 9.414 5.207'%3E%3Cpath fill='none' stroke='%23292929' stroke-linecap='square' stroke-linejoin='round' d='m.7.7 4 4 4-4'/%3E%3C/svg%3E");
    }

    .menu-item.active .top-level-item,
    .menu-item:hover .top-level-item {
        color: var(--color--pink-600) !important;
    }

    .menu-content a.wp-block-navigation-item__content:hover:after {
        opacity: 1;
        background-position: 0% center;
    }

    .menu-content a.wp-block-navigation-item__content:after {
        opacity: 0;
        transition: all 0.25s ease;
        background-position: -100% center;
        transform-origin: left;
    }
    .menu-content .wp-block-navigation-item:hover a {
        color: white;
        position: relative;
        z-index: 1;
        transition: all 0.25s ease;
        transform: translateX(15px);
    }
    .menu-content .wp-block-navigation-item:after {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        background: var(--color--pink-600);
        z-index: 0;
        transform: scaleY(0);
        transition: all 0.25s ease;
        transform-origin: bottom;
    }

    .menu-content .wp-block-navigation-item:hover:after {
        transform: scaleY(1);
    }

    .menu-item
        .wp-block-navigation__container.overflow-border
        .wp-block-navigation-item:after {
        width: calc(100% - 15px);
    }

    .menu-item .wp-block-navigation__container.overflow-border li:before {
        width: 100vw;
    }
}

@media screen and (max-width: 1280px) {
    .menu-content .wp-block-columns {
        flex-direction: column !important;
    }
}