/* ============================================================
   VEWONEX — Header V12 Purple-Violet Theme
   ============================================================ */

.site-header{position:sticky;top:0;z-index:800;background:rgba(255,255,255,0.78);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid rgba(17,17,17,0.06);box-shadow:none;transition:all var(--t-base);}
.site-header.scrolled{background:rgba(255,255,255,0.92);box-shadow:var(--shadow-md);border-bottom-color:var(--border);}
[data-theme="dark"] .site-header{background:rgba(13,11,26,0.72);border-bottom-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .site-header.scrolled{background:rgba(13,11,26,0.92);}

.nav-container{display:flex;align-items:center;justify-content:space-between;height:70px;gap:var(--s-8);}

/* ── LOGO ── */
.nav-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.nav-logo img{height:46px;width:auto;display:block;transition:height var(--t-base);}

/* ── MAIN NAV ── */
.nav-menu{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.nav-item{position:relative;}
/* Fix dropdown gap - extend hover area with pseudo element */
.nav-item::after{content:'';position:absolute;bottom:-8px;left:0;right:0;height:8px;}
.nav-link{display:flex;align-items:center;gap:4px;padding:0.5rem 0.75rem;font-size:0.84rem;font-weight:600;color:var(--text-body);border-radius:var(--r-sm);transition:all var(--t-fast);white-space:nowrap;cursor:pointer;}
.nav-link:hover,.nav-link.active{color:var(--purple);background:var(--brand-pale);}
.nav-link i.arrow{font-size:0.65rem;transition:transform var(--t-fast);}
.nav-item:hover>.nav-link i.arrow{transform:rotate(180deg);}

/* ── MEGA DROPDOWN ── */
.mega-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);padding:var(--s-6);min-width:700px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease,visibility 0.2s ease,transform 0.2s ease;z-index:900;overflow:hidden;}
.mega-dropdown::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy,#222291),var(--purple,#5e17eb),var(--violet,#cc3cd9));}
.mega-dropdown.right-align{left:auto;right:0;transform:none;}
.nav-item:hover>.mega-dropdown{opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0);}
.nav-item:hover>.mega-dropdown.right-align{transform:translateY(0);}
.mega-grid{display:grid;gap:var(--s-2);}
.mega-grid-2{grid-template-columns:repeat(2,1fr);}
.mega-grid-3{grid-template-columns:repeat(3,1fr);}
.mega-grid-4{grid-template-columns:repeat(4,1fr);}
.mega-header{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);padding:0 var(--s-3) var(--s-2);border-bottom:1px solid var(--border);margin-bottom:var(--s-2);grid-column:1/-1;}
.mega-link{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);transition:all var(--t-fast);text-decoration:none;}
.mega-link:hover{background:var(--brand-pale);}
.mega-link .mega-icon{width:2.25rem;height:2.25rem;border-radius:var(--r-sm);background:var(--brand-pale);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;transition:all var(--t-fast);}
.mega-link:hover .mega-icon{background:linear-gradient(135deg,var(--purple,#5e17eb),var(--violet,#cc3cd9));color:var(--white);box-shadow:0 4px 14px rgba(94,23,235,0.35);transform:translateY(-1px);}
.mega-link:hover{transform:translateX(2px);}
.mega-link-label{font-size:0.82rem;font-weight:600;color:var(--text-dark);}
.mega-link-desc{font-size:0.72rem;color:var(--text-muted);margin-top:1px;}
.mega-cta{grid-column:1/-1;margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);}
.mega-cta-text{font-size:0.82rem;color:var(--text-muted);}
.mega-cta-text strong{color:var(--text-dark);}

/* SIMPLE DROPDOWN */
.simple-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:var(--s-3);min-width:220px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease,visibility 0.2s ease;z-index:900;}
.nav-item:hover>.simple-dropdown{opacity:1;visibility:visible;pointer-events:all;}
.simple-dropdown a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);font-size:0.85rem;color:var(--text-body);transition:all var(--t-fast);}
.simple-dropdown a:hover{background:var(--brand-pale);color:var(--purple);}
.simple-dropdown a i{color:var(--text-faint);font-size:0.85rem;width:16px;}

/* ── NAV ACTIONS ── */
.nav-actions{display:flex;align-items:center;gap:var(--s-3);flex-shrink:0;}
.nav-cta{display:flex;align-items:center;gap:var(--s-3);}

/* ── GET QUOTE — single premium nav CTA (Round 2) ── */
.nav-cta-quote{position:relative;overflow:hidden;padding:0.6rem 1.4rem;border-radius:99px;}
.nav-cta-quote::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.45),transparent);transform:skewX(-20deg);transition:left 0.6s ease;}
.nav-cta-quote:hover::before{left:130%;}


/* ── FOOTER UTILITY (dark-toggle + lang) ──
   Round 2 (Aug 2026): relocated a second time -- Round 1 put these in the
   navbar (moved out of the then-newly-commented topbar); Abdul then asked
   for them to live in the footer instead so the navbar stays minimal. See
   site-footer's footer-mid-inner for the markup. Styled for the dark
   footer background instead of the light navbar this time. ── */
.footer-utility{display:flex;align-items:center;gap:0.5rem;}
#dark-toggle{width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.75);display:flex;align-items:center;justify-content:center;font-size:0.8rem;cursor:pointer;transition:all var(--t-fast);flex-shrink:0;}
#dark-toggle:hover{border-color:#a458dc;color:#fff;background:rgba(164,88,220,0.18);}

