/* FantasyLabs main header navigation.
   Self-contained: no dependency on the WordPress-fed stylesheet or on
   ebor-theme-styles.css / theme.less. Everything the nav needs lives here.
   Scoped under .fl-nav (the wrapper around the header + mobile drawer) so
   nothing here leaks onto the rest of the page, and nothing from the rest
   of the page's CSS is expected to reach in here.

   Default token values (no theme-* class) are the "Labs Light" look used
   on every page except DFS Terminal. The theme-* overrides below reproduce
   DFS Terminal's existing per-theme chrome (today's _MenuDark/_MenuBlue/
   _MenuIceBlue/_MenuTerminal partials + DFSTerminal.cshtml's inline chrome
   block) so the nav keeps matching whatever terminal theme is selected. */

.fl-nav{
    --fl-nav-bg:#FFFFFF;
    --fl-nav-panel:#FFFFFF;
    --fl-nav-panel-2:#F4F5F7;
    --fl-nav-line:#CCCCCC;
    --fl-nav-line-strong:#BBBBBB;
    --fl-nav-text:#363C4B;
    --fl-nav-text-dim: rgba(54,60,75,0.72);
    --fl-nav-text-faint: rgba(54,60,75,0.45);
    --fl-nav-accent:#00168A;
    --fl-nav-accent-ink:#FFFFFF;
    --fl-nav-accent-light:#03A9F4;
    --fl-nav-badge-accent:#FF6A00;
    --fl-nav-badge-accent-ink:#FFFFFF;
    --fl-nav-green:#5CB85C;
    --fl-nav-green-border:#4CAE4C;
    --fl-nav-cta-ink:#FFFFFF;
    --fl-nav-focus:#03A9F4;
    --fl-nav-logo-ink:#00168A;
    color-scheme: light;
}
.fl-nav, .fl-nav *{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
    .fl-nav, .fl-nav *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
.fl-nav a{color:inherit; text-decoration:none;}
.fl-nav button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
.fl-nav .nav-font{font-family:'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;}

/* Legacy corecss/common.css, style.css (compiled from theme.less) and the shared
   WordPress stylesheet all still carry a `body{padding-top:55px}` rule (two of them
   `!important`) to reserve space for the OLD nav's `.nav-container{position:fixed}`
   layout. This nav uses `position:sticky` instead, which needs no such reservation,
   so cancel that legacy offset here - this file loads after all three, so matching
   !important + source order wins. */
body{padding-top:0 !important;}

/* ---------- Header ---------- */
/* z-index high enough to clear this site's own widget/page content (which runs up
   to five digits in places) without reaching into true modal/toast territory
   (~999999+), so the nav's dropdowns always paint above normal page content. */
/* `transform: translateZ(0)` forces this onto its own compositing layer. Without it,
   on the DFS Terminal page specifically (the only page with a `position:fixed` iframe
   as a sibling), some browsers stack this sticky header's dropdowns BEHIND that fixed
   iframe despite its z-index:auto - a real-world sticky-vs-fixed stacking quirk, not
   something explained by the CSS spec's painting order. Forcing a layer here removes
   the ambiguity the browser's compositor was resolving incorrectly. */
#menu-bar.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:100000; background:var(--fl-nav-bg); border-bottom:1px solid var(--fl-nav-line); transform:translateZ(0);}
/* Edge padding matches the DFS Terminal app's own internal navbar (16px / 12px / 8px
   at >1300px / >1200px / <=1200px, from fantasylabs-web's dfs-terminal-navbar-styles.css.ts)
   so the two headers line up when stacked - Terminal is our highest-traffic page and
   the misalignment was the first thing a design-literate eye caught there. */
#menu-bar .bar{height:55px; display:flex; align-items:center; gap:14px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));}
@media (max-width: 1300px){
    #menu-bar .bar{padding-left:max(12px, env(safe-area-inset-left,0px)); padding-right:max(12px, env(safe-area-inset-right,0px));}
}
@media (max-width: 1200px){
    #menu-bar .bar{padding-left:max(8px, env(safe-area-inset-left,0px)); padding-right:max(8px, env(safe-area-inset-right,0px));}
}

#menu-bar .logo{display:flex; align-items:center; flex-shrink:0;}
#menu-bar .logo svg{height:43px; width:217px; display:block;}

#menu-bar nav.primary{display:flex; align-items:center; gap:2px; height:100%;}
#menu-bar .navbtn{
    height:55px; padding:0 6px; display:flex; align-items:center; gap:6px;
    font-weight:650; font-size:11.75px; letter-spacing:0.65px; text-transform:uppercase; color:var(--fl-nav-text); white-space:nowrap;
}
#menu-bar .navbtn .label-wrap{padding:7px 9px; border-radius:8px; display:flex; align-items:center; gap:5px; transition:background-color .2s ease;}
#menu-bar .navbtn .label-wrap > span:first-child{opacity:0.85;}
#menu-bar .navbtn svg{width:10px; height:10px; color:var(--fl-nav-text-faint); transition:transform .15s ease;}
#menu-bar .navbtn:hover .label-wrap, #menu-bar .navbtn.open .label-wrap{background:var(--fl-nav-panel-2);}
#menu-bar .navbtn.open svg{transform:rotate(180deg);}
#menu-bar .navbtn:focus-visible{outline:2px solid var(--fl-nav-focus); outline-offset:2px; border-radius:8px;}

/* Featured DFS Terminal nav button */
#menu-bar .navbtn.featured .label-wrap{background:var(--fl-nav-accent); color:var(--fl-nav-accent-ink);}
#menu-bar .navbtn.featured:hover .label-wrap, #menu-bar .navbtn.featured.open .label-wrap{filter:brightness(0.85);}
#menu-bar .navbtn.featured svg{color:var(--fl-nav-accent-ink); opacity:0.85;}
#menu-bar .badge-new{background:var(--fl-nav-badge-accent); color:var(--fl-nav-badge-accent-ink); font-size:9.5px; font-weight:900; padding:2px 5px; border-radius:4px; letter-spacing:0.4px; line-height:1;}

#menu-bar .spacer{flex:1;}
#menu-bar .side-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
#menu-bar .signin{font-family:'Lato',sans-serif; font-size:13.5px; font-weight:700; color:var(--fl-nav-text); white-space:nowrap;}
#menu-bar .signin:hover{color:var(--fl-nav-accent-light);}
#menu-bar .cta{
    font-family:'Lato', sans-serif; font-weight:700; font-size:13.5px;
    background:var(--fl-nav-green); border:1px solid var(--fl-nav-green-border); color:var(--fl-nav-cta-ink);
    padding:9px 16px; border-radius:6px; white-space:nowrap; transition:filter .12s ease;
}
#menu-bar .cta-short{display:none;}
#menu-bar .cta:hover{filter:brightness(1.05);}
#menu-bar .hamburger{display:none; width:36px; height:36px; align-items:center; justify-content:center; color:var(--fl-nav-text);}
#menu-bar .hamburger svg{width:21px;height:21px;}

