/* ============================================================
   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) ── */
.gtea-widget-navbar-v2--panel-open {
    .gtea-widget-navbar-v2__mobile-panel {
        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;
    z-index: 999;
    /* 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;
    }
}