/* ── LANG DROPDOWN ── */
.lang-wrapper{position:relative;}
.lang-btn{display:flex;align-items:center;gap:var(--s-1);height:2.1rem;padding:0 0.6rem;border:1.5px solid rgba(255,255,255,0.15);border-radius:99px;font-size:0.95rem;font-weight:600;color:rgba(255,255,255,0.75);cursor:pointer;background:rgba(255,255,255,0.06);transition:all var(--t-fast);white-space:nowrap;}
.lang-btn:hover{border-color:#a458dc;color:#fff;}
.footer-utility .lang-panel{top:auto;bottom:calc(100% + 8px);}
.lang-btn:hover{border-color:var(--purple);color:var(--purple);}
.lang-flag{font-size:1rem;}
.lang-panel{position:absolute;right:0;top:calc(100% + 6px);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:var(--s-3);min-width:200px;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.2s ease;z-index:900;max-height:320px;overflow-y:auto;}
.lang-wrapper.open .lang-panel{opacity:1;visibility:visible;pointer-events:all;}
.lang-section-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-faint);padding:var(--s-1) var(--s-3) var(--s-2);margin-top:var(--s-2);}
.lang-section-title:first-child{margin-top:0;}
.lang-option{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);cursor:pointer;transition:all var(--t-fast);text-decoration:none;}
.lang-option:hover,.lang-option.active{background:var(--brand-pale);color:var(--purple);}
.lang-option .flag{font-size:1rem;}
.lang-option .name{font-size:0.82rem;font-weight:500;color:var(--text-dark);}
.lang-option .native{font-size:0.75rem;color:var(--text-muted);}
.lang-option:hover .name,.lang-option.active .name{color:var(--purple);}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;gap:5px;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;background:var(--white);transition:all var(--t-fast);}
.hamburger:hover{border-color:var(--purple);background:var(--brand-pale);}
.hamburger span{display:block;width:18px;height:2px;background:var(--text-body);border-radius:2px;transition:all var(--t-base);}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ── MOBILE NAV — slide-down dropdown (Round 2 rewrite) ── */
/* Bug fix: was a full-screen (top:0;bottom:0) overlay at z-index:850 --
   HIGHER than the header's z-index:800 -- so once open it visually buried
   the hamburger/close button behind itself, leaving no way to close it
   without refreshing the page. Now it's a bounded panel that starts BELOW
   the header (top:70px, matching .nav-container's fixed height) instead of
   covering it, with its own max-height + scroll so it never stretches over
   the whole page, and the toggle button stays visible and clickable the
   entire time it's open. */
.mobile-nav{
  display:none;
  position:fixed;
  top:70px;left:0;right:0;
  max-height:calc(100vh - 70px);
  background:var(--white);
  z-index:820;
  overflow-y:auto;
  box-shadow:0 16px 40px rgba(0,0,0,0.18);
  border-top:1px solid var(--border);
  animation:none;
}
.mobile-nav.open{
  display:block;
  animation:mobNavDropIn 0.25s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes mobNavDropIn{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
.mobile-nav-inner{padding:var(--s-4) var(--s-5) var(--s-8);}
.mob-nav-link{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) 0;border-bottom:1px solid var(--border);font-size:1rem;font-weight:600;color:var(--text-dark);cursor:pointer;}
.mob-nav-link i.arr{font-size:0.8rem;color:var(--text-faint);transition:transform var(--t-fast);}
.mob-nav-link.open-mob i.arr{transform:rotate(90deg);}
.mob-sub{display:none;padding:var(--s-3) 0 var(--s-2) var(--s-4);}
.mob-sub.show{display:block;}
.mob-sub a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;font-size:0.88rem;color:var(--text-muted);border-bottom:1px solid var(--border-soft);}
.mob-sub a:last-child{border-bottom:none;}
.mob-sub a i{color:var(--purple);font-size:0.85rem;width:16px;}
.mob-actions{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);}
.mob-actions .btn{justify-content:center;}
.mob-lang-section{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--border);}
.mob-lang-title{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:var(--s-3);}
.mob-lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);}
.mob-lang-item{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;font-size:0.78rem;transition:all var(--t-fast);}
.mob-lang-item:hover,.mob-lang-item.active{border-color:var(--purple);background:var(--brand-pale);color:var(--purple);}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .nav-menu{display:none;}
  .hamburger{display:flex;}
  .nav-cta .btn:not(.btn-primary){display:none;}
  .mega-dropdown,.simple-dropdown{display:none !important;}
}
@media(max-width:640px){
  .lang-btn .lang-name{display:none;}
  .nav-logo-sub{display:none;}
  .nav-cta{display:none;}
}

/* ── HEADER MOBILE IMPROVEMENTS ── */
@media(max-width:768px){
  .site-header .container{padding:0 1rem;}
  .nav-logo img{height:36px;}
  #dark-toggle{width:1.9rem;height:1.9rem;}
  .lang-btn{height:1.9rem;padding:0 0.45rem;}
  .hamburger{width:2rem;height:2rem;}
}
@media(max-width:480px){
  .topbar{display:none;}
  .site-header{padding:0;}
  .nav-inner{padding:0.6rem 0;}
}