/* app/static/css/site/fxv-navbar.css */


/* ======================================================================= */
/* FXV Navbar (Bootstrap 5.3.5) – Glass overlay -> solid on scroll         */
/* Animated gradient underline for links, dropdown toggles, and items.     */
/* Grid underlap via --fxv-nav-h synced by JS.                              */
/* File: backend/app/static/css/fxv-navbar.css                              */
/* ======================================================================= */

/* ========== 0) TOKENS / THEME VARIABLES ================================= */

:root{
  --fxv-accent:#2dd4bf;

  /* Animated underline gradient */
  --fxv-underline-stop-1:#22d3ee;
  --fxv-underline-stop-2:#2dd4bf;
  --fxv-underline-stop-3:#34d399;

  --fxv-underline-fork: var(--fxv-underline-stop-2); 

  --fxv-underline-gradient:linear-gradient(90deg,
      var(--fxv-underline-stop-1),
      var(--fxv-underline-stop-2),
      var(--fxv-underline-fork), 
      var(--fxv-underline-stop-3),
      var(--fxv-underline-stop-1));
  --fxv-underline-height:2px;
  --fxv-underline-radius:2px;
  --fxv-underline-speed:3s;
  --fxv-underline-ease:linear;

  /* Surfaces */
  --fxv-nav-bg:rgba(8,30,39,.28);
  --fxv-nav-bg-solid:rgba(8,30,39,.94);
  --fxv-nav-border:rgba(255,255,255,.10);
  --fxv-nav-blur:8px;
  --fxv-nav-radius:8px;

  /* Toggler */
  --fxv-nav-toggler-radius:999px;

  /* Sizes */
  --fxv-nav-height:64px;
  --fxv-nav-height-compact:54px;

  /* Burger icon */
  --fxv-burger-width:20px;
  --fxv-burger-thickness:2px;
  --fxv-burger-gap:6px;

  --fxv-ease:200ms ease;

  /* fallback; JS will sync actual value */
  --fxv-nav-h:64px;
}

/* ========== 1) LAYOUT / Z-INDEX / UNDERLAP ============================== */

#fxv-navbar{z-index:50;}

.grid-stack{
  margin-top:calc(-1 * var(--fxv-nav-h));
  padding-top:var(--fxv-nav-h);
  overflow:visible;
}



/* ========== 2) NAVBAR CONTAINER & SURFACE =============================== */

.fxv-navbar{
  position:sticky;top:0;
  background:transparent!important;box-shadow:none!important;
  padding:8px clamp(10px,2vw,18px);
  min-height:var(--fxv-nav-height);
  transition:padding var(--fxv-ease),height var(--fxv-ease);
}

.fxv-surface{
  display:flex;align-items:center;gap:.5rem;
  min-height:var(--fxv-nav-height);
  padding:.35rem .5rem;border-radius:var(--fxv-nav-radius);
  border:1px solid var(--fxv-nav-border);
  background-color:var(--fxv-nav-bg);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
@supports(backdrop-filter:blur(1px)){
  .fxv-surface{backdrop-filter:saturate(120%) blur(var(--fxv-nav-blur));}
}

.fxv-navbar.is-scrolled .fxv-surface{
  background-color:var(--fxv-nav-bg-solid);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.fxv-navbar.is-compact{min-height:var(--fxv-nav-height-compact);}
.fxv-navbar.is-compact .fxv-surface{min-height:var(--fxv-nav-height-compact);}

/* ========== 3) BRAND & LINK COLOR ====================================== */

.fxv-navbar .navbar-brand{
  font-weight:800;letter-spacing:.4px;
  transition:transform var(--fxv-ease),opacity var(--fxv-ease);
}
.fxv-navbar.is-compact .navbar-brand{transform:translateY(-1px);}

.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.92);}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{color:#fff;}

/* ========== 4) ANIMATED UNDERLINE ====================================== */
/* Normal nav links use ::after. Dropdown *toggles* use ::before (caret
   conflict avoidance). Dropdown menu items use ::after. */

.fxv-navbar .navbar-nav .nav-link{position:relative;padding-inline:.9rem;}
.fxv-navbar .dropdown-menu .dropdown-item{position:relative;}

/* 4a) Base underline for normal nav links (::after) */
.fxv-navbar .navbar-nav .nav-link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.35rem;
  height:var(--fxv-underline-height);border-radius:var(--fxv-underline-radius);
  background:var(--fxv-underline-gradient);background-size:300% 100%;
  transform:scaleX(0);transform-origin:left center;transition:transform 160ms ease;
  opacity:.95;pointer-events:none;z-index:1;
}

