/**
 * EAAS Theme - Navigation Styles
 *
 * @package    EAAS
 * @version    2.5
 * @author     Rodolphe
 * @link       https://enaccordavecsoi.fr
 * @file       navigation.css
 */

.main-navigation {
    display: flex;
    align-items: center;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--hamburger-padding, 4px);
    overflow: visible;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu-toggle span {
    display: block;
    width: var(--hamburger-width-mobile, 22px);
    height: var(--hamburger-line-height, 2px);
    background: var(--hamburger-color, var(--header-text-color));
    margin: var(--hamburger-line-spacing, 4px) 0;
    transition: var(--transition);
    transform-origin: center;
}

.menu-toggle:hover span {
    background: var(--hamburger-hover-color, var(--secondary-color));
}

.menu-toggle.active span {
    background: var(--hamburger-active-color, var(--hamburger-color));
}

.primary-menu {
    display: flex;
    gap: var(--nav-gap, 35px);
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-menu li {
    position: relative;
    list-style: none;
}

.primary-menu > li > a {
    color: var(--header-text-color);
    font-weight: var(--font-weight-medium, 500);
    padding: var(--spacing-xs, 10px) 0;
    display: block;
    position: relative;
    font-size: var(--nav-font-size, 15px);
    letter-spacing: var(--letter-spacing-wide, 0.3px);
}

.primary-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: var(--spacing-2xs, 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: var(--nav-underline-height, 2px);
    background: var(--gradient-cta);
    transition: var(--transition);
    border-radius: var(--border-radius-sm, 2px);
}

.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after {
    width: 100%;
}

.primary-menu > li > a:hover {
    color: var(--secondary-color);
}

.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--body-bg);
    min-width: var(--submenu-width, 240px);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--spacing-xs, 10px));
    transition: var(--transition);
    border-radius: var(--border-radius-lg, 12px);
    padding: var(--spacing-xs, 12px) 0;
    margin-top: var(--spacing-xs, 10px);
    border: var(--border-width, 1px) solid var(--border-color, rgba(0,0,0,0.06));
    z-index: var(--z-dropdown);
}

.primary-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.primary-menu .sub-menu li a {
    padding: var(--spacing-xs, 12px) var(--spacing-lg, 25px);
    display: block;
    color: var(--text-color);
    transition: var(--transition);
}

.primary-menu .sub-menu li a:hover {
    background: var(--light-bg);
    color: var(--secondary-color);
    padding-left: var(--spacing-xl, 30px);
}

@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;
        top: var(--header-height);
        left: auto;
        right: 0;
        width: 100%;
        max-width: var(--mobile-menu-width, 260px);
        background: var(--body-bg);
        padding: var(--mobile-menu-padding-y, 20px) var(--mobile-menu-padding-x, 20px);
        transform: translateX(100%);
        transition: var(--transition);
        box-shadow: var(--shadow-lg, 0 5px 20px rgba(0,0,0,0.1));
        max-height: calc(100vh - var(--header-height-mobile, 80px));
        overflow-y: auto;
        border-left: var(--border-width, 1px) solid var(--border-color, rgba(0,0,0,0.05));
    }

    .main-navigation.active {
        transform: translateX(0);
    }

    .primary-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .primary-menu li {
        width: 100%;
        border-bottom: var(--border-width, 1px) solid var(--light-bg);
    }

    .primary-menu > li > a {
        padding: var(--mobile-menu-item-padding, 12px) 0;
        font-size: var(--mobile-menu-font-size, 14px);
        border-bottom: var(--border-width, 1px) solid var(--border-color, rgba(0,0,0,0.03));
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .primary-menu > li:last-child > a {
        border-bottom: none;
    }

    .primary-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--light-bg);
        margin: var(--spacing-xs, 10px) 0;
        display: none;
    }

    .primary-menu li.menu-item-has-children.active > .sub-menu {
        display: block;
    }

    .primary-menu .sub-menu li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Small Mobile (max 480px) */
@media screen and (max-width: 480px) {
    .main-navigation {
        max-width: 100%;
        top: var(--header-height-mobile, 70px);
        max-height: calc(100vh - var(--header-height-mobile, 70px));
        padding: var(--spacing-md, 15px);
    }

    .primary-menu > li > a {
        font-size: var(--font-size-xs, 13px);
        padding: var(--spacing-sm, 10px) 0;
    }

    .primary-menu .sub-menu li a {
        padding: var(--spacing-sm, 10px) var(--spacing-md, 20px);
        font-size: var(--font-size-xs, 13px);
    }

    .menu-toggle span {
        width: calc(var(--hamburger-width-mobile, 22px) * 0.91);
    }
}

/* Very Small Mobile (max 360px) */
@media screen and (max-width: 360px) {
    .main-navigation {
        top: var(--header-height-mobile, 70px);
        max-height: calc(100vh - var(--header-height-mobile, 70px));
        padding: var(--spacing-sm, 12px);
    }

    .primary-menu > li > a {
        font-size: var(--font-size-xs, 12px);
    }

    .primary-menu .sub-menu li a {
        padding: var(--spacing-sm, 10px) var(--spacing-md, 16px);
        font-size: var(--font-size-xs, 12px);
    }
}

.menu-toggle span.rotate-up {
    transform: translateY(calc(var(--hamburger-line-height, 2px) + var(--hamburger-line-spacing, 4px))) rotate(45deg);
}

.menu-toggle span.rotate-down {
    transform: translateY(calc((var(--hamburger-line-height, 2px) + var(--hamburger-line-spacing, 4px)) * -1)) rotate(-45deg);
}

.menu-toggle span.hide {
    opacity: 0;
}