.no-pointer-events {
    pointer-events: none !important;
    background: red !important;
    touch-action: none !important;
}

@media screen and (max-width: 1280px) {
    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(100svh);
        top: 0;
        padding-top: var(--header-height);
        background: var(--color--grey-50);

        transform: translateX(100%);
        transition: all 0.75s ease;
        z-index: 999;
        overflow: clip;
    }

    .menu.active {
        transform: translateX(0);
    }
    header .wp-block-site-logo {
        position: relative;
        z-index: 9999;
    }

    header {
        width: 100vw !important;
        overflow-x: clip;
    }
}

@media screen and (min-width: 1280px) {
    .mega-menu-wrapper > button {
        display: none;
    }

    body header.active .wp-social-link svg,
    body:not(.home) header .wp-social-link svg {
        fill: var(--color--grey-950) !important;
        transition: all 0.3s ease-in-out;
    }

    body:not(.home) header .wp-social-link:hover svg {
        fill: var(--color--grey-50) !important;
    }
    body:not(.home) header .top-level-item,
    body.home header.active .menu-item:not(.active) .top-level-item {
        color: var(--color--grey-950);
    }

    body:not(.home) header,
    body.home header.active {
        background-color: #231F20;
    }
    body.home header .top-level-item {
        color: white;
    }
    .menu-item {
        padding: 0 10px;
    }
}

@media screen and (min-width: 1450px) {
    .menu-item {
        padding: 0 10px;
    }
}

header > div {
    height: 100%;
    padding-left: var(--wp--style--root--padding-left) !important;
    padding-right: var(--wp--style--root--padding-right) !important;
}

body.home header {
    position: absolute;
    width: 100%;
    z-index: 10;
    transition: background-color 0.3s ease-in-out;
}

.mega-menu-wrapper > button {
    padding: 16px 13px;
    height: 45px;
    width: 45px;
    position: relative;
    border-radius: 8px;
}
.mega-menu-wrapper > button span {
    position: absolute;
    height: 1px;
    width: 18px;
    background: white;
    left: calc(50% - 9px);
    transition: all 0.55s ease;
}

.mega-menu-wrapper > button span:nth-child(1) {
    top: calc(50% - 6px);
}
.mega-menu-wrapper > button span:nth-child(2),
.mega-menu-wrapper > button span:nth-child(3) {
    top: calc(50%);
    transition: all 0.5s ease 0s;
}
.mega-menu-wrapper > button span:nth-child(4) {
    top: calc(50% + 6px);
}

.mega-menu-wrapper > button.active span:nth-child(1),
.mega-menu-wrapper > button.active span:nth-child(4) {
    opacity: 0;
}
.mega-menu-wrapper > button.active span:nth-child(2) {
    transform: rotate(-45deg);
}
.mega-menu-wrapper > button.active span:nth-child(3) {
    transform: rotate(45deg);
}
.mega-menu-wrapper > button.active span:nth-child(2),
.mega-menu-wrapper > button.active span:nth-child(3) {
    transition: all 0.5s ease 0.25s;
}

/* Editor Styles */

.menu .wp-block-acf-menu-item {
    display: flex;
    gap: 40px;
}

.edit-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20d%3D%22M100.4%20417.2C104.5%20402.6%20112.2%20389.3%20123%20378.5L304.2%20197.3L338.1%20163.4C354.7%20180%20389.4%20214.7%20442.1%20267.4L476%20301.3L442.1%20335.2L260.9%20516.4C250.2%20527.1%20236.8%20534.9%20222.2%20539L94.4%20574.6C86.1%20576.9%2077.1%20574.6%2071%20568.4C64.9%20562.2%2062.6%20553.3%2064.9%20545L100.4%20417.2zM156%20413.5C151.6%20418.2%20148.4%20423.9%20146.7%20430.1L122.6%20517L209.5%20492.9C215.9%20491.1%20221.7%20487.8%20226.5%20483.2L155.9%20413.5zM510%20267.4C493.4%20250.8%20458.7%20216.1%20406%20163.4L372%20129.5C398.5%20103%20413.4%2088.1%20416.9%2084.6C430.4%2071%20448.8%2063.4%20468%2063.4C487.2%2063.4%20505.6%2071%20519.1%2084.6L554.8%20120.3C568.4%20133.9%20576%20152.3%20576%20171.4C576%20190.5%20568.4%20209%20554.8%20222.5C551.3%20226%20536.4%20240.9%20509.9%20267.4z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 16px;
    height: 16px;
    display: inline-block;
}