/* 4b) Neutralize Bootstrap caret on navbar toggles */
.fxv-navbar .navbar-nav .dropdown-toggle::after{
  content:none !important;border:0 !important;margin:0 !important;
}

/* 4c) Underline for dropdown toggles on ::before */
.fxv-navbar .navbar-nav .dropdown-toggle::before{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.35rem;
  height:var(--fxv-underline-height);border-radius:var(--fxv-underline-radius);
  background:var(--fxv-underline-gradient);background-size:300% 100%;
  transform:scaleX(0);transform-origin:left center;transition:transform 160ms ease;
  opacity:.95;pointer-events:none;z-index:1;
}

/* 4d) Underline for dropdown menu items (::after) */
.fxv-navbar .dropdown-menu .dropdown-item::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:.15rem;
  height:var(--fxv-underline-height);border-radius:var(--fxv-underline-radius);
  background:var(--fxv-underline-gradient);background-size:300% 100%;
  transform:scaleX(0);transform-origin:left center;transition:transform 160ms ease;
  opacity:.95;pointer-events:none;z-index:1;
}

/* 4e) Trigger visibility + color morph */
.fxv-navbar .navbar-nav .nav-link:hover::after,
.fxv-navbar .navbar-nav .nav-link:focus::after,
.fxv-navbar .navbar-nav .nav-link.active::after,
.fxv-navbar .navbar-nav .nav-link.show::after{           /* non-toggle .show */
  transform:scaleX(1);
  animation:fxv-underline-sweep var(--fxv-underline-speed) var(--fxv-underline-ease) infinite;
}
.fxv-navbar .navbar-nav .dropdown-toggle:hover::before,
.fxv-navbar .navbar-nav .dropdown-toggle:focus::before,
.fxv-navbar .navbar-nav .dropdown-toggle.show::before{   /* toggle open */
  transform:scaleX(1);
  animation:fxv-underline-sweep var(--fxv-underline-speed) var(--fxv-underline-ease) infinite;
}
.fxv-navbar .dropdown-menu .dropdown-item:hover::after,
.fxv-navbar .dropdown-menu .dropdown-item:focus::after,
.fxv-navbar .dropdown-menu .dropdown-item.active::after{
  transform:scaleX(1);
  animation:fxv-underline-sweep var(--fxv-underline-speed) var(--fxv-underline-ease) infinite;
}

/* Dropdown row hover background */
.fxv-navbar .dropdown-menu .dropdown-item:hover,
.fxv-navbar .dropdown-menu .dropdown-item:focus{
  background-color:rgba(255,255,255,.04);color:#fff;
}

