/* ================================================================
   FEF NAVIGATION WIDGET
   ================================================================ */
.fef-nav{position:relative;z-index:100}
.fef-nav-menu,.fef-nav-submenu{list-style:none;margin:0;padding:0}
.fef-nav-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;white-space:nowrap;transition:all 0.3s ease;position:relative;cursor:pointer;box-sizing:border-box}
.fef-nav-link i,.fef-nav-link svg{flex-shrink:0}
.fef-nav-arrow{font-size:10px;margin-left:auto;transition:transform 0.3s ease}
.fef-nav-text{flex:1}

/* ── Arrow swap mode: show normal, hide active — toggle on open ── */
.fef-nav-arrow-swap .fef-nav-arrow-active{display:none}
.fef-nav-arrow-swap .fef-nav-item.fef-nav-open>.fef-nav-link .fef-nav-arrow-normal{display:none}
.fef-nav-arrow-swap .fef-nav-item.fef-nav-open>.fef-nav-link .fef-nav-arrow-active{display:inline-flex}
/* Horizontal hover: also swap on hover */
.fef-nav-arrow-swap.fef-nav-horizontal .fef-nav-item:hover>.fef-nav-link .fef-nav-arrow-normal{display:none}
.fef-nav-arrow-swap.fef-nav-horizontal .fef-nav-item:hover>.fef-nav-link .fef-nav-arrow-active{display:inline-flex}

/* ── Arrow animate mode: rotate on open/hover ── */
.fef-nav-arrow-animate .fef-nav-item.fef-nav-open>.fef-nav-link .fef-nav-arrow{transform:rotate(180deg)}
.fef-nav-arrow-animate.fef-nav-horizontal .fef-nav-item:hover>.fef-nav-link .fef-nav-arrow{transform:rotate(180deg)}

/* ── Horizontal ── */
.fef-nav-horizontal .fef-nav-menu{display:flex;flex-wrap:wrap;align-items:stretch}
.fef-nav-horizontal .fef-nav-item{position:relative}
.fef-nav-horizontal .fef-nav-link-0{padding:12px 16px;font-weight:500}

/* ── Vertical ── */
.fef-nav-vertical .fef-nav-menu{display:flex;flex-direction:column}
.fef-nav-vertical .fef-nav-link-0{padding:10px 16px;font-weight:500}
.fef-nav-vertical .fef-nav-submenu{position:relative;top:0;left:0;box-shadow:none;border:none;padding-left:16px;opacity:1;visibility:visible;pointer-events:auto;display:none;transform:none!important}
.fef-nav-vertical .fef-nav-item.fef-nav-open>.fef-nav-submenu{display:block}
.fef-nav-vertical .fef-nav-arrow{transition:transform 0.3s ease}

