/* ============================================================
   nav.css — Mohd Saleem
   Liquid glass nav — shared across index, tools, guides
   DO NOT duplicate this in page-level CSS
============================================================ */

/* Header shell */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:10px 32px;
  background:transparent;
  border-bottom:none;
}

/* Glass pill */
.nav-glass{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:56px;
  padding:0 24px;
  background:rgba(255,255,255,0.20);
  backdrop-filter:blur(32px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(32px) saturate(180%) brightness(1.06);
  border-radius:32px;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 0 2px 1px #ffffff8c,inset 0 0 10px 4px #ffffff38,0 6px 24px #11111a0f,0 12px 40px #11111a0d;
  transition:background .3s ease,box-shadow .3s ease;
  backdrop-filter:url(#nav-liquid-glass) blur(7px) saturate(1.4);
}
.nav-glass.scrolled{
  background:#ffffff6b;
  box-shadow:
    inset 0 0 2px 1px #ffffff8c,inset 0 0 10px 4px #ffffff38,0 6px 24px #11111a0f,0 12px 40px #11111a0d;
}

/* Brand */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand-mark{
  width:26px;height:26px;border-radius:8px;
  background:var(--near-black);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.brand-mark>span{width:7px;height:7px;border-radius:999px;background:var(--coral)}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.3px;color:var(--near-black)}

/* Links */
.nav-links{display:flex;gap:2px;align-items:center;list-style:none}
.navlink{
  font-size:13.5px;
  color:rgba(23,23,28,0.65);
  text-decoration:none;
  padding:6px 12px;
  border-radius:20px;
  transition:color .18s,background .18s;
  font-family:var(--font-body);
  font-weight:500;
  white-space:nowrap;
}
.navlink:hover{color:var(--near-black);background:rgba(0,0,0,.06)}
.navlink.active{color:var(--near-black);background:rgba(0,0,0,.08);font-weight:600}

/* CTA button */
.btn-nav{
  background:var(--near-black);color:#fff;
  border-radius:var(--r-pill);
  padding:9px 20px;
  font-size:13.5px;font-weight:600;
  text-decoration:none;
  transition:opacity .15s;
  white-space:nowrap;
  font-family:var(--font-display);
  flex-shrink:0;
}
.btn-nav:hover{opacity:.82}

/* Hamburger */
.nav-toggle{
  display:none;
  width:38px;height:38px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav-toggle span{display:block;width:15px;height:1.5px;background:var(--near-black);position:relative}
.nav-toggle span::before,
.nav-toggle span::after{
  content:'';position:absolute;left:0;
  width:15px;height:1.5px;background:var(--near-black);
}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}

/* Mobile dropdown — glass card */
@media(max-width:820px){
  .site-header{padding:10px 22px}
  .nav-links{
    display:none;
    position:fixed;
    top:82px;left:16px;right:16px;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-radius:18px;
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 8px 32px rgba(0,0,0,.12);
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:8px;
  }
  .nav-links.is-open{display:flex}
  .navlink{
    padding:11px 14px;
    width:100%;
    border-radius:12px;
    font-size:15px;
    color:var(--near-black);
  }
  .nav-toggle{display:inline-flex}
  .btn-nav{padding:8px 16px;font-size:13px}
}