/* Sweep keyframes */
@keyframes fxv-underline-sweep{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Keyboard focus ring */
.fxv-navbar .nav-link:focus-visible,
.fxv-navbar .dropdown-menu .dropdown-item:focus-visible{
  outline:2px solid var(--fxv-accent);outline-offset:3px;border-radius:6px;
}

/* Reduced motion */
.fxv-navbar.prefers-reduced-motion .navbar-nav .nav-link::after,
.fxv-navbar.prefers-reduced-motion .navbar-nav .dropdown-toggle::before,
.fxv-navbar.prefers-reduced-motion .dropdown-menu .dropdown-item::after,
.fxv-navbar.prefers-reduced-motion .navbar-nav .nav-link:hover::after,
.fxv-navbar.prefers-reduced-motion .navbar-nav .dropdown-toggle:hover::before,
.fxv-navbar.prefers-reduced-motion .dropdown-menu .dropdown-item:hover::after,
.fxv-navbar.prefers-reduced-motion .navbar-nav .nav-link.active::after,
.fxv-navbar.prefers-reduced-motion .navbar-nav .dropdown-toggle.show::before,
.fxv-navbar.prefers-reduced-motion .dropdown-menu .dropdown-item.active::after{
  animation:none !important;
}

/* 4f) Brand link: no animated underline, but slight hover color cue */
.fxv-navbar .navbar-nav .fxv-brand .nav-link::after,
.fxv-navbar .navbar-nav .fxv-brand .dropdown-toggle::before {
  display: none !important;
}

/* Keep brand visible emphasis with a gentle color change on hover/focus */
.fxv-navbar .navbar-nav .fxv-brand .nav-link,
.fxv-navbar .navbar-nav .fxv-brand .dropdown-toggle {
  transition: color var(--fxv-ease);
}

.fxv-navbar .navbar-nav .fxv-brand .nav-link:hover,
.fxv-navbar .navbar-nav .fxv-brand .nav-link:focus,
.fxv-navbar .navbar-nav .fxv-brand .dropdown-toggle:hover,
.fxv-navbar .navbar-nav .fxv-brand .dropdown-toggle:focus {
  color: var(--fxv-accent);
}


/* ========== 5) TOGGLER + ANIMATED BURGER ================================ */

.fxv-toggler{
  width:44px;height:44px;border-radius:var(--fxv-nav-toggler-radius);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--fxv-nav-border);background:rgba(255,255,255,.04);color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:background-color var(--fxv-ease),border-color var(--fxv-ease);
}
.fxv-toggler:hover{background:rgba(255,255,255,.06);}
.fxv-toggler:active{background:rgba(255,255,255,.05);}
.navbar-toggler.fxv-toggler[aria-expanded="true"]{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.30),0 6px 20px rgba(0,0,0,.22);
}
.fxv-toggler:focus{
  outline:none;box-shadow:0 0 0 2px rgba(253,253,253,.45),0 6px 20px rgba(0,0,0,.22);
}

