/* ── OnlineKit nav.css ─────────────────────────────── */
nav{position:sticky;top:0;z-index:200;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:1px solid var(--border);padding:0 1.5rem;height:64px;display:flex;align-items:center;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1200px;margin:0 auto;gap:16px;}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:var(--text);text-decoration:none;letter-spacing:-.02em;flex-shrink:0;}
.nav-logo-text{color:var(--text);}
.free-badge{font-size:.6rem;font-weight:700;color:var(--brand);background:var(--brand-bg);padding:2px 7px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase;}

/* Center links */
.nav-center{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.nav-center > a{font-size:.875rem;font-weight:500;color:var(--text-muted);padding:6px 14px;border-radius:8px;transition:all .15s;text-decoration:none;}
.nav-center > a:hover{color:var(--brand);background:var(--brand-bg);}

/* Right icons */
.nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.nav-icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:all .15s;position:relative;padding:0;}
.nav-icon-btn:hover{border-color:var(--brand);color:var(--brand);}
.nav-icon-btn svg{width:16px;height:16px;}

/* Theme toggle icons */
[data-theme="dark"] .theme-toggle .moon,[data-theme="light"] .theme-toggle .sun{display:none;}
[data-theme="dark"] .theme-toggle .sun,[data-theme="light"] .theme-toggle .moon{display:block;}

/* Language switcher */
.lang-switcher{position:relative;}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:160px;box-shadow:var(--shadow-lg);z-index:300;}
.lang-switcher.open .lang-dropdown{display:block;}
.lang-option{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:.85rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:background .12s;border:none;background:none;font-family:inherit;width:100%;text-align:left;}
.lang-option:hover{background:var(--brand-bg);color:var(--brand);}
.lang-option.active{color:var(--brand);background:var(--brand-bg);}
.lang-option .flag{font-size:1rem;}

/* ── MEGA MENU ──────────────────────────────────── */
.mega-wrap{position:relative;padding-bottom:14px;margin-bottom:-14px;}
/* The padding-bottom extends megaWrap's hit area to cover the gap between trigger and menu */
.mega-trigger{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;color:var(--text-muted);padding:6px 14px;border-radius:8px;border:none;background:none;cursor:pointer;font-family:inherit;transition:all .15s;}
.mega-trigger:hover,.mega-trigger[aria-expanded="true"]{color:var(--brand);background:var(--brand-bg);}
.mega-trigger svg{transition:transform .2s;}
.mega-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}

.mega-menu{display:none;position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,0.12);z-index:300;min-width:480px;overflow:hidden;}
.mega-menu.open{display:flex;}
/* Invisible bridge fills the gap between trigger and menu — keeps hover alive */
.mega-menu::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:12px;}

.mega-left{width:180px;border-right:1px solid var(--border);padding:8px;background:var(--bg-soft);flex-shrink:0;}
.mega-cat{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:none;border-radius:8px;font-size:.85rem;font-weight:500;color:var(--text-muted);cursor:pointer;font-family:inherit;text-align:left;transition:all .12s;position:relative;}
.mega-cat:hover,.mega-cat.active{background:var(--bg);color:var(--text);box-shadow:var(--shadow-sm);}
.mega-cat.active{color:var(--brand);}
.mega-cat svg{margin-left:auto;opacity:.4;flex-shrink:0;}
.mega-cat.active svg{opacity:1;color:var(--brand);}
.mcat-ico{font-size:1rem;width:22px;text-align:center;flex-shrink:0;}

.mega-right{flex:1;padding:10px;min-width:260px;}
.mega-panel{display:none;flex-direction:column;gap:2px;}
.mega-panel.active{display:flex;}

.mega-tool{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);transition:background .12s;}
.mega-tool:hover{background:var(--bg-soft);}
.mtool-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.mtool-name{font-size:.875rem;font-weight:600;color:var(--text);line-height:1.3;}
.mtool-desc{font-size:.75rem;color:var(--text-muted);line-height:1.4;margin-top:1px;}

/* ── Mobile ─────────────────────────────────────── */
@media(max-width:768px){
  .nav-center{display:none;}
  .mega-menu{left:0;transform:none;min-width:320px;}
}