.menu-main-menu-container,
.menu-main-menu-container * {
    box-sizing: border-box;
}

.menu-main-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-main-menu-container ul a {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.5rem 0;
    text-decoration: none;
    text-transform: uppercase;

    &:hover {
        color: var(--wp--preset--color--secondary);
    }
}

.menu-main-menu-container li.current-menu-ancestor > a,
.menu-main-menu-container li.open > a,
.menu-main-menu-container ul li.current-menu-item > a {
    color: var(--wp--preset--color--secondary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 12px;
}

body.menu-open .wp-block-site-logo {
    z-index: 20;
}

/* ---- HAMBURGER TOGGLE ----- */
#menu-toggle:not(:checked) + .menu-toggle .open {
    display: none;
}

input#menu-toggle {
    height: 0;
    left: unset;
    margin: 0;
    opacity: 0;
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 0;
    z-index: -1;
}

.menu-toggle {
    display: block;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0 !important;
    position: relative;
    text-transform: uppercase;
    z-index: 10;
}

.hamburger {
    display: block;
    height: 34px;
    margin: auto;
    position: relative;
    width: 34px;
    z-index: 99;
}

.hamburger > .line {
    background: var(--wp--preset--color--contrast);
    border-radius: 3px;
    display: block;
    height: 3px;
    position: absolute;
    top: calc(17px - 1.5px);
    transform: rotate(0deg);
    transition:
        transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
        top 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.6s,
        opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.6s,
        height 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.3s,
        width 0s linear 0.6s;
    width: 34px;
}

.hamburger > .line1 {
    top: calc(17px - 1.5px - 8px);
}

.hamburger > .line2 {
    opacity: 1;
}

.hamburger > .line3 {
    top: calc(17px - 1.5px + 8px);
}

.hamburger > .line4 {
    height: 0;
    left: calc(17px - 1.5px);
    opacity: 0;
    width: 3px;
}

#menu-toggle:checked + .menu-toggle .closed {
    display: none;
}

#menu-toggle:checked + .menu-toggle .hamburger > .line {
    background-color: var(--wp--preset--color--contrast);
    transition:
        transform 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.6s,
        top 0.3s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1),
        height 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.3s,
        width 0s linear 0.3s;
}

#menu-toggle:checked + .menu-toggle .hamburger > .line1 {
    opacity: 0;
    top: calc(17px - 1.5px);
}

#menu-toggle:checked + .menu-toggle .hamburger > .line2 {
    transform: rotate(45deg);
}

#menu-toggle:checked + .menu-toggle .hamburger > .line3 {
    opacity: 0;
    top: calc(17px - 1.5px);
}

#menu-toggle:checked + .menu-toggle .hamburger > .line4 {
    height: 34px;
    opacity: 1;
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-panel-additional {
    display: none;
}

/* ---- Mobile Only ---- */

