/* ═══════════════════════════════════════════════════════════════
   BrainzBytes — Multi-Theme System
   Three themes: midnight (default), light, neon
   ═══════════════════════════════════════════════════════════════ */

/* ── Midnight (Default Dark) ────────────────────────────────── */
[data-theme="midnight"], :root {
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-elevated: #1c2333;
  --bg-nav: rgba(13,17,23,0.95);
  --text: #e6edf3;
  --text-muted: #8b949e;
  --text-heading: #e6edf3;
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(167,139,250,0.3);
  --accent: #4da3ff;
  --accent-purple: #a78bfa;
  --accent-cyan: #0dcaf0;
  --card-shadow: 0 4px 24px rgba(0,0,0,0.3);
  --card-hover-shadow: 0 12px 40px rgba(0,0,0,0.4);
  --glass: rgba(22,27,34,0.8);
  --glass-border: rgba(255,255,255,0.06);
  --hero-glow: rgba(167,139,250,0.08);
  --code-bg: rgba(255,255,255,0.06);
  --badge-muted-bg: rgba(255,255,255,0.06);
  --section-alt: #1c2333;
  --input-bg: rgba(255,255,255,0.05);
  --input-border: rgba(255,255,255,0.12);
  --scrollbar-track: #161b22;
  --scrollbar-thumb: #30363d;
}

/* ── Light ──────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #f8f9fc;
  --bg-card: #ffffff;
  --bg-elevated: #f0f2f5;
  --bg-nav: rgba(255,255,255,0.92);
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --text-heading: #111827;
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(99,102,241,0.3);
  --accent: #4f46e5;
  --accent-purple: #7c3aed;
  --accent-cyan: #0891b2;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --card-hover-shadow: 0 8px 32px rgba(0,0,0,0.1);
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.06);
  --hero-glow: rgba(79,70,229,0.06);
  --code-bg: rgba(0,0,0,0.04);
  --badge-muted-bg: rgba(0,0,0,0.04);
  --section-alt: #f0f2f5;
  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,0.12);
  --scrollbar-track: #f0f2f5;
  --scrollbar-thumb: #d1d5db;
}

/* ── Neon ───────────────────────────────────────────────────── */
[data-theme="neon"] {
  --bg: #0a0a0f;
  --bg-card: #12121a;
  --bg-elevated: #1a1a28;
  --bg-nav: rgba(10,10,15,0.95);
  --text: #f0f0ff;
  --text-muted: #9d9dba;
  --text-heading: #ffffff;
  --border: rgba(139,92,246,0.15);
  --border-hover: rgba(236,72,153,0.4);
  --accent: #06b6d4;
  --accent-purple: #a855f7;
  --accent-cyan: #22d3ee;
  --card-shadow: 0 4px 24px rgba(139,92,246,0.1);
  --card-hover-shadow: 0 12px 40px rgba(139,92,246,0.2);
  --glass: rgba(18,18,26,0.85);
  --glass-border: rgba(139,92,246,0.12);
  --hero-glow: rgba(168,85,247,0.12);
  --code-bg: rgba(139,92,246,0.1);
  --badge-muted-bg: rgba(139,92,246,0.08);
  --section-alt: #12121a;
  --input-bg: rgba(139,92,246,0.05);
  --input-border: rgba(139,92,246,0.2);
  --scrollbar-track: #0a0a0f;
  --scrollbar-thumb: #3b3b5c;
}

