/* ============================================================
   nav.css — jainaditya.in
   Shared nav bar + contact bar styles.
   Import after tokens.css on every page.
   ============================================================ */

/* ── NAV BAR ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; height: 44px;
  z-index: 200;
  display: flex; align-items: center; padding: 0 48px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.4s;
}

.nav-logo {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg4); text-decoration: none; cursor: pointer;
  transition: color 0.2s;
}
.nav-logo:hover { color: var(--fg); }

.nav-links {
  display: flex; gap: 24px; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--fg5); text-decoration: none; cursor: pointer;
  transition: color 0.2s;
}
.nav-links a:hover  { color: var(--fg); }
.nav-links a.on     { color: var(--fg4); }
.nav-links a.dim    { color: var(--fg6); pointer-events: none; }

.nav-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
}
.nbtn {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  color: var(--fg4); background: none;
  border: 1px solid var(--rule); padding: 3px 10px;
  border-radius: 20px; cursor: pointer; transition: all 0.2s;
}
.nbtn:hover { border-color: var(--fg4); color: var(--fg); }

/* ── CONTACT BAR ── */
#contact-bar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 36px;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--nav-bg);
  border-top: 1px solid var(--rule);
  backdrop-filter: blur(12px);
  transition: background 0.4s;
}
.ci {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; padding: 0 20px;
  transition: opacity 0.2s;
}
.ci:hover { opacity: 0.6; }
.ci-ic { font-size: 9px; color: var(--fg4); }
.ci-lb { font-size: 9px; letter-spacing: .1em; color: var(--fg3); }
.csep  { font-size: 9px; color: var(--fg6); padding: 0 4px; user-select: none; }