/* ── Dropdown Containers ── */
.fef-nav-horizontal .fef-nav-submenu{
    position:absolute;top:100%;left:0;min-width:200px;z-index:200;
    background:#fff;border:1px solid #e2e8f0;border-radius:6px;
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s
}
.fef-nav-horizontal .fef-nav-submenu .fef-nav-submenu{top:0;left:100%}
/* Flip classes: JS adds these when viewport space is blocked */
.fef-nav-horizontal .fef-nav-submenu.fef-nav-flip-h{left:auto;right:100%}
.fef-nav-horizontal .fef-nav-submenu.fef-nav-flip-v{top:auto;bottom:0}
/* Hover bridge: invisible hitbox so mouse can travel from parent item to nested submenu */
.fef-nav-horizontal .fef-nav-submenu .fef-nav-has-children::after{content:'';position:absolute;right:-8px;top:0;width:16px;height:100%;z-index:1}
.fef-nav-horizontal .fef-nav-submenu .fef-nav-has-children.fef-nav-flip-parent::after{right:auto;left:-8px}
.fef-nav-horizontal .fef-nav-submenu .fef-nav-submenu::before{content:'';position:absolute;left:-8px;top:0;width:8px;height:100%}
.fef-nav-horizontal .fef-nav-submenu.fef-nav-flip-h::before{left:auto;right:-8px}
.fef-nav-horizontal .fef-nav-item:hover>.fef-nav-submenu,
.fef-nav-horizontal .fef-nav-item.fef-nav-open>.fef-nav-submenu{opacity:1;visibility:visible;pointer-events:auto}
.fef-nav-submenu .fef-nav-link{padding:8px 16px;font-size:14px;color:#334155;transition:all 0.2s ease}

/* ── Effects ── */
.fef-nav-effect-none .fef-nav-submenu{transition:none!important}
.fef-nav-effect-fade .fef-nav-submenu{transform:none}
.fef-nav-effect-slidedown .fef-nav-submenu{transform:translateY(-8px)}
.fef-nav-effect-slidedown .fef-nav-item:hover>.fef-nav-submenu,.fef-nav-effect-slidedown .fef-nav-item.fef-nav-open>.fef-nav-submenu{transform:translateY(0)}
.fef-nav-effect-slideup .fef-nav-submenu{transform:translateY(8px)}
.fef-nav-effect-slideup .fef-nav-item:hover>.fef-nav-submenu,.fef-nav-effect-slideup .fef-nav-item.fef-nav-open>.fef-nav-submenu{transform:translateY(0)}
.fef-nav-effect-slow-slide .fef-nav-submenu{transform:translateY(-12px);transition-duration:500ms!important}
.fef-nav-effect-slow-slide .fef-nav-item:hover>.fef-nav-submenu,.fef-nav-effect-slow-slide .fef-nav-item.fef-nav-open>.fef-nav-submenu{transform:translateY(0)}
.fef-nav-effect-scale .fef-nav-submenu{transform:scale(0.9);transform-origin:top left}
.fef-nav-effect-scale .fef-nav-item:hover>.fef-nav-submenu,.fef-nav-effect-scale .fef-nav-item.fef-nav-open>.fef-nav-submenu{transform:scale(1)}
.fef-nav-effect-flip .fef-nav-submenu{transform:perspective(600px) rotateX(-10deg);transform-origin:top center}
.fef-nav-effect-flip .fef-nav-item:hover>.fef-nav-submenu,.fef-nav-effect-flip .fef-nav-item.fef-nav-open>.fef-nav-submenu{transform:perspective(600px) rotateX(0)}
.fef-nav-effect-elastic .fef-nav-submenu{transform:translateY(-10px) scale(0.95);transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)!important}
.fef-nav-effect-elastic .fef-nav-item:hover>.fef-nav-submenu,.fef-nav-effect-elastic .fef-nav-item.fef-nav-open>.fef-nav-submenu{transform:translateY(0) scale(1)}

/* ── Sticky mode: delay submenu close ── */
.fef-nav-sticky .fef-nav-submenu{transition-delay:0s,0s,0.15s}
.fef-nav-sticky .fef-nav-item:hover>.fef-nav-submenu{transition-delay:0s}

/* ── Icon Placement: Above ── */
.fef-nav-icons-above .fef-nav-link-0{flex-direction:column;text-align:center}
.fef-nav-icons-above .fef-nav-link-0 .fef-nav-icon{order:-1}
.fef-nav-icons-above .fef-nav-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%)}

/* ── Hover Underline / Overline ── */
.fef-nav-hover-underline .fef-nav-link-0::after,.fef-nav-hover-overline .fef-nav-link-0::after{content:'';position:absolute;left:50%;width:0;height:2px;background:currentColor;transition:all 0.3s ease;transform:translateX(-50%)}
.fef-nav-hover-underline .fef-nav-link-0::after{bottom:0}
.fef-nav-hover-overline .fef-nav-link-0::after{top:0}
.fef-nav-hover-underline .fef-nav-item:hover>.fef-nav-link-0::after,.fef-nav-hover-overline .fef-nav-item:hover>.fef-nav-link-0::after,
.fef-nav-hover-underline .fef-nav-item.current-menu-item>.fef-nav-link-0::after,.fef-nav-hover-overline .fef-nav-item.current-menu-item>.fef-nav-link-0::after{width:80%}

/* ── Hover BG slide ── */
.fef-nav-hover-bg-slide .fef-nav-link-0::before{content:'';position:absolute;inset:0;background:var(--fef-nav-hover-bg,rgba(0,0,0,0.05));transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease;z-index:-1;border-radius:inherit}
.fef-nav-hover-bg-slide .fef-nav-item:hover>.fef-nav-link-0::before{transform:scaleX(1)}

