/**
 * AB Spectrum sitewide heading scale + readability (2026-11-15).
 *
 * Layout audit of 82 sitemap URLs at 1280x800 and 390x844 found page H1s at 64-70px on
 * desktop (blog posts 64, service/career/job pages 66-67, About 70, /care/ 56) wrapping to 3-5
 * lines and pushing intro copy and CTAs below the fold, and section H2s at 48-64px.
 * Reference: the clinic pages (abs-clinic-hero-fix.css) use H1 clamp(30px,4vw,42px).
 *
 * CSS only: no heading wording, copy, links, forms or tracking changed.
 * :not(#abs-x):not(#abs-y) only raises specificity so these caps beat the per-page
 * HTML-widget and Elementor rules (some of which use !important). Revert: delete this file
 * and its abs_print_css() line in inc/abs-assets.php.
 */

/* ---------- H1: max ~44px desktop, ~31px phone ---------- */
html body h1:not(#abs-x):not(#abs-y) {
  font-size: clamp(32px, 3.4vw, 44px) !important;
  line-height: 1.12 !important;
}
/* Homepage tagline keeps a little more presence */
html body.home h1.reggio-steps-heading:not(#abs-x):not(#abs-y) {
  font-size: clamp(36px, 3.8vw, 48px) !important;
}
@media (max-width: 767px) {
  html body:not(.page-id-1003):not(.page-id-4036) h1:not(#abs-x):not(#abs-y),
  html body.home h1.reggio-steps-heading:not(#abs-x):not(#abs-y) {
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.15 !important;
  }
}
/* Long blog-post titles (up to ~95 characters) wrapped to 5 lines at 31px on phones */
@media (max-width: 767px) {
  html body.single-post:not(.page-id-1003):not(.page-id-4036) h1:not(#abs-x):not(#abs-y) {
    font-size: clamp(26px, 7.2vw, 28px) !important;
  }
}
/* Contact Us (1003) and Schedule Now (4036) already use small form-page H1s on desktop/phone */
html body.page-id-1003 h1:not(#abs-x):not(#abs-y) { font-size: clamp(26px, 2.4vw, 30px) !important; }
@media (max-width: 767px) {
  html body.page-id-1003 h1:not(#abs-x):not(#abs-y) { font-size: 22px !important; }
  html body.page-id-4036 h1:not(#abs-x):not(#abs-y) { font-size: 26px !important; }
}

/* ---------- Section H2s that ran 48-64px on desktop: cap at ~40px ---------- */
@media (min-width: 768px) {
  html body :is(.absx-loc, .absx-res, .absx-gs, .absx-aba, .absx-dx, .absx-rg, .absx-sp, .absr, .absa,
    .abs-home-review-band, .insurance-clean, .abs-intro) h2:not([style*="font-size"]):not(#abs-x):not(#abs-y),
  html body .elementor-slides .elementor-slide-heading:not(#abs-x):not(#abs-y),
  html body h2.abs-intro__headline:not(#abs-x):not(#abs-y) {
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.15 !important;
  }
}

/* ---------- Readability: light eyebrow text on white/mint ---------- */
/* Homepage "ABA clinic in St. Louis" tag: #71cfe1 on white was 1.8:1 -> teal 6.0:1 */
html body a.reggio-section-tag:not(#abs-x) {
  color: #0f6d7c !important;
  -webkit-text-fill-color: #0f6d7c !important;
}
/* Blog-post hero eyebrow: #6abf44 on white was 2.3:1 -> deeper brand green 5.1:1 */
html body .abs-blog .abs-hero .abs-kicker:not(#abs-x),
html body .abs-hero > .abs-kicker:not(#abs-x) {
  color: #3a7d1f !important;
  -webkit-text-fill-color: #3a7d1f !important;
}
/* Careers / job hero eyebrows: #14a69e on white was 3.0:1 -> 5.0:1 */
html body .abs-hero-copy .abs-kicker:not(#abs-x),
html body #abs-careers-page .abs-kicker:not(#abs-x),
html body #abs-bcba-page .abs-kicker:not(#abs-x),
html body .abs-lite-yt .abs-lite-yt__eyebrow:not(#abs-x) {
  color: #0b7d77 !important;
  -webkit-text-fill-color: #0b7d77 !important;
}
/* Careers coral button: white on #f26d61 was 2.9:1 -> #cc4436 4.7:1 */
html body .abs-hero-actions a.abs-btn:not([class*="abs-btn--"]):not(#abs-x),
html body #abs-careers-page a.abs-btn:not([class*="abs-btn--"]):not(#abs-x),
html body #abs-bcba-page a.abs-btn:not([class*="abs-btn--"]):not(#abs-x) {
  background-color: #cc4436 !important;
  border-color: #cc4436 !important;
}


/* 2026-11-15 (b): WCAG AA contrast for pink CTAs and light-green post headings.
 * White on #e8457c = 3.77:1. #d4386c (about the requested #d63a6e, which is 4.48:1)
 * = 4.58:1; hover #b92a5a = 5.93:1. Only colours change: no wording, links,
 * forms or tracking. Ghost/outline buttons keep their own colours. */
body.elementor-kit-984{--e-global-color-0c60f37:#d4386c}
html body :is(.absx-aba,.absx-res,.absx-loc,.absx-dx,.absx-rg,.absx-sp,.abs-lp){--coral:#d4386c!important}
html body:not(#abs-x) :is(.reggio-steps-btn,.insurance-btn,.abs-lp-btn,.absr-pcf-actions button):not([class*="ghost"]):not([class*="outline"]),
html body:not(#abs-x) .elementor-nav-menu--main li.contact-nav-btn > a,
html body:not(#abs-x) [class*="leadbar"] :is(a,button)[class*="-btn"]:not([class*="ghost"]):not([class*="outline"]):not([class*="__"]){background-color:#d4386c!important;border-color:#d4386c!important}
html body:not(#abs-x) :is(.reggio-steps-btn,.insurance-btn,.abs-lp-btn,.absr-pcf-actions button,.absx-loc-btn,.absx-res-btn,.absx-aba-btn,.absx-rg-btn,.absx-sp-btn,.absx-dx-btn,.elementor-slide-button):not([class*="ghost"]):not([class*="outline"]):is(:hover,:focus-visible),
html body:not(#abs-x) .elementor-nav-menu--main li.contact-nav-btn > a:is(:hover,:focus-visible),
html body:not(#abs-x) [class*="leadbar"] :is(a,button)[class*="-btn"]:not([class*="ghost"]):not([class*="outline"]):not([class*="__"]):is(:hover,:focus-visible){background-color:#b92a5a!important;border-color:#b92a5a!important}
/* Blog posts: green #6abf44 headings were 2.30:1 on white; #2f7a1f = 5.35:1
 * (5.03:1 on the pale green post background). White CTA-band headings untouched. */
body.single-post .elementor-widget-theme-post-content{--e-global-color-accent:#2f7a1f}
html body.single-post .abs-blog > h2{color:#2f7a1f!important}
html body.single-post .elementor-widget-theme-post-title .elementor-heading-title{color:#2f7a1f!important}
/* 2026-11-15: in-post CTA gradient darkened for white-text contrast */
html body.single-post .abs-blog .abs-cta{background:linear-gradient(135deg,#2f7a1f 0%,#0f6d7c 100%)!important}

/* 2026-11-15 (c): Also Read headings. Explicit/theme #7a7a7a on white is 4.29:1;
 * #000000 matches the other in-post Also Read headings (21:1). */
html body.single-post :is(h4,h5,h6)[style*="7a7a7a"],
html body.single-post :is(h4,h5,h6)[style*="7A7A7A"]{
  color:#000000!important;
}

/* 2026-11-15 (c): equal-height desktop Requirements/Benefits (and other 2-col) job cards */
@media (min-width:768px){
  html body .absx-res .absx-res-grid{align-items:stretch}
  html body .absx-res .absx-res-grid>.absx-res-card{height:100%;box-sizing:border-box}
}