/* ============================================================
   NAVIGATION — BASE
   ============================================================ */

.wpb-navigation { --spacing: 2rem; --nav-bg-clr: var(--clr-white); position: absolute; top: var(--spacing); left: var(--spacing); right: var(--spacing); z-index: 1040;
    .container {position: relative; background-color: var(--clr-primary-dark); border-radius: var(--br); 
        .container--asset { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--br); 
            &::before { content: ''; position: absolute; top: -60rem; left: 0; width: 175%;  transform: rotate(180deg); z-index: 0; aspect-ratio: 1800 / 913; background-image: url('/app/themes/wux-theme/assets/img/bg/dark-bg.svg'); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none;}
        }
    }

    .logo { position: absolute; top: -2rem; left: 0; right: 0; width: fit-content; margin-inline: auto; z-index: 1050;
        img { height: 5.6rem; width: auto; }
    }
}


/* ============================================================
   NAVIGATION — COLLAPSE SHARED
   ============================================================ */

.wpb-navigation__collapse { border-bottom-right-radius: var(--br); border-bottom-left-radius: var(--br);
    ul { list-style: none; }

    .menu-item { border-bottom: 1px solid var(--clr-border); font-family: var(--font-accent);
        .menu-link { width: 100%; text-decoration: none; display: inline-flex; align-items: center; column-gap: 1rem; line-height: 1; transition: color var(--ts-duration) var(--ts-function);}
        &:hover {
            .menu-link {color: var(--clr-primary-light);}
        }
    }

    .menu-item--current > .menu-link { color: var(--clr-primary);}

    .wpb-collapse__footer { z-index: 1; position: relative;}
}

.wpb-sub-menu .menu-item { padding: 2.4rem 0; break-inside: avoid;}


/* ============================================================
   NAVIGATION — MOBILE  (max-width: 1199.98px)
   ============================================================ */

@media (max-width: 1199.98px) {

    .wpb-navigation__main { position: relative; height: 6rem; display: flex; align-items: center; justify-content: flex-end; gap: .8rem;
        .btn--nav-toggle { padding: 0; --clr: var(--clr-white); --bg-clr: transparent; --border: none; --hover-border: none; --hover-bg-clr: transparent; --hover-clr: var(--clr-white); font-variation-settings: "slnt" 0;
            span { font-weight: 700; }
            svg { fill: var(--clr-primary-light);
                rect { transition: y var(--ts-25) ease var(--ts-25), transform var(--ts-25) ease, opacity var(--ts-25); transform-origin: center;}
            }
            &:hover svg rect { fill: var(--hover-clr); }
            &:focus svg rect  { fill: var(--focus-clr); }
            &:active svg rect { fill: var(--active-clr); }

            &[aria-expanded="true"] {
                svg .top    { transform: translateY(5px) translateX(-4px) rotate(45deg); }
                svg .middle { opacity: 0; }
                svg .bottom { transform: translateY(-5px) translateX(-4px) rotate(-45deg); }
            }
        }
    }

    .wpb-navigation__collapse { position: relative; top: auto; left: calc(var(--inline-spacing) * -1); right: calc(var(--inline-spacing) * -1); width: calc(100% + (var(--inline-spacing) * 2)); z-index: 1030; display: flex; flex-direction: column;background-color: var(--nav-bg-clr); max-height: 0; overflow: hidden; pointer-events: none; transition: max-height var(--ts-35) ease;
        &.active { max-height: 100dvh; pointer-events: all; overflow-y: auto;}
    }

    .wpb-collapse__header { font-size: 1.6rem; font-weight: bold; padding: 2rem; display: flex; justify-content: space-between; align-items: center;}
    .wpb-collapse__body { padding: 2rem; flex-grow: 1; overflow-y: scroll; overscroll-behavior: contain; position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 16.4rem);
        &.has-active-submenu > .wpb-menu { display: none; }
        &::-webkit-scrollbar       { width: 6px; }
        &::-webkit-scrollbar-thumb { background-color: var(--clr-border); border-radius: 3px; }
    }

    .wpb-collapse__footer {
        .btn--menu-footer { width: 100%; height: 6.4rem; border-radius: 0; }
    }

    .wpb-navigation__collapse .menu-item { padding: 2.4rem 0;
        .menu-link { font-size: 1.8rem; font-weight: 600; justify-content: space-between;}
        &.menu-item-has-children { position: relative;
            .menu-link .btn::after { content: ''; display: block; position: absolute; inset: 0;}
        }
    }

    .wpb-menu--right .menu-item:last-of-type {
        border-bottom: none;
    }

    .wpb-sub-menu { position: static; transform: none; display: none; flex-direction: column; height: auto; overflow: visible; background-color: var(--nav-bg-clr); z-index: 1; transition: none;
        &.active { display: flex;}
        .wpb-sub-menu__header { padding: 2.4rem 0; border-bottom: 1px solid var(--clr-border); font-size: 1.6rem; font-weight: bold; display: flex; align-items: center; justify-content: space-between;
            .wpb-text { display: none; }
            .btn { min-height: fit-content; }
        }

        .menu-item .menu-link {padding: 2.4rem 0;  font-size: 1.6rem; font-weight: 500; justify-content: flex-start;
            i { color: var(--clr-primary-light); }
            &:last-of-type { border-bottom: none; }
        }
    }

}


