/* ==========================================================================
   Navigation — computed values verified via DevTools on cbtm.ca
   font: Quicksand 900, color: #4a54ae, 18px, padding: 12px 15px
   GET STARTED: bg #6DC0D5, radius 8px, padding 12px 25px
   ========================================================================== */

/* --- Primary Nav Menu --- */

.nav-primary .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-primary .menu-item {
    position: relative;
}

/* --- Desktop --- */

@media (min-width: 961px) {
    .nav-primary .menu {
        display: flex;
        justify-content: right; /* matches cbtm.ca — items packed right, EN/FR stay adjacent */
        align-items: center;
        gap: 0; /* items touch each other without space-evenly gaps */
    }

    .nav-primary .menu-item {
        display: inline-block;
    }
}

/* --- Menu link base: Quicksand 900, #4a54ae, 18px --- */

.nav-primary .menu-item > a {
    display: block;
    font-family: var(--font-quicksand);
    font-size: 18px;
    font-weight: 900;
    color: #4a54ae;
    text-decoration: none;
    outline-offset: -1px;
    padding: 12px 15px;
    transition: all 0.4s ease-in-out;
}

@media (any-hover: hover) {
    .nav-primary .menu-item > a:hover {
        color: var(--color-purple-light);
        text-decoration: none;
    }
}

.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a {
    color: var(--color-navy);
    text-decoration: none;
}

/* Top-level active item: purple bar under link (production) */
.nav-primary .menu > .current-menu-item > a::after,
.nav-primary .menu > .current-menu-ancestor > a::after {
    content: '';
    width: 100%;
    height: 5px;
    border-radius: 10px;
    margin-top: 0px;
    display: block;
    background: #8864B9;
}

/* GET STARTED button: no ::after bar */
.nav-primary .menu > .menu-highlight > a::after {
    display: none;
}

/* --- GET STARTED — teal button (add CSS class "menu-highlight" in WP Admin → Menus) ---
   Fallback: last-child that is NOT the WPML switcher                                    */

.nav-primary .menu > .menu-highlight > a
 {
    background-color: #6DC0D5;
    border-radius: 8px;
    color: black;
    font-weight: 900;
    padding: 12px 25px;
    text-shadow: 0px 0px 3px #6DC0D5;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.57);
}

@media (any-hover: hover) {
    .nav-primary .menu > .menu-highlight > a:hover {
        background-color: var(--color-purple-light) !important;
    }
}

/* --- Dropdown Sub-menu --- */

.nav-primary .sub-menu {
    width: 180px;
    min-width: 180px;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #eee;
    border-top: 1px solid #eee;
    z-index: var(--z-dropdown);
    padding: 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-primary .menu-item:hover > .sub-menu,
.nav-primary .menu-item:focus-within > .sub-menu,
.nav-primary .menu-item.submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.nav-primary .sub-menu .menu-item {
    display: block;
}

.nav-primary .sub-menu .menu-item > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-quicksand);
    font-size: 18px;
    font-weight: 900;
    color: #4a54ae;
    text-decoration: none;
    padding: 15px 18px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-primary .sub-menu .menu-item:last-child > a {
    border-bottom: 0;
}

/* Active item in submenu: purple bar (production) */
.nav-primary .sub-menu .current-menu-item > a::after {
    content: '';
    width: 100%;
    height: 5px;
    border-radius: 10px;
    margin-top: 0;
    display: block;
    background: #8864B9;
}

@media (any-hover: hover) {
    .nav-primary .sub-menu .menu-item > a:hover {
        color: var(--color-purple-light);
    }
}

/* Nested sub-menu (e.g. multi-level) */
.nav-primary .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: -1px;
    border-top: 1px solid #eee;
}

/* --- WPML Language Switcher — segmented pill (matches cbtm.ca) ---
   Verified via DevTools 2026-03-18:
   current  (EN): transparent bg, 2px solid #4A54AE border, purple text, left-rounded
   inactive (FR): #4A54AE fill, white text, right-rounded
   EN/FR are adjacent because nav uses justify-content: right (no space-evenly gaps)
   ------------------------------------------------------------------ */

