/* ─────────────────────────────────────────────────────────────────────────
   JorTech — nav.css   (responsive: hamburger on mobile, full bar on desktop)
   ───────────────────────────────────────────────────────────────────────── */

nav {
  position:         sticky;
  top:              0;
  z-index:          100;
  background:       rgba(13,17,23,.93);
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:    1px solid var(--border);
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding:          .8rem 2.5rem;
}

/* Inline SVG logo */
.nav-brand svg {
  height:  40px;
  width:   auto;
  display: block;
}

/* ── Desktop links ── */
.nav-links {
  display:     flex;
  gap:         1.8rem;
  align-items: center;
}

.nav-links a {
  color:      var(--muted);
  font-size:  .88rem;
  transition: color .2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }

/* CTA pill */
.nav-cta {
  background:    var(--titleColor);
  color:         #0d1117 !important;
  font-weight:   700;
  padding:       .45rem 1.1rem;
  border-radius: var(--r);
}
.nav-cta:hover { background: #79c0ff; }

/* ── Hamburger button — hidden on desktop ── */
.nav-toggle {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          44px;
  height:         44px;
  padding:        10px;
  cursor:         pointer;
  background:     none;
  border:         none;
  z-index:        110;
}
.nav-toggle span {
  display:          block;
  width:            22px;
  height:           2px;
  background:       var(--text);
  border-radius:    2px;
  transition:       transform .28s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}

/* Animated X when open */
nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity: 0; width: 0; }
nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  nav {
    padding: .65rem 1.2rem;
    flex-wrap: wrap;
  }

  .nav-brand svg { height: 32px; }

  /* Show hamburger */
  .nav-toggle { display: flex; }

  /* Hide links by default on mobile */
  .nav-links {
    display:          flex;
    flex-direction:   column;
    align-items:      flex-start;
    gap:              0;
    position:         absolute;
    top:              100%;
    left:             0;
    right:            0;
    background:       rgba(13,17,23,.97);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:    1px solid var(--border);
    padding:          0 1.5rem;
    max-height:       0;
    overflow:         hidden;
    transition:       max-height .35s ease, padding .35s ease;
  }

  /* Open state */
  nav.open .nav-links {
    max-height: 400px;
    padding:    1rem 1.5rem 1.5rem;
  }

  .nav-links a {
    font-size:   1rem;
    padding:     .75rem 0;
    border-bottom: 1px solid var(--border);
    width:       100%;
    color:       var(--text);
  }
  .nav-links a:last-child { border-bottom: none; }

  .nav-cta {
    background:    var(--titleColor);
    color:         #0d1117 !important;
    font-weight:   700;
    padding:       .6rem 1.4rem;
    border-radius: var(--r);
    font-size:     1rem;
    display:       inline-block;
    text-align:    center;
    margin-top:    .25rem;
    border-bottom: none !important;
    align-self:    flex-start;
  }
  .nav-cta:hover { background: #79c0ff; border-bottom: none !important; }
}

/* ── 4K / large screens ── */
@media (min-width: 2000px) {
  .nav-brand svg { height: 56px; }
  .nav-links a   { font-size: 1.1rem; }
  nav            { padding: 1.2rem 4rem; }
}