/* ============================================================
   Navigation – Base
   ============================================================ */

   
.wpb-navigation { --nav-bg-clr: #fff; border-bottom: 1px solid transparent; position: sticky; top: var(--wp-admin--admin-bar--height, 0px); right: 0; left: 0; z-index: 1040; background: #fff; transition: background-color var(--ts-25) ease, top var(--ts-25) ease, box-shadow var(--ts-25) ease;
    &.is-sticky { background-color: var(--nav-bg-clr)!important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
    .container { position: static; display: flex; align-items: center; justify-content: space-between; }

    /* Shared link styles for all menu levels */
    .wpb-menu .menu-item .menu-link { font-family: var(--font-secondary); transition: color var(--ts-duration) var(--ts-function);
        i.fa-chevron-right { font-size: 1.4rem; margin-left: auto; }
        .btn--submenu-toggle { --clr: var(--clr-primary); --bg-clr: transparent; --p: 0; --border: none; margin-left: auto; min-width: 5.2rem; }
    }

    /* Top utility bar */
    .wpb-navigation__top { display: none; background-color: var(--clr-beige);
        .container { justify-content: end; column-gap: 3.2rem; }

        ul { list-style: none; display: flex; column-gap: 2.4rem; 
            .menu-item .menu-link { font-family: var(--font-secondary); font-size: 1.4rem; font-weight: 600; text-decoration: none; min-height: 5.6rem; padding: 1rem 0; display: flex; align-items: center; 
                &:hover { color: var(--clr-primary); }
            }
        }

        .wpb-dropdown:is(.wpb-dropdown--wpml, .wpb-dropdown--topmenu) {
            .wpb-dropdown__toggle { min-height: 5.6rem;
                i, span { transition-property: color, transform; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); } 
                &:hover { i, span { color: var(--clr-primary); } }
            }
        }
    }

    .logo { display: inline-flex; z-index: 1040;
        img { width: 11rem; height: auto; }
    }

    &:has(.menu-item.is-active) { background-color: #fff; }
}

body:has(.wpb-hero--home, .wpb-hero--single) .wpb-navigation { background: transparent; position: fixed; }

/* ============================================================
   Nav toggle button
   ============================================================ */

/* Header height used to come from the toggle; keep it on the bar now the toggle is a compact button */
.wpb-navigation__main .container { min-height: 8rem; }

.nav-toggle.btn { --min-height: 4.4rem; --p: 0 1.6rem; --gap: .8rem; --border: 1px solid var(--clr-border); z-index: 1040;

    svg { fill: var(--clr-primary); transition: fill var(--tsd) var(--tsf);
        rect { transition: y var(--ts-25) ease var(--ts-25), transform var(--ts-25) ease, opacity var(--ts-25); transform-origin: center; }
    }

    &:hover svg  { fill: var(--hover-clr); }
    &:focus svg  { fill: var(--focus-clr); }
    &:active svg { 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); }
    }
}

/* ============================================================
   Collapse panel – shared base
   ============================================================ */

.wpb-navigation__collapse {
    ul { list-style: none; }

    .menu-item .menu-link { display: block; color: var(--clr-text); width: 100%; text-decoration: none; line-height: 1; transition: color var(--ts-duration) var(--ts-function); 
        .menu-link__text { display: flex; width: 100%; align-items: center; column-gap: .5rem; }
        .fa-chevron-right { color: var(--clr-primary); }
    }
}

/* ============================================================
   Mobile  (≤ 991px)
   ============================================================ */