/* ============================================================
   NAVIGATION — DESKTOP  (min-width: 1200px)
   ============================================================ */

@media (min-width: 1200px) {
    .wpb-navigation .btn--nav-toggle,
    .wpb-navigation .wpb-collapse__header,
    .wpb-navigation__main {
        display: none;
    }

    .wpb-navigation { top: 5rem;
        .container { padding: .6rem var(--inline-spacing);}
        .logo { top: -5rem; 
            img { height: 10.5rem; }
        }
    }
    /* Collapse becomes the full horizontal bar */
    .wpb-navigation__collapse { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem;

        .menu-item { border-bottom: none;
            .menu-link { font-size: 1.6rem; position: relative; padding: 1rem 1.6rem; color: var(--clr-white);}

            &.menu-item-has-children {
                > .menu-link { display: flex; justify-content: space-between;
                    > .btn { --bg-clr: transparent; --border: none; --clr: inherit; width: auto; height: auto; min-height: 0; transform: rotate(90deg); transition: all var(--ts-25) ease;}
                }

                &:hover {
                    &::after { content: ''; width: 32rem; height: 6rem; position: absolute; top: 70%; left: 0; right: 0; bottom: 0; clip-path: polygon(10% 0%, 60% 0%, 100% 100%, 10% 100%); }
                    > .menu-link > .btn { transform: rotate(-90deg); color: var(--clr-primary); }
                    .wpb-sub-menu { pointer-events: all; opacity: 1;}
                }
            }

            &.menu-item--current > .menu-link { 
                &::after {content: ''; width: auto; height: .1rem; background-color: var(--clr-primary-light); position: absolute; left: 1.4rem; right: 1.4rem; bottom: 2rem;}
             }
        }
        
    }

    .wpb-collapse__body { display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center;}

    .wpb-menu { display: flex; align-items: center;
        > .menu-item > .menu-link { padding: 3.2rem 1.4rem;
            > .btn { color: var(--clr-white); --border: none; }
        }

        .wpb-sub-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: none; width: auto; overflow: visible; background-color: var(--nav-bg-clr); border-radius: var(--br); opacity: 0; pointer-events: none; transition: opacity var(--ts-25) ease; display: grid; grid-template-columns: 26rem 1fr; gap: 4rem; padding: 4.8rem;
            .wpb-sub-menu__header {
                .btn--submenu-toggle { display: none; }
                .wpb-sub-menu__title { font-size: clamp(2.4rem, 3vw, 3.8rem); font-weight: bold; line-height: 1; }
            }
            .wpb-sub-menu__body ul { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 4rem;}
            .menu-item { padding: 2rem 0; border-bottom: 1px solid var(--clr-border); position: relative;
                .menu-link { font-size: 1.8rem; font-weight: 500; padding: 0; color: var(--clr-text); transition: all var(--ts-25) ease;
                    i { color: var(--clr-primary-light); transition: all var(--ts-25) ease; }
                    &:hover { color: var(--clr-primary);
                        i { color: var(--clr-primary); }
                    }
                    
                    &::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
                }

            }
        }
        .menu-item-has-children:hover > .wpb-sub-menu { opacity: 1; pointer-events: all;}
    }

} /* end @desktop */


/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .wpb-navigation__collapse,
    .wpb-navigation__collapse .btn--nav-toggle svg rect,
    .wpb-sub-menu,
    .menu-link,
    .menu-link i,
    .menu-item-has-children > .menu-link > .btn {
        transition: none;
    }
}