/* ═══════════════════════════════════════════════════════════════════════
   HEADER MENU STYLES — 10 skins for the header nav (Home / 🧰 Tools /
   Blog / ... links + the Tools dropdown panel).

   IMPORTANT: every rule here is scoped under html[data-header-style="N"]
   and only ever targets .site-header, .main-nav, .nav-dropdown-*, .brand —
   never :root and never any other page element. Style 1 = no rules at all
   (it's just the existing default look), so an admin who never opens
   Admin → Menu Settings sees zero change.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 2. Minimal Underline — no pill backgrounds, clean text + underline ── */
html[data-header-style="2"] .main-nav a,
html[data-header-style="2"] .nav-dropdown-toggle{
  border-radius:0;padding:7px 10px;position:relative;background:none!important;
  letter-spacing:.02em;
}
html[data-header-style="2"] .main-nav a::after,
html[data-header-style="2"] .nav-dropdown-toggle::after{
  content:'';position:absolute;left:10px;right:10px;bottom:2px;height:2px;
  background:var(--primary);transform:scaleX(0);transition:transform .15s;transform-origin:left;
}
html[data-header-style="2"] .main-nav a:hover::after,
html[data-header-style="2"] .main-nav a.active::after,
html[data-header-style="2"] .nav-dropdown:hover .nav-dropdown-toggle::after,
html[data-header-style="2"] .nav-dropdown.open .nav-dropdown-toggle::after{transform:scaleX(1);}
html[data-header-style="2"] .main-nav a:hover,
html[data-header-style="2"] .main-nav a.active{background:none!important;}