/* Burger */
.fxv-burger{
  display:block;position:relative;width:var(--fxv-burger-width);
  height:var(--fxv-burger-thickness);background:currentColor;border-radius:2px;
  transition:transform 180ms ease,background-color 180ms ease;
}
.fxv-burger::before,.fxv-burger::after{
  content:"";position:absolute;left:0;right:0;height:var(--fxv-burger-thickness);
  background:currentColor;border-radius:2px;
  transition:transform 180ms ease,opacity 180ms ease,background-color 180ms ease;
}
.fxv-burger::before{top:calc(-1 * var(--fxv-burger-gap));}
.fxv-burger::after {top:       var(--fxv-burger-gap);}
.navbar-toggler[aria-expanded="true"] .fxv-burger{background:transparent;}
.navbar-toggler[aria-expanded="true"] .fxv-burger::before{
  transform:translateY(var(--fxv-burger-gap)) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .fxv-burger::after{
  transform:translateY(calc(-1 * var(--fxv-burger-gap))) rotate(-45deg);
}

/* ========== 6) PROGRESS HAIRLINE ======================================== */

.fxv-nav-progress{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;pointer-events:none;}
.fxv-nav-progress__bar{height:100%;background:var(--fxv-accent);transform:scaleX(0);transform-origin:0 50%;}

/* ========== 7) DROPDOWN SURFACE ========================================= */

.fxv-navbar .dropdown-menu{
  border-radius:12px;border:1px solid var(--fxv-nav-border);
  background-color:rgba(10,22,30,.98);
}
@supports(backdrop-filter:blur(1px)){
  .fxv-navbar .dropdown-menu{backdrop-filter:saturate(120%) blur(var(--fxv-nav-blur));}
}

/* ========== 8) REDUCED MOTION =========================================== */

.fxv-navbar.prefers-reduced-motion,
.fxv-navbar.prefers-reduced-motion *{transition:none !important;}


/* ========== 9) SPACERS ================================================ */
/* Inline spacers (horizontal gaps in navbar rows and menu lists) */
.fxv-spacer {
  pointer-events: none;
}
/* top-level navbar (inline). Make flex-basis respect the width var. */
.navbar-nav > .fxv-spacer.fxv-spacer--inline {
  display: block;
  width: var(--fxv-spacer-w, 0);
  min-width: var(--fxv-spacer-w, 0);
  flex: 0 0 var(--fxv-spacer-w, 0);
}
/* dropdown menu lists (inline row of items) */
.dropdown-menu > .fxv-spacer.fxv-spacer--inline {
  width: var(--fxv-spacer-w, 0);
  min-width: var(--fxv-spacer-w, 0);
  display: inline-block;
}

/* Block spacers (vertical gaps inside dropdown stacks) */
.dropdown-menu > .fxv-spacer.fxv-spacer--block {
  display: block;
  height: var(--fxv-spacer-w, 0);
  min-height: var(--fxv-spacer-w, 0);
  width: 1px;          /* minimal footprint */
  margin: 0;           /* let height create the gap */
  border: 0;
  background: transparent;
}

/* Editor/brand-safe: ensure the inner node has no accidental size */
.fxv-spacer .fxv-spacer-node { display: block; width: 100%; height: 100%; }







.fxv-nav-progress__bar {
  transform-origin: left center;
  height: 2px;
  display: block;
  width: 100%;
}


.fxv-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.fxv-panel .fxv-panel-body { padding: 0; }

/* ---- spacer node: non-interactive gap ---- */
.navbar-nav .nav-spacer{
  pointer-events:none;
  border:0 !important;
  background:transparent !important;
  min-height:0;
}
.navbar-nav .nav-spacer::after{ content:none !important; }



/* needed so the navbar variable actually changes the text color */
.fxv-panel.fxv-skin-local .fxv-panel-body,
.fxv-panel.fxv-skin-local .card-body,
.fxv-panel.fxv-skin-local .fxv-rich{
  color: var(--fxv-panel-fg, inherit);
  background: var(--fxv-panel-bg, transparent);
  border-color: var(--fxv-panel-bd, transparent);
}

/* ===== Rich label: keep chosen color/decoration even if content has utility spans ===== */
.fxv-panel[data-instance-id] .fxv-panel-body [class^="fxv-inline-c-"],
.fxv-panel[data-instance-id] .fxv-panel-body .fxv-inline-c-muted{
  color: inherit !important;
}
.fxv-panel[data-instance-id] .fxv-panel-body *{
  text-decoration-color: currentColor;   /* make underline/strike use current color */
}

/* ==== FXV Navbar: overlay dropdowns (no layout push) ==== */

/* Ensure overlays can escape the navbar box */
#fxv-navbar,
#fxv-navbar .fxv-surface {
  overflow: visible !important;
}

/* The toggle containers establish positioning context */
#fxv-navbar .dropdown,
#fxv-site-nav .dropdown,
#fxv-navbar .dropdown-submenu,
#fxv-site-nav .dropdown-submenu {
  position: relative;
}


/* Base dropdown menu = absolute overlay under the toggle */
#fxv-navbar .dropdown-menu,
#fxv-site-nav .dropdown-menu {
  position: absolute !important;
  top: calc(100% + .25rem);
  left: 0;
  transform: none !important;
  display: none;                 /* shown via .show class */
  z-index: 1050;                 /* above navbar surface */
  min-width: 14rem;
  width: max-content;
  max-width: calc(100vw - 2rem); /* keep within viewport on phones */
  max-height: min(60vh, 480px);  /* long menus scroll */
  overflow: auto;
}

/* Right-aligned menus (header_right zone) */
#fxv-navbar .dropdown-menu.dropdown-menu-end,
#fxv-site-nav .dropdown-menu.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* Show states (Bootstrap toggles .show) */
#fxv-navbar .dropdown.show > .dropdown-menu,
#fxv-site-nav  .dropdown.show > .dropdown-menu,
#fxv-navbar .dropdown-submenu.show > .dropdown-menu,
#fxv-site-nav  .dropdown-submenu.show > .dropdown-menu {
  display: block;
}

/* Also show when the menu itself has .show (Bootstrap adds this too) */
#fxv-navbar .dropdown-menu.show,
#fxv-site-nav  .dropdown-menu.show {
  display: block !important;
}

