/**
 * Smartio — accent-vs-foreground contrast corrections (site-wide)
 * =============================================================================
 * Companion to smartio-dark-mode-fixes.css. That file fixes DARK-MODE colour
 * bleed; this one fixes a different, mode-agnostic class of bug found by the
 * 39-template audit on 2026-07-27:
 *
 *     the same colour token is used both as an ACCENT (border, fill, icon)
 *     and as a FOREGROUND (text) — and the value that works as an accent is
 *     far too light to read as text.
 *
 * Every template in this theme redefines its own :root palette, so the same
 * mistake repeats ~30 times. Rather than edit 30 templates, the corrections
 * live here once.
 *
 * WHY !important: this sheet is enqueued in <head>, but each template prints
 * its own <style> block *after* wp_head(), so template rules would otherwise
 * win on source order. Same reason smartio-dark-mode-fixes.css uses it.
 *
 * Ratios below were measured, not estimated. Backgrounds referenced:
 *   #ffffff surface · #f4f6f9 paper · #18222f dark card · #0f1722 dark page
 * -----------------------------------------------------------------------------
 * 1. --teal as text            5. WhatsApp CTAs outside the theme
 * 2. --ink-soft / --ink-faint  6. (single-post.php keeps its own copies —
 * 3. --navy as dark foreground    identical in effect, more specific, and
 * 4. amber stars & badges         already verified; left alone deliberately)
 */

/* =============================================================================
 * 0. Tokens
 * -----------------------------------------------------------------------------
 * :root:root out-specifies the plain :root each template declares later, so the
 * value here wins on specificity rather than order.
 * --teal-ink is the readable sibling of --teal (#61afcc, only 2.47:1 on white).
 * #2a7590 clears AA on BOTH surfaces: 5.19:1 on #ffffff, 4.79:1 on #f4f6f9.
 * (single-post.php uses #2c7a96, which is 4.85:1 on white but 4.48:1 on paper —
 * fine there because it only ever sits on the white article card.)
 *
 * The ink tokens have to clear both surfaces for the same reason, and the first
 * pass got this wrong: #657386 is 4.83:1 on white but only 4.46:1 on paper, and
 * #68768a is 4.62:1 / 4.27:1. Both now carry a value measured on the DARKER of
 * the two surfaces, so "passes on white" can no longer stand in for "passes".
 * ========================================================================== */
:root:root {
  --teal-ink: #2a7590;
  --ink-soft: #5c6878;   /* was #6b7a8d = 4.38:1 → 5.67:1 white, 5.23:1 paper */
  --ink-faint: #616e80;  /* was #9aa6b6 = 2.47:1 → 5.18:1 white, 4.79:1 paper */
}
html.theme-dark:root {
  --teal-ink: #7bd0ca;   /* 8.95:1 on the dark card */
  --ink-soft: #8597ad;   /* already 5.37:1 — pinned so templates cannot undo it */
  --ink-faint: #7d8fa5;  /* was #5f7183 = 3.19:1 → 4.85:1 */
}

/* =============================================================================
 * 1. --teal (#61afcc) used as TEXT — 2.47:1 on white, 2.28:1 on paper
 * -----------------------------------------------------------------------------
 * Small eyebrow / brand / category / label text across the blog index, shop
 * cards, PDP, contact, reviews, sonoff, build and site-visit templates.
 * These are the selectors the audit actually caught; the token above means any
 * template that switches to var(--teal-ink) is covered automatically.
 * ========================================================================== */
