.wpb-menu { list-style: none;
    ul { list-style: none; }
    > li > a { font-size: 1.8rem; padding: 1.2rem 0; }

    a:not(.btn, .wpb-content-case) { color: var(--clr-text); display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; font-weight: 600; line-height: 1.2; text-decoration: none; transition: color var(--ts-15) var(--cb--smooth); 
        &:hover { color: var(--clr-primary); }
        &[data-count]::after { --size: 1.8rem; content: attr(data-count); display: inline-block; width: var(--size); min-width: var(--size); height: var(--size); margin-left: .6rem; border-radius: 50%; background-color: var(--clr-primary); color: #fff; font-size: 1.2rem; line-height: 1.8rem; text-align: center; }
        &.btn { --fs: 1.4rem; justify-content: center; min-height: 4.4rem; margin: 1rem 0; 
            &::before { width: 1.8rem; height: 1.8rem; }
        }
    }

    .menu-item {
        .menu-item__text span { display: block; width: 100%; }
        &.menu-item--overview .btn { width: 100%; margin-top: 2rem; } 
    }
}

.wpb-navigation { position: absolute; top: 0; right: 0; left: 0; z-index: 2050; padding-top: 2.4rem;
    &::before { content: ''; position: absolute; top: 0; right: 0; left: 0; z-index: 1020; height: .8rem; background-color: var(--clr-primary); }

    + section { --nav-height: 4rem; padding-top: calc(var(--pt, 0rem) + var(--nav-height)); }

    .container { display: flex; align-items: center; justify-content: space-between; column-gap: 4rem; position: static; }

    .logo { display: inline-flex; margin-right: auto;
        img { width: 9.8rem; height: auto; }
    }

    .btn.btn--submenu-toggle, .btn.btn--close-menu, .btn.btn--nav-toggle { --p: 0 2.2rem; }

    .submenu-toggle { position: absolute; right: 0; top: 50%; display: flex; align-items: center; justify-content: end; width: 4.4rem; height: 4.4rem; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateY(-50%); }

    .wpb-sub-menu .container { display: flex; align-items: start; justify-content: space-between; column-gap: 3.2rem; position: static; }
}

.wpb-navigation__collapse { width: 100%; opacity: 0; transition-property: opacity; transition-duration: var(--ts-35); transition-timing-function: var(--cb--smooth);
    &.active { opacity: 1; pointer-events: all; }

    .wpb-collapse__header, .wpb-submenu__header {
        .btn { --fs: 1.4rem; justify-content: center; min-height: 4.4rem; }
    }
}

body:has(.wpb-header--home) {
    .wpb-navigation .btn--nav-toggle { --bg-clr: #fff; }
}

/* Mobile menu */ 
@media (max-width: 1399.98px) {
    .wpb-navigation {
        .menu-item-has-children { position: relative;
            > a { position: relative; 
                .submenu-toggle { top: 0; bottom: 0; z-index: 1; width: 100%; height: auto; transform: none; }
                &::after { --src: url('/app/themes/wux/assets/icons/btn_arrow_mask.svg'); content: ''; display: inline-block; width: 2rem; height: 2rem; background-color: var(--clr-text); -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: background-color var(--ts-15) var(--cb--smooth), rotate var(--ts-15) var(--cb--smooth); }
                &:hover::after { rotate: 45deg; background-color: var(--clr-primary); }
            }
        }
    }

    .wpb-navigation__collapse { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1030; display: none; flex-direction: column; overflow: hidden; border-top: .8rem solid #fff; background-color: #fff; transform: translateY(-1rem); padding-inline: calc((100vw - var(--container-width--lg)) / 2); transition-property: transform, opacity;
        &.active { transform: translateY(0); }

        .wpb-collapse__header { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem; 
            span { font-size: 2rem; font-weight: 700; }
        }
        .wpb-collapse__body { flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.8rem; }
        .wpb-collapse__footer { display: flex; flex-direction: column; gap: 1.2rem; padding: 2rem 1.8rem; 
            .btn { --fs: 1.6rem; }
            .wpb-menu + .wpb-menu { margin-top: -1.2rem; }
        }
        
        .wpb-menu {
            .wpb-sub-menu { z-index: 1000; background-color: #fff; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; transform: translateY(-1rem); padding-inline: calc((100vw - var(--container-width--lg)) / 2); pointer-events: none; opacity: 0; transition-property: transform, opacity; transition-duration: var(--ts-35); transition-timing-function: var(--cb--smooth);
                &.active { transform: translateY(0rem); opacity: 1; pointer-events: all; }
                
                .wpb-submenu__header { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem; background-color: #fff; }
                .wpb-submenu__body { flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; }

                .container { max-width: 100%; flex-direction: column; padding-bottom: var(--wpb-padding); }

                .sub-menu-title { text-align: left; width: 100%; margin-bottom: 1.6rem; font-size: 2rem; font-weight: 600; }
                
                ul { width: 100%; list-style: none; 
                    li {
                        > a:not(.btn) { padding: 1.4rem 0; font-size: 1.5rem; font-weight: 600;
                            &::after { --src: url('/app/themes/wux/assets/icons/btn_arrow_mask.svg'); content: ''; display: inline-block; width: 2rem; height: 2rem; background-color: var(--clr-text); -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: background-color var(--ts-15) var(--cb--smooth), rotate var(--ts-15) var(--cb--smooth); }
                            &:hover::after { rotate: 45deg; background-color: var(--clr-primary); }
                        }

                        /* &:not(.sub-menu-title) + li:not(.sub-menu-title) { border-top: 1px solid var(--clr-dark-30); } */
                    }
                }

                .menu-item--overview.for-desktop { display: none!important; }
                .menu-item--overview.for-mobile { display: list-item!important; }
            }
        }
    }
}

@media (max-width: 991.98px) {
    .wpb-navigation__collapse { padding-inline: calc((100vw - var(--container-width--md)) / 2); 
        .wpb-menu .wpb-sub-menu { padding-inline: calc((100vw - var(--container-width--md)) / 2); }
    }
}

@media (max-width: 767.98px) {
    .wpb-navigation__collapse { padding-inline: calc((100vw - var(--container-width--sm)) / 2); 
        .wpb-menu .wpb-sub-menu { padding-inline: calc((100vw - var(--container-width--sm)) / 2); }
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .wpb-navigation { padding-top: 2.8rem;
        &::before { height: 1rem; }
    }
}

@media (min-width: 1400px) {
    .wpb-navigation { padding-top: 4.4rem;
        + section { --nav-height: 6.4rem; }
        .container { column-gap: 2rem; padding-top: 0; padding-bottom: 0; }
        .btn.btn--nav-toggle { display: none; }

        .wpb-menu { display: flex; align-items: center;
            .sub-menu-title { grid-column: span 3; margin-bottom: 1.6rem; font-size: 2.4rem; font-weight: 600; }
            > .menu-item > .menu-link { min-height: 5.6rem; padding: 0 1rem; font-size: 1.6rem; }
            > .menu-item-has-children {
                &::after, > a::after { display: none; }
                > .wpb-sub-menu { --nav-height: 10.44rem; position: absolute; top: 0; right: 0; bottom: auto; left: 0; z-index: -1; padding: calc(2.4rem + var(--nav-height)) 0 4.1rem; overflow: visible; pointer-events: none; background-color: transparent; opacity: 0; transform: translateY(-7.5rem); transition: transform var(--ts-35) var(--cb--smooth), top var(--ts-25) var(--cb--smooth), opacity var(--ts-25) var(--cb--smooth);
                    .menu-item--overview.for-mobile { display: none !important; }
                    .wpb-submenu__body { opacity: 0; transition: opacity var(--ts-45) var(--cb--smooth); 
                        .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.4rem; margin-bottom: 0;
                            &:has(.workshop) { align-items: end; }
                            .menu-item + .menu-item{ border-top: 1px solid var(--clr-dark-30); }
                            ul li > a:not(.btn) { padding: 2rem 0; font-size: 1.6rem; font-weight: 600;
                                &::after { --src: url('/app/themes/wux/assets/icons/btn_arrow_mask.svg'); content: ''; display: inline-block; width: 2rem; height: 2rem; background-color: var(--clr-text); -webkit-mask-image: var(--src); mask-image: var(--src); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: background-color var(--ts-15) var(--cb--smooth), rotate var(--ts-15) var(--cb--smooth); }
                                &:hover::after { rotate: 45deg; background-color: var(--clr-primary); }
                            }
                        }
                    }                    
                }
                &:hover {
                    > .wpb-sub-menu { pointer-events: all; 
                        .wpb-submenu__body { opacity: 1; }
                    }
                }
                &:first-child > .wpb-sub-menu { background-color: #fff; box-shadow: 0 20px 40px 0 rgba(0, 0, 0, .12); }
            }
            
            &:hover > .menu-item-has-children > .wpb-sub-menu { opacity: 1; transform: translate(0); }
        }

        .submenu-toggle { display: none; }
    }

    .wpb-navigation__collapse { --p-left: 0; --p-right: 0; position: static; z-index: inherit; display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; max-width: inherit; width: 100%; margin-top: 0; padding-top: 0; padding-bottom: 0; overflow: inherit; background-color: transparent !important; opacity: 1; transform: none; 
        .wpb-collapse__header, .wpb-submenu__header { display: none; }
        .wpb-collapse__body { overflow: inherit; padding: 0; }
        .wpb-collapse__footer { display: flex; flex-direction: row; padding: 0; gap: 1rem; }
    }
}

@media (min-width: 1500px) {
    .wpb-navigation {
        .logo img { width: 12.3rem; }
        .wpb-sub-menu .wpb-submenu__body ul { padding-right: 4rem; }
    }
}

@media (min-width: 1600px) {
    .wpb-navigation + section { --nav-height: 8rem; }
}