/* ---------- Mega menu ---------- */
#menu-bar .nav-item{position:relative; height:100%;}
#menu-bar .mega{
    position:absolute; top:100%; left:0; display:flex; background:var(--fl-nav-panel); border:1px solid var(--fl-nav-line); border-top:none;
    box-shadow:0 20px 36px -14px rgba(0,0,0,0.22); overflow:hidden; z-index:100;
    opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
#menu-bar .mega.flip{left:auto; right:0;}
#menu-bar .mega.show{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}
#menu-bar .mega-cols{display:flex; align-items:stretch;}

#menu-bar .feature-list{width:242px; padding:10px; max-height:62vh; overflow-y:auto; border-right:1px solid var(--fl-nav-line);}
#menu-bar .mega.flip .feature-list{border-right:none; border-left:1px solid var(--fl-nav-line);}
#menu-bar .mega.flip .mega-cols{flex-direction:row-reverse;}
#menu-bar .feature-item{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 12px; border-radius:7px; font-family:'Lato',sans-serif; font-size:14px; font-weight:600;
    color:var(--fl-nav-text); text-align:left;
    transition: background-color .15s ease, color .15s ease;
}
#menu-bar .feature-item .arrow-ic{width:12px;height:12px; color:var(--fl-nav-text-faint); flex-shrink:0; opacity:0; transition:opacity .15s ease, transform .15s ease;}
#menu-bar .feature-item.has-sub .arrow-ic{opacity:1;}
#menu-bar .feature-item:hover .arrow-ic, #menu-bar .feature-item.active .arrow-ic{transform:translateX(2px);}
#menu-bar .feature-item:hover, #menu-bar .feature-item.active{background:var(--fl-nav-panel-2);}
#menu-bar .feature-item:focus-visible{outline:2px solid var(--fl-nav-focus); outline-offset:-2px;}
#menu-bar .fi-left{display:flex; align-items:center; gap:9px; min-width:0;}
#menu-bar .sport-icon{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--fl-nav-accent); flex-shrink:0; transition:transform .15s ease;}
#menu-bar .sport-icon svg{width:18px; height:18px;}
#menu-bar .feature-item:hover .sport-icon, #menu-bar .feature-item.active .sport-icon{transform:scale(1.1);}