.bi-featured-cat, .bi-card-cat, .bi-mr-num, .bi-aside-title,
.card-brand, .bb-brand, .product-brand,
.sec-kicker, .sv-kicker, .rw-section-label, .tg-section-eyebrow,
.welcome-wa, .cf-req, .sv-req,
.text-teal, .text-xs.text-teal, .text-teal.font-semibold,
.card-cta.is-notify {
  color: var(--teal-ink, #2a7590) !important;
}

/* --teal used as a FILL under white text — 2.47:1 */
.story-quote, .rw-avatar-ph, .sv-avatar {
  background-color: var(--teal-ink, #2a7590) !important;
}

/* =============================================================================
 * 2. Muted body text that missed AA
 * -----------------------------------------------------------------------------
 * #6b7a8d was 4.38:1 and #a8b8cc was 2.02:1 on white. The token block above
 * fixes everything reading var(--ink-soft) / var(--ink-faint); these selectors
 * hard-coded the hex instead.
 * ========================================================================== */
.rw-fsub, .rw-prod-cat, .prod-old, .bb-kit-old,
.pp-emb-src, .gt-emb-src, .pp-disclaimer {
  color: #5f6b7d !important;   /* 5.40:1 on white */
}
/* …but #5f6b7d is only 2.97:1 on the dark card. Any light-mode value applied
   globally has to carry a dark counterpart — the same mistake --teal-ink was
   split to avoid. */
html.theme-dark .rw-fsub, html.theme-dark .rw-prod-cat,
html.theme-dark .prod-old, html.theme-dark .bb-kit-old,
html.theme-dark .pp-emb-src, html.theme-dark .gt-emb-src,
html.theme-dark .pp-disclaimer {
  color: #9fb3c8 !important;   /* 7.45:1 on card, 8.37:1 on page */
}

/* =============================================================================
 * 3. --navy (#0d4877) used as a FOREGROUND in dark mode
 * -----------------------------------------------------------------------------
 * 1.69:1 on the #18222f card, 1.90:1 on the #0f1722 page. Navy is a SURFACE
 * colour in this theme — as a foreground on dark it has to become teal.
 * ========================================================================== */
html.theme-dark .kb-cat-more,
html.theme-dark .bi-featured-read,
html.theme-dark .faq-btn,
html.theme-dark .kb-card a,
html.theme-dark .bi-card a,
html.theme-dark .smartio-qty-btn {
  color: #7bd0ca !important;   /* 8.95:1 on card, 10.05:1 on page */
}

/* page.php, single.php and template-content.php all declare
   `.smartio-page .sp-prose a { color: var(--primary,#0d4877) }` with no dark
   counterpart, so every in-article link — plus the Woo product-loop titles
   embedded in prose — renders navy-on-dark. Named classes could not catch these:
   the FAQ and content templates wrap prose in .sp-prose, which is outside the
   .sp-hero/.sp-breadcrumb-wrap/.sp-page scope single-post.php uses. */
html.theme-dark .smartio-page .sp-prose a,
html.theme-dark .reviews-cta a,
html.theme-dark .bs-viewall a {
  color: #7bd0ca !important;
}
/* The FAQ single (post type smartio_faq) is rendered outside the theme and uses
   .faq-wrap / .faq-article / .faq-answer, so none of the selectors above touch
   it — its answer links stayed navy at 1.69:1. Reaching it from here is the
   point of this sheet: it loads on that page even though the template does not
   live in this repo. */
html.theme-dark .faq-article a,
html.theme-dark .faq-answer a {
  color: #7bd0ca !important;
}

/* Muted body copy that hard-codes #6b7a8d / #64748b instead of reading
   var(--ink-soft), so the token block above cannot reach it. */
.smartio-empty-quiet-helper, .proof-by, .bb-sec-p, .bb-kit-tag,
.cf-note, .price-note, .bs-filter-count {
  color: #5f6b7d !important;   /* 5.40:1 on white, 5.03:1 on #f4f6f9 */
}
html.theme-dark .smartio-empty-quiet-helper, html.theme-dark .proof-by,
html.theme-dark .bb-sec-p, html.theme-dark .bb-kit-tag,
html.theme-dark .cf-note, html.theme-dark .price-note,
html.theme-dark .bs-filter-count {
  color: #9fb3c8 !important;
}

/* =============================================================================
 * 4. Amber star glyphs and the best-seller badge — 2.15:1 both ways
 * -----------------------------------------------------------------------------
 * #b45309 is 5.02:1 as text on white AND 5.02:1 as a fill under white text, so
 * one value covers the glyphs and the badge. Still reads as gold.
 * ========================================================================== */
.rw-stars, .cs-stars, .star, .star-mini, .spb-stars,
.proof-stars, .review-stars, .why-hero-stars {
  color: #b45309 !important;
}
.card-badge.bestseller {
  background-color: #b45309 !important;
  color: #ffffff !important;
}
/* A dark gold reads on white but sinks into the dark card — #b45309 there is
   only 3.20:1. Dark mode keeps the bright gold, which is 9.61:1 on #18222f. */
html.theme-dark .rw-stars, html.theme-dark .cs-stars, html.theme-dark .star,
html.theme-dark .star-mini, html.theme-dark .spb-stars,
html.theme-dark .proof-stars, html.theme-dark .review-stars,
html.theme-dark .why-hero-stars {
  color: #fbbf24 !important;
}
html.theme-dark .card-badge.bestseller {
  background-color: #b45309 !important;   /* fill stays dark; the label is white */
  color: #ffffff !important;
}

/* The mega-nav badges are the SAME white-label-on-a-light-fill bug the
 * bestseller badge had, and they were missed because the mega panel is
 * display:none until opened — a sweep only catches them on the rare render
 * where the panel is up (1 product page out of 158, 2026-07-28).
 * HOT/TOP sit on --warning #f59e0b = 2.15:1; NEW sits on --teal-3 #6bbac7
 * = 2.22:1. Both labels are 9px/700 uppercase, so they need the full 4.5:1.
 * Reusing values already in the system rather than inventing colours:
 * #b45309 (the bestseller fill, 5.02:1 under white) and #2a7590 (--teal-ink,
 * 5.19:1). Fills are solid, so one value serves both modes — same reasoning
 * as the bestseller badge directly above. */
.smartio-mega-badge,
.smartio-mega-badge-hot,
.smartio-mega-badge-top {
  background-color: #b45309 !important;
  color: #ffffff !important;
}
.smartio-mega-badge-new {
  background-color: #2a7590 !important;
  color: #ffffff !important;
}

/* =============================================================================
 * 4b. Green "in stock" / "free delivery" status text — #22c55e is 2.28:1 on white
 * ========================================================================== */
.stock-text.in-stock, .ship-progress-text, .seg-price.is-free, .is-free {
  color: #0f7a37 !important;   /* 5.44:1 on white */
}
html.theme-dark .stock-text.in-stock, html.theme-dark .ship-progress-text,
html.theme-dark .seg-price.is-free, html.theme-dark .is-free {
  color: #4ade80 !important;   /* 9.21:1 on the dark card */
}

/* =============================================================================
 * 5. WhatsApp CTAs that live OUTSIDE the theme
 * -----------------------------------------------------------------------------
 * White on WhatsApp brand green #25D366 is 1.98:1. The theme's own CTAs were
 * swept in 81d33ac, but these three are printed by mu-plugins / Fluent Snippets,
 * so the theme sweep could not reach them. Correcting from here avoids editing
 * server-side snippets. White on #0e7a66 is 5.26:1; hover #0a5f50 is 7.59:1.
 * ========================================================================== */
.wa-help-btn, .sv-wa-sticky, .smartio-bundles-wa,
a[href*="wa.me/"].btn-green, button.wa-cta {
  background-color: #0e7a66 !important;
  color: #ffffff !important;
}
/* The two bundles-page CTAs ("Custom bundle? WhatsApp us" / "Chat with us on
   WhatsApp") are a bare <button> inside a bare <a> — no class anywhere on the
   chain, which is why .smartio-bundles-wa above never matched them. Matching on
   the href is the only stable hook. */
a[href*="wa.me"] button,
a[href*="api.whatsapp.com"] button {
  background-color: #0e7a66 !important;
  color: #ffffff !important;
}
.wa-help-btn:hover, .sv-wa-sticky:hover, .smartio-bundles-wa:hover {
  background-color: #0a5f50 !important;
  color: #ffffff !important;
}

/* =============================================================================
 * 6. Breadcrumb separators
 * -----------------------------------------------------------------------------
 * Templates use several class names for the same "/" or "›". 1.09:1 in dark on
 * some, 1.43:1 in light on others. They must stay a step fainter than the links
 * they sit between, so the band is narrow — see the token block above.
 * ========================================================================== */
/* Literals, not var(--ink-faint), and this is the interesting part: the token
   block at the top of this file cannot fix checkout. Checkout declares its own
   --ink-faint (#9aa6b6 light, #4e6275 dark) on a container INSIDE :root, and
   custom properties inherit — a declaration on a descendant beats an ancestor's
   for that whole subtree no matter how specific the ancestor selector is.
   :root:root out-specifies :root; it does not out-inherit a child. So any rule
   reading var(--ink-faint) resolves to checkout's value while inside checkout.
   `html body` additionally breaks the source-order tie with checkout's own
   .breadcrumb-sep rule, since this sheet loads in <head>. */
html body .breadcrumb-sep,
html body .bi-breadcrumb-sep,
html body .sp-breadcrumb-sep {
  color: #616e80 !important;   /* 5.18:1 white, 4.79:1 paper */
}
html.theme-dark body .breadcrumb-sep,
html.theme-dark body .bi-breadcrumb-sep,
html.theme-dark body .sp-breadcrumb-sep {
  color: #7d8fa5 !important;   /* 4.85:1 card, 5.45:1 page */
}

/* =============================================================================
 * 7. Hardcoded-white controls whose TEXT got dark-moded
 * -----------------------------------------------------------------------------
 * A distinct failure from anything above, and the same shape three times: a
 * control paints `background:#fff` so it can sit on a dark hero. In dark mode a
 * global rule rewrites its FOREGROUND (navy → teal, ink → near-white) while the
 * hardcoded white fill stays put — leaving pale text on a white pill.
 *
 * The fix is the opposite of the usual one: pin the foreground DARK in dark
 * mode, because the surface under it never changed.
 * ========================================================================== */
html.theme-dark .tg-btn-primary,
html.theme-dark .smartio-cameras-page .sc-hero-cta {
  color: #0d4877 !important;   /* 9.50:1 on the white pill */
}
html.theme-dark .bb-step-val {
  color: #1c2733 !important;   /* 15.14:1 — the stepper's shell is #fff */
}

/* 7b. The site-visit / quotation block is deliberately a LIGHT island: .sv-wrap
 * paints #f4f6f9 and .sv-form-card #ffffff in both modes. site-visit-ajax.php
 * already claws its text back under html.theme-dark, but only inside
 * .sv-form-card — so everything outside that card kept dark-mode colours on a
 * light surface. The worst was the testimonials heading at #f3f6fb on #f4f6f9,
 * a ratio of 1.00:1: not "low contrast" but literally invisible.
 * ========================================================================== */
html.theme-dark .sv-wrap h2,
html.theme-dark .sv-wrap h3 {
  color: #0d4877 !important;   /* 9.50:1 on white, 8.79:1 on #f4f6f9 */
}
html.theme-dark .sv-wrap p,
html.theme-dark .sv-submit-note {
  color: #4a5868 !important;   /* --sv-ink-soft, 7.27:1 / 6.72:1 */
}
html.theme-dark .sv-kicker,
html.theme-dark .sv-req {
  color: #2a7590 !important;
}
/* .sv-qmark (#e0f4f7, 1.14:1) is left alone on purpose — it is the oversized
   decorative quote glyph on the testimonial cards, and WCAG 1.4.3 exempts pure
   decoration. Darkening it to AA would make an ornament read as content. */

/* =============================================================================
 * 8. The last of the light-mode stragglers
 * -----------------------------------------------------------------------------
 * Every rule below is scoped `html:not(.theme-dark)` because each one was
 * MEASURED passing in dark already — several have hand-written dark rules in
 * their own templates. Scoping to light is safer than adding a dark counterpart
 * I would then have to keep in sync: there is nothing to leak.
 *
 * The first two are the interesting ones. They looked like three separate page
 * bugs (home, contact, PDP all reported #64748b) but they are ONE surface: the
 * mega-nav, which renders on every page. Chasing them per-page would have been
 * three wrong fixes.
 * ========================================================================== */
html:not(.theme-dark) .smartio-mega-heading {
  color: #2a7590 !important;   /* was --teal #61afcc, 2.47:1 on the white panel */
}
html:not(.theme-dark) .smartio-mega-feat-price .smartio-price-from {
  color: #5c6878 !important;   /* was #64748b, 4.40:1 */
}

html:not(.theme-dark) .sc-tab-label .s {
  color: #5c6878 !important;   /* was #6b7a8d, 3.91:1 on #e8f4f8 */
}
html:not(.theme-dark) .tg-model-tagline {
  color: #2a7590 !important;   /* was --teal-4 #4a96b4, 3.33:1 */
}
html:not(.theme-dark) .si-secure {
  color: #5c6878 !important;   /* was --si-text-3 #93a3b3, 2.58:1 */
}
html:not(.theme-dark) .benefit-desc {
  color: #5c6878 !important;   /* was #64748b, 4.40:1 */
}
/* Tailwind utility from assets/css/smartio-tw.css (home, bundles, sonoff).
   #9ca3af is 2.31–2.54:1 on every surface it lands on. The .text-xs / .flex-1
   elements reported alongside it set no colour of their own — they inherit it,
   so correcting the one utility fixes all three. */
html:not(.theme-dark) .text-gray-400 {
  color: #5c6878 !important;
}

/* The contact page's WhatsApp links use the brand green #128C7E as TEXT, which
   is 4.14:1 on white and 3.82:1 on paper — the same accent-as-foreground shape
   as everything else here. .method-tag and .aside-wa a already have dark rules
   in template-contact.php; .cf-note a does not, and failed in dark too. */
html:not(.theme-dark) .cf-note a,
html:not(.theme-dark) .aside-wa a,
html:not(.theme-dark) .method-tag {
  color: #0e7a66 !important;   /* 5.26:1 white, 4.86:1 paper */
}
html.theme-dark .cf-note a {
  color: #4ade80 !important;   /* 10.34:1 on the dark page */
}

/* 8b. Inline children that carry the failing colour themselves.
 * These survived the pass above because fixing a parent does not help when the
 * child sets its own colour — the homepage category count is an INLINE style
 * (home-app.src.jsx), which only an !important stylesheet rule can outrank.
 * Targeted at :last-child rather than `.sm-cat-card a div`, because the icon
 * and the category name are sibling divs with their own inline colours that
 * must not be flattened to grey. */
html:not(.theme-dark) .sm-cat-card a > div:last-child,
html:not(.theme-dark) .hours-list li.closed .time,
html:not(.theme-dark) .cf-label span,
html:not(.theme-dark) .si-hint,
html:not(.theme-dark) .si-hint span,
html:not(.theme-dark) .si-divider span,
html:not(.theme-dark) .bbp-trust,
html:not(.theme-dark) .bbp-trust span {
  color: #5c6878 !important;
}
/* --teal2 #61afcc as text again: the build-page tier chips, and the big stat
   numbers on /why-smartio/ (48px, so the 3:1 large-text threshold applies —
   2.47:1 misses even that). */
html:not(.theme-dark) .num-stat-val .em,
html:not(.theme-dark) .bb-chip-tier i {
  color: #2a7590 !important;
}
