/* ============================================================
   navbar.css — Vayuputra Industries
   Topbar: Black  |  Navbar: White  |  Footer: Black
   ============================================================ */

/* ─── TOPBAR — always BLACK ─── */
#topbar {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 10000;
  background: #ffffff;
  border-bottom: 1px solid rgb(0, 0, 0);
  padding: .4rem 5%;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .85rem; color: rgb(0, 0, 0);
  transition: transform .4s ease;
}
#topbar.hidden { transform: translateY(-100%); }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:1.4rem; }
.topbar-item { display:flex; align-items:center; gap:.35rem; color:rgb(19, 5, 5); text-decoration:none; transition:color .25s; white-space:nowrap; }
.topbar-item:hover { color:#3b82f6; }
.topbar-divider { width:1px; height:12px; background:rgba(255,255,255,.14); }
.topbar-social { display:flex; align-items:center; gap:.8rem; }
.topbar-social a { color:rgba(20, 0, 0, 1); font-size:.79rem; text-decoration:none; transition:color .25s; }
.topbar-social a:hover { color:#3b82f6; }
@media (max-width:768px) { #topbar { display:none; } }

/* ─── NAVBAR — WHITE background ─── */
nav#navbar {
  position: fixed; top: 33px; left: 0; width: 100%;
  z-index: 9999;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 3%;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 2px 20px rgba(0,0,0,.06);
  transition: all .4s cubic-bezier(0.23,1,0.32,1);
}
nav#navbar.scrolled {
  padding: .65rem 3%;
  border-bottom-color: rgba(37,99,235,.2);
  box-shadow: 0 4px 28px rgba(0,0,0,.1);
}
nav#navbar.topbar-hidden { top: 0; }
@media (max-width:768px) { nav#navbar { top:0 !important; } }

/* ─── LOGO in navbar ─── */
.nav-logo {
  text-decoration: none; flex-shrink: 0; margin-right: 1rem;
  font-size: unset; font-weight: unset; color: unset; letter-spacing: unset;
  border: none; padding: 0;
}
.nav-logo-img {
  height: 60px; width: auto; display: block; object-fit: contain;
  /* Image 8-WB.png: white logo — needs invert to show on white navbar */
  filter: none;
  transition: opacity .25s, transform .25s;
}
.nav-logo:hover .nav-logo-img { opacity:.8; transform:scale(1.02); }

/* ─── DESKTOP LINKS ─── */
.nav-links { display:flex; align-items:center; gap:0; list-style:none; flex-wrap:nowrap; overflow:visible; }
.nav-links > li { position:relative; flex-shrink:0; }
.nav-links > li > a {
  display:block; padding:.4rem .52rem;
  color: #111318;
  font-size: .73rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  transition: color .25s; position: relative; white-space: nowrap;
}
.nav-links > li > a::after {
  content:''; position:absolute; bottom:-2px; left:.52rem; right:.52rem;
  height:2px; background:#2563eb; transform:scaleX(0);
  transition:transform .3s cubic-bezier(0.23,1,0.32,1);
}
.nav-links > li > a:hover { color:#2563eb; }
.nav-links > li > a.active { color:#2563eb; }
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after { transform:scaleX(1); }

/* ─── DROPDOWN ─── */
.nav-links li.has-dropdown > a::before { content:'▾'; font-size:.6rem; margin-left:.22rem; vertical-align:middle; display:inline-block; transition:transform .25s; }
.nav-links li.has-dropdown:hover > a::before { transform:rotate(180deg); }
.dropdown {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  min-width:185px; background:#fff;
  border:1px solid rgba(0,0,0,.09); border-top:2px solid #2563eb;
  border-radius:4px; padding:.5rem 0;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  animation:dropIn .25s cubic-bezier(0.23,1,0.32,1); z-index:10000;
}
@keyframes dropIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.nav-links li.has-dropdown:hover .dropdown { display:block; }
.dropdown li a { display:block; padding:.54rem 1.1rem; color:#374151; font-size:.79rem; transition:color .2s,padding-left .2s,background .2s; white-space:nowrap; }
.dropdown li a:hover { color:#2563eb; padding-left:1.4rem; background:#eff6ff; }

/* ─── CTA BUTTON ─── */
.nav-cta {
  background: #2563eb !important; color: #fff !important;
  padding: .42rem .95rem !important; border-radius: 3px !important;
  font-weight: 700 !important; letter-spacing: .05em !important;
  border: 2px solid #2563eb !important; margin-left: .4rem !important;
  transition: background .3s, transform .2s, box-shadow .3s !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:#1d4ed8 !important; border-color:#1d4ed8 !important; transform:translateY(-1px) !important; box-shadow:0 6px 20px rgba(37,99,235,.35) !important; color:#fff !important; }

/* ─── HAMBURGER ─── */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.hamburger span { display:block; width:26px; height:2px; background:#0a0a0a; border-radius:2px; transition:all .35s cubic-bezier(0.23,1,0.32,1); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─── MOBILE MENU — BLACK overlay ─── */
.mobile-menu {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:#0a0a0a; z-index:9998;
  flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; opacity:0; transition:opacity .35s; overflow-y:auto; padding:3rem 0;
}
.mobile-menu.open { display:flex; opacity:1; }
.mobile-menu a { font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:700; color:rgba(255,255,255,.72); text-decoration:none; padding:.28rem 0; transition:color .25s; letter-spacing:.02em; }
.mobile-menu a:hover { color:#3b82f6; }
.mobile-menu .mobile-cta { margin-top:1rem; background:#2563eb; color:#fff; padding:.8rem 2.5rem; border-radius:3px; font-family:var(--font-body); font-size:.88rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mobile-menu .close-btn { position:absolute; top:1.5rem; right:5%; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; line-height:1; }

/* ─── FOOTER LOGO ─── */
.footer-logo-img { height:65px; width:auto; display:block; object-fit:contain; margin-bottom:1rem; filter:none; transition:opacity .25s; }
.footer-logo { text-decoration:none; }
.footer-logo:hover .footer-logo-img { opacity:.82; }

/* ─── RESPONSIVE ─── */
@media (max-width:1200px) { .nav-links { display:none; } .hamburger { display:flex; } }
@media (min-width:1201px) { .mobile-menu { display:none !important; } }