/* ==========================================================================
   VEER nav dropdown
   Loaded by every page, including the older ones that still carry their own
   inline CSS. Keep it self-contained and specific enough that a page's own
   .nav-links rules can't flatten it.
   ========================================================================== */

.navdrop{position:relative;display:flex;align-items:center}

.navdrop > .navdrop-t{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;
  color:var(--muted);transition:color .2s;line-height:inherit;
}
.navdrop > .navdrop-t:hover,
.navdrop > .navdrop-t[aria-expanded="true"],
.navdrop.is-current > .navdrop-t{color:var(--text)}
.navdrop > .navdrop-t svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.navdrop > .navdrop-t[aria-expanded="true"] svg{transform:rotate(180deg)}

.navdrop > .navdrop-m{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:264px;padding:8px;
  background:var(--panel,#101010);
  border:1px solid var(--line,rgba(255,255,255,.1));
  border-radius:16px;
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:120;
}
.navdrop.open > .navdrop-m{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* the dropdown sits under a fixed header, so give it a hover bridge */
.navdrop > .navdrop-m::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}

.navdrop > .navdrop-m > a{
  display:block;padding:11px 14px;border-radius:11px;
  font-size:14px;font-weight:600;color:var(--text,#fff);
  transition:background .16s,color .16s;
}
.navdrop > .navdrop-m > a small{
  display:block;font-size:12px;font-weight:500;
  color:var(--muted,rgba(255,255,255,.62));margin-top:3px;line-height:1.4;
}
.navdrop > .navdrop-m > a:hover,
.navdrop > .navdrop-m > a:focus-visible{
  background:color-mix(in srgb, var(--orange,#f69323) 14%, transparent);
  color:var(--orange,#f69323);outline:none;
}
.navdrop > .navdrop-m > a:hover small,
.navdrop > .navdrop-m > a:focus-visible small{color:var(--muted,rgba(255,255,255,.72))}
.navdrop > .navdrop-m > a[aria-current]{color:var(--orange,#f69323)}

/* older pages draw an animated underline on every nav anchor — the dropdown
   items are not top-level nav links, so cancel it there */
.navdrop > .navdrop-m > a::after{display:none !important}

/* ---------- stacked mobile nav ---------- */
@media(max-width:760px){
  .navdrop{display:block;width:100%}
  .navdrop > .navdrop-t{display:none}
  .navdrop > .navdrop-m{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0;background:none;border:0;box-shadow:none;gap:0;
  }
  .navdrop > .navdrop-m::before{display:none}
  .navdrop > .navdrop-m > a{padding:13px 0;border-radius:0;font-weight:500}
  .navdrop > .navdrop-m > a small{display:none}
  .navdrop > .navdrop-m > a:hover,
  .navdrop > .navdrop-m > a:focus-visible{background:none}
}