/* Sitewide theme system: dark-mode variable overrides + the theme toggle
   button. Every dark rule is scoped under html[data-theme="dark"], which
   has higher specificity than the unprefixed originals, so it wins
   regardless of stylesheet order. */

/* ── Theme toggle button (visible in both themes) ───────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--border-soft);
  background: transparent; color: var(--text-main); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Keep the header on one line now that the toggle was added (higher
   specificity than the per-page inline .nav rules, so this wins). */
.site-header .nav { gap: 0.9rem; flex-wrap: nowrap; }
.site-header .nav a, .site-header .logo { white-space: nowrap; }
.theme-toggle { margin-left: 0.15rem; }

/* ── Scroll-reveal (sections fade/slide up as they enter view) ──── */
html.reveal-on main section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
html.reveal-on main section.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-on main section { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ── Dark palette (override the CSS variables) ──────────────────── */
html[data-theme="dark"] {
  --bg-main: #0d1716;
  --bg-alt: #101c1b;
  --accent: #3fd0d6;
  --accent-soft: #1f4d50;
  --text-main: #e7f1f0;
  --text-muted: #98aeac;
  --card-bg: #15201f;
  --border-soft: #2a3a39;
  --shadow-soft: 0 14px 35px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* ── Shared chrome (same class names across every page) ─────────── */
html[data-theme="dark"] .page {
  background: radial-gradient(circle at top left, #10201e 0, #0d1716 55%, #0b1312 100%);
}
html[data-theme="dark"] .site-header {
  background: rgba(13, 23, 22, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .site-footer {
  background: #0e1817;
  border-top-color: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
}
html[data-theme="dark"] .nav-cta { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .nav-cta:hover { background: var(--accent); color: #06201f; }
html[data-theme="dark"] .btn-ghost { background: transparent; }

/* Hero (homepage) */
html[data-theme="dark"] .hero-meta span { background: rgba(255, 255, 255, 0.05); border-color: var(--border-soft); }
html[data-theme="dark"] .hero-badge { background: var(--card-bg); color: var(--text-main); }
html[data-theme="dark"] .stat-card { background: var(--card-bg); border-color: var(--border-soft); }

/* Form fields (contact form, etc.) */
html[data-theme="dark"] input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--card-bg); color: var(--text-main); border-color: var(--border-soft);
}

/* ROI calculator (homepage) */
html[data-theme="dark"] .roi-card { background: linear-gradient(160deg, #13211f 0%, #0f1b1a 100%); }
html[data-theme="dark"] .roi-radios label { background: var(--card-bg); }

/* Circuit board (AI Automation) */
html[data-theme="dark"] .cb-board {
  background:
    radial-gradient(circle, rgba(63, 208, 214, 0.10) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #11201e 0%, #0e1a18 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.32), var(--shadow-soft);
}
html[data-theme="dark"] .cb-spec { background: var(--card-bg); border-color: var(--accent-soft); }
html[data-theme="dark"] .cb-spec-desc { color: var(--text-main); }

/* Homepage: education chips, testimonials, section backgrounds */
html[data-theme="dark"] .edu-card { background: var(--card-bg); }
html[data-theme="dark"] .testimonial-card { background: var(--card-bg); }
html[data-theme="dark"] .section-portfolio { background: var(--bg-alt); }
html[data-theme="dark"] .section-contact { background: var(--bg-alt); }
/* Carousel arrows use inline styles, so override needs !important */
html[data-theme="dark"] #testimonial-prev,
html[data-theme="dark"] #testimonial-next,
html[data-theme="dark"] #prev-arrow,
html[data-theme="dark"] #next-arrow {
  background: var(--card-bg) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Education stat bar + AI-automation build pages + services calc section */
html[data-theme="dark"] .stats-bar { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .final-output-box { background: var(--bg-alt); }
html[data-theme="dark"] .calc-section {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-main) 100%);
}

/* "Key insight" highlight boxes (education / case-study pages) */
html[data-theme="dark"] .highlight-box {
  background: linear-gradient(135deg, #16302e 0%, #103e3b 100%);
  border-left-color: var(--accent);
}

/* Blog components */
html[data-theme="dark"] .post-tldr { background: linear-gradient(180deg, #13211f 0%, #0f1b1a 100%); }
html[data-theme="dark"] .post-pullquote { background: var(--card-bg); }
html[data-theme="dark"] .post-cta { background: linear-gradient(160deg, #13211f 0%, #0f1b1a 100%); }
html[data-theme="dark"] .post-faq-item { background: var(--card-bg); }
html[data-theme="dark"] .post-source-card { background: var(--card-bg); }