/* ============================================================
   NQ Stats — Shared Navigation Styles
   Link this in every HTML file:
   <link rel="stylesheet" href="nav.css">
   ============================================================ */

.site-nav {
  position:sticky; top:0; z-index:1000;
  background:rgba(9,12,16,0.93); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:0 48px; display:flex; align-items:center;
  justify-content:space-between; height:64px;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo img { height:40px; width:auto; }
.nav-links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav-links > li { position:relative; }
.nav-links > li > a,
.nav-links > li > .nav-item {
  display:flex; align-items:center; gap:5px; padding:8px 14px;
  font-family:'DM Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:#9aa3af; text-decoration:none; border-radius:4px;
  cursor:pointer; transition:color 0.2s,background 0.2s;
  user-select:none; border:none; background:none;
}
.nav-links > li > a:hover,
.nav-links > li > .nav-item:hover { color:#4fc3f7; background:rgba(79,195,247,0.06); }
.nav-chevron { width:10px; height:10px; opacity:0.5; transition:transform 0.2s; }
.nav-links > li:hover .nav-chevron { transform:rotate(180deg); opacity:1; }
.dropdown {
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background:#0f1318; border:1px solid rgba(255,255,255,0.12); border-radius:8px;
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 0.2s,transform 0.2s,visibility 0.2s;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
}
.nav-links > li:hover .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  font-size:11px; letter-spacing:0.06em; color:#9aa3af;
  text-decoration:none; border-radius:4px;
  transition:color 0.15s,background 0.15s;
}
.dropdown a:hover { color:#4fc3f7; background:rgba(79,195,247,0.07); }
.dropdown-icon { width:6px; height:6px; border-radius:50%; background:#4fc3f7; opacity:0.5; flex-shrink:0; }
.dropdown-divider { height:1px; background:rgba(255,255,255,0.07); margin:4px 0; }
.nav-coffee a {
  color:#e8a030 !important; border:1px solid rgba(232,160,48,0.3);
  background:rgba(232,160,48,0.05) !important;
}
.nav-coffee a:hover { background:rgba(232,160,48,0.12) !important; }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:#9aa3af; border-radius:2px;
  transition:transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display:none; flex-direction:column;
  position:fixed; top:64px; left:0; right:0; bottom:0;
  background:#090c10; padding:16px; z-index:999;
  overflow-y:auto;
}
.mobile-menu.open { display:flex; }
.mobile-menu-item {
  display:block; padding:14px 16px;
  font-family:'DM Mono',monospace; font-size:12px;
  font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:#9aa3af; text-decoration:none; border-radius:6px;
  border:1px solid transparent;
  transition:color 0.15s,background 0.15s,border-color 0.15s;
}
.mobile-menu-item:hover, .mobile-menu-item:active {
  color:#4fc3f7; background:rgba(79,195,247,0.07);
  border-color:rgba(79,195,247,0.15);
}
.mobile-menu-label {
  padding:20px 16px 8px;
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase;
  color:#6b7685;
}
.mobile-menu-divider { height:1px; background:rgba(255,255,255,0.07); margin:8px 0; }
.mobile-menu-coffee {
  margin-top:16px; display:block; padding:14px 16px;
  font-family:'DM Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  color:#e8a030; text-decoration:none; border-radius:6px;
  border:1px solid rgba(232,160,48,0.3);
  background:rgba(232,160,48,0.05); text-align:center;
  transition:background 0.15s;
}
.mobile-menu-coffee:hover { background:rgba(232,160,48,0.12); }

@media (max-width: 768px) {
  .site-nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
}

/* Coming soon label */
.coming-soon {
  font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:#6b7685; font-style:italic; margin-left:6px;
  font-family:'DM Mono',monospace;
}
.mobile-menu-soon { opacity:0.7; pointer-events:none; cursor:default; }