@media (max-width: 991.98px) {
    .wpb-navigation__collapse { max-width: var(--container-width--md); padding-top: var(--nav-height); margin-inline: auto; opacity: 0; pointer-events: none; width: 100%; display: none; flex-direction: column; position: fixed; top: 0; inset-inline: 0; bottom: 0; background-color: var(--nav-bg-clr); z-index: 1030; overflow: hidden; transition: opacity var(--ts-35) ease;
        &.active { pointer-events: all; opacity: 1; }

        .wpb-collapse__inner { display: flex; flex-grow: 1; flex-direction: column; border-top: 1px solid var(--clr-border); padding: 2.4rem 2rem; position: relative; }

        .wpb-collapse__body { flex-grow: 1; overflow: hidden; overflow-y: auto; overscroll-behavior: contain; }

        .wpb-collapse__footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; padding-top: 3.2rem; border-top: 1px solid var(--clr-border); 

            /* Card opens upwards, so the rounded corners and the divider flip along */
            .wpb-dropdown.wpb-dropdown--wpml { justify-self: start;
                &::before { inset: -.8rem calc(-1 * var(--wpml-pad-x)); border-radius: 0 0 var(--wpml-radius) var(--wpml-radius); clip-path: inset(0 -4rem -4rem -4rem); }
                .wpb-dropdown__menu { top: auto; bottom: 100%; border-top: none; border-bottom: 1px solid var(--clr-border); border-radius: var(--wpml-radius) var(--wpml-radius) 0 0; clip-path: inset(-4rem -4rem 0 -4rem); }
            }
        }

        /* Main menu font size tokens */
        .wpb-menu--mainmenu { --fs: 1.8rem; --fw: 600;

            .menu-item {
                .menu-link .menu-link__text { min-height: 6.2rem; padding: .5rem 0; }

                + .menu-item { border-top: 1px solid var(--clr-border); }
            }
        }

        .wpb-menu--topmenu { --fs: 1.6rem; --fw: 400; }

        .menu-item {
            .menu-link .menu-link__text { font-size: var(--fs); font-weight: var(--fw); padding: 1.5rem 0; }
            &.menu-item-has-children > .menu-link > .btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding-left: 2rem; }
        }
    }

    /* Mobile sub-menu slide-in panel */
    .wpb-sub-menu { display: flex; flex-direction: column; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--nav-bg-clr); z-index: 1030; padding: 2.4rem 2rem; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease;
        &.active { transform: translate3d(0, 0, 0); }

        .wpb-sub-menu__body { padding: 0 0 2rem; overflow: hidden; display: flex; flex-direction: column; flex-grow: 1;

            .menu-level { display: flex; flex-direction: column; flex-grow: 1; height: 100%; overflow-y: auto; overscroll-behavior: contain;
                .menu-level__cta { margin-top: auto; }            
            }

            .menu-level__title { font-size: 2.4rem; font-family: var(--font-secondary); font-weight: 600; display: block; padding-top: 1rem; }

            /* Smaller font for items when a "parent" back-link is present */
            ul:has(.menu-item.menu-item--parent) .menu-item:not(.menu-item--parent) .menu-link { font-size: 1.4rem; font-weight: 400; }
        }
    }
}

@media (max-width: 767.98px) {
    .wpb-navigation__collapse { max-width: var(--container-width--sm); }
}

@media (max-width: 575.98px) {
    .wpb-navigation__collapse { max-width: 100%; }
}

/* ============================================================
   Desktop  (≥ 992px)
   ============================================================ */