/* ── 3. Tech Terminal — dark monospace bar, neon-green hover ── */
html[data-header-style="3"] .site-header{background:#0b0e14;border-bottom:1px solid #1c2333;}
html[data-header-style="3"] .brand{color:#e5f9ee;}
html[data-header-style="3"] .main-nav a,
html[data-header-style="3"] .nav-dropdown-toggle{
  font-family:'Courier New',ui-monospace,monospace;color:#8fa3c4;border-radius:4px;
}
html[data-header-style="3"] .main-nav a:hover,
html[data-header-style="3"] .main-nav a.active,
html[data-header-style="3"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="3"] .nav-dropdown.open .nav-dropdown-toggle{
  color:#39ff88;background:#131a29!important;box-shadow:inset 0 0 0 1px #234;
}
html[data-header-style="3"] .header-actions button{background:#131a29;border-color:#234;color:#8fa3c4;}
html[data-header-style="3"] .nav-dropdown-panel{background:#0b0e14;border-color:#1c2333;font-family:'Courier New',ui-monospace,monospace;}
html[data-header-style="3"] .nav-tools-item{color:#c7d3ea;border-radius:4px;}
html[data-header-style="3"] .nav-tools-item:hover{background:#131a29;color:#39ff88;}
html[data-header-style="3"] .nav-tools-search{background:#131a29;border-color:#234;color:#e5f9ee;}
html[data-header-style="3"] .nav-tools-cat{color:#4c5b78;}

/* ── 4. Newspaper Serif — serif small-caps links, ink borders ── */
html[data-header-style="4"] .site-header{border-bottom:3px double var(--text);}
html[data-header-style="4"] .main-nav a,
html[data-header-style="4"] .nav-dropdown-toggle{
  font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;font-size:12px;
  letter-spacing:.06em;border-radius:0;
}
html[data-header-style="4"] .main-nav a:hover,
html[data-header-style="4"] .main-nav a.active,
html[data-header-style="4"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="4"] .nav-dropdown.open .nav-dropdown-toggle{
  background:none!important;color:var(--text);text-decoration:underline;text-underline-offset:4px;
}
html[data-header-style="4"] .nav-dropdown-panel{border-radius:0;border:1px solid var(--text);}
html[data-header-style="4"] .nav-tools-item{border-radius:0;font-family:Georgia,serif;}

/* ── 5. Creator Gradient — pink/purple gradient pills on hover ── */
html[data-header-style="5"] .main-nav a:hover,
html[data-header-style="5"] .main-nav a.active,
html[data-header-style="5"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="5"] .nav-dropdown.open .nav-dropdown-toggle{
  background:linear-gradient(135deg,#ec4899,#8b5cf6)!important;color:#fff!important;
  border-radius:999px;box-shadow:0 4px 14px rgba(139,92,246,.35);
}
html[data-header-style="5"] .main-nav a,
html[data-header-style="5"] .nav-dropdown-toggle{border-radius:999px;font-weight:700;}
html[data-header-style="5"] .nav-dropdown-panel{border-radius:20px;}
html[data-header-style="5"] .nav-tools-item:hover{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;}

/* ── 6. Knowledge Outline — outlined pill links, fill on hover ── */
html[data-header-style="6"] .main-nav a,
html[data-header-style="6"] .nav-dropdown-toggle{
  border:1.5px solid var(--border);background:none!important;
}
html[data-header-style="6"] .main-nav a:hover,
html[data-header-style="6"] .main-nav a.active,
html[data-header-style="6"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="6"] .nav-dropdown.open .nav-dropdown-toggle{
  border-color:var(--primary);background:var(--primary)!important;color:#fff!important;
}

/* ── 7. SEO Hub Tabs — flat rectangular tabs, bottom accent bar ── */
html[data-header-style="7"] .main-nav a,
html[data-header-style="7"] .nav-dropdown-toggle{
  border-radius:6px 6px 0 0;border-bottom:3px solid transparent;padding:9px 12px 6px;
}
html[data-header-style="7"] .main-nav a:hover,
html[data-header-style="7"] .main-nav a.active,
html[data-header-style="7"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="7"] .nav-dropdown.open .nav-dropdown-toggle{
  background:none!important;border-bottom-color:var(--primary);color:var(--primary);
}
html[data-header-style="7"] .nav-dropdown-panel{border-radius:0 0 10px 10px;}

/* ── 8. Storytelling Soft — warm amber pastel pills, soft shadow ── */
html[data-header-style="8"] .main-nav a,
html[data-header-style="8"] .nav-dropdown-toggle{border-radius:14px;}
html[data-header-style="8"] .main-nav a:hover,
html[data-header-style="8"] .main-nav a.active,
html[data-header-style="8"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="8"] .nav-dropdown.open .nav-dropdown-toggle{
  background:#fef3e2!important;color:#b45309!important;box-shadow:0 3px 10px rgba(180,83,9,.15);
}
html[data-header-style="8"] .nav-dropdown-panel{border-radius:18px;}
html[data-header-style="8"] .nav-tools-item:hover{background:#fef3e2;color:#b45309;}

/* ── 9. Business Solid — solid navy fill, sharp corners, professional ── */
html[data-header-style="9"] .main-nav a,
html[data-header-style="9"] .nav-dropdown-toggle{border-radius:4px;font-weight:700;}
html[data-header-style="9"] .main-nav a:hover,
html[data-header-style="9"] .main-nav a.active,
html[data-header-style="9"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="9"] .nav-dropdown.open .nav-dropdown-toggle{
  background:#1e293b!important;color:#fff!important;border-radius:4px;
}
html[data-header-style="9"] .nav-dropdown-panel{border-radius:6px;}
html[data-header-style="9"] .nav-tools-item{border-radius:4px;}
html[data-header-style="9"] .nav-tools-item:hover{background:#1e293b;color:#fff;}

/* ── 10. Dynamic Neon — dark bar, glowing gradient-text hover ── */
html[data-header-style="10"] .site-header{background:#0d0a1a;border-bottom:1px solid #241c3d;}
html[data-header-style="10"] .brand{color:#f1ecff;}
html[data-header-style="10"] .main-nav a,
html[data-header-style="10"] .nav-dropdown-toggle{color:#b6a9e0;border-radius:999px;}
html[data-header-style="10"] .main-nav a:hover,
html[data-header-style="10"] .main-nav a.active,
html[data-header-style="10"] .nav-dropdown:hover .nav-dropdown-toggle,
html[data-header-style="10"] .nav-dropdown.open .nav-dropdown-toggle{
  background:#1a1433!important;color:#00e5ff!important;
  box-shadow:0 0 12px rgba(0,229,255,.45),inset 0 0 0 1px rgba(0,229,255,.4);
}
html[data-header-style="10"] .header-actions button{background:#1a1433;border-color:#241c3d;color:#b6a9e0;}
html[data-header-style="10"] .nav-dropdown-panel{background:#0d0a1a;border-color:#241c3d;box-shadow:0 0 24px rgba(0,229,255,.15);}
html[data-header-style="10"] .nav-tools-item{color:#d9d2f0;border-radius:999px;}
html[data-header-style="10"] .nav-tools-item:hover{background:#1a1433;color:#00e5ff;}
html[data-header-style="10"] .nav-tools-search{background:#1a1433;border-color:#241c3d;color:#f1ecff;}
html[data-header-style="10"] .nav-tools-cat{color:#5a4f80;}