#menu-bar .sub-panel{width:276px; padding:16px 18px; max-height:62vh; overflow-y:auto; display:flex; flex-direction:column; min-width:0;}
#menu-bar .sub-panel-content{display:none; flex-direction:column;}
#menu-bar .sub-panel-content.show{display:flex;}
#menu-bar .sub-panel-content.fade-in{animation:flNavSubPanelFade .18s ease;}
@keyframes flNavSubPanelFade{from{opacity:0; transform:translateX(6px);} to{opacity:1; transform:translateX(0);}}
#menu-bar .sub-eyebrow{font-family:'Lato', sans-serif; font-weight:800; font-size:11.5px; letter-spacing:0.5px; text-transform:uppercase; color:var(--fl-nav-accent-light); margin:0 0 10px; padding:0 4px;}
#menu-bar .sub-link{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px; font-family:'Open Sans',sans-serif; font-size:13.5px; color:var(--fl-nav-text-dim); transition:background-color .15s ease, color .15s ease;}
#menu-bar .tab-icon{width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center; color:var(--fl-nav-accent-light); flex-shrink:0;}
#menu-bar .tab-icon svg{width:15px; height:15px;}
#menu-bar .sub-link:hover{color:var(--fl-nav-text); background:var(--fl-nav-panel-2);}

#menu-bar .hub-col{width:280px; padding:10px; max-height:62vh; overflow-y:auto; display:flex; flex-direction:column;}
#menu-bar .hub-header{padding:12px 14px 8px; color:var(--fl-nav-text); font-family:'Lato', sans-serif; font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:0.4px; margin:2px 2px 2px;}
#menu-bar .hub-list{display:flex; flex-direction:column;}
#menu-bar .hub-list a{display:flex; align-items:center; gap:10px; padding:9px 12px; font-family:'Open Sans',sans-serif; font-size:14px; color:var(--fl-nav-text-dim); border-radius:6px; transition:background-color .15s ease, color .15s ease;}
#menu-bar .hub-list a:hover{color:var(--fl-nav-text); background:var(--fl-nav-panel-2);}

/* ---------- Custom scrollbars (theme-aware, independent of OS/app dark mode) ---------- */
#menu-bar .feature-list, #menu-bar .sub-panel, #menu-bar .hub-col, .fl-nav .drawer{
    scrollbar-width: thin;
    scrollbar-color: var(--fl-nav-line-strong) transparent;
}
#menu-bar .feature-list::-webkit-scrollbar, #menu-bar .sub-panel::-webkit-scrollbar, #menu-bar .hub-col::-webkit-scrollbar, .fl-nav .drawer::-webkit-scrollbar{
    width: 8px;
}
#menu-bar .feature-list::-webkit-scrollbar-track, #menu-bar .sub-panel::-webkit-scrollbar-track, #menu-bar .hub-col::-webkit-scrollbar-track, .fl-nav .drawer::-webkit-scrollbar-track{
    background: transparent;
}
#menu-bar .feature-list::-webkit-scrollbar-thumb, #menu-bar .sub-panel::-webkit-scrollbar-thumb, #menu-bar .hub-col::-webkit-scrollbar-thumb, .fl-nav .drawer::-webkit-scrollbar-thumb{
    background-color: var(--fl-nav-line-strong);
    border-radius: 8px;
    border: 2px solid var(--fl-nav-panel);
    background-clip: padding-box;
}
#menu-bar .feature-list::-webkit-scrollbar-thumb:hover, #menu-bar .sub-panel::-webkit-scrollbar-thumb:hover, #menu-bar .hub-col::-webkit-scrollbar-thumb:hover, .fl-nav .drawer::-webkit-scrollbar-thumb:hover{
    background-color: var(--fl-nav-text-faint);
}

