/* ============================================================
   Navbar V2 — Repeater-based component composition
   ============================================================ */

.gtea-widget-navbar-v2 {
    position: relative;
    display: flex;

    /* ── Inner: flex row of ordered components ── */
    .gtea-widget-navbar-v2__inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%; /* ensures max-width control governs the effective width */
    }

    /* ── Item wrapper (one per repeater component) ── */
    .gtea-widget-navbar-v2__item {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* ── Logo ── */
    .gtea-widget-navbar-v2__logo-link {
        display: inline-flex;
        align-items: center;
    }

    .gtea-widget-navbar-v2__logo-img {
        display: block;
        height: auto;
        width: auto;
        max-width: 100%;
    }

    /* ── Desktop menu ── */
    .gtea-widget-navbar-v2__menu {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .gtea-widget-navbar-v2__menu-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .gtea-widget-navbar-v2__menu-list > li {
        position: relative;
    }

    .gtea-widget-navbar-v2__menu-list > li > a {
        display: inline-flex;
        align-items: center;
        gap: 0.3em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    /* ── Sub menu indicator icon (chevron/arrow svg inside items with children) ── */
    .gtea-widget-navbar-v2__menu-list > li.menu-item-has-children > a svg {
        width: 12px;
        height: 12px;
        margin-left: 8px;
        flex-shrink: 0;
        fill: currentColor;
        transition: fill 0.2s ease;
    }

    /* ── Submenu (dropdown) ── */
    .gtea-widget-navbar-v2__menu .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 200;
        list-style: none;
        margin: 0;
        padding: 0;
        min-width: 180px;
        background: #fff;
    }

    .gtea-widget-navbar-v2__menu-list > li:hover > .sub-menu,
    .gtea-widget-navbar-v2__menu-list > li:focus-within > .sub-menu {
        display: block;
    }

    .gtea-widget-navbar-v2__menu .sub-menu li {
        position: relative;
    }

    .gtea-widget-navbar-v2__menu .sub-menu li a {
        display: block;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    /* Nested submenu opens to the right */
    .gtea-widget-navbar-v2__menu .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    /* ── Search ── */
    .gtea-widget-navbar-v2__search {
        display: flex;
        align-items: center;
    }

    .gtea-widget-navbar-v2__search-form {
        display: flex;
        align-items: center;
    }

    .gtea-widget-navbar-v2__search-group {
        display: flex;
        align-items: center;
    }

    .gtea-widget-navbar-v2__search-input {
        border: 1px solid currentColor;
        background: transparent;
        outline: none;
    }

    .gtea-widget-navbar-v2__search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.3em;
        line-height: 1;

        svg {
            display: block;
            width: 1em;
            height: 1em;
            fill: currentColor;
        }
    }

    /* ── Hamburger trigger ── */
    .gtea-widget-navbar-v2__trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0.4rem;
        margin: 0;
        line-height: 1;
        transition: background-color 0.2s ease;
    }

    .gtea-widget-navbar-v2__trigger svg {
        display: block;
        width: 24px;
        height: 24px;
        fill: currentColor;
        pointer-events: none;
    }

    /* ── Mobile panel ── */
    .gtea-widget-navbar-v2__mobile-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 80%;
        max-width: 360px;
        z-index: 9999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        transition: transform 0.3s ease;
        will-change: transform;
    }

    .gtea-widget-navbar-v2__mobile-panel--right {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    .gtea-widget-navbar-v2__mobile-panel--left {
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }

    /* ── Overlay ── */
    .gtea-widget-navbar-v2__overlay {
        position: fixed;
        inset: 0;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s ease;
    }

    /* ── Mobile menu inside panel ── */
    .gtea-widget-navbar-v2__mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .gtea-widget-navbar-v2__mobile-menu-list li {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .gtea-widget-navbar-v2__mobile-menu-list li a {
        flex: 1;
        display: flex;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    /* Mobile submenu toggle button */
    .gtea-widget-navbar-v2__submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.4rem 0.6rem;
        margin: 0;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .gtea-widget-navbar-v2__submenu-toggle svg {
        display: block;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        fill: currentColor;
        pointer-events: none;
        transform: rotate(90deg);
        transition: transform 0.2s ease, fill 0.2s ease;
    }

    .gtea-widget-navbar-v2__submenu-toggle[aria-expanded="true"] svg {
        transform: rotate(270deg);
    }

    /* Walker SVG inside <a> for mobile items with children — hidden to prevent
       duplication with the JS-injected __submenu-toggle button SVG. */
    .gtea-widget-navbar-v2__mobile-panel .gtea-widget-navbar-v2__mobile-menu-list > li.menu-item-has-children > a svg {
        display: none;
    }

    /* Mobile sub-menu (accordion — hidden by default) */
    .gtea-widget-navbar-v2__mobile-menu-list .sub-menu {
        display: none;
        flex-basis: 100%;
        list-style: none;
        margin: 0;
        padding-left: 1rem;
    }

    .gtea-widget-navbar-v2__mobile-menu-list .sub-menu.is-open {
        display: block;
    }

    .gtea-widget-navbar-v2__mobile-menu-list .sub-menu li a {
        display: block;
        text-decoration: none;
        transition: color 0.2s ease, background-color 0.2s ease;
    }
}

/* ── Editor-only: force all mobile sub menus open for style preview ── */
.gtea-widget-navbar-v2--submenu-preview {
    .gtea-widget-navbar-v2__mobile-panel .gtea-widget-navbar-v2__mobile-menu-list .sub-menu {
        display: block;
    }

    .gtea-widget-navbar-v2__mobile-panel .gtea-widget-navbar-v2__submenu-toggle svg {
        transform: rotate(270deg);
    }
}

/* ── Panel-open state (on widget root) ──
   The closed-position transform lives on the .--right / .--left modifier
   classes (specificity 0,2,0 once nested under the root). The open rule must
   target those same modifier classes so it overrides them with at least equal
   specificity and later source order; targeting only the base __mobile-panel
   leaves the panel stuck at translateX(100%). */
.gtea-widget-navbar-v2--panel-open {
    .gtea-widget-navbar-v2__mobile-panel,
    .gtea-widget-navbar-v2__mobile-panel--right,
    .gtea-widget-navbar-v2__mobile-panel--left {
        transform: translateX(0);
    }

    .gtea-widget-navbar-v2__overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Prevent the sticky-enabled navbar from being selected as a scroll-anchor
   candidate.  When the navbar goes position: fixed the browser would otherwise
   try to adjust scrollY to "maintain" the navbar's visual position, which can
   silently cross threshOut and trigger an immediate deactivation, creating
   the bounce / oscillation loop that appears when the navbar is at the top
   of the page.  The spacer gets the same opt-out via JS (overflowAnchor). */
.gtea-widget-navbar-v2[data-nbv2-fixed] {
    overflow-anchor: none;
}

/* ── Fixed / sticky state ───────────────────────────────────────────────────
 * position: fixed is required — position: sticky is unreliable in Elementor
 * because ancestor containers can have overflow: hidden which kills sticky.
 *
 * --nbv2-sticky-top is a CSS custom property set by JS on the widget element
 * to account for the WordPress admin bar height (0 when no admin bar).
 *
 * The layout jump is prevented by a spacer sibling (same height as the
 * navbar) that JS shows/hides atomically with the fixed state switch.
 *
 * All Elementor sticky-state selectors already target .--fixed — untouched.
 * ─────────────────────────────────────────────────────────────────────────── */
.gtea-widget-navbar-v2--fixed {
    position: fixed;
    top: var(--nbv2-sticky-top, 0px);
    left: 0;
    right: 0;
    /* position: fixed here creates a NEW stacking context, which would otherwise
       trap the descendant overlays — the WC mini-cart panel and the mobile panel
       both use z-index: 9999 to sit on top of the page. A lower value (e.g. 999)
       caps those panels to this context, so any page element with z-index >= 1000
       paints over the cart and it "disappears" the moment the navbar goes sticky.
       Match the plugin's top-layer value (9999) so the panels stay visible. */
    z-index: 9999;
    /* Flex container so justify-content / align-items can position __inner */
    display: flex;
    align-items: center;
    /* Visual-only transitions — no layout properties are animated */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.25s ease;
}

/* __inner inside fixed: width: 100% so max-width (set by the Elementor
   control "Inner max width", default 100%) actually governs the inner width.
   Without width: 100% a flex item sizes to its content, ignoring max-width. */
.gtea-widget-navbar-v2--fixed .gtea-widget-navbar-v2__inner {
    width: 100%;
}

/* Entry fade: JS adds --sticky-enter for 2 frames, removing it triggers
   the opacity transition 0 → 1.  No transform, so no layout side-effects. */
.gtea-widget-navbar-v2--fixed.gtea-widget-navbar-v2--sticky-enter {
    opacity: 0;
}

/* ── Editor sticky preview ──────────────────────────────────────────────────
 * The override below neutralizes position: fixed so that --fixed classes
 * added automatically by JS scroll logic don't break the editor layout.
 *
 * Exception: .--sticky-preview-active is added by PHP when the "Preview
 * sticky in editor" switch is ON.  In that case the override is skipped
 * so the navbar really renders as position: fixed and all sticky styles
 * (background, shadow, colors, etc.) are fully visible and editable.
 *
 * Has zero effect on the frontend.
 * ─────────────────────────────────────────────────────────────────────────── */
body.elementor-editor-active .gtea-widget-navbar-v2--fixed:not(.gtea-widget-navbar-v2--sticky-preview-active) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* ── Per-device visibility ── */
@media (min-width: 1025px) {
    .gtea-widget-navbar-v2__item--hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .gtea-widget-navbar-v2__item--hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .gtea-widget-navbar-v2__item--hide-mobile {
        display: none !important;
    }
}