/* ── Neon glow effects ──────────────────────────────────────── */
[data-theme="neon"] .product-card:hover {
  box-shadow: 0 0 30px rgba(168,85,247,0.15), 0 0 60px rgba(6,182,212,0.08) !important;
  border-color: rgba(168,85,247,0.4) !important;
}
[data-theme="neon"] .hero h1 {
  background: linear-gradient(135deg, #a855f7 0%, #22d3ee 50%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 60px rgba(168,85,247,0.3);
}
[data-theme="neon"] .btn-glow {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  box-shadow: 0 0 30px rgba(168,85,247,0.4) !important;
}
[data-theme="neon"] .bb-nav {
  border-bottom-color: rgba(168,85,247,0.2) !important;
}

/* ── Light theme overrides ──────────────────────────────────── */
[data-theme="light"] .hero h1 {
  background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
[data-theme="light"] .btn-glow {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,0.3) !important;
}
[data-theme="light"] .card, [data-theme="light"] .product-card {
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .table {
  color: var(--text) !important;
}
[data-theme="light"] .text-muted {
  color: var(--text-muted) !important;
}



/* ── Light theme: comprehensive element overrides ───────────── */
[data-theme="light"] .section-alt,
[data-theme="light"] .section.section-alt {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .pillar-card,
[data-theme="light"] .product-card,
[data-theme="light"] .usecase-card,
[data-theme="light"] .lego-card,
[data-theme="light"] .connector-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .feat-pill {
  background: rgba(79,70,229,0.08) !important;
  border-color: rgba(79,70,229,0.2) !important;
  color: var(--accent-purple) !important;
}
[data-theme="light"] .stat-badge {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .stat-num {
  color: var(--accent-cyan) !important;
}
[data-theme="light"] code {
  background: var(--code-bg) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .block,
[data-theme="light"] .voice-bubble,
[data-theme="light"] .agent-bubble {
  border-color: var(--border) !important;
}
[data-theme="light"] .bb-footer,
[data-theme="light"] .bb-site-footer {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 {
  color: var(--text-heading) !important;
  -webkit-text-fill-color: var(--text-heading) !important;
}
[data-theme="light"] .hero h1 {
  -webkit-text-fill-color: transparent !important;
}
[data-theme="light"] .section-title {
  -webkit-text-fill-color: var(--text-heading) !important;
}
[data-theme="light"] p, [data-theme="light"] li, [data-theme="light"] span,
[data-theme="light"] td, [data-theme="light"] th, [data-theme="light"] div {
  color: inherit;
}
[data-theme="light"] strong {
  color: var(--text-heading);
}
[data-theme="light"] .fw-bold {
  color: var(--text-heading) !important;
}
[data-theme="light"] .border-bottom {
  border-color: var(--border) !important;
}
[data-theme="light"] table {
  color: var(--text) !important;
}
[data-theme="light"] thead {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] tbody tr {
  border-color: var(--border) !important;
}
[data-theme="light"] .detail-panel {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="light"] .detail-panel h3 {
  color: var(--accent-purple) !important;
  -webkit-text-fill-color: var(--accent-purple) !important;
}
[data-theme="light"] .detail-panel p {
  color: var(--text-muted) !important;
}
[data-theme="light"] .overlay {
  background: rgba(0,0,0,0.3) !important;
}
/* Light SVG text — make visible on light backgrounds */
[data-theme="light"] svg text[fill*="rgba(255,255,255"] {
  fill: var(--text-muted) !important;
}

/* ── Neon theme: comprehensive element overrides ────────────── */
[data-theme="neon"] .section-alt,
[data-theme="neon"] .section.section-alt {
  background: var(--bg-elevated) !important;
}
[data-theme="neon"] .feat-pill {
  background: rgba(168,85,247,0.1) !important;
  border-color: rgba(168,85,247,0.3) !important;
  color: var(--accent-purple) !important;
}
[data-theme="neon"] .stat-badge {
  background: var(--bg-card) !important;
  border-color: rgba(168,85,247,0.2) !important;
}
[data-theme="neon"] code {
  background: var(--code-bg) !important;
}
[data-theme="neon"] .bb-site-footer {
  background: var(--bg-card) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Force Theme Variables — override inline styles
   ═══════════════════════════════════════════════════════════════ */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.section, section {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
.section-alt, section.section-alt, .section.section-alt {
  background-color: var(--section-alt) !important;
}
.card, .product-card, .pillar-card, .usecase-card, .lego-card,
.connector-card, .stream-card, .metric-card, .card-dark, .card-dark-sm,
.block, .voice-bubble, .agent-bubble, .connector-badge {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.text-muted {
  color: var(--text-muted) !important;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading) !important;
}
/* Override gradient headings — they use -webkit-text-fill-color */
.hero h1, .section-title-glow {
  -webkit-text-fill-color: transparent !important;
}
p, li, span, td, th, div, label, small {
  color: inherit;
}
a:not(.bb-nav-link):not(.bb-nav-dd-link):not(.bb-nav-brand):not(.btn):not(.btn-glow) {
  color: var(--accent);
}
table {
  color: var(--text) !important;
}
thead, th {
  color: var(--text-heading) !important;
  background: var(--bg-elevated) !important;
}
tbody tr {
  border-color: var(--border) !important;
}
code, pre {
  background: var(--code-bg) !important;
  color: var(--accent) !important;
}
.table { color: var(--text) !important; }
input, select, textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text) !important;
}
.bb-site-footer, .bb-page-nav {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
}
.bb-site-footer a, .bb-page-nav a {
  color: var(--text-muted) !important;
}
.bb-site-footer a:hover, .bb-page-nav a:hover {
  color: var(--accent-purple) !important;
}
/* Theme transition flash prevention */
html {
  background: var(--bg);
}
/* ═══════════════════════════════════════════════════════════════
   Shared Transitions & Animations
   ═══════════════════════════════════════════════════════════════ */

/* Smooth theme transition */
body, .card, .product-card, .bb-nav, .hero, .section, .section-alt,
.btn-glow, .btn-outline-glow, .dropdown-menu, table, code, input {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Scroll Animations ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger > * { transition-delay: calc(var(--i, 0) * 0.08s); }

/* ── Micro-interactions ─────────────────────────────────────── */
/* Card hover glow */
.product-card, .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--border-hover);
}

/* Button interactions */
.btn-glow:hover {
  transform: translateY(-2px) scale(1.02);
}
.btn-glow:active, .btn-outline-glow:active {
  transform: translateY(0) scale(0.98);
}

/* Link underline animation */
.animated-link {
  position: relative;
  text-decoration: none;
}
.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-purple);
  transition: width 0.3s ease;
}
.animated-link:hover::after {
  width: 100%;
}

/* Glass effect */
.glass-card {
  background: var(--glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border) !important;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ── Hero animated mesh ─────────────────────────────────────── */
.hero-mesh {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, var(--hero-glow) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(13,202,240,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 60% 70%, rgba(236,72,153,0.04) 0%, transparent 70%);
  animation: meshFloat 20s ease-in-out infinite;
}
@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -15px) rotate(1deg); }
  50% { transform: translate(-10px, 10px) rotate(-0.5deg); }
  75% { transform: translate(15px, 5px) rotate(0.5deg); }
}

/* ── Theme toggle button ────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  gap: 0;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  padding: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.theme-toggle:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.4);
}
.theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--text-muted);
}
.theme-btn:hover {
  background: rgba(167,139,250,0.1);
  color: var(--text);
}
.theme-btn.active {
  background: var(--accent-purple);
  color: #fff;
  box-shadow: 0 2px 8px rgba(167,139,250,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   Global Navigation Bar
   ═══════════════════════════════════════════════════════════════ */
#bb-global-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 99990;
  display: flex;
  align-items: center;
}
.bb-nav-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bb-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-right: auto;
  white-space: nowrap;
}
.bb-nav-logo {
  width: 32px;
  height: 32px;
}
.bb-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bb-nav-item {
  position: relative;
}
.bb-nav-link {
  display: block;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.bb-nav-link:hover {
  color: var(--accent-purple);
  background: rgba(167,139,250,0.12);
}
.bb-nav-item.active > .bb-nav-link {
  color: var(--accent-purple);
  background: rgba(167,139,250,0.15);
  box-shadow: inset 0 -2px 0 var(--accent-purple);
}

/* Dropdown */
.bb-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  padding-top: 12px;
  box-shadow: var(--card-shadow);
  margin-top: 0;
  z-index: 99999;
}
.bb-nav-item.has-dropdown.show .bb-nav-dropdown {
  display: block;
}
/* Dropdown arrow indicator */
.bb-nav-item.has-dropdown > .bb-nav-link::after {
  content: ' \25BE';
  font-size: 0.7em;
  opacity: 0.5;
  margin-left: 2px;
}
.bb-nav-item.has-dropdown.show > .bb-nav-link {
  color: var(--text);
  background: rgba(167,139,250,0.1);
}

