/* ============================================================
   CONTRAST & READABILITY FIXES  —  load LAST
   Every value below was computed to meet WCAG AA
   (4.5:1 normal text, 3:1 large/bold text) in BOTH light and dark mode.
   Audited with a rendered-DOM contrast probe, not by eye.
   ============================================================ */

:root{
  /* accessible variants of the brand palette */
  --cf-cyan-btn:      #127aa8;  /* was #29afe3 (2.52:1 w/ white) -> 4.80:1 */
  --cf-cyan-btn-hover:#0e6389;
  --cf-navy:          #004685;  /* 9.48:1 with white */
  --cf-navy-deep:     #0a2036;
  --cf-teal-text:     #00838a;  /* was #00adb5 (2.75:1 on white) -> 4.55:1 */
  --cf-muted-on-white:#5a6b7a;  /* >=4.5:1 on #fff */
  --cf-on-dark:       #eaf2f9;  /* body text on navy surfaces */
  --cf-on-dark-soft:  #b9cde0;  /* secondary text on navy surfaces */
}

/* ---------- 1. ACCENT BUTTONS: cyan bg + white text failed 2.52:1 ---------- */
.site-button,
a.site-button,
.new-form-btn,
button.new-form-btn,
.new-cta-btn-primary,
button.new-cta-btn-primary,
.qc-tab.active,
button.qc-tab.active,
.filter-btn.active,
button.filter-btn.active{
  background-color: var(--cf-cyan-btn) !important;
  color:#ffffff !important;
  border-color: var(--cf-cyan-btn) !important;
}
.site-button:hover, a.site-button:hover,
.new-form-btn:hover, .new-cta-btn-primary:hover,
.qc-tab.active:hover, .filter-btn.active:hover{
  background-color: var(--cf-cyan-btn-hover) !important;
  color:#ffffff !important;
}

/* ---------- 2. Buttons that used navy text on cyan (3.76:1) ---------- */
.solution-btn, a.solution-btn,
.btn-components, a.btn-components,
.cta-btn.btn-primary, a.cta-btn.btn-primary,
.cta-btn.cta-btn-primary, a.cta-btn.cta-btn-primary{
  background-color: var(--cf-navy) !important;
  color:#ffffff !important;
  border-color: var(--cf-navy) !important;
}
.solution-btn:hover, .btn-components:hover,
.cta-btn.btn-primary:hover, .cta-btn.cta-btn-primary:hover{
  background-color:#003568 !important; color:#ffffff !important;
}

/* ---------- 3. INVISIBLE BUTTON: navy text on navy background (1:1) ---------- */
.partner-btn, a.partner-btn,
.partner-btn:link, .partner-btn:visited,
.partner-btn:hover, .partner-btn:focus{
  color:#ffffff !important;
}

