/* ============================================================================
   HVAC247PRO CONTRAST FIX — 2026-11-01   (hvac247pro-contrast-fix-20261101.css)
   Applies to: hvac247pro.com + all *.hvac247pro.com PBN hosts
   ----------------------------------------------------------------------------
   SYMPTOM (reported 2026-11-01): thousands of pages render "broken" — headings
   and body copy invisible because white / light-grey ink sits on white
   backgrounds, and dark ink sits on the navy sections.

   ROOT CAUSE: design-system.css (2026-10-16 dark theme) converted the ink tokens
   to white (--ds-ink:#fff, --ds-body:#cbd5e1) but painted the canvas dark only
   for `body.page-service`. The service-area (body.page-service-area), blog
   (body.page-blog) and legacy (body.rts-dark-light) templates kept a WHITE
   canvas while inheriting the white ink -> white-on-white.

   STRATEGY: one dark theme for the whole content area
     1. canvas navy on every template
     2. cards / forms / boxes get the dark surface colour
     3. ink: white headings, #cbd5e1 body, #ff6b70 accent (5.9:1 on navy)
     4. buttons keep white ink on solid #d41920 (5.3:1)
   ============================================================================ */

/* 1 — PAGE CANVAS: every template, not just body.page-service --------------- */
body,
body > main,
main,
body.page-service,
body.page-service-area,
body.page-blog,
body.rts-dark-light {
  background-color: #0a1628 !important;
  background-image: none !important;
  color: #cbd5e1;
}

