/* ============================================================
   DriveHub shared header / mega menu / mobile nav
   Single source of truth — linked from every marketing-site page
   via <link rel="stylesheet" href="/assets/nav.css">. Edit here,
   not per-page, so every page stays in sync automatically.

   Depends on the CSS custom properties defined in each page's
   own :root block (--bg, --ink, --muted, --blue, --blue-light,
   --line, --glass, --radius). Every page that includes this
   already defines those, so nothing extra is required.
   ============================================================ */

header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,56px);
  height:68px;
  backdrop-filter:blur(16px);
  background:rgba(4,11,26,.72);
  transition:.3s;
}
header::after{
  content:"";
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background:var(--line);
  transition:.4s;
}
header.scrolled::after{
  background:linear-gradient(90deg, transparent, var(--blue) 30%, var(--blue-light) 50%, var(--blue) 70%, transparent);
  animation:navBorderSlide 3s linear infinite;
}
@keyframes navBorderSlide{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}

.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand img{height:44px; width:auto; border-radius:0;}

.main-nav{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0; height:68px;
}
.main-nav > li{
  position:static; height:100%;
  display:flex; align-items:center;
}
.main-nav > li > a,
.main-nav > li > button{
  display:flex; align-items:center; gap:5px;
  padding:0 14px; height:100%;
  color:var(--muted); text-decoration:none;
  font-size:.88rem; font-weight:500;
  background:none; border:none; cursor:pointer; font-family:inherit;
  transition:.2s; white-space:nowrap;
}
.main-nav > li > a:hover,
.main-nav > li > button:hover,
.main-nav > li:hover > a,
.main-nav > li:hover > button{color:var(--ink);}
.main-nav > li > button .caret{
  font-size:.6rem; opacity:.6; transition:transform .2s;
}
.main-nav > li:hover > button .caret{transform:rotate(180deg);}

/* ===== Full-width mega menu =====
   `.dropdown` is `position:fixed` and spans the entire viewport width
   regardless of which nav item triggered it — a real mega-menu panel
   docked under the header, not a small box floating under one button.
   `.dropdown-inner` caps the content at a readable max-width and
   centers it, while the panel's background/border still bleeds edge
   to edge. Columns are auto-fill so 5-8 links lay out cleanly without
   per-category tuning. */
.dropdown{
  position:fixed; top:68px; left:0; right:0;
  background:rgba(7,18,38,.98);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
.main-nav > li:hover .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}
.dropdown-inner{
  max-width:1160px; margin:0 auto;
  padding:32px clamp(20px,4vw,56px) 36px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:6px 20px;
}
.dropdown-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:12px;
  text-decoration:none; color:var(--ink);
  transition:.2s;
}
.dropdown-item:hover{background:rgba(47,155,245,.1);}
.dropdown-item .di-icon{
  font-size:1.25rem; flex-shrink:0; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(47,155,245,.1); border-radius:10px; border:1px solid var(--line);
}
.dropdown-item .di-text .di-title{
  font-size:.87rem; font-weight:700; margin-bottom:3px; color:var(--ink);
}
.dropdown-item .di-text .di-desc{
  font-size:.75rem; color:var(--muted); line-height:1.5;
}

.nav-signin{
  padding:0 10px; color:var(--muted); text-decoration:none;
  font-size:.88rem; font-weight:500; white-space:nowrap; flex-shrink:0;
  transition:.2s;
}
.nav-signin:hover{color:var(--ink);}

.nav-cta{
  padding:10px 22px; border-radius:999px; font-size:.85rem; font-weight:700;
  background:linear-gradient(135deg,var(--blue),#1c6fd6); color:#fff; text-decoration:none;
  box-shadow:0 8px 24px -8px rgba(47,155,245,.7);
  transition:.25s; white-space:nowrap; flex-shrink:0; margin-left:8px;
}
.nav-cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(47,155,245,.9);}

.menu-toggle{
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; background:none; border:none;
}
.menu-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; display:block;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none;
  position:fixed; top:68px; left:0; right:0; bottom:0; z-index:190;
  background:rgba(4,11,26,.98); backdrop-filter:blur(20px);
  overflow-y:auto;
  padding:20px clamp(20px,5vw,40px) 40px;
  transform:translateY(-20px); opacity:0;
  transition:transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
.mobile-nav.open{
  display:block; transform:translateY(0); opacity:1; pointer-events:auto;
}
.mobile-section-header{
  font-size:.7rem; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--blue-light);
  padding:20px 0 10px; border-top:1px solid var(--line); margin-top:10px;
}
.mobile-section-header:first-child{border-top:none; margin-top:0;}
.mobile-nav-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; text-decoration:none; color:var(--ink);
  font-size:.95rem; font-weight:500;
  border-bottom:1px solid rgba(126,198,255,.06);
}
.mobile-nav-item .mi-icon{font-size:1.1rem; width:28px; text-align:center;}
.mobile-nav-item .mi-title{font-weight:600;}
.mobile-nav-item:hover{color:var(--blue-light);}
.mobile-nav-plain{
  display:block; padding:14px 0; text-decoration:none;
  color:var(--ink); font-size:1rem; font-weight:600;
  border-bottom:1px solid var(--line);
}
.mobile-nav-plain:hover{color:var(--blue-light);}
.mobile-cta-group{margin-top:28px; display:flex; flex-direction:column; gap:12px;}
.mobile-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px; border-radius:999px; font-weight:700; font-size:.95rem;
  text-decoration:none;
}
.mobile-cta.ios{background:linear-gradient(135deg,#1a1a2e,#16213e); color:#fff; border:1px solid rgba(255,255,255,.2);}
.mobile-cta.android{background:linear-gradient(135deg,#0a3d1a,#145a2e); color:#fff; border:1px solid rgba(52,211,153,.3);}

@media(max-width:980px){
  .main-nav, .nav-cta{ display:none; }
  .menu-toggle{display:flex;}
}