/* ---------- 4. Dark navy strips: text was #333 / navy on navy ---------- */
.pg-gcc-strip, .pg-gcc-strip *{ }
.pg-gcc-strip .pg-gcc-title{ color:#ffffff !important; }
.pg-gcc-strip .pg-gcc-sub,
.pg-gcc-strip .pg-gcc-tools,
.pg-gcc-strip .pg-gcc-tools *{ color: var(--cf-on-dark-soft) !important; }
.pg-gcc-strip a:not(.pg-gcc-cta){ color:#8fd3ec !important; text-decoration:underline; }
.pg-gcc-cta, a.pg-gcc-cta{
  background: var(--cf-cyan-btn) !important;
  color:#ffffff !important;
  border-color: var(--cf-cyan-btn) !important;
}
.pg-gcc-cta:hover{ background: var(--cf-cyan-btn-hover) !important; color:#fff !important; }

/* ---------- 5. Footer bottom: #333 on navy (1.03:1) ---------- */
#footer-bottom-section .copyrights-text,
.footer-bottom .copyrights-text,
.copyrights-text,
.copyrights-text a{
  color: var(--cf-on-dark-soft) !important;
}
.copyrights-text a:hover{ color:#ffffff !important; }

/* ---------- 6. Badges on navy: #333 -> white ---------- */
.card-badge, span.card-badge{ color:#ffffff !important; }

/* ---------- 7. Low-contrast accent/eyebrow + muted text on white ---------- */
.ey, span.ey{ color: var(--cf-teal-text) !important; }
.cc-note, p.cc-note{ color: var(--cf-muted-on-white) !important; }

/* ============================================================
   DARK MODE — cards kept light backgrounds while text turned white,
   producing white-on-white headings. Force real dark surfaces.
   ============================================================ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .wt-box,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .industry-card,
html[data-theme="dark"] .new-contact-card,
html[data-theme="dark"] .cs-card,
html[data-theme="dark"] .pg-blog-card,
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .cta-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .qc-panel,
html[data-theme="dark"] .clients-frame{
  background-color: var(--dm-bg-surface, #0f2240) !important;
  border-color: var(--dm-border, #1e3a5f) !important;
}
/* headings + body text inside those dark surfaces */
html[data-theme="dark"] .card h1, html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3, html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5, html[data-theme="dark"] .card p,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] h3.card-title, html[data-theme="dark"] h4.card-title,
html[data-theme="dark"] .new-contact-title,
html[data-theme="dark"] h3.new-contact-title,
html[data-theme="dark"] .product-card h4, html[data-theme="dark"] .product-card p,
html[data-theme="dark"] .industry-card h4, html[data-theme="dark"] .industry-card p,
html[data-theme="dark"] .stat-item .stat-value{
  color: var(--dm-text-primary, #f0f4f8) !important;
}
html[data-theme="dark"] .stat-item .stat-label,
html[data-theme="dark"] .card p.text-muted{
  color: var(--dm-text-secondary, #a0b3c6) !important;
}
/* dark-mode tabs/filters that stayed near-black on navy (1.06:1) */
html[data-theme="dark"] .product-filter__tab,
html[data-theme="dark"] button.product-filter__tab,
html[data-theme="dark"] .gp-tab,
html[data-theme="dark"] button.gp-tab{
  color: var(--dm-text-primary, #f0f4f8) !important;
  border-color: var(--dm-border, #1e3a5f) !important;
}
html[data-theme="dark"] .product-filter__tab.is-active,
html[data-theme="dark"] .gp-tab.active{
  background-color: var(--cf-cyan-btn) !important;
  color:#ffffff !important;
}
/* sections that keep a white background in dark mode -> keep their text dark */
html[data-theme="dark"] .clients-frame h2,
html[data-theme="dark"] .clients-frame p{ color: var(--dm-text-primary,#f0f4f8) !important; }

/* eyebrow/teal accents need more lift on dark surfaces */
html[data-theme="dark"] .ey,
html[data-theme="dark"] span.ey{ color:#4fd8e0 !important; }
html[data-theme="dark"] .cc-note{ color: var(--dm-text-secondary,#a0b3c6) !important; }

/* required-field asterisk */
.req, span.req{ color:#c62828 !important; }
html[data-theme="dark"] .req{ color:#ff8a80 !important; }

/* never let a link inherit a colour identical to its own background */
a[class*="btn"]:not([class*="outline"]){ text-shadow:none; }

/* ---------- 8. Bare <span>/<i> inside buttons inherited the global #333 ---------- */
button span, button i,
a[class*="btn"] span, a[class*="btn"] i,
.site-button span, .site-button i,
[class*="btn"] span, [class*="cta"] span,
.pg-gcc-cta span, .partner-btn span,
input[type=submit] span{
  color: inherit !important;
}

/* ---------- 9. Cyan text on white (2.52:1) — tags/labels/eyebrows ---------- */
.product-card__tag, span.product-card__tag,
.card-tag, .tag-cyan, .accent-text{
  color: var(--cf-cyan-btn) !important;   /* 4.80:1 on white */
}

/* ---------- 10. DARK MODE: header nav links were navy on near-black ---------- */
html[data-theme="dark"] .gh-nav-link,
html[data-theme="dark"] a.gh-nav-link,
html[data-theme="dark"] .gh-dropdown-link,
html[data-theme="dark"] .gh-mobile-menu a,
html[data-theme="dark"] .gh-mobile-submenu-link{
  color:#eaf2f9 !important;
}
html[data-theme="dark"] .gh-nav-link:hover,
html[data-theme="dark"] .gh-dropdown-link:hover{ color:#7fd3ec !important; }

/* ---------- 11. DARK MODE: form labels/paragraphs that stayed #333 ---------- */
html[data-theme="dark"] label,
html[data-theme="dark"] .input-animate label,
html[data-theme="dark"] .contact-nav label,
html[data-theme="dark"] .contact-nav p,
html[data-theme="dark"] .wt-form-group label,
html[data-theme="dark"] .contact-form label{
  color: var(--dm-text-primary,#f0f4f8) !important;
}
html[data-theme="dark"] .contact_close,
html[data-theme="dark"] a.contact_close{ color:#eaf2f9 !important; }

/* ---------- 12. Safety net: never render text the same colour as its own bg ---------- */
html[data-theme="dark"] .pg-gcc-strip .pg-gcc-title{ color:#ffffff !important; }

/* ---------- 13. Pages with intentionally light cards keep dark labels in dark mode ---------- */
html[data-theme="dark"] .cc-form label,
html[data-theme="dark"] .cc-field label,
html[data-theme="dark"] .cc-card label{ color:#2c4356 !important; }
html[data-theme="dark"] .cc-form .req{ color:#c62828 !important; }

/* ---------- 14. Teal accents just under AA on near-white ---------- */
.ey, span.ey, .cc-eyebrow, .lp-eyebrow{ color:#00767c !important; }   /* 5.4:1 on white */
html[data-theme="dark"] .ey, html[data-theme="dark"] .cc-eyebrow{ color:#4fd8e0 !important; }
.cc-lead li::before, .dot-teal{ color:#00767c !important; }

/* ---------- 15. Arabic language chip (inline-styled, was navy-on-navy) ---------- */
a[lang="ar"], a[hreflang="ar"]{ color:#ffffff !important; }

/* ---------- 16. Close buttons on dark overlays ---------- */
html[data-theme="dark"] .contact_close,
html[data-theme="dark"] a.contact_close,
html[data-theme="dark"] .close,
html[data-theme="dark"] button.close{ color:#eaf2f9 !important; opacity:1 !important; }

/* ---------- 17. Contact popup in DARK mode (container colour was inherited) ---------- */
html[data-theme="dark"] .contact-nav,
html[data-theme="dark"] .contact-nav-form,
html[data-theme="dark"] .cons-contact-form,
html[data-theme="dark"] .contact-nav .input-animate label,
html[data-theme="dark"] .contact-nav-form label,
html[data-theme="dark"] .cons-contact-form label,
html[data-theme="dark"] .contact-nav p,
html[data-theme="dark"] .contact-nav h4,
html[data-theme="dark"] .contact-nav .icon-content p,
html[data-theme="dark"] .contact-nav .icon-content h4{
  color:#eaf2f9 !important;
}
html[data-theme="dark"] .contact-nav a.contact_close,
html[data-theme="dark"] .contact-nav .contact_close{ color:#eaf2f9 !important; }

/* ---------- 18. /get-quote/ keeps its light form card in dark mode ---------- */
html[data-theme="dark"] .lp-form-card label,
html[data-theme="dark"] .lp-form-row label,
html[data-theme="dark"] .lp-formcol label,
html[data-theme="dark"] .lp-form-card .req{ color:#2c4356 !important; }
html[data-theme="dark"] .lp-form-card .req{ color:#c62828 !important; }

/* ---------- 19. decorative teal bullets ---------- */
.lp-form-card span[style*="00adb5"], .cc-lead span{ color:#00767c !important; }

/* ---------- 20. Specificity boost: popup form in dark mode (beats late inline blocks) ---------- */
html[data-theme="dark"][data-theme="dark"] .contact-nav label,
html[data-theme="dark"][data-theme="dark"] .contact-nav-form label,
html[data-theme="dark"][data-theme="dark"] .cons-contact-form label,
html[data-theme="dark"][data-theme="dark"] .input-animate label,
html[data-theme="dark"][data-theme="dark"] .contact-nav .contact_close,
html[data-theme="dark"][data-theme="dark"] .contact-nav a{
  color:#eaf2f9 !important;
}
/* standalone light-design pages must ignore dark overrides */
html[data-theme="dark"] body:has(.lp-form-card) .ey,
html[data-theme="dark"] body:has(.cc-card) .ey,
html[data-theme="dark"] body:has(.lp-form-card) .cc-eyebrow{ color:#00767c !important; }
html[data-theme="dark"] body:has(.lp-form-card) p,
html[data-theme="dark"] body:has(.cc-card) .cc-content p{ color:#55636f !important; }

/* ---------- 21. Final pass: remaining sub-AA items ---------- */
/* spans inside buttons must follow their button's colour, never a global default */
button span, .site-button span, [class*="btn"] span, [class*="cta"] span,
html[data-theme="dark"] button span,
html[data-theme="dark"] [class*="btn"] span{ color: inherit !important; }

/* vertical spine label sat on bright cyan */
.qc-spine-label, html[data-theme="dark"] .qc-spine-label{
  background:#0a2036 !important; color:#eaf2f9 !important;
}
/* inactive tabs in dark mode were navy on near-black */
html[data-theme="dark"] .qc-tab,
html[data-theme="dark"] button.qc-tab{ color:#cfe0f0 !important; border-color:#1e3a5f !important; }

/* decorative teal bullets/dots on white */
.lp-form-card span[style*="color"], .lp-steps span, .lp-dot,
.cc-lead li::before{ color:#00767c !important; }
span[style*="rgb(0, 173, 181)"], span[style*="#00adb5"]{ color:#00767c !important; }

/* ---------- 22. DARK MODE: custom tiles/chips that kept white backgrounds ---------- */
html[data-theme="dark"] .f-tile,
html[data-theme="dark"] .f-stat,
html[data-theme="dark"] .qc-chip,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .wt-box,
html[data-theme="dark"] .facility-stats,
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] [class*="-tile"],
html[data-theme="dark"] [class*="-chip"]{
  background-color: var(--dm-bg-surface,#0f2240) !important;
  border-color: var(--dm-border,#1e3a5f) !important;
}
html[data-theme="dark"] .f-tile-title,
html[data-theme="dark"] .f-tile-text,
html[data-theme="dark"] .f-stat-val,
html[data-theme="dark"] .f-stat-label,
html[data-theme="dark"] .qc-chip-code,
html[data-theme="dark"] .qc-chip-desc,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] .wt-tilte,
html[data-theme="dark"] h4.wt-tilte{
  color: var(--dm-text-primary,#f0f4f8) !important;
}
html[data-theme="dark"] .f-tile-text,
html[data-theme="dark"] .f-stat-label,
html[data-theme="dark"] .qc-chip-desc{ color: var(--dm-text-secondary,#a0b3c6) !important; }

/* any form label on a dark surface (popup / sidebar), except the light-design pages */
html[data-theme="dark"] body:not(:has(.lp-form-card)):not(:has(.cc-card)) label{
  color:#eaf2f9 !important;
}

/* ---------- 23. DARK MODE: final sweep of remaining components ---------- */
/* white-background sections that survived dark mode */
html[data-theme="dark"] .facility-section,
html[data-theme="dark"] .f-tile-wrap,
html[data-theme="dark"] .wt-icon-box-wraper,
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background: #fff"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"]{
  background-color: var(--dm-bg-secondary,#0d1d33) !important;
}
/* text that sits on those */
html[data-theme="dark"] .wt-tilte,
html[data-theme="dark"] h4.wt-tilte,
html[data-theme="dark"] .f-stat-val,
html[data-theme="dark"] .f-stat-label,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] span.step-title{ color: var(--dm-text-primary,#f0f4f8) !important; }

/* links & tabs on dark cards */
html[data-theme="dark"] .card-link,
html[data-theme="dark"] a.card-link{ color:#7fd3ec !important; }
html[data-theme="dark"] .product-filter__tab,
html[data-theme="dark"] button.product-filter__tab{ color:#dbe7f2 !important; }
html[data-theme="dark"] .cta-btn.btn-secondary,
html[data-theme="dark"] a.cta-btn.btn-secondary{ color:#eaf2f9 !important; border-color:#3b5a7d !important; }