/* ── Dividers ── */
.fef-nav-dividers.fef-nav-horizontal .fef-nav-menu>.fef-nav-item+.fef-nav-item{border-left:1px solid #e2e8f0}
.fef-nav-dividers.fef-nav-vertical .fef-nav-menu>.fef-nav-item+.fef-nav-item{border-top:1px solid #e2e8f0}

/* ── Active ── */
.fef-nav-item.current-menu-item>.fef-nav-link,.fef-nav-item.current-menu-ancestor>.fef-nav-link{font-weight:600}

/* ── Post Count Badge ── */
.fef-nav-count{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;line-height:1;padding:1px 6px;border-radius:10px;background:#f1f5f9;color:#64748b;margin-left:6px;white-space:nowrap}
.fef-nav-count-sup{position:absolute;top:-4px;right:-4px;margin-left:0;font-size:10px;min-width:16px;text-align:center}

/* ── Mobile Toggle ── */
.fef-nav-toggle{display:none;align-items:center;justify-content:center;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:8px 12px;font-size:20px;cursor:pointer;color:inherit;transition:all 0.3s ease;line-height:1;box-sizing:border-box;z-index:9990}
.fef-nav-toggle img{object-fit:contain}

/* Toggle text wrapper */
.fef-nav-toggle-wrap{display:none;align-items:center;gap:8px}
.fef-nav-toggle-wrap .fef-nav-toggle{display:flex}
.fef-nav-toggle-label{font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
.fef-nav-toggle-text-top{flex-direction:column}
.fef-nav-toggle-text-top .fef-nav-toggle-label{order:-1}

/* Toggle predefined placements */
.fef-nav-toggle-placed{z-index:9990}
.fef-nav-toggle-pos-absolute{position:absolute}
.fef-nav-toggle-pos-fixed{position:fixed}
.fef-nav-toggle-top-left{top:16px;left:16px}
.fef-nav-toggle-top-right{top:16px;right:16px;left:auto}
.fef-nav-toggle-bottom-left{bottom:16px;left:16px;top:auto}
.fef-nav-toggle-bottom-right{bottom:16px;right:16px;top:auto;left:auto}

/* ── Vertical Hamburger Mode ── */
.fef-nav-vert-hamburger .fef-nav-toggle{display:flex}
.fef-nav-vert-hamburger .fef-nav-toggle-wrap{display:flex}
.fef-nav-vert-hamburger .fef-nav-toggle-wrap .fef-nav-toggle{display:flex}
.fef-nav-vert-hamburger .fef-nav-menu{display:none}
.fef-nav-vert-hamburger .fef-nav-menu.fef-nav-mobile-open{display:flex}

/* ================================================================
   HORIZONTAL STICKY MODE
   ================================================================ */
.fef-nav-horizontal-sticky{width:100%;box-sizing:border-box}

/* Sticky bar states — left/right/top/bottom are driven by Elementor selectors (Position Offsets) */
.fef-nav-horizontal-sticky.fef-nav-is-stuck{position:fixed;left:0;right:0;transition:transform 0.25s ease,box-shadow 0.25s ease;background:#fff;box-sizing:border-box}
.fef-nav-horizontal-sticky.fef-nav-stick-top.fef-nav-is-stuck{top:0}
.fef-nav-horizontal-sticky.fef-nav-stick-bottom.fef-nav-is-stuck{bottom:0}
.fef-nav-horizontal-sticky.fef-nav-hide-on-scroll.fef-nav-hidden{transform:translateY(-100%)}
.fef-nav-horizontal-sticky.fef-nav-stick-bottom.fef-nav-hide-on-scroll.fef-nav-hidden{transform:translateY(100%)}
.fef-nav-sticky-placeholder{display:none;width:100%}

/* Screen-reader-only label for icon-only / image-only modes */
.fef-nav-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Manual item display modes ── */
.fef-nav-item-img{display:block;object-fit:cover;flex-shrink:0}
.fef-nav-item-img-wrap{position:relative;display:inline-flex;overflow:hidden;flex-shrink:0}
.fef-nav-item-img-wrap.fef-nav-overlay{align-items:center;justify-content:center}
.fef-nav-item-img-wrap.fef-nav-overlay::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.35);pointer-events:none}
.fef-nav-item-overlay-text{position:relative;z-index:1;padding:4px 8px;color:#fff;font-weight:500;text-align:center;line-height:1.2}

.fef-nav-display-icon_only .fef-nav-link{justify-content:center}
.fef-nav-display-image_only .fef-nav-link{padding:4px;justify-content:center}
.fef-nav-display-image_beside .fef-nav-link{gap:8px}
.fef-nav-display-image_overlay .fef-nav-link{padding:0}
.fef-nav-display-image_overlay .fef-nav-item-img-wrap{width:100%}

/* Horizontal scroll wrapper (overflowing menu items + arrows) */
.fef-nav-horizontal-sticky .fef-nav-hscroll-wrap{display:flex;align-items:center;width:100%;gap:6px}
.fef-nav-horizontal-sticky .fef-nav-hscroll-track{overflow-x:auto;flex:1;min-width:0;scroll-behavior:auto}
.fef-nav-horizontal-sticky .fef-nav-hscroll-track .fef-nav-menu{flex-wrap:nowrap}
.fef-nav-horizontal-sticky.fef-nav-hide-scrollbar .fef-nav-hscroll-track{scrollbar-width:none;-ms-overflow-style:none}
.fef-nav-horizontal-sticky.fef-nav-hide-scrollbar .fef-nav-hscroll-track::-webkit-scrollbar{display:none}
.fef-nav-hscroll-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:#f1f5f9;cursor:pointer;border-radius:50%;width:32px;height:32px;color:#1e293b;transition:opacity 0.2s ease,background-color 0.2s ease}
.fef-nav-hscroll-btn-disabled{opacity:0.3;pointer-events:none}

/* Scrollspy-active styling is driven by the Style tab → Main Menu Items → Active section,
   which extends its selectors to include .fef-nav-scrollspy-active > .fef-nav-link-0.
   No hard-coded rule here — everything is user-controlled. */

/* On mobile the menu collapses into a vertical panel — arrows/track no longer apply */
.fef-nav-mobile .fef-nav-hscroll-btn{display:none}
.fef-nav-mobile .fef-nav-hscroll-track{overflow:visible}
.fef-nav-mobile .fef-nav-hscroll-track .fef-nav-menu{flex-wrap:wrap}

/* ── Mobile (applied via inline <style> per widget breakpoint) ── */
/*
 * The .fef-nav-mobile class is added by JS on small viewports (or by
 * vertHamburger mode always). The rules below assume that class is
 * only added when the user's chosen layout DOES need a hamburger —
 * the JS checkMobile() function refuses to add .fef-nav-mobile in
 * vertical + "Show Menu Directly" mode, so these rules stay dormant
 * for that case.
 */
.fef-nav-mobile .fef-nav-toggle{display:flex}
.fef-nav-mobile.fef-nav-horizontal .fef-nav-menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:300;max-height:80vh;overflow-y:auto}
.fef-nav-mobile.fef-nav-horizontal .fef-nav-menu.fef-nav-mobile-open{display:flex}
.fef-nav-mobile .fef-nav-submenu{position:relative!important;top:0!important;left:0!important;box-shadow:none!important;border:none!important;border-radius:0!important;padding-left:16px;opacity:1!important;visibility:visible!important;pointer-events:auto!important;display:none;transform:none!important}
.fef-nav-mobile .fef-nav-item.fef-nav-open>.fef-nav-submenu{display:block}
.fef-nav-mobile .fef-nav-link-0{padding:12px 16px}
/* ================================================================
   VERTICAL STICKY MODE
   ================================================================ */
.fef-nav-vertical-sticky{box-sizing:border-box}
.fef-nav-vertical-sticky .fef-nav-menu{display:flex;flex-direction:column}
.fef-nav-vertical-sticky .fef-nav-link-0{padding:10px 16px;font-weight:500}

/* Sticky-fixed states — all four directions */
.fef-nav-horizontal-sticky.fef-nav-is-stuck.fef-nav-stick-left,
.fef-nav-horizontal-sticky.fef-nav-is-stuck.fef-nav-stick-right,
.fef-nav-vertical-sticky.fef-nav-is-stuck{
    position:fixed;
    transition:transform 0.25s ease,box-shadow 0.25s ease;
    background:#fff;box-sizing:border-box
}
/* Vertical-sticky fixed at left/right edge — span full viewport height by default */
.fef-nav-vertical-sticky.fef-nav-is-stuck.fef-nav-stick-left{left:0;top:0;bottom:0}
.fef-nav-vertical-sticky.fef-nav-is-stuck.fef-nav-stick-right{right:0;top:0;bottom:0}
/* If stuck to top/bottom while being a vertical layout, fall back to horizontal-bar behavior */
.fef-nav-vertical-sticky.fef-nav-is-stuck.fef-nav-stick-top{top:0;left:0;right:0}
.fef-nav-vertical-sticky.fef-nav-is-stuck.fef-nav-stick-bottom{bottom:0;left:0;right:0}

/* When vertical-sticky is stuck, allow the menu itself to scroll if it exceeds viewport height */
.fef-nav-vertical-sticky.fef-nav-is-stuck .fef-nav-menu{max-height:100vh;overflow-y:auto}

/* Hide-on-scroll: horizontal sticky slides vertically, vertical sticky slides horizontally */
.fef-nav-vertical-sticky.fef-nav-stick-left.fef-nav-hide-on-scroll.fef-nav-hidden{transform:translateX(-100%)}
.fef-nav-vertical-sticky.fef-nav-stick-right.fef-nav-hide-on-scroll.fef-nav-hidden{transform:translateX(100%)}
.fef-nav-vertical-sticky.fef-nav-stick-top.fef-nav-hide-on-scroll.fef-nav-hidden{transform:translateY(-100%)}
.fef-nav-vertical-sticky.fef-nav-stick-bottom.fef-nav-hide-on-scroll.fef-nav-hidden{transform:translateY(100%)}

/* Preserve the layout width during page scroll — placeholder holds space */
.fef-nav-vertical-sticky+.fef-nav-sticky-placeholder{display:none}

/* Dropdown-arrow indicator on group items (rotates when open in accordion mode) */
.fef-nav-vertical-sticky .fef-nav-dropdown-arrow,
.fef-nav-vertical .fef-nav-dropdown-arrow{
    display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;padding-left:8px;
    transition:transform 0.25s ease;
    opacity:0.6
}

/* ================================================================
   VERTICAL SUBMENU FLYOUT MODE
   Sub-menus open as a separate panel to the RIGHT of the parent
   (or flipped to the left when they'd run off-screen — handled in JS).
   ================================================================ */
.fef-nav-vsub-flyout{position:relative}
/* Each list item is the positioning context for its own submenu — without
   this, top:0 on the submenu aligns to the top of the whole widget instead
   of the top of the parent item that triggered it. Applied at every level
   so a level-1 item's submenu also anchors to its parent level-1 item. */
.fef-nav-vsub-flyout .fef-nav-item{position:relative}

/* Flyout submenu — absolutely positioned OUT of the parent list */
.fef-nav-vsub-flyout .fef-nav-submenu{
    position:absolute;
    top:0;left:100%;
    min-width:180px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    padding:6px 0;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(-6px);
    transition:opacity 0.15s ease,transform 0.2s ease,visibility 0.15s ease;
    z-index:220;
    /* Reset any accordion-mode overrides */
    padding-left:0;
    max-height:calc(100vh - 16px);overflow-y:auto
}

/* When JS decides to flip the panel to the left of the parent instead */
.fef-nav-vsub-flyout .fef-nav-submenu.fef-nav-flip-left{
    left:auto;right:100%;
    transform:translateX(6px)
}

/* When flyout submenu needs to shift vertically to stay on screen */
.fef-nav-vsub-flyout .fef-nav-submenu.fef-nav-flip-up{top:auto;bottom:0}

/* Open state — hover (desktop) or click (mobile/click trigger) */
.fef-nav-vsub-flyout .fef-nav-item:hover>.fef-nav-submenu,
.fef-nav-vsub-flyout .fef-nav-item.fef-nav-open>.fef-nav-submenu{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(0)
}

/* Group items keep their arrow pointing right (this is the flyout indicator) */
.fef-nav-vsub-flyout .fef-nav-has-children>.fef-nav-link .fef-nav-dropdown-arrow{
    transform:none;opacity:0.5
}
.fef-nav-vsub-flyout .fef-nav-item:hover>.fef-nav-link .fef-nav-dropdown-arrow,
.fef-nav-vsub-flyout .fef-nav-item.fef-nav-open>.fef-nav-link .fef-nav-dropdown-arrow{opacity:1}

/* Active/hover row highlight — matches the reference screenshot vibe */
.fef-nav-vsub-flyout .fef-nav-item.fef-nav-open>.fef-nav-link{background:rgba(0,0,0,0.04)}

/* Layer submenus at increasing z so deep nesting stacks above shallow */
.fef-nav-vsub-flyout .fef-nav-level-1{z-index:230}
.fef-nav-vsub-flyout .fef-nav-level-2{z-index:240}

/* On mobile the flyout panel would go off-screen — collapse back to accordion */
@media(max-width:768px){
    .fef-nav-vsub-flyout .fef-nav-submenu{
        position:relative;top:0;left:0;right:auto;
        opacity:1;visibility:visible;pointer-events:auto;
        transform:none;
        border:none;box-shadow:none;border-radius:0;
        padding-left:16px;
        display:none;
        max-height:none
    }
    .fef-nav-vsub-flyout .fef-nav-submenu.fef-nav-flip-left{left:0;right:auto}
    .fef-nav-vsub-flyout .fef-nav-item.fef-nav-open>.fef-nav-submenu{display:block}
}

/* Group item without an explicit URL — treat it as a header, not a link */
.fef-nav-has-children>.fef-nav-link[href="#"]{cursor:default}

/* ================================================================
   HOVER-TRIGGER FIXES FOR VERTICAL LAYOUTS
   The base .fef-nav-vertical rule sets `display:none` on submenus with
   heavy !important flags. These rules re-enable hover-based reveal for
   both accordion (inline) and flyout modes when the trigger is "hover".
   ================================================================ */

/* ---- Accordion mode + hover trigger ---- */
/* Reveal on hover of the parent group item (desktop only — mobile CSS
   still uses .fef-nav-open toggle via the hamburger). */
.fef-nav-trigger-hover.fef-nav-vertical:not(.fef-nav-vsub-flyout) .fef-nav-has-children:hover > .fef-nav-submenu,
.fef-nav-trigger-hover.fef-nav-vertical:not(.fef-nav-vsub-flyout) .fef-nav-has-children:focus-within > .fef-nav-submenu{
    display:block
}
/* Rotate the group arrow while hovered so the visual feedback matches
   the existing click-mode "open" state. */
.fef-nav-trigger-hover.fef-nav-vertical:not(.fef-nav-vsub-flyout) .fef-nav-has-children:hover > .fef-nav-link .fef-nav-dropdown-arrow{
    transform:rotate(90deg)
}

/* ---- Flyout mode: override the vertical base's !important flags ---- */
/* The base .fef-nav-vertical .fef-nav-submenu rule uses display:none and
   transform:none!important, both of which suppress the flyout animation.
   We restore the flyout look with matching !important flags. */
.fef-nav-vsub-flyout .fef-nav-submenu{
    display:block !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-6px) !important
}
.fef-nav-vsub-flyout .fef-nav-submenu.fef-nav-flip-left{
    transform:translateX(6px) !important
}

/* Reveal on hover / focus / open. Works regardless of trigger setting
   because flyout is inherently pointer-driven — click still toggles the
   .fef-nav-open class as a fallback for touch devices. */
.fef-nav-vsub-flyout .fef-nav-has-children:hover > .fef-nav-submenu,
.fef-nav-vsub-flyout .fef-nav-has-children:focus-within > .fef-nav-submenu,
.fef-nav-vsub-flyout .fef-nav-item.fef-nav-open > .fef-nav-submenu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important
}

/* Small "bridge" so moving from parent → submenu doesn't accidentally
   trigger mouseleave when there's a gap between them. */
.fef-nav-vsub-flyout .fef-nav-has-children > .fef-nav-link{position:relative}
.fef-nav-vsub-flyout .fef-nav-has-children > .fef-nav-link::after{
    content:"";position:absolute;top:0;right:-8px;width:8px;height:100%
}
.fef-nav-vsub-flyout .fef-nav-has-children.fef-nav-item > .fef-nav-submenu.fef-nav-flip-left::before{
    content:"";position:absolute;top:0;left:-8px;width:8px;height:100%
}

/* On mobile the flyout collapses to accordion (existing rule above sets
   position:relative). Make sure display:none/block toggles cleanly there
   too — override our !important with matching !important. */
@media(max-width:768px){
    .fef-nav-vsub-flyout .fef-nav-submenu{
        display:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important
    }
    .fef-nav-vsub-flyout .fef-nav-item.fef-nav-open > .fef-nav-submenu,
    .fef-nav-vsub-flyout.fef-nav-trigger-hover .fef-nav-has-children:hover > .fef-nav-submenu{
        display:block !important
    }
}

/* ================================================================
   FLYOUT SIDE — manual left/right override
   Emitted by PHP when the user picks a fixed side in the widget.
   Auto mode uses only the JS-added .fef-nav-flip-left class as before.
   ================================================================ */

/* Forced left — every submenu (any depth) opens to the LEFT of its parent */
.fef-nav-vsub-flyout.fef-nav-vsub-side-left .fef-nav-submenu{
    left:auto !important;
    right:100% !important;
    transform:translateX(6px) !important
}
.fef-nav-vsub-flyout.fef-nav-vsub-side-left .fef-nav-has-children:hover > .fef-nav-submenu,
.fef-nav-vsub-flyout.fef-nav-vsub-side-left .fef-nav-has-children:focus-within > .fef-nav-submenu,
.fef-nav-vsub-flyout.fef-nav-vsub-side-left .fef-nav-item.fef-nav-open > .fef-nav-submenu{
    transform:translateX(0) !important
}

/* Move the hover-bridge to the LEFT side of the parent link when forced-left */
.fef-nav-vsub-flyout.fef-nav-vsub-side-left .fef-nav-has-children > .fef-nav-link::after{
    right:auto;left:-8px
}

/* Rotate the arrow indicator so it points LEFT (matches the flyout direction) */
.fef-nav-vsub-flyout.fef-nav-vsub-side-left .fef-nav-dropdown-arrow{
    transform:rotate(180deg)
}

/* Forced right = default behavior; add the class for symmetry but no rules
   are needed since the base flyout CSS already opens to the right. */

/* ================================================================
   MENU ITEM BADGES
   Injected next to a menu item's label when the label matches a
   badge rule in the widget's "Menu Item Badges" repeater. Works
   uniformly for WordPress menu items (via the walker) and manual
   link items (via render_manual_item_link).
   ================================================================ */
.fef-nav-badge{
    --fef-badge-anim-dur: 1.5s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    background:#dc2626;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:0.3px;
    text-transform:uppercase;
    padding:2px 6px;
    border-radius:4px;
    white-space:nowrap;
    vertical-align:middle;
    -webkit-text-stroke-width:0;
    -webkit-text-stroke-color:transparent;
    transition:opacity 0.2s ease
}
.fef-nav-badge i{font-size:0.9em;line-height:1}
.fef-nav-badge-img{
    height:1em;width:auto;
    display:inline-block;vertical-align:middle
}

/* Placement variants */
.fef-nav-badge-place-before{margin-right:6px;margin-left:0}
.fef-nav-badge-place-after {margin-left:6px;margin-right:0}

/* Vertical position variants */
.fef-nav-badge-pos-regular{position:relative;top:auto}
.fef-nav-badge-pos-super{
    position:relative;top:-0.6em;
    font-size:0.7em;
    transform:scale(1)
}
.fef-nav-badge-pos-sub{
    position:relative;top:0.4em;
    font-size:0.7em
}

/* Shadow presets — chosen via the widget "Box Shadow" select */
.fef-nav-badge-shadow-soft{box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.fef-nav-badge-shadow-medium{box-shadow:0 3px 8px rgba(0,0,0,0.25)}
.fef-nav-badge-shadow-glow{box-shadow:0 0 8px 2px currentColor}

/* ────────────────────────────────
   Animations
   ──────────────────────────────── */
@keyframes fef-nav-badge-flash{
    0%, 100%{opacity:1}
    45%     {opacity:1}
    50%     {opacity:0.2}
    55%     {opacity:1}
}
.fef-nav-badge-anim-flash{
    animation:fef-nav-badge-flash var(--fef-badge-anim-dur) ease-in-out infinite
}

@keyframes fef-nav-badge-pulse{
    0%, 100%{transform:scale(1)}
    50%     {transform:scale(1.15)}
}
.fef-nav-badge-anim-pulse{
    animation:fef-nav-badge-pulse var(--fef-badge-anim-dur) ease-in-out infinite;
    transform-origin:center
}

@keyframes fef-nav-badge-blink{
    0%, 49%{opacity:1}
    50%, 100%{opacity:0}
}
.fef-nav-badge-anim-blink{
    animation:fef-nav-badge-blink var(--fef-badge-anim-dur) steps(1,end) infinite
}

@keyframes fef-nav-badge-shake{
    0%, 100%{transform:translateX(0)}
    10%, 30%, 50%, 70%, 90%{transform:translateX(-2px)}
    20%, 40%, 60%, 80%{transform:translateX(2px)}
}
.fef-nav-badge-anim-shake{
    animation:fef-nav-badge-shake var(--fef-badge-anim-dur) ease-in-out infinite
}

@keyframes fef-nav-badge-bounce{
    0%, 100%{transform:translateY(0)}
    30%     {transform:translateY(-4px)}
    60%     {transform:translateY(0)}
}
.fef-nav-badge-anim-bounce{
    animation:fef-nav-badge-bounce var(--fef-badge-anim-dur) ease-in-out infinite
}

@keyframes fef-nav-badge-rainbow{
    0%  {background-color:#dc2626}
    16% {background-color:#f59e0b}
    33% {background-color:#eab308}
    50% {background-color:#22c55e}
    66% {background-color:#3b82f6}
    83% {background-color:#8b5cf6}
    100%{background-color:#dc2626}
}
.fef-nav-badge-anim-rainbow{
    animation:fef-nav-badge-rainbow calc(var(--fef-badge-anim-dur) * 3) linear infinite
}

/* Respect reduced-motion preference — kill decorative animations */
@media (prefers-reduced-motion:reduce){
    .fef-nav-badge-anim-flash,
    .fef-nav-badge-anim-pulse,
    .fef-nav-badge-anim-blink,
    .fef-nav-badge-anim-shake,
    .fef-nav-badge-anim-bounce,
    .fef-nav-badge-anim-rainbow{animation:none !important}
}
/* ================================================================
   MOBILE HAMBURGER — touch reliability fixes
   Ensures the hamburger button is a first-class touch target on
   real mobile devices, not just Elementor's editor mobile preview.
   ================================================================ */
.fef-nav-toggle,
.fef-nav-toggle-label {
    /* Minimum recommended touch target size — 44x44px per WCAG */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    /* Prevent iOS from adding its own tap highlight box that can
       visually confuse users about whether the tap registered */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    /* Ensure the button is above other elements that might absorb taps */
    position: relative;
    z-index: 10;
    /* Allow touch events through (some themes set pointer-events:none) */
    pointer-events: auto !important;
    /* Prevent text selection on double-tap */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent iOS callout menu on long-press */
    -webkit-touch-callout: none;
    /* Turn off tap delay */
    touch-action: manipulation;
}

/* ================================================================
   HAMBURGER + MOBILE DRAWER REVEAL — bulletproof
   
   The .fef-nav-mobile-open class on .fef-nav-menu is what makes the
   menu drawer appear when the visitor taps the hamburger. Themes and
   plugins sometimes ship CSS that hides `.fef-nav-menu` with high
   specificity — the rules below use both `.fef-nav-mobile-open`
   AND the `data-fef-mobile-open="true"` attribute (set by the JS)
   with `!important` to guarantee the menu appears.
   ================================================================ */

/* When the hamburger is toggled OPEN, force the menu visible */
.fef-nav-menu.fef-nav-mobile-open,
.fef-nav-menu[data-fef-mobile-open="true"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* In vertical-hamburger mode (drawer-style layout), keep the menu
   HIDDEN by default and only reveal when opened. */
.fef-nav-hamburger-mode .fef-nav-menu {
    display: none;
}
.fef-nav-hamburger-mode .fef-nav-menu.fef-nav-mobile-open,
.fef-nav-hamburger-mode .fef-nav-menu[data-fef-mobile-open="true"] {
    display: block !important;
}

/* Same for regular mobile viewport hamburger mode */
@media (max-width: 1024px) {
    .fef-nav-mobile .fef-nav-menu {
        display: none;
    }
    .fef-nav-mobile .fef-nav-menu.fef-nav-mobile-open,
    .fef-nav-mobile .fef-nav-menu[data-fef-mobile-open="true"] {
        display: block !important;
    }
}

/* Ensure the toggle button is ALWAYS tappable on real mobile —
   overrides any theme CSS that might set pointer-events:none,
   visibility:hidden, or opacity:0 on nav buttons */
.fef-nav-toggle {
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* Minimum 44px WCAG touch target */
    min-width: 44px;
    min-height: 44px;
    /* Ensure it sits above adjacent content that might intercept taps */
    position: relative;
    z-index: 100;
}
.fef-nav-toggle > * {
    /* Child elements must not intercept the parent's touch handler */
    pointer-events: none;
}

/* ================================================================
   DATA-DEPTH ATTRIBUTE — CSS reliability for menu depth
   The PHP now emits data-depth="N" on every <li>. This is a
   defensive backup: if for any reason the DOM structure gets
   corrupted, depth-based styling still works from the attribute.
   ================================================================ */
.fef-nav-item[data-depth="0"] > .fef-nav-submenu {
    /* Top-level parents' submenu */
}
.fef-nav-item[data-depth="1"] > .fef-nav-submenu {
    /* Level-1 submenus (grandchild) — should only exist if user
       explicitly nested items 2 deep in WP menu */
}
/* Any item at depth > 2 gets extra visual indent for clarity */
.fef-nav-item[data-depth="2"] .fef-nav-link { padding-left: 32px; }
.fef-nav-item[data-depth="3"] .fef-nav-link { padding-left: 48px; }