/* Submenus also drop under their parent (not flyout) */
#fxv-navbar .dropdown-submenu > .dropdown-menu,
#fxv-site-nav  .dropdown-submenu > .dropdown-menu {
  top: calc(100% + .25rem) !important;
  left: 0 !important;
  min-width: 14rem;
  width: max-content;
}

/* Optional: small visual polish */
#fxv-navbar .dropdown-menu,
#fxv-site-nav  .dropdown-menu {
  backdrop-filter: var(--fxv-nav-blur, none);
  border: 1px solid var(--fxv-nav-border, rgba(255,255,255,.1));
  border-radius: var(--fxv-nav-radius, 8px);
}



/* === FXV: keep dropdowns as overlays even inside the collapsed navbar === */

/* 1) Let overlays escape the navbar box */
#fxv-navbar,
#fxv-navbar .fxv-surface,
#fxv-navbar .navbar-collapse {
  overflow: visible !important;
}

/* 2) Ensure each dropdown/submenu is a positioning context */
#fxv-navbar .dropdown,
#fxv-navbar .dropdown-submenu {
  position: relative;
}

/* 3) Force overlay positioning (Bootstrap sets .navbar .dropdown-menu {position:static}) */
#fxv-navbar .dropdown-menu {
  position: absolute !important;     /* key line */
  top: calc(100% + .25rem);
  left: 0;
  right: auto;
  transform: none !important;
  display: none;                     /* shown by .show */
  z-index: 1050;
  min-width: 14rem;
  width: max-content;
  max-width: calc(100vw - 2rem);     /* avoid viewport overflow on phones */
  max-height: min(60vh, 480px);      /* long menus scroll instead of growing navbar */
  overflow: auto;
  border-radius: var(--fxv-nav-radius, 8px);
  border: 1px solid var(--fxv-nav-border, rgba(255,255,255,.1));
 backdrop-filter: var(--fxv-nav-blur, none);
}

/* 4) Respect your right-aligned (header_right) menus */
#fxv-navbar .dropdown-menu.dropdown-menu-end {
  left: auto;
  right: 0;
}

/* 5) Show state (Bootstrap toggles .show on parent li) */
#fxv-navbar .dropdown.show > .dropdown-menu,
#fxv-navbar .dropdown-submenu.show > .dropdown-menu {
  display: block;
}

/* 6) Submenus also drop *under* their parent, not sideways */
#fxv-navbar .dropdown-submenu > .dropdown-menu {
  top: calc(100% + .25rem) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 14rem;
  width: max-content;
}

/* ===== Sidebar placement (optional mount: #fxv-site-sidebar) ===== */
#fxv-site-sidebar{
  position: sticky;
  top: 0;
  max-height: 100dvh;
  overflow: auto;
}
#fxv-site-sidebar .navbar-nav{
  flex-direction: column;
  align-items: stretch;
}
#fxv-site-sidebar .nav-link{
  padding: .5rem .75rem;
}
/* stacked submenus in sidebar (no overlays needed) */
#fxv-site-sidebar .dropdown-menu{
  position: static !important;
  width: auto;
  min-width: 12rem;
  box-shadow: none;
  background: transparent;
  border: 0;
  padding-left: .5rem;
}
#fxv-site-sidebar .dropdown-submenu > .dropdown-menu{
  margin-left: .5rem;
}


/* Desktop (≥992px): flyout submenus to the right */
@media (min-width: 992px) {
  #fxv-navbar .dropdown-submenu,
  #fxv-site-nav .dropdown-submenu { position: relative; }

  #fxv-navbar .dropdown-submenu > .dropdown-menu,
  #fxv-site-nav .dropdown-submenu > .dropdown-menu {
    position: absolute !important;
    top: 0;                       /* align with parent item */
    left: 100%;
    margin-left: .25rem;
    min-width: 14rem;
    width: max-content;
    transform: none !important;
    z-index: 1060;
    display: none;
  }
  #fxv-navbar .dropdown-submenu.show > .dropdown-menu,
  #fxv-site-nav .dropdown-submenu.show > .dropdown-menu,
  #fxv-navbar .dropdown-submenu > .dropdown-menu.show,
  #fxv-site-nav .dropdown-submenu > .dropdown-menu.show {
    display: block;
  }
}

