/**
 * Z Addons for Elementor — Z Nav Menu widget styles.
 *
 * Deliberately minimal defaults: colors, typography, spacing and borders
 * are all controlled from the Elementor panel. This file only provides
 * structure, the dropdown/accordion behavior and the accordion bullet.
 *
 * RTL-ready: positioning and spacing use CSS logical properties
 * (inset-inline-start / margin-inline-*), so the layout mirrors
 * automatically under direction: rtl.
 */

.zae-nav-menu {
        position: relative;
        --zae-bullet-size: 6px;
        --zae-bullet-offset: 12px;
        --zae-bullet-gap: 10px;
}

.zae-nav-menu *,
.zae-nav-menu *::before,
.zae-nav-menu *::after {
        box-sizing: border-box;
}

.zae-nav-menu ul,
.zae-nav-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
}

.zae-nav-menu__notice {
        padding: 14px 18px;
        border: 1px dashed #c00;
        color: #c00;
        background: #fff;
}

/* ---------- Top level list ---------- */

.zae-nav-menu__list {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
}

.zae-nav-menu--vertical .zae-nav-menu__list {
        flex-direction: column;
        align-items: stretch;
}

.zae-nav-menu--stretch.zae-nav-menu--horizontal .zae-nav-menu__list {
        justify-content: space-between;
}

.zae-nav-menu--stretch.zae-nav-menu--vertical .zae-nav-menu__list,
.zae-nav-menu--stretch.zae-nav-menu--accordion .zae-nav-menu__list {
        align-items: stretch;
}

.zae-nav-menu__item {
        position: relative;
}

/* ---------- Links ---------- */

.zae-nav-menu__link,
.zae-nav-menu__sub-link {
        display: flex; /* anchors must be flex/block for vertical padding to apply */
        align-items: center;
        gap: 8px;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.zae-nav-menu__sub-link {
        /* The bullet controls own the bullet-to-text spacing. */
        gap: 0;
}

.zae-nav-menu__link:hover,
.zae-nav-menu__link:focus-visible,
.zae-nav-menu__sub-link:hover,
.zae-nav-menu__sub-link:focus-visible {
        text-decoration: none;
}

.zae-nav-menu__text {
        display: inline-block;
}

/* Toggle icon (rendered after the text by default; before = reversed) */

.zae-nav-menu__arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        line-height: 1;
        transition: color 0.2s ease;
}

.zae-nav-menu__arrow svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
}

.zae-nav-menu__arrow-icon {
        display: inline-flex;
        line-height: 1;
}

.zae-nav-menu__arrow-icon--close {
        display: none;
}

.zae-nav-menu__item.is-open > .zae-nav-menu__link .zae-nav-menu__arrow-icon--open {
        display: none;
}

.zae-nav-menu__item.is-open > .zae-nav-menu__link .zae-nav-menu__arrow-icon--close {
        display: inline-flex;
}

.zae-nav-menu--icon-before .zae-nav-menu__item.zae-has-children > .zae-nav-menu__link {
        flex-direction: row-reverse;
}

/* ---------- Submenu panel (dropdown on desktop / accordion body on mobile) ---------- */

.zae-nav-menu__sub-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background-color: #fff;
        min-width: 200px;
}

/* Nested third level is intentionally not rendered. */
.zae-nav-menu__sub-list .zae-nav-menu__sub-list {
        display: none;
}

/* ---------- Dropdown mode (above the breakpoint) ---------- */

.zae-nav-menu:not(.zae-nav-menu--accordion) .zae-nav-menu__item.zae-has-children > .zae-nav-menu__sub-list {
        position: absolute;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.zae-nav-menu--horizontal:not(.zae-nav-menu--accordion) .zae-nav-menu__item.zae-has-children > .zae-nav-menu__sub-list {
        top: 100%;
        left: 0; /* fallback for browsers without logical properties */
        inset-inline-start: 0;
}

.zae-nav-menu--vertical:not(.zae-nav-menu--accordion) .zae-nav-menu__item.zae-has-children > .zae-nav-menu__sub-list {
        top: 0;
        left: 100%; /* fallback */
        inset-inline-start: 100%;
}

.zae-nav-menu:not(.zae-nav-menu--accordion) .zae-nav-menu__item.zae-has-children.is-open > .zae-nav-menu__sub-list,
.zae-nav-menu:not(.zae-nav-menu--accordion) .zae-nav-menu__item.zae-has-children:focus-within > .zae-nav-menu__sub-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
}

/* ---------- Accordion mode (below the breakpoint) ---------- */

.zae-nav-menu--accordion .zae-nav-menu__list {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
}

.zae-nav-menu--accordion .zae-nav-menu__link,
.zae-nav-menu--accordion .zae-nav-menu__sub-link {
        width: 100%;
}

/* Parent links behave like accordion headers. */
.zae-nav-menu--accordion .zae-nav-menu__item.zae-has-children > .zae-nav-menu__link {
        justify-content: space-between;
}

.zae-nav-menu--accordion .zae-nav-menu__item.zae-has-children > .zae-nav-menu__sub-list {
        position: static;
        height: 0;
        min-height: 0;
        overflow: hidden;
        /*
         * No vertical panel padding in accordion mode: it would leave a dead
         * space under the parent link and after the last sub-item. Vertical
         * rhythm comes from the item padding controls instead.
         */
        padding-top: 0;
        padding-bottom: 0;
        transition-property: height;
        transition-timing-function: ease;
        /* duration is set in JS from the content height for a consistent speed */
}

/* ---------- Accordion bullets ---------- */

.zae-nav-menu__bullet {
        display: none;
        flex: 0 0 auto;
        line-height: 1;
}

.zae-nav-menu--bullets.zae-nav-menu--accordion .zae-nav-menu__sub-link .zae-nav-menu__bullet {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--zae-bullet-size);
        height: var(--zae-bullet-size);
        margin-inline-start: var(--zae-bullet-offset);
        margin-inline-end: var(--zae-bullet-gap);
        background-color: currentColor;
        border-radius: 50%;
}

/* Custom bullet icon replaces the dot. */
.zae-nav-menu--bullets.zae-nav-menu--accordion .zae-nav-menu__sub-link .zae-nav-menu__bullet--icon {
        width: auto;
        height: auto;
        background-color: transparent;
        border-radius: 0;
}

.zae-nav-menu--bullets.zae-nav-menu--accordion .zae-nav-menu__sub-link .zae-nav-menu__bullet--icon svg {
        width: var(--zae-bullet-size);
        height: var(--zae-bullet-size);
        fill: currentColor;
}