/* ============================================================ */
/* LIGHT MODE — override layer, loaded after style.css           */
/* ============================================================ */
/*
 * style.css themes almost everything through a handful of CSS custom
 * properties (--bg-dark/--bg-card/--bg-input/--text-main/--text-light/
 * --primary-purple/--border-color/--overlay-rgb) — redefining them here
 * under html[data-theme="light"] repaints the whole site. The rest of this
 * file is the short list of spots that don't flow through those variables
 * (a couple of hardcoded gradients/backgrounds, and the photo-style hero,
 * which is deliberately pinned to stay dark/moody in both themes — see
 * below). Toggled by assets/js/theme.js; applied pre-paint by the inline
 * script at the top of partials/head.php so there's no flash of the wrong
 * theme on load.
 */

html[data-theme="light"] {
  --bg-dark: #f7f6f2;
  --bg-card: #ffffff;
  --bg-input: #f0efe9;
  --text-main: #4a4d55;
  --text-light: #14161c;
  /* Was white (ink-on-dark accent for emphasis text/borders/fills) — becomes
     the equivalent dark ink-on-light accent, so every existing var(--primary-purple)
     call site (borders, emphasis text, badge fills) keeps working unchanged. */
  --primary-purple: #14161c;
  --border-color: #e1ded2;
  /* Every rgb(var(--overlay-rgb) / X) "glass" surface/border/glow flips from
     white-tinted to black-tinted, so it stays visible against a light page. */
  --overlay-rgb: 0 0 0;
  /* The dark theme's neon green (#00FF66) barely clears 1.4:1 contrast
     against a light page — nowhere near WCAG's 4.5:1 body-text minimum
     (used for stat numbers, .mq-tag pills, checkmarks). A darker green
     keeps the same accent hue but stays legible on white. */
  --accent-green: #0e8a45;
  color-scheme: light;
}

/* ---- Hero stays dark & moody in both themes (photo/gradient section, ---- */
/* ---- same convention as most light/dark sites) — re-pin its own vars ---- */
/* ---- back to the dark defaults so nothing inside it flips.           ---- */
html[data-theme="light"] #hero,
html[data-theme="light"] .service-hero {
  --bg-dark: #090A0F;
  --bg-card: #13151D;
  --bg-input: #0f1118;
  --text-main: #e1e1e1;
  --text-light: #FFFFFF;
  --primary-purple: #FFFFFF;
  --accent-green: #00FF66;
  --border-color: #202433;
  --overlay-rgb: 255 255 255;
  color-scheme: dark;
  /* home.php's hero paints its own dark backdrop via a .hero-bg div, but the
     industry/service pages' hero (built from admin content blocks) has no
     such element — without an explicit background here, it would show the
     (now light) page background behind text pinned white above. */
  background: var(--bg-dark);
}

/* Navbar's translucent backdrop was a literal rgba(bg-dark), not a var. */
html[data-theme="light"] #navbar {
  background: rgba(247, 246, 242, 0.92);
}

/* "Why Choose CallRank" / roadmap step cards — hardcoded two-tone dark gradient. */
html[data-theme="light"] .cr-why-container,
html[data-theme="light"] .step-card {
  background: linear-gradient(135deg, #ffffff, #f0eef8) !important;
}

/* Muted gray captions read a touch dark-bg-tuned; nudge for light-bg contrast. */
html[data-theme="light"] .testi-role,
html[data-theme="light"] .faq-heading p {
  color: #6b7280;
}

/* Testimonial-carousel prev/next controls were a hardcoded dark circle. */
html[data-theme="light"] .testimonials-carousel .owl-nav button {
  background: var(--bg-card) !important;
  color: var(--text-light) !important;
}

/* The "Follow Us" floating social bar has its own fixed dark-purple backdrop
   (rgba(18,11,31,...), not a var) — since it's a fixed-position element,
   not a DOM descendant of #hero, it needs its own re-pin back to dark so
   its icons/text/borders (which DO use the shared vars) don't go
   dark-ink-on-dark-backdrop once the page-wide vars flip. */
html[data-theme="light"] .right-socials-float {
  --text-light: #FFFFFF;
  --primary-purple: #FFFFFF;
  --overlay-rgb: 255 255 255;
  color-scheme: dark;
}