/* ── CSS Variables ────────────────────────────────────── */
:root {
  --kiq-bg:       #ffffff;
  --kiq-bg-soft:  #f8fafc;
  --kiq-border:   #e2e8f0;
  --kiq-text:     #0f172a;
  --kiq-text-2:   #334155;
  --kiq-muted:    #94a3b8;
  --kiq-accent-p: #f5f3ff;
  --kiq-accent-e: #ecfdf5;
}

.dark {
  --kiq-bg:       #1e293b;
  --kiq-bg-soft:  #151f2e;
  --kiq-border:   rgba(255,255,255,0.1);
  --kiq-text:     #f1f5f9;
  --kiq-text-2:   #cbd5e1;
  --kiq-muted:    #64748b;
  --kiq-accent-p: rgba(124,58,237,0.15);
  --kiq-accent-e: rgba(5,150,105,0.12);
}

/* ── Logo swap (CSS-only, zero React-state hydration lag) */
.kiq-logo-light { display: none; }
.kiq-logo-dark  { display: block; }
.dark .kiq-logo-dark  { display: none; }
.dark .kiq-logo-light { display: block; }

/* ── Global ───────────────────────────────────────────── */
.dark body {
  background-color: #0f172a;
  color: #f1f5f9;
}

/* ── Tailwind Background Overrides ────────────────────── */
.dark .bg-white       { background-color: #1e293b !important; }
.dark .bg-slate-50    { background-color: #111827 !important; }
.dark .bg-slate-100   { background-color: #0f172a !important; }
.dark .bg-slate-200   { background-color: #1e293b !important; }
.dark .bg-slate-300   { background-color: #334155 !important; }

/* Colour-tint feature icon backgrounds */
.dark .bg-purple-50   { background-color: rgba(124,58,237,0.12) !important; }
.dark .bg-emerald-50  { background-color: rgba(5,150,105,0.12)  !important; }
.dark .bg-red-50      { background-color: rgba(220,38,38,0.1)   !important; }
.dark .bg-amber-50    { background-color: rgba(217,119,6,0.1)   !important; }
.dark .bg-blue-50     { background-color: rgba(39,132,185,0.12) !important; }

/* KaizIQ blue tint */
.dark .bg-\[#e6f3fa\] { background-color: rgba(39,132,185,0.15) !important; }

/* Opacity variants */
.dark .bg-slate-50\/80 { background-color: rgba(17,24,39,0.8) !important; }

/* ── Tailwind Text Overrides ──────────────────────────── */
.dark .text-slate-950 { color: #f1f5f9 !important; }
.dark .text-slate-900 { color: #f1f5f9 !important; }
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #cbd5e1 !important; }
.dark .text-slate-600 { color: #94a3b8 !important; }
.dark .text-slate-500 { color: #64748b !important; }
.dark .text-slate-400 { color: #4b5563 !important; }

/* ── Tailwind Border Overrides ────────────────────────── */
.dark .border-slate-50  { border-color: rgba(255,255,255,0.04) !important; }
.dark .border-slate-100 { border-color: rgba(255,255,255,0.06) !important; }
.dark .border-slate-200 { border-color: rgba(255,255,255,0.1)  !important; }
.dark .border-slate-300 { border-color: rgba(255,255,255,0.15) !important; }

/* ── Divide ───────────────────────────────────────────── */
.dark .divide-slate-100 > * + * { border-color: rgba(255,255,255,0.06) !important; }

/* ── Shadows ──────────────────────────────────────────── */
.dark .shadow-sm  { box-shadow: 0 1px 3px  rgba(0,0,0,0.5)  !important; }
.dark .shadow-md  { box-shadow: 0 4px 12px rgba(0,0,0,0.4)  !important; }
.dark .shadow-lg  { box-shadow: 0 8px 24px rgba(0,0,0,0.5)  !important; }
.dark .shadow-xl  { box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; }
.dark .shadow-2xl { box-shadow: 0 24px 48px rgba(0,0,0,0.6) !important; }

/* ── Header nav buttons ───────────────────────────────────
   <button> has a browser-default background that's white.
   In light mode it blends with the white header; in dark mode
   it becomes a visible white pill. Clear it explicitly.       */
.dark header button {
  background-color: transparent;
}

/* ── Solutions dropdown ───────────────────────────────────
   .dark .text-slate-900 !important blocks group-hover:text-[#2784B9].
   This targeted rule restores the blue-on-hover behaviour.   */
.dark .kiq-dd-link:hover h4 { color: #2784B9 !important; }

/* ── Active / selected nav states ────────────────────────
   bg-indigo-50/50 is used as the active item background in
   the header's mobile drawer. In dark mode replace with a
   subtle blue tint so it reads against the dark panel.       */
.dark .bg-indigo-50\/50 { background-color: rgba(39,132,185,0.12) !important; }

/* ── Hover states ─────────────────────────────────────── */
/* bg-white override (→#1e293b) means hover:bg-slate-50 must
   be slightly lighter so it's actually visible on hover.     */
.dark .hover\:bg-slate-50:hover   { background-color: rgba(255,255,255,0.07) !important; }
.dark .hover\:bg-slate-100:hover  { background-color: rgba(255,255,255,0.07) !important; }
.dark .hover\:bg-slate-200:hover  { background-color: #334155 !important; }
.dark .hover\:shadow-md:hover     { box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; }

/* hover:text-slate-900 on inactive nav links would turn text
   nearly black on a dark header — override to near-white.   */
.dark .hover\:text-slate-900:hover { color: #f8fafc !important; }
.dark .hover\:text-slate-700:hover { color: #e2e8f0 !important; }

/* ── Inputs & Forms ───────────────────────────────────── */
.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b !important;
}

/* ── WhatsApp mockup inputs always dark (white pill bg) ── */
.dark input.wa-mockup-input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
  color: #111B21 !important;
  background: #fff !important;
}

/* ── Links ────────────────────────────────────────────── */
.dark a.text-slate-600 { color: #94a3b8 !important; }
.dark a.text-slate-700 { color: #cbd5e1 !important; }

/* ── Bootstrap / vendor template fallbacks ────────────── */
.dark .card {
  background-color: #1e293b !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f1f5f9 !important;
}
.dark .card-body { color: #f1f5f9 !important; }
.dark .section-title { color: #f1f5f9 !important; }
.dark .section-subtitle { color: #94a3b8 !important; }

/* Preserve always-dark elements untouched */
.dark .kiq-footer   { background-color: #0f172a !important; }

/* Stat card — dark on light bg, blue-tinted on dark bg */
.kiq-stat-card {
  background: #0f172a;
  color: #ffffff;
}
.dark .kiq-stat-card {
  background: rgba(39, 132, 185, 0.12);
  color: #f1f5f9;
  border: 1px solid rgba(39, 132, 185, 0.25);
  box-shadow: none;
}

/* ── Blue-tint icon/badge backgrounds ────────────────────
   Used wherever background: #e6f3fa appears inline.
   In dark mode swap to a low-opacity blue tint instead.  */
.kiq-blue-bg { background-color: #e6f3fa; }
.dark .kiq-blue-bg { background-color: rgba(39, 132, 185, 0.15); }

/* ── Card / pillar borders ────────────────────────────── */
.kiq-card { border: 1px solid #e2e8f0; }
.dark .kiq-card { border-color: rgba(255, 255, 255, 0.08); }

/* ── About hero — stats column separator ─────────────── */
@media (min-width: 1024px) {
  .kiq-stats-col {
    border-left: 1px solid var(--kiq-border);
    padding-left: clamp(2rem, 5vw, 5rem);
  }
}

/* ── Floating stat cards (hero, about page) ─────────── */
@keyframes kiq-float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.kiq-float-card {
  animation: kiq-float-y 4s ease-in-out infinite;
}

/* ── Client Logo Marquee ─────────────────────────────── */
@keyframes kiq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.kiq-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: kiq-scroll 38s linear infinite;
}
.kiq-marquee-wrap:hover .kiq-marquee-track {
  animation-play-state: paused;
}
.kiq-client-logo {
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.2s, filter 0.2s;
}
.kiq-client-logo:hover {
  filter: none;
  opacity: 1;
}
.dark .kiq-client-logo {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.38;
}
.dark .kiq-client-logo:hover {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
/* Fade edges */
.kiq-marquee-fade-l { background: linear-gradient(to right, #f8fafc, transparent); }
.kiq-marquee-fade-r { background: linear-gradient(to left,  #f8fafc, transparent); }
.dark .kiq-marquee-fade-l { background: linear-gradient(to right, #111827, transparent); }
.dark .kiq-marquee-fade-r { background: linear-gradient(to left,  #111827, transparent); }