/* ---------- Mobile drawer ---------- */
.fl-nav .drawer-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:100001; transform:translateZ(0);}
.fl-nav .drawer{display:none; position:fixed; top:0; right:0; bottom:0; width:min(360px, 88vw); background:var(--fl-nav-bg); border-left:1px solid var(--fl-nav-line); z-index:100002; overflow-y:auto; padding:calc(16px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px)); transform:translateZ(0);}
.fl-nav .drawer.open, .fl-nav .drawer-scrim.open{display:block;}
.fl-nav .drawer-top{display:flex; align-items:center; justify-content:space-between; padding:4px 18px 14px;}
.fl-nav .drawer-top .head{font-family:'Raleway', sans-serif; font-weight:700; font-size:16px; color:var(--fl-nav-text);}
.fl-nav .drawer-close{width:32px;height:32px; display:flex; align-items:center; justify-content:center; color:var(--fl-nav-text);}
.fl-nav .drawer-close svg{width:18px;height:18px;}

.fl-nav .d-section{border-top:1px solid var(--fl-nav-line);}
.fl-nav .d-section-btn{width:100%; display:flex; align-items:center; justify-content:space-between; padding:17px 18px 13px; font-family:'Lato', sans-serif; font-weight:700; font-size:15px; line-height:1; color:var(--fl-nav-text); text-transform:uppercase; letter-spacing:0.3px;}
.fl-nav .d-section-btn svg{width:11px;height:11px; color:var(--fl-nav-text-faint); transition:transform .15s ease;}
.fl-nav .d-section.open > .d-section-btn svg{transform:rotate(180deg);}
.fl-nav .d-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease;}
.fl-nav .d-section.open .d-body{grid-template-rows:1fr;}
.fl-nav .d-body-inner{overflow:hidden; min-height:0; padding:0 10px 10px;}
.fl-nav .d-section-btn.featured{color:var(--fl-nav-accent);}

.fl-nav .d-feature{border-top:1px solid var(--fl-nav-line);}
.fl-nav .d-feature:first-child{border-top:none;}
.fl-nav .d-feature-btn{width:100%; display:flex; align-items:center; justify-content:space-between; padding:12px 10px; font-family:'Lato',sans-serif; font-size:14px; font-weight:600; color:var(--fl-nav-text);}
.fl-nav .d-feature-btn svg{width:11px;height:11px; color:var(--fl-nav-text-faint); transition:transform .15s ease;}
.fl-nav .d-feature-btn .sport-icon{width:19px; height:19px; color:var(--fl-nav-accent);}
.fl-nav .d-feature-btn .sport-icon svg{width:19px; height:19px;}
.fl-nav .d-feature.open > .d-feature-btn svg{transform:rotate(180deg);}
.fl-nav .d-sub{display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease;}
.fl-nav .d-feature.open .d-sub{grid-template-rows:1fr;}
.fl-nav .d-sub-inner{overflow:hidden; min-height:0; padding:0 0 10px 14px;}
.fl-nav .d-sub a{display:flex; align-items:center; gap:9px; padding:7px 8px; font-family:'Open Sans',sans-serif; font-size:13px; color:var(--fl-nav-text-dim); border-radius:6px;}
.fl-nav .d-body .hub-list a{display:flex; align-items:center; gap:10px; padding:9px 10px; font-family:'Open Sans',sans-serif; font-size:13.5px; color:var(--fl-nav-text-dim); border-radius:6px;}
.fl-nav .d-body .hub-list a:hover{color:var(--fl-nav-text); background:var(--fl-nav-panel-2);}
.fl-nav .d-sub a:hover{color:var(--fl-nav-text); background:var(--fl-nav-panel-2);}

@media (max-width: 1250px){
    #menu-bar nav.primary{display:none;}
    #menu-bar .hamburger{display:flex;}
    #menu-bar .bar{gap:8px;}
    #menu-bar .side-actions{gap:8px;}
    #menu-bar .signin{font-size:12.5px;}
    #menu-bar .cta{padding:8px 10px; font-size:12.5px;}
    #menu-bar .cta-full{display:none;}
    #menu-bar .cta-short{display:inline;}
    #menu-bar .logo svg{height:32px; width:161px;}
}

