/* ============================================================
   eJuuZ — Navigation & Mobile Menu
   ============================================================ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 0 28px;
  transition: background .3s, box-shadow .3s;
}

/* Scrolled state */
nav.sc {
  background: rgba(35,29,53,.93);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.ni {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}

/* ── Logo ── */
/* Image + text sit side by side automatically via flex */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(120deg, var(--pl), var(--pk));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; text-decoration: none;
}
.logo img {
  height: 36px; width: auto; display: block;
  /* Converts a black logo to white — remove if your logo is already coloured */
  filter: brightness(0) invert(1);
}

/* ── Desktop Nav Links ── */
.nl { display: flex; align-items: center; gap: 36px; list-style: none; }
.nl a { font-size: .85rem; color: var(--m); transition: color var(--t); }
.nl a:hover,
.nl a.active { color: var(--w); }

/* ── Hamburger ── */
.hbg {
  display: none; background: none; border: none;
  flex-direction: column; gap: 5px; padding: 4px; cursor: pointer;
}
.hbg span { display: block; width: 22px; height: 2px; background: var(--w); border-radius: 2px; }

/* ── Mobile Full-Screen Menu ── */
.mm {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(22,18,36,.97); backdrop-filter: blur(24px);
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mm.op { display: flex; }
.mm a {
  font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 700;
  color: var(--w); transition: color .2s;
}
.mm a:hover { color: var(--pk); }

/* ── Responsive ── */
@media (max-width: 680px) {
  .nl, .nc { display: none; }
  .hbg { display: flex; }
}