/* Mobile/tablet (<992px): stack submenus directly under their toggles */
@media (max-width: 991.98px) {
  #fxv-navbar .dropdown-submenu > .dropdown-menu,
  #fxv-site-nav .dropdown-submenu > .dropdown-menu {
    position: absolute !important;      /* still overlay, not pushing layout */
    top: calc(100% + .25rem);
    left: 0;
    right: auto;
    width: 100%;                        /* easy to tap; no flyout */
    transform: none !important;
    display: none;
    z-index: 1060;
  }
  #fxv-navbar .dropdown-submenu.show > .dropdown-menu,
  #fxv-site-nav .dropdown-submenu.show > .dropdown-menu,
  #fxv-navbar .dropdown-submenu > .dropdown-menu.show,
  #fxv-site-nav .dropdown-submenu > .dropdown-menu.show {
    display: block;
  }
}

/* Menus as overlays: allow natural height so the PAGE scrolls, not the menu */
#fxv-navbar .dropdown-menu,
#fxv-site-nav .dropdown-menu,
#fxv-navbar .dropdown-submenu > .dropdown-menu,
#fxv-site-nav .dropdown-submenu > .dropdown-menu {
  max-height: none !important;
  overflow: visible !important;
}


/* Variant: train-track — only affects items marked as containers */
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a[data-nav-kind="container"] {
  position: relative;
}



/* Keep your existing moving underline on ::before (you already have this),
   we just reuse it as-is for containers. */

/* Add a small 'fork' glyph at the end of the underline */
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a[data-nav-kind="container"]::after {
  content: "";
  position: absolute;
  right: .9rem;              /* matches your underline inset */
  bottom: .35rem;            /* matches your underline baseline */
  width: 14px;
  height: 10px;
  /* use same animated gradient as underline so it blends perfectly */
  background: var(--fxv-underline-gradient);
  background-size: 300% 100%;

  /* SVG mask draws a Y/fork shape; it takes currentColor from background */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10">\
<path d="M1 9h5M6 9L12 3M6 9L12 9" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"/>\
</svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10">\
<path d="M1 9h5M6 9L12 3M6 9L12 9" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"/>\
</svg>') no-repeat center/contain;

  /* same reveal behavior as your underline */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms ease;
  opacity: .95;
  pointer-events: none;
  z-index: 1;
}

/* Show the fork whenever the item is hovered/focused/open (mirrors your underline triggers) */
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a[data-nav-kind="container"]:hover::after,
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a[data-nav-kind="container"]:focus::after,
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a[data-nav-kind="container"].show::after,
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a[data-nav-kind="container"][aria-expanded="true"]::after {
  transform: scaleX(1);
}

/* Optional: do the same inside dropdown menus for nested container items */
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"]::after {
  right: .75rem;     /* your menu item underline inset */
  bottom: .15rem;    /* your menu item underline baseline */
}


/* Re-enable ::after on toggles only when train-track is active */
#fxv-navbar[data-nav-variants~="train-track"] .navbar-nav a.dropdown-toggle[data-nav-kind="container"]::after {
  content: "" !important; /* wins over earlier neutralizer */
}

/* Inside dropdown menus, move the underline for container items to ::before,
   so we can use ::after exclusively for the fork glyph. */
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"]::after {
  content: none !important;            /* hide the default underline on ::after */
}
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"]::before {
  content: "";                         /* recreate the underline on ::before */
  position: absolute;
  left: .75rem; right: .75rem; bottom: .15rem;
  height: var(--fxv-underline-height);
  border-radius: var(--fxv-underline-radius);
  background: var(--fxv-underline-gradient);
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms ease;
  opacity: .95; pointer-events: none; z-index: 1;
}
/* show the ::before underline for active/hover/focus states */
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"]:hover::before,
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"]:focus::before,
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"].active::before,
#fxv-navbar[data-nav-variants~="train-track"] .dropdown-menu .dropdown-item[data-nav-kind="container"][aria-expanded="true"]::before {
  transform: scaleX(1);
  animation: fxv-underline-sweep var(--fxv-underline-speed) var(--fxv-underline-ease) infinite;
}