/* Home-page nav ported onto /markets — overrides markets.css nav-only rules
   so the top bar (brand, dropdowns, right controls) matches the start page. */

.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 40px;min-height:72px;height:auto;flex-wrap:wrap;background:var(--ink-deep);
  border-bottom:2px solid var(--gold-line);position:sticky;top:0;z-index:400;}
.nav-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;flex-wrap:nowrap;}

.brand{display:flex;align-items:center;gap:16px;text-decoration:none;white-space:nowrap;margin-right:6px;}
.brand-mark{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:.16em;
  color:var(--gold);line-height:1;display:inline-flex;align-items:baseline;}
.brand-mark .phi{color:var(--gold-hi);font-weight:800;margin:0 .02em;transform:translateY(1px);display:inline-block;}
.brand-sub{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.32em;color:var(--text-3);
  line-height:1.7;border-left:1.5px solid var(--gold-line);padding-left:14px;text-transform:uppercase;}

.navlinks{display:flex;gap:1px;flex:1 1 auto;min-width:0;flex-wrap:wrap;}
.navlinks a{white-space:nowrap;font-family:'IBM Plex Sans',sans-serif;font-size:var(--fs-0);font-weight:600;letter-spacing:.02em;
  color:var(--text-2);padding:10px 9px;border-radius:var(--r);min-height:44px;display:flex;align-items:center;}
.navlinks a:hover{color:var(--text);background:var(--panel-2);}
.navlinks a.on,.navlinks a[aria-current="page"]{color:var(--gold-hi);background:var(--gold-soft);}
.navdrop:has(a.on)>button,.navdrop:has(a[aria-current="page"])>button,.navdrop>button.on{color:var(--gold-hi);background:var(--gold-soft);}
.navmenu a.on,.navmenu a[aria-current="page"]{color:var(--gold-hi);background:var(--gold-soft);}

.navdrop{position:relative;display:inline-flex;}
.navdrop>button{background:transparent;border:none;color:var(--text-2);font-family:'IBM Plex Sans',sans-serif;
  font-size:var(--fs-0);font-weight:600;min-height:44px;padding:10px 9px;display:inline-flex;align-items:center;gap:5px;
  border-radius:8px;cursor:pointer;white-space:nowrap;}
.navdrop>button:hover{color:var(--text);background:var(--panel-2);}
.navdrop .caret{font-size:.7em;color:var(--gold-hi);}
.navmenu{display:none;position:absolute;top:100%;left:0;background:var(--ink-deep);
  border:1.5px solid var(--gold-line);border-radius:10px;min-width:300px;padding:10px;z-index:600;
  box-shadow:0 14px 34px rgba(0,0,0,.5);}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{display:block;}
.navdrop.rt .navmenu{left:auto;right:0;}
.navmenu a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;
  padding:0 14px;border-radius:8px;color:var(--text-2);text-decoration:none;font-size:var(--fs-1);font-weight:600;}
.navmenu a:hover{color:var(--gold-hi);background:var(--panel-2);}
.nm-h{font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.18em;
  color:var(--gold);text-transform:uppercase;padding:12px 14px 6px;}
.nm-h:first-child{padding-top:6px;}
.nm-tag{font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.05em;
  color:var(--text-3);border:1px solid var(--line);border-radius:4px;padding:2px 7px;white-space:nowrap;}

.type-toggle{display:flex;align-items:stretch;border:1.5px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--panel);flex:0 0 auto;}
.type-toggle button{flex:0 0 56px;min-width:56px;min-height:48px;background:transparent;border:none;color:var(--text-2);
  font-family:'Archivo',sans-serif;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0 10px;}
.type-toggle #tSm{font-size:1.05rem;}
.type-toggle #tLg{font-size:1.45rem;}
.type-toggle #tLg sup{font-size:.55em;transform:translateY(-2px);margin-left:1px;}
.type-toggle button + button{border-left:1.5px solid var(--line-strong);}
.type-toggle button:hover{color:var(--text);}
.type-toggle button.on{background:var(--gold);color:var(--ink-deep);}

.live-pill{white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:var(--fs-0);font-weight:600;letter-spacing:.06em;
  background:var(--green-soft);color:var(--green);border:1.5px solid rgba(74,201,138,.45);
  padding:9px 14px;border-radius:var(--r);display:inline-flex;align-items:center;gap:8px;min-height:44px;}

.btn-ghost{font-size:var(--fs-1);font-weight:600;color:var(--text);border:1.5px solid var(--line-strong);
  padding:0 20px;min-height:46px;background:transparent;border-radius:var(--r);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi);}
.btn-gold{font-size:var(--fs-1);font-weight:700;letter-spacing:.03em;color:var(--ink-deep);background:var(--gold);
  padding:0 22px;min-height:46px;border:none;border-radius:var(--r);display:inline-flex;align-items:center;}
.btn-gold:hover{background:var(--gold-hi);}

@media(max-width:1500px){.brand-sub{display:none;}}

/* Below ~1400px the full nav can't fit on one row. Instead of letting
   .nav-right wrap under .navlinks (which then overlaps the crumb / hero),
   switch to a clean two-row layout: brand + right-controls on top,
   navlinks on their own row below. */
@media(max-width:1400px){
  .nav{flex-wrap:wrap;row-gap:8px;}
  .brand{order:1;}
  .nav-right{order:2;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
  .navlinks{order:3;flex-basis:100%;width:100%;justify-content:flex-start;}
}
@media(max-width:900px){
  .nav{padding:10px 20px;}
  .navlinks{gap:0;}
  .navlinks a,.navdrop>button{padding:8px 8px;font-size:.85rem;}
}
/* At true mobile widths the pill + A/A+ + Log in + Get started row
   overflows a 480px viewport. Shrink and allow wrapping so nothing
   escapes the viewport. */
@media(max-width:560px){
  .nav{padding:10px 16px;}
  .nav-right{width:100%;gap:8px;row-gap:8px;justify-content:flex-start;}
  .live-pill{padding:7px 10px;font-size:.7rem;min-height:40px;}
  .type-toggle button{flex:0 0 44px;min-width:44px;min-height:40px;}
  .type-toggle #tSm{font-size:.95rem;}
  .type-toggle #tLg{font-size:1.2rem;}
  .btn-ghost,.btn-gold{padding:0 14px !important;min-height:40px !important;font-size:.85rem;}
  .brand-mark{font-size:1.5rem;}
}