/* ============================================================
   Per-theme overrides. Applied only on the DFS Terminal page
   (via ViewBag.TerminalTheme in _Menu.cshtml); every other page
   renders with no theme-* class, i.e. the Labs Light defaults
   above. Hex values are ported from DFSTerminal.cshtml's existing
   inline chrome block / the retired _MenuDark, _MenuBlue,
   _MenuIceBlue, _MenuTerminal partials, so the look matches what
   that page already renders today for each theme.
   ============================================================ */

.fl-nav.theme-labs-dark{
    --fl-nav-bg:#0b0e14;
    --fl-nav-panel:#12161e;
    --fl-nav-panel-2:#1a2332;
    --fl-nav-line:#1e242c;
    --fl-nav-line-strong:#3a4250;
    --fl-nav-text:#c8ced6;
    --fl-nav-text-dim: rgba(200,206,214,0.78);
    --fl-nav-text-faint: rgba(200,206,214,0.5);
    --fl-nav-accent:#03A9F4;
    --fl-nav-accent-ink:#0b0e14;
    --fl-nav-accent-light:#03A9F4;
    --fl-nav-badge-accent:#FF6A00;
    --fl-nav-badge-accent-ink:#FFFFFF;
    --fl-nav-green:#1f8f4e;
    --fl-nav-green-border:#1f8f4e;
    --fl-nav-cta-ink:#FFFFFF;
    --fl-nav-focus:#03A9F4;
    --fl-nav-logo-ink:#FFFFFF;
    color-scheme: dark;
}
.fl-nav.theme-labs-ice{
    --fl-nav-bg:#042038;
    --fl-nav-panel:#0a2d4e;
    --fl-nav-panel-2:#123a5c;
    --fl-nav-line:#184868;
    --fl-nav-line-strong:#24608a;
    --fl-nav-text:#d7e3ed;
    --fl-nav-text-dim: rgba(215,227,237,0.78);
    --fl-nav-text-faint: rgba(215,227,237,0.5);
    --fl-nav-accent:#8ecce4;
    --fl-nav-accent-ink:#042038;
    --fl-nav-accent-light:#8ecce4;
    --fl-nav-badge-accent:#FF6A00;
    --fl-nav-badge-accent-ink:#FFFFFF;
    --fl-nav-green:#5CB85C;
    --fl-nav-green-border:#4CAE4C;
    --fl-nav-cta-ink:#FFFFFF;
    --fl-nav-focus:#8ecce4;
    --fl-nav-logo-ink:#FFFFFF;
    color-scheme: dark;
}
.fl-nav.theme-labs-ice-blue{
    --fl-nav-bg:#f2f9fd;
    --fl-nav-panel:#f2f9fd;
    --fl-nav-panel-2:#d3e6f0;
    --fl-nav-line:#c7e0ee;
    --fl-nav-line-strong:#9dc3d9;
    --fl-nav-text:#1c3a4d;
    --fl-nav-text-dim: rgba(28,58,77,0.78);
    --fl-nav-text-faint: rgba(28,58,77,0.5);
    --fl-nav-accent:#3d84ab;
    --fl-nav-accent-ink:#FFFFFF;
    --fl-nav-accent-light:#3d84ab;
    --fl-nav-badge-accent:#3d6e8e;
    --fl-nav-badge-accent-ink:#FFFFFF;
    --fl-nav-green:#5CB85C;
    --fl-nav-green-border:#4CAE4C;
    --fl-nav-cta-ink:#FFFFFF;
    --fl-nav-focus:#3d84ab;
    --fl-nav-logo-ink:#00168A;
    color-scheme: light;
}
.fl-nav.theme-crt{
    --fl-nav-bg:#030603;
    --fl-nav-panel:#0a120c;
    --fl-nav-panel-2:#101c12;
    --fl-nav-line:#16351c;
    --fl-nav-line-strong:#245c2e;
    --fl-nav-text:#7cff89;
    --fl-nav-text-dim: rgba(124,255,137,0.78);
    --fl-nav-text-faint: rgba(124,255,137,0.5);
    --fl-nav-accent:#3dff66;
    --fl-nav-accent-ink:#030603;
    --fl-nav-accent-light:#3dff66;
    --fl-nav-badge-accent:#ffbf3c;
    --fl-nav-badge-accent-ink:#030603;
    --fl-nav-green:#18c44a;
    --fl-nav-green-border:#18c44a;
    --fl-nav-cta-ink:#030603;
    --fl-nav-focus:#3dff66;
    --fl-nav-logo-ink:#FFFFFF;
    color-scheme: dark;
}