/* 2 — CONTENT SURFACES: sections, cards, forms, boxes ----------------------- */
main section,
main .section,
main [class*="section"] {
  background-color: #0a1628 !important;
  background-image: none !important;
}
main section:nth-of-type(even) { background-color: #0c1d3a !important; }

main :is([class*="card"], form, .form-container,
         .contact-form-container, .contact-form, .map-section, [class*="form-"]) {
  background-color: #111827 !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
main :is(input, select, textarea, .form-input, .form-select, .form-textarea) {
  background-color: #0f172a !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
main :is(input, textarea)::placeholder { color: #94a3b8 !important; opacity: 1; }
main select option { background-color: #0f172a; color: #fff; }

/* 3 — INK: headings white, body #cbd5e1 ------------------------------------ */
main :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
main :is(p, li, td, dd, dt, label, small, figcaption, blockquote, em, address) {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
main :is(span, div, i) { color: inherit; }
main :is(p, li, small) span { color: inherit !important; }

/* 4 — LINKS + ACCENTS: #e92227 is 3.6:1 on navy, #ff6b70 is 5.9:1 ----------- */
main a:not([class*="btn"]):not(.cta):not([class*="button"]) {
  color: #ff6b70;
}
main :is([class*="sub-title"], [class*="subtitle"], .eyebrow, .eyebrow-dark, .red, .accent) {
  color: #ff6b70 !important;
  -webkit-text-fill-color: #ff6b70 !important;
}

/* 5 — BUTTONS: white ink on solid brand red --------------------------------- */
main :is(.btn, .button, [class*="btn-"], .cta, .cta-primary, [class*="cta-"]) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
main :is(.btn, .button, [class*="btn-"], .cta, .cta-primary, [class*="cta-"]) :is(span, strong, i, small, em) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
main :is([class*="btn-primary"], [class*="btn-red"], .cta, .cta-primary, .hdr-btn, .hvac-footer__cta-btn) {
  background-color: #d41920 !important;
}

/* 6 — HEADER + FOOTER ------------------------------------------------------- */
.hdr-btn { background-color: #d41920 !important; color: #fff !important; }
.header-v2-phone span, .header-v2-phone a { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hvac-footer__cta-actions small,
.hvac-footer__cta-actions p { color: #ff6b70 !important; -webkit-text-fill-color: #ff6b70 !important; opacity: 1 !important; }
.footer-ultimate,
.footer-ultimate p, .footer-ultimate li, .footer-ultimate span, .footer-ultimate a { color: #cbd5e1 !important; }
.footer-ultimate h4, .footer-ultimate h5 { color: #fff !important; }
.footer-ultimate a:hover { color: #ff6b70 !important; }
a.footer-cta-quote, .footer-cta-quote, .footer-newsletter-btn,
button.footer-newsletter-btn { color: #fff !important; background-color: #d41920 !important; }
a.btn-dark-navy, .btn-dark-navy { color: #fff !important; background-color: #d41920 !important; }
.mobile-nav-v2-license, .mobile-nav-v2-license span { color: #ff6b70 !important; }

/* 7 — inline legacy dark ink inside navy sections --------------------------- */
main :is(p, span, div, small, li, h2, h3)[style*="#1a2332"],
main :is(p, span, div, small, li, h2, h3)[style*="#234982"],
main :is(p, span, div, small, li, h2, h3)[style*="#0a1628"],
main :is(p, span, div, small, li, h2, h3)[style*="#64748b"],
main :is(p, span, div, small, li, h2, h3)[style*="color: #64748b"] {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

/* 8 — ROUND-2 REPAIRS (measured with axe on 2026-11-01) -------------------- */
/* 8a header phone chip: white on #e92227 (4.44:1) -> brand red #d41920 (5.3:1) */
.header-v2-phone,
.header-v2-phone span,
.header-v2-phone a,
.header-v2-phone i,
.topbar-phone {
  background-color: #d41920 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* 8b footer quote / emergency CTAs: dark ink sat on solid red */
.footer-cta-quote,
.footer-cta-actions a,
.emergency-cta a,
.emergency-cta span,
a.footer-cta-quote {
  background-color: #d41920 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* 8c pricing block kept legacy dark ink inside navy cards */
.hvac-rates-v1__price { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hvac-rates-v1__price-note { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; }
.hvac-rates-v1__eyebrow,
.hvac-rates-v1__eyebrow * { color: #ff6b70 !important; -webkit-text-fill-color: #ff6b70 !important; }
.hvac-rates-v1__card { background-color: #111827 !important; }
/* 8d star ratings #dc3545 (3.91:1) -> #ff6b70 (5.9:1) */
.hvac-social-v3__rating,
.hvac-social-v3__rating-count { color: #ff6b70 !important; -webkit-text-fill-color: #ff6b70 !important; }
/* 8f footer links / copyright on near-black */
footer a, footer p, footer li, footer span,
.footer-contact-list a,
.footer-copyright-text, .footer-copyright-text a { color: #cbd5e1 !important; }
footer a:hover { color: #ff6b70 !important; }
/* 8g <mark> highlight: light ink on yellow */
mark, .highlight { background-color: #ffd54f !important; color: #0a1628 !important; -webkit-text-fill-color: #0a1628 !important; }
/* 8h inline light-grey body copy anywhere (footer included) */
[style*="color: #64748b"], [style*="color:#64748b"],
[style*="color: #94a3b8"], [style*="color:#94a3b8"] {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
/* 8i brand-red links that must beat legacy `a` rules */
main a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]),
.emergency-cta a,
.footer-contact-list a { color: #ff6b70 !important; }

/* 9 — ROUND-3 REPAIRS ------------------------------------------------------ */
/* 9a social icon links sit on white circles: red on white was 2.76:1 */
footer [class*="social"] a,
[class*="social-links"] a,
[class*="social-icons"] a,
.social-links a,
.footer-social a {
  background-color: #d41920 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
footer [class*="social"] a i,
.social-links a i { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* 9b footer CTA phone text */
.footer-cta-phone-label,
.footer-cta-phone-number,
.footer-cta-actions span,
.footer-cta-actions strong { color: #fff !important; -webkit-text-fill-color: #fff !important; }
a.footer-cta-quote.footer-cta-quote,
.footer-cta-quote.footer-cta-quote {
  background-color: #d41920 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #d41920 !important;
}
/* 9d service link lists inside the blue (#234982) blocks */
.internal-links-section a,
[class*="internal-links"] a,
.services-overview a {
  background-color: #1e3a5f !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* 9e eyebrow on navy */
.sub-title, .subtitle, [class*="sub-title"] { color: #ff6b70 !important; -webkit-text-fill-color: #ff6b70 !important; }
/* 9f bootstrap btn-warning: white ink needed on the red face */
.btn-warning, .btn-warning:focus { background-color: #d41920 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: #d41920 !important; }

/* 10 — social icon circles have a WHITE background: keep the dark ink --------- */
.hvac-social-v3 a,
.hvac-testimonials a,
[class*="social"] a[style] { color: #0a1628 !important; -webkit-text-fill-color: #0a1628 !important; }
.hvac-social-v3 a:hover { color: #d41920 !important; -webkit-text-fill-color: #d41920 !important; }

/* 11 — ROUND-4: stubborn selectors that beat the earlier rules (double-class
        specificity so this wins without !important wars on element selectors) */
html body .hvac-rates-v1 .hvac-rates-v1__card-name,
html body .hvac-rates-v1 .hvac-rates-v1__card-desc,
html body .hvac-rates-v1 .hvac-rates-v1__price,
html body .hvac-rates-v1 .hvac-rates-v1__price-note,
html body .hvac-rates-v1 h1, html body .hvac-rates-v1 h2,
html body .hvac-rates-v1 h3, html body .hvac-rates-v1 h4,
html body .hvac-rates-v1 p, html body .hvac-rates-v1 li,
html body .hvac-rates-v1 span, html body .hvac-rates-v1 div {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
html body .hvac-rates-v1 h1, html body .hvac-rates-v1 h2,
html body .hvac-rates-v1 h3, html body .hvac-rates-v1 h4,
html body .hvac-rates-v1 .hvac-rates-v1__card-name,
html body .hvac-rates-v1 .hvac-rates-v1__price {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body .hvac-rates-v1 [class~="hvac-rates-v1__eyebrow"] {
  color: #ff6b70 !important;
  -webkit-text-fill-color: #ff6b70 !important;
}
html body .hvac-rates-v1 .hvac-rates-v1__card { background-color: #111827 !important; }

/* sub-title / eyebrow that still resolves to the old dark red */
html body [class~="sub-title"][class~="sub-title"],
html body [class~="subtitle"][class~="subtitle"],
html body .sub-title, html body .subtitle,
html body [class~="eyebrow"][class~="eyebrow"] {
  color: #ff6b70 !important;
  -webkit-text-fill-color: #ff6b70 !important;
}

/* 404 / error pages still print #444444 on the dark canvas */
html body [style*="#444444"], html body [style*="#444"],
html body .error-404, html body .error-page,
html body .error-404 h1, html body .error-page h1,
html body .error-404 h2, html body .error-page h2 {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

/* 12 — ROUND-5 ------------------------------------------------------------- */
/* the pricing block is a DIV on some pages, so `main section` never painted it */
html body .hvac-rates-v1 {
  background-color: #0a1628 !important;
  background-image: none !important;
}
/* 404 / error markup uses #444 / #444444 inline */
html body [style*="color:#444"], html body [style*="color: #444"],
html body h1[style*="#444"], html body h2[style*="#444"],
html body .error-404 h1, html body .error-404 h2,
html body .error-page h1, html body .error-page h2 {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

/* 13 — server 404/410 pages (Hostinger default markup) ---------------------- */
body > h1, body > h2, body > div > h1, body > div > h2,
h1[style*="150px"], h2[style*="margin-top:20px"] {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

/* 14 — server error copy (#444444) can be a <p>, not only h1/h2 ---------------- */
html body p[style*="#444"], html body p[style*="#444444"],
html body div[style*="#444444"], html body span[style*="#444444"] {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

/* 15 — tel/CTA links that paint their OWN light background keep dark brand ink
        (found live 2026-11-01: inline style="background:white;color:#e92227") */
html body a[href^="tel:"][style*="background"],
html body a[href^="tel:"][style*="background"] *,
html body a[href^="tel:"][style*="white"] {
  color: #d41920 !important;
  -webkit-text-fill-color: #d41920 !important;
}
/* 16 — same rule for any inline-styled link that carries a light background */
html body a[style*="background: white"], html body a[style*="background:white"],
html body a[style*="background: #fff"], html body a[style*="background:#fff"] {
  color: #d41920 !important;
  -webkit-text-fill-color: #d41920 !important;
}

/* 17 — legacy brand reds used as INK on the navy canvas
        #e92227 4.07:1 / #c5282e 3.2:1 / #a61e27 1.x / #e8434a 1.34 → #ff6b70 5.9:1 */
main [style*="#e92227"], main [style*="#E92227"],
main [style*="#e8434a"], main [style*="#c5282e"], main [style*="#a61e27"],
header [style*="#e92227"], header [style*="#e8434a"],
.footer-ultimate [style*="#e92227"],
.hdr-btn, .hdr-btn i, .hdr-btn span, .hdr-btn strong,
.hdr-nav-cta-call, .hdr-nav-cta-call * {
  color: #ff6b70 !important;
  -webkit-text-fill-color: #ff6b70 !important;
}
/* the red CTA chips keep white ink */
.hdr-btn, .hdr-nav-cta-quote, .hdr-nav-cta-quote *,
a.hdr-btn, a.hdr-btn * {
  background-color: #d41920 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* 18 — plain red text links on navy (not the .btn family) */
main a[style*="#e92227"], main a[style*="#c5282e"] {
  color: #ff6b70 !important;
  -webkit-text-fill-color: #ff6b70 !important;
}

/* 19 — light panels that sit inside the dark canvas (found 2026-11-01)
        .faq-item was #f4f5f1 with ink forced light → 1.09:1. Paint it dark. */
main .faq-item, main [class*="faq-item"] {
  background-color: #111827 !important;
  border-color: rgba(255,255,255,.12) !important;
}
main .faq-item :is(h1,h2,h3,h4,h5,h6,strong,b,summary) {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
main .faq-item :is(p,li,span,div,em,small) {
  color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important;
}
/* 20 — portfolio "Request Similar Project" sits on a white (85%) card */
.portfolio-btn, .portfolio-btn span, .portfolio-btn * ,
.portfolio-item .btn, .portfolio-item .btn * {
  color: #d41920 !important; -webkit-text-fill-color: #d41920 !important;
}
/* 21 — header wordmark: red on navy was 4.07:1 */
.hdr-logo-text strong, .hdr-logo-text { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hdr-logo-text small { color: #ff6b70 !important; -webkit-text-fill-color: #ff6b70 !important; }

/* 22 — portfolio cards: white(85%) caption over navy gave #d41920 only 3.41:1 */
.portfolio-content, .portfolio-item .portfolio-content {
  background-color: #111827 !important;
}
.portfolio-btn, .portfolio-btn span, .portfolio-btn *,
.portfolio-item .btn, .portfolio-item .btn * {
  color: #ff6b70 !important; -webkit-text-fill-color: #ff6b70 !important;
}
.portfolio-content h3, .portfolio-content h4, .portfolio-content strong { color: #fff !important; }
.portfolio-content p, .portfolio-content span:not(.portfolio-btn *) { color: #cbd5e1 !important; }

/* 23 — cookie/consent bar: dark surface, #1a2332 ink (1.08:1) → light ink */
#cookie-banner, #cookieBanner, .cookie-banner, .cookie-consent, .cookie-bar,
[id*="cookie"][id*="banner"], [class*="cookie-bar"], [class*="cookieBanner"] {
  background-color: #111827 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
#cookie-banner *, .cookie-banner *, .cookie-consent *, .cookie-bar *,
[id*="cookie"][id*="banner"] *, [class*="cookie-bar"] *, [class*="cookieBanner"] * {
  color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important;
}
#cookie-banner h3, #cookie-banner strong, .cookie-banner h3, .cookie-banner strong { color: #fff !important; }
#cookie-banner a, .cookie-banner a, .cookie-consent a { color: #ff6b70 !important; }

/* 24 — the cookie bar is injected with inline styles and id="cookieConsent";
        page-level ".page-blog p{color:#1a2332}" then paints its copy on the
        #1a1a2e surface (1.08:1). Pin the real selectors. */
#cookieConsent, #cookieConsent > div { background-color:#1a1a2e !important; }
#cookieConsent p, #cookieConsent span, #cookieConsent small,
#cookieConsent * { color:#e5e7eb !important; -webkit-text-fill-color:#e5e7eb !important; }
#cookieConsent a { color:#ff8a8f !important; -webkit-text-fill-color:#ff8a8f !important; }
#cookieConsent button { background-color:#0a1628 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* 25 — header chrome wins the specificity war with page-level .hvac-header rules.
        #e92227 surfaces gave white ink 4.45:1 and red-on-red 1.35:1. */
html body .hvac-header .hdr-btn, html body .hvac-header .hdr-btn *,
html body header .hdr-btn, html body header .hdr-btn *,
html body a.hdr-btn, html body a.hdr-btn *,
html body .hdr-nav-cta-quote, html body .hdr-nav-cta-quote * {
  background-color: #d41920 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .hdr-logo-text strong, html body .hvac-header .hdr-logo-text strong,
html body .hdr-nav-logo-text strong, html body header .hdr-logo strong {
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
html body .hdr-logo-text small, html body .hdr-nav-logo-text small,
html body header .hdr-logo small {
  color: #ff8a8f !important; -webkit-text-fill-color: #ff8a8f !important;
}
html body .hvac-header nav a, html body .hdr-nav a, html body .hdr-nav a:visited,
html body header nav a:not(.hdr-btn) {
  color: #e5e7eb !important; -webkit-text-fill-color: #e5e7eb !important;
}
html body .hvac-header nav a:hover, html body .hdr-nav a:hover { color: #ff8a8f !important; }