.nav-primary .wpml-ls-menu-item {
    border: 2px solid #4A54AE;
    /* no display override — stays inline-block like other menu-items */
}

.nav-primary .wpml-ls-first-item {
    border-radius: 10px 0 0 10px;
}

.nav-primary .wpml-ls-last-item {
    border-radius: 0 10px 10px 0;
    border-left: none; /* no double border at the join */
}

/* Inactive (non-current) language: filled purple */
.nav-primary .wpml-ls-menu-item:not(.wpml-ls-current-language) {
    background-color: #4A54AE;
}

/* Link base — flex to center the span content inside */
.nav-primary .wpml-ls-menu-item > a,
.nav-primary .wpml-ls-menu-item > a:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-quicksand);
    font-size: 18px;
    font-weight: 900;
    padding: 9px 15px;
    text-decoration: none;
    line-height: 1.5;
}

/* Current language: purple text */
.nav-primary .wpml-ls-current-language > a,
.nav-primary .wpml-ls-current-language > a:visited {
    color: #4A54AE;
}

/* Inactive language: white text */
.nav-primary .wpml-ls-menu-item:not(.wpml-ls-current-language) > a,
.nav-primary .wpml-ls-menu-item:not(.wpml-ls-current-language) > a:visited {
    color: #ffffff;
}

@media (any-hover: hover) {
    .nav-primary .wpml-ls-current-language > a:hover {
        color: var(--color-purple-light);
    }

    .nav-primary .wpml-ls-menu-item:not(.wpml-ls-current-language) > a:hover {
        opacity: 0.8;
    }
}

/* Mobile: full rounded corners, add back left border removed above */
@media (max-width: 960px) {
    .nav-primary .wpml-ls-first-item {
        border-radius: 10px;
        margin-top: 4px;
    }

    .nav-primary .wpml-ls-last-item {
        border-radius: 10px;
        border-left: 2px solid #4A54AE;
        margin-top: 4px;
    }
}

/* --- Sub-Menu Toggle Button (mobile only) --- */

.sub-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: #4a54ae;
    box-shadow: none;
    transition: transform var(--transition-fast);
}

.sub-menu-toggle::after {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.sub-menu-toggle--open::after {
    transform: rotate(-135deg);
}

/* --- Mobile Navigation --- */

@media (max-width: 960px) {
    .nav-primary .menu {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-primary .menu-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-primary .menu-item > a {
        flex: 1;
        padding: 12px 0;
        font-size: 16px;
    }

    .nav-primary .menu .menu-item > a {
      white-space: nowrap;
    }

    /* Reset GET STARTED on mobile */
    .nav-primary .menu > .menu-highlight > a,
    .nav-primary .menu > .menu-item:last-child:not(.wpml-ls-menu-item) > a {
        margin-left: 0;
        display: block;
        text-align: center;
        padding: 12px 20px;
    }

    .nav-primary .sub-menu {
        width: 100%;
        min-width: 0;
        position: static;
        border: none;
        border-top: none;
        padding-left: var(--spacing-lg);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .nav-primary .sub-menu .menu-item > a {
        border-bottom: 1px solid #eee;
    }

    .nav-primary .sub-menu--open {
        max-height: 500px;
    }

    .nav-primary .menu-item > .sub-menu {
        flex-basis: 100%;
    }

    .nav-primary .sub-menu .sub-menu {
        left: 0;
        margin: 0;
    }

    .sub-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Footer Navigation (secondary) --- */

.nav-secondary .menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-secondary .menu-item > a {
    font-size: var(--font-size-base);
    text-decoration: none;
    color: var(--color-white);
    transition: opacity var(--transition-fast);
}

@media (any-hover: hover) {
    .nav-secondary .menu-item > a:hover {
        opacity: 0.8;
    }
}