@media screen and (max-width: 899px) {
    #menu-toggle:checked + .menu-toggle {
        position: fixed;
        right: 2rem;
        top: 2rem;
        z-index: 12;
    }

    .mobile-menu-panel {
        background-color: white;
        left: 0;
        opacity: 0;
        overflow-y: auto;
        padding: calc(75px + var(--wp-admin--admin-bar--height, 0px) + 2rem) 2rem 2rem;
        position: fixed;
        right: 0;
        top: -200vh;
        z-index: -1;
    }

    .mobile-menu-panel-additional {
        display: block;
    }

    #menu-toggle:checked + .menu-toggle + .mobile-menu-panel {
        bottom: 0;
        opacity: 1;
        top: 0;
        z-index: 10;
    }

    .menu-main-menu-container ul a {
        padding: 1.5rem 0;
    }

    .menu-main-menu-container > ul ul {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-height 0.5s ease,
            opacity 0.5s ease;
    }

    .menu-main-menu-container li.open > ul {
        max-height: 9999px;
        opacity: 1;
    }

    .menu-item-has-thumbnail .thumb {
        border: 4px solid white;
        border-radius: 12px;
        bottom: 0;
        box-shadow:
            0 3px 6px 0 #cd96820d,
            0 11px 11px 0 #cd96820a,
            0 25px 15px 0 #cd968205,
            0 45px 18px 0 #cd968203,
            0 71px 20px 0 #cd968200;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
    }

    .open .menu-item-has-thumbnail:not(.open) .thumb::after {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 100%);
        background-blend-mode: multiply;
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .menu-item-has-thumbnail .thumb img {
        height: 100%;
        left: 0;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .menu-main-menu-container ul li.menu-item-has-children > a {
        align-items: center;
        display: flex !important;
        justify-content: space-between;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail:not(.open) {
        margin-bottom: 1.5rem;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail:not(.open) > a {
        align-items: center;
        color: white;
        display: flex;
        height: 100px;
        justify-content: space-between;
        padding: 1.5rem;
        position: relative;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail:not(.open) > a > span:not(.thumb) {
        position: relative;
        z-index: 10;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail.open > a .thumb {
        display: none;
    }

    .menu-main-menu-container ul li.menu-item-has-children > a::after {
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.7068 6.70659L8.7071 11.7063C8.51336 11.9031 8.25713 12 8.00089 12C7.74466 12 7.48905 11.9024 7.29406 11.7071C6.90347 11.3165 6.90347 10.6837 7.29406 10.2931L10.5882 7.00033H1.00135C0.449198 7.00033 0.00146484 6.55348 0.00146484 6.00039C0.00146484 5.4473 0.449198 5.00046 1.00135 5.00046H10.5882L7.29469 1.70692C6.90409 1.31632 6.90409 0.683549 7.29469 0.29295C7.68529 -0.0976499 8.31806 -0.0976499 8.70866 0.29295L13.7083 5.29262C14.0974 5.68479 14.0974 6.316 13.7068 6.70659Z' fill='%23CE9582'/%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        color: inherit;
        content: '';
        display: block;
        height: 14px;
        margin-left: 1rem;
        transform: rotate(0deg);
        transition: transform 0.3s ease;
        width: 14px;
    }

    .menu-main-menu-container ul li.menu-item-has-children.open {
        background: #fff;
        bottom: 0;
        left: 0;
        margin: 0;
        max-height: 100vh;
        overflow-y: auto;
        padding: calc(75px + 2rem) 2rem 2rem;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 11;

        &::before {
            background-color: white;
            content: '';
            display: block;
            height: 75px;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1;
        }
    }

    .menu-main-menu-container ul li.menu-item-has-children.open > a::after {
        order: 1;
        transform: rotate(180deg);
    }

    .menu-main-menu-container ul li.menu-item-has-children.open > a {
        flex-flow: row-reverse;
        gap: 0.5rem;
        justify-content: flex-end;
        margin-bottom: 1rem;
    }
}

/* --- DESKTOP ----- */

@media screen and (min-width: 900px) {
    .menu-toggle {
        display: none;
    }

    .menu-main-menu-container > ul {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .menu-main-menu-container > ul > li > ul {
        background-color: white;
        display: flex;
        flex-wrap: wrap;
        gap: 2.5rem;
        left: 0;
        margin: auto;
        max-height: 0;
        max-width: var(--wp--style--global--wide-size);
        opacity: 0;
        overflow: hidden;
        padding: 3rem 0;
        position: absolute;
        right: 0;
        top: -100%;
        transition:
            max-height 0.5s ease,
            opacity 0.5s ease;
        visibility: hidden;
        width: 100%;
        z-index: -1;

        /* transform: translateX(-50%); */
    }

    .menu-main-menu-container > ul > li > ul::after {
        background: white;
        box-shadow:
            inset 0 3px 6px 0 #cd96820d,
            inset 0 11px 11px 0 #cd96820a,
            inset 0 25px 15px 0 #cd968205,
            inset 0 45px 18px 0 #cd968203,
            0 3px 6px 0 #cd96820d,
            0 11px 11px 0 #cd96820a,
            0 25px 15px 0 #cd968205,
            0 45px 18px 0 #cd968203;
        content: '';
        height: 100%;
        left: calc((100vw - var(--wp--style--global--wide-size)) / 2 * -1);
        position: absolute;
        right: 0;
        top: 0;
        width: 100vw;
        z-index: -1;
    }

    .menu-main-menu-container > ul > li.open > ul {
        max-height: 999px;
        opacity: 1;
        overflow: visible;
        top: 100%;
        transition:
            max-height 0.5s ease,
            opacity 0.5s ease;
        visibility: visible;
        z-index: 10;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail .thumb {
        aspect-ratio: 217/160;
        border: 4px solid white;
        border-radius: 12px;
        box-shadow:
            0 3px 6px 0 #cd96820d,
            0 11px 11px 0 #cd96820a,
            0 25px 15px 0 #cd968205,
            0 45px 18px 0 #cd968203,
            0 71px 20px 0 #cd968200;
        height: 160px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail .thumb img {
        height: 100%;
        left: 0;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .menu-main-menu-container ul li.menu-item-has-thumbnail > a {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .menu-main-menu-container > ul > li > ul li.menu-item-has-children > a {
        color: var(--wp--preset--color--neutral-900);
        font-weight: 500;
    }

    .show-on-mobile {
        display: none;
    }
}

@media screen and (min-width: 900px) and (max-width: 110rem) {
    .menu-main-menu-container > ul > li > ul {
        padding: 3rem 2rem;
    }
}