/* ==========================================================================
   AskWisy — Navigation
   --------------------------------------------------------------------------
   Fixed top navigation bar, desktop link row, hamburger button, and the
   slide-in mobile drawer + dim overlay (markup: templates/layout/nav.php).
   ========================================================================== */

/* ── NAV ── */
nav.topnav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  background:rgba(13,27,42,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;
  padding: 0.5rem clamp(16px,4vw,60px);
}
.nav-logo{
  font-family:'Helvetica',Georgia,serif;font-weight:900;font-size:1.4rem;
  color:#fff;letter-spacing:-.02em;padding:8px 4px;min-height:44px;
  display:flex;align-items:center;
}
.nav-logo span{color:var(--gold2)}
/* Desktop links */
.nav-links{display:none;gap:4px;align-items:center}
.nav-links button{
  color:rgba(255,255,255,.72);font-size:.88rem;font-weight:500;
  padding:8px 14px;border-radius:6px;min-height:44px;white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav-links button:hover,.nav-links button.active{color:#fff;background:rgba(255,255,255,.1)}
.nav-links .nav-cta{
  background:var(--gold)!important;color:#fff!important;
  padding:9px 20px!important;border-radius:8px!important;font-weight:600!important;
}
.nav-links .nav-cta:hover{background:var(--gold2)!important;transform:translateY(-1px)}
/* Hamburger */
.nav-burger{
  width:44px;height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
}
.nav-burger span{
  display:block;width:24px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .26s,opacity .26s;pointer-events:none;
}
.nav-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── DRAWER — right:-110% = physically off-screen ── */
.drawer{
  position:fixed;top:0;right:-110%;bottom:0;width:min(300px,88vw);z-index:9100;
  background:var(--navy2);border-left:1px solid rgba(255,255,255,.08);
  padding:calc(var(--nav-h) + 24px) 20px 40px;
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transition:right .3s cubic-bezier(.4,0,.2,1);
  box-shadow:-12px 0 48px rgba(0,0,0,.6);
}
.drawer.open{right:0}
.drawer button{
  width:100%;text-align:left;
  font-size:.95rem;font-weight:600;color:rgba(255,255,255,.65);
  padding:15px 18px;border-radius:10px;min-height:52px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s,color .2s;
}
.drawer button:hover,.drawer button.active{background:rgba(255,255,255,.08);color:#fff}
.drawer .dr-cta{margin-top:16px!important;background:var(--gold)!important;color:#fff!important;text-align:center!important;border:none!important}
.drawer .dr-cta:hover{background:var(--gold2)!important}
/* Overlay — display:none when closed */
.dim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9050}
.dim.open{display:block}
body.locked{overflow:hidden}

/* "Request a Pilot" CTA (website brief, P2) — outlined in gold so it reads as
   secondary to the solid "Book a Demo" button. */
.nav-links .nav-pilot{
  color:var(--gold2);border:1px solid var(--gold);border-radius:8px;
  padding:8px 16px;font-weight:600;
}
.nav-links .nav-pilot:hover{background:rgba(240,172,78,.12);color:#fff}
/* Tighten desktop nav between 1024px and 1200px so the extra CTA fits on one line. */
@media(min-width:1024px) and (max-width:1199px){
  .nav-links{gap:2px}
  .nav-links button{padding:8px 9px;font-size:.84rem}
  .nav-links .nav-cta{padding:9px 14px!important}
  #nav-login-btn{padding:8px 10px!important;font-size:.84rem!important}
}
.drawer .dr-pilot{
  margin-top:8px;text-align:center;color:var(--gold2);
  border:1px solid var(--gold)!important;
}