@media (min-width: 992px) {
    /* Hide mobile-only controls */
    .wpb-navigation { top: var(--wp-admin--admin-bar--height, 0px);
        &.is-sticky { top: calc(-5.6rem + var(--wp-admin--admin-bar--height, 0px)); }
        &.is-scrolled-up { top: var(--wp-admin--admin-bar--height, 0px); }
        .nav-toggle, .wpb-collapse__header, .wpb-sub-menu__header { display: none; }

        .wpb-navigation__top { display: block; }
        .logo img { width: 14rem; }
    }

    .wpb-navigation__collapse { padding-left: 3.2rem; width: 100%; display: flex !important;
        .wpb-collapse__inner { display: flex; flex-grow: 1; border-top: none; justify-content: space-between; align-items: center; }

        .wpb-collapse__footer .wpb-dropdown.wpb-dropdown--wpml { display: none; }
        .wpb-menu.wpb-menu--topmenu { display: none; }

        /* ── Level 1: horizontal top-level nav bar ── */
        .menu-level.level-1 {
            > .menu-level__items { display: flex; align-items: center; column-gap: .2rem; 
                > .menu-item {
                    > .menu-link { min-height: 10rem; display: flex; align-items: center; font-weight: 600; 
                        > .menu-link__text { border: 1px solid transparent; min-height: 3.6rem; padding: 0 1.5rem; border-radius: 4rem; transition: border-color var(--ts-duration) var(--ts-function); 
                            > .fa-chevron-right { display: none; }

                            .btn { --min-height: 0; min-width: 0;
                                i { transform: rotate(90deg); font-size: 1.2rem; transition: transform 200ms var(--ts-function); }
                            }
                        }
                    }

                    /* Active state: hover on link, or is-active on the <li> */
                    > .menu-link:hover,
                    &.is-active > .menu-link {
                        > .menu-link__text { border-color: var(--clr-border); }
                        .btn i { transform: rotate(-90deg); }
                    }
                }
            }

            > .menu-level__submenus > .wpb-sub-menu > .wpb-sub-menu__body { max-width: var(--container-width--lg); margin: auto; padding: 0 1.8rem; }
        }

        /* Sub-menu dropdown panel */
        .wpb-sub-menu { position: absolute; top: 100%; right: 0; left: 0; width: 100%; height: auto !important; background-color: var(--nav-bg-clr); opacity: 0; overflow: visible; pointer-events: none; transition: opacity var(--ts-25) ease;
            &.is-active { opacity: 1; pointer-events: all; }

            .wpb-sub-menu__header { display: none; }

            .wpb-sub-menu__body { height: 100%;

                /* Shared item styles inside all sub-menu levels */
                .menu-level__items { padding: 2.4rem 0; max-height: 64.4rem; overflow-y: auto;
                    &::-webkit-scrollbar { width: .2rem; }
                    &::-webkit-scrollbar-track { background: #fff; } 
                    &::-webkit-scrollbar-thumb { background: var(--clr-border); }

                    > .menu-item {
                        &.menu-item--parent { display: none; }

                        > .menu-link .menu-link__text { font-weight: 600; min-height: 6.2rem; padding: .5rem 3.2rem; transition-property: color, background-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function); 
                            .btn--submenu-toggle { font-size: 1rem; min-width: 0; }
                        }
                    }
                }

                /* Grid layout shared across all depth levels */
                .menu-level { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); height: 100%; 
                    .menu-level__submenus { display: grid; grid-template-areas: "submenus"; position: relative;  grid-column: span var(--submenu-span);
                        /* Nested sub-menus: stacked, shown via is-active */
                        .wpb-sub-menu { grid-area: submenus; position: static; display: none; 
                            &.is-active { display: block; }
                        }
                    }

					.menu-level__cta { padding-block: 6.4rem; }

                    /* Level 2: 4-column grid, left column has light bg */
                    &.level-2 { --gc: 4; position: relative;
                        &::before { content: ''; width: 999rem; height: 100%; position: absolute; top: 0; right: 100%; bottom: 0; left: auto; background-color: var(--clr-light); z-index: 1; }

                        > .menu-level__items { background-color: var(--clr-light); position: relative; z-index: 1;
                            > .menu-item {
                                > .menu-link .menu-link__text { border-radius: .4rem 0 0 .4rem; }
                                > .menu-link:hover .menu-link__text,
                                &.is-active > .menu-link .menu-link__text { background-color: #fff; }
                            }
                        }

                        .menu-level__submenus { --submenu-span: 2; }
                    }

                    /* Level 3: 3-column grid */
                    &.level-3 { --gc: 2;

                        > .menu-level__title { display: none; }
                        > .menu-level__submenus { --submenu-span: 1; }

                        > .menu-level__items { border-right: 1px solid var(--clr-border);
                            > .menu-item > .menu-link:hover .menu-link__text,
                            > .menu-item.is-active > .menu-link .menu-link__text { background-color: var(--clr-primary-10); }
                        }
                    }

                    /* Level 4: 2-column grid with title row */
                    &.level-4 { --gc: 1; grid-template-rows: auto 1fr;

                        > .menu-level__title { grid-column: span 2; font-family: var(--font-secondary); font-size: 1.8rem; font-weight: 600; padding: 3.2rem 3.2rem 1.2rem; }

                        > .menu-level__items { padding-top: 0; 
                            .menu-link:hover { color: var(--clr-primary); }
                        }
                        > .menu-level__submenus { grid-column: span 1; }
                    }
                }
            }
        }
    }
}

/* ============================================================
   Desktop breakpoint overrides
   ============================================================ */

@media (min-width: 1200px) {
    .wpb-navigation .logo img { width: 18rem; }

    .wpb-navigation__collapse { padding-left: 4.8rem;
        .menu-level.level-1 > .menu-level__submenus > .wpb-sub-menu > .wpb-sub-menu__body { max-width: var(--container-width--xl); }
    }
}

@media (min-width: 1400px) {
    .wpb-navigation__collapse {
        .menu-level.level-1 > .menu-level__submenus > .wpb-sub-menu > .wpb-sub-menu__body { max-width: var(--container-width--xxl); }

        .wpb-sub-menu .wpb-sub-menu__body .menu-level {
            &.level-2 { grid-template-columns: 32rem 33rem 1fr 36.1rem; }
            &.level-3 { grid-template-columns: 33rem 40rem; }
            &.level-4 { padding-left: 1.6rem; display: flex; flex-direction: column; }
        }
    }
}

@media (min-width: 1600px) {
    .wpb-navigation__collapse {
        .menu-level.level-1 > .menu-level__submenus > .wpb-sub-menu > .wpb-sub-menu__body { max-width: var(--container-width--xxxl); }
    }
}