/* ============================================================ */
/* 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"] {
  /* "Booked" reference's own light values (--bg/--ink/--a1/--a2/--line). */
  --bg-dark: #F2F8F5;
  --bg-card: #ffffff;
  --bg-input: #eef5f1;
  --text-main: #50685F;
  --text-light: #0E2A22;
  /* Light mode needs darker, more saturated mint/lavender than the dark
     theme's neon values for contrast against a pale background. */
  --primary-red: #0E7A5F;
  --primary-red-hover: #0b6650;
  --primary-purple: #6E4FE8;
  --primary-purple-hover: #5b3fd1;
  --primary-violet: #6E4FE8;
  --accent-green: #0E7A5F;
  --border-color: rgba(14, 42, 34, 0.12);
  /* 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: 14 42 34;
  color-scheme: light;
}

/* 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);
}

/* The logo file is a flattened bitmap with its "CALL" wordmark baked in
   white — there's no separate light-mode export, and white-on-white
   pixels can't be recolored from CSS. A small dark backdrop plate behind
   just the image keeps it legible without needing a new logo asset. */
html[data-theme="light"] #navbar .logo img,
html[data-theme="light"] .footer-logo img {
  background: #090A0F;
  padding: 6px 10px;
  border-radius: 10px;
}

/* .hero-bg's radial gradient has a hardcoded dark-purple center (#1b162c)
   fading into var(--bg-dark) — fine against the dark theme's own near-black
   --bg-dark, but left as-is it would fade a dark smudge into the light
   theme's pale background instead. Flattened to a plain wash in light mode,
   matching the reference's own hero (no gradient texture — its only hero
   decoration is the 3D canvas, not a CSS background effect). */
html[data-theme="light"] .hero-bg {
  background: var(--bg-dark);
}

/* About's video scrim: a light wash instead of a dark one, so the (now
   dark-ink) heading text stays readable over the background video. */
html[data-theme="light"] .hero-bg.about-video-overlay {
  background: linear-gradient(rgba(242, 248, 245, 0.75), rgba(242, 248, 245, 0.92));
}

/* .hero-headline's text-shadow is a dark glow meant for light text on a
   dark backdrop — left on, it reads as a muddy halo behind dark-on-light
   text instead. */
html[data-theme="light"] .hero-headline {
  text-shadow: none;
}

/* #hero/.service-hero and #footer used to be pinned permanently dark here,
   on an "always-dark hero" convention from an older theme era. The Booked
   reference file itself has no such special-casing — its own <header> and
   <footer> just inherit whatever theme (light/dark) is active, same as
   everything else on the page — so this project no longer special-cases
   them either; they now flow through the ordinary --bg-dark/--text-light/
   etc. cascade like every other section. .right-socials-float (below) used to
   be exempted too, on the reasoning that it's not part of Booked's own
   design at all — but the client explicitly asked for it to match the
   site's theme like everything else, so its re-pin is gone as well; its
   background now resolves through the ordinary --bg-card cascade in
   style.css directly. */

/* "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;
}