/* ================== HEADER + MEGA MENU (COMPLETE) ================== */
/* Put this block in your header CSS (replace previous menu CSS) */

/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
  --cft-font: "Inter", "Roboto", "Segoe UI", sans-serif;
  --cft-text: #111216;
  --cft-muted: #6b7280;
  --cft-accent: #2368f0;
  --cft-bg: #ffffff;
  --cft-border: #e9edf3;
  --cft-shadow: 0 8px 30px rgba(22,23,27,0.06);
  --cft-gap: 12px; /* horizontal gap between top links */
}

/* Header base */
.site-header{
  background:var(--cft-bg);
  border-bottom:1px solid var(--cft-border);
  position:sticky;
  top:0;
  z-index:12000;
}
.container{max-width:1300px;margin:0 auto;padding:0 18px}
.header-container{display:flex;align-items:center;justify-content:space-between;height:72px;gap:12px}

/* Logo */
.logo-header img{height:48px;display:block;object-fit:contain}

/* Nav base */
.nav-container{position:relative}
.nav-menu{display:flex;gap:var(--cft-gap);list-style:none;margin:0;padding:0;align-items:center;font-family:var(--cft-font);font-size:15px}
.nav-item{position:relative;white-space:nowrap;padding:0;margin:0}
.nav-link{display:inline-block;color:var(--cft-text);text-decoration:none;padding:8px 6px;font-weight:500}
.nav-link:hover{color:var(--cft-accent)}

/* dropdown arrow */
.has-dropdown::after{content:"▾";font-size:0.62rem;color:var(--cft-muted);margin-left:6px;vertical-align:baseline}

/* MEGA MENU (desktop centered default) */
.mega-menu{
  position:absolute;
  top:100%;            /* touch parent — prevents hover gap */
  margin-top:1px;
  left:50%;
  transform:translateX(-50%);
  width:1100px;
  background:var(--cft-bg);
  border-radius:10px;
  padding:18px;
  box-shadow:var(--cft-shadow);
  display:none;
  z-index:2000;
  max-width:calc(100vw - 40px);
  box-sizing:border-box;
  transition:opacity .18s ease, transform .18s ease;
  opacity:0;
  visibility:hidden;
}

/* show on hover (desktop) */
.nav-item:hover > .mega-menu{display:block;opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* Mega menu inner grid */
.mega-menu-container{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.mega-menu-section{min-width:150px}
.mega-menu-heading{font-weight:600;color:var(--cft-text);margin:0 0 8px;font-size:0.97rem}
.mega-menu-links{list-style:none;padding:0;margin:0}
.mega-menu-links li{margin-bottom:6px}
.mega-menu-links li a{color:#2b2b2b;text-decoration:none;font-size:0.9rem;display:block}
.mega-menu-links li a:hover{color:var(--cft-accent);transform:translateX(3px);transition:all .15s}

/* .align-right class added by JS if needed */
.mega-menu.align-right{ left:auto; right:0; transform:none; }

/* DROPDOWN (small lists) */
.dropdown-menu{
  position:absolute;
  top:100%;
  margin-top:1px;
  left:0;
  min-width:200px;
  background:var(--cft-bg);
  padding:8px 6px;
  border-radius:8px;
  box-shadow:var(--cft-shadow);
  display:none;
  z-index:2000;
  box-sizing:border-box;
}
.nav-item:hover > .dropdown-menu{display:block}
.dropdown-menu li a{display:block;padding:8px 12px;color:#222;text-decoration:none}
.dropdown-menu li a:hover{background:#f5f8ff;color:var(--cft-accent)}

/* Mobile styles: hamburger + accordion */
.mobile-menu-btn{display:none;background:none;border:0;font-size:20px;color:var(--cft-text);cursor:pointer}

/* Responsive adjustments */
@media (max-width: 992px) {
  .mobile-menu-btn{display:block}
  .nav-menu{display:none;position:fixed;top:72px;left:0;right:0;background:var(--cft-bg);flex-direction:column;padding:12px 14px;gap:0;box-shadow:0 8px 30px rgba(0,0,0,0.08);max-height:calc(100vh - 72px);overflow:auto;z-index:11000}
  .nav-menu.show{display:flex}
  .nav-item{width:100%;border-bottom:1px solid #f0f2f6}
  .nav-link{display:flex;justify-content:space-between;align-items:center;padding:14px 8px;width:100%;font-size:16px}
  .has-dropdown::after{margin-left:0;float:right}
  /* collapse mega/dropdown into stacked block for accordion */
  .mega-menu,.dropdown-menu{position:relative;top:0;left:0;right:0;padding:12px 16px;display:none;box-shadow:none;border-radius:0;max-height:0;overflow:hidden;transition:max-height .28s ease}
  .nav-item.open > .mega-menu, .nav-item.open > .dropdown-menu{display:block;max-height:2000px}
  .mega-menu-container{grid-template-columns:1fr;gap:12px}
  .mega-menu{padding:12px 16px}
}

/* small screens fine tuning */
@media (max-width:480px){
  .nav-link{font-size:15px;padding:12px 8px}
  .mega-menu{width:calc(100vw - 32px)}
}

/* defensive */
.mega-menu *{box-sizing:border-box}