.bb-nav-dd-link {
  display: block;
  padding: 8px 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.15s;
}
.bb-nav-dd-link:hover {
  color: var(--text);
  background: rgba(167,139,250,0.08);
}
.bb-nav-dd-link.active {
  color: var(--accent-purple);
  background: rgba(167,139,250,0.06);
}

/* Nav theme buttons */
.bb-nav-theme {
  display: flex;
  gap: 6px;
  margin-left: 20px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.bb-nav-theme .theme-btn {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  border: 1px solid var(--border);
}
.bb-nav-theme .theme-btn:hover {
  border-color: var(--accent-purple);
  transform: scale(1.1);
}
.bb-nav-theme .theme-btn.active {
  border-color: transparent;
  transform: scale(1.15);
}

/* Hamburger (mobile) */
.bb-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

/* ── Prev/Next Page Navigation ───────────────────────────────── */
.bb-page-nav {
  margin-top: 60px;
  padding: 0 24px 40px;
}
.bb-page-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.bb-page-prev, .bb-page-next {
  display: inline-block;
  padding: 12px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.2s;
}
.bb-page-prev:hover, .bb-page-next:hover {
  color: var(--accent-purple);
  border-color: var(--border-hover);
  box-shadow: var(--card-shadow);
}

/* ── Site Footer ─────────────────────────────────────────────── */
.bb-site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 48px 24px 24px;
  margin-top: 0;
}
.bb-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.bb-footer-col h4 {
  color: var(--text-heading);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.bb-footer-col a {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.84rem;
  padding: 4px 0;
  transition: color 0.2s;
}
.bb-footer-col a:hover {
  color: var(--accent-purple);
}
.bb-footer-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.bb-footer-bottom p {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

/* ── Mobile Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .bb-nav-hamburger {
    display: block;
  }
  .bb-nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 12px;
    box-shadow: var(--card-shadow);
  }
  #bb-global-nav.open .bb-nav-links {
    display: flex;
  }
  .bb-nav-theme {
    display: none;
  }
  #bb-global-nav.open .bb-nav-theme {
    display: flex;
    position: absolute;
    top: 64px;
    right: 16px;
    margin-top: 12px;
  }
  .bb-nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 16px;
    margin-top: 0;
    background: transparent;
  }
  .bb-footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .bb-page-nav-inner {
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .bb-footer-inner {
    grid-template-columns: 1fr;
  }
  .bb-nav-brand span {
    display: none;
  }
}

/* Hide old floating theme toggle when nav is present */
body > .theme-toggle:not(#bb-global-nav .theme-toggle) {
  display: none !important;
}