/* ==========================================================================
   contrast-aa.css - Empire Garage Door & Repair LLC
   AppWT Web & AI Solutions, 2026-09-02.

   WCAG 2.1 AA contrast corrections, measured on the RENDERED page with
   appwt-contrast-audit.sh, never read from the stylesheet
   (optimization module PART 107). Loaded LAST so it wins on cascade order
   without needing !important.

   Every value below was computed against the WCAG relative-luminance formula
   on the background the auditor actually measured. The worst finding was a
   1:1 ratio: the contact block's headings were WHITE on a WHITE page, so on
   every city page three headings were completely invisible, and the paragraph
   beside them sat at 1.47:1.

   New tokens are added rather than repurposing a palette token that has
   other jobs (PART 107.4).
   ========================================================================== */

:root {
    --aa-ink-strong:   #111827;  /* 17.74:1 on white  */
    --aa-ink-body:     #374151;  /* 10.31:1 on white  */
    --aa-green-deep:   #166534;  /*  6.17:1 on #e4f2e9 */
    --aa-green-mid:    #15803d;  /*  4.82:1 on #f7fbff */
    --aa-amber-deep:   #b45309;  /*  4.80:1 on #f8fafc */
    --aa-link-onlight: #0b5ed7;  /*  5.84:1 on white   */
    --aa-onfooter:     #fdba74;  /*  8.70:1 on #1f2937 */
    --aa-onfooter-mut: #d1d5db;  /*  9.96:1 on #1f2937 */
    --aa-onfooter-sep: #9ca3af;  /*  5.78:1 on #1f2937 */
    --aa-onfooter-lnk: #93c5fd;  /*  8.14:1 on #1f2937 */
    --aa-orange-deep:  #c2410c;  /* white on it = 5.18:1 */
    --aa-gold-deep:    #8a6d1f;  /*  4.90:1 on white   */
    --aa-muted-onlight:#4b5563;  /*  7.07:1 on #f2f8ff */
    --aa-sep-onlight:  #6b7280;  /*  4.52:1 on #f2f8ff */
}

/* 1. THE INVISIBLE BLOCK. Two different contact layouts share the class
      .contact-details. Inside section.contact the card background really is
      #111827, so white text is correct there and is left alone. Inside
      .contact-section (every city page) the block sits straight on the white
      body, so the same white heading measured 1:1 and the paragraph 1.47:1.
      Scoped to .contact-section only - a blanket override broke the dark one. */
.contact-section .contact-details h3,
.contact-section .contact-details h4,
.contact-section .contact-details h3.egd-h3 { color: var(--aa-ink-strong); }
.contact-section .contact-details p         { color: var(--aa-ink-body); }
.contact-section .contact-details li        { color: var(--aa-ink-body); }
.contact-section .contact-details a.contact-link { color: var(--aa-orange-deep); }

/* 2. Breadcrumb trail on the pale blue bar. 4.39:1 and 1.94:1. */
.breadcrumb-nav .breadcrumb a          { color: var(--aa-muted-onlight); }
.breadcrumb-nav .breadcrumb .breadcrumb-separator,
.breadcrumb-nav .breadcrumb span       { color: var(--aa-sep-onlight); }

/* 3. Green status text on its own pale card. 2.71:1, 3.01:1, 3.15:1. */
.area-card p.response-time,
.area-column p.response-time,
.area-column p.coverage-note   { color: var(--aa-green-deep); }
.benefit-item .benefit-icon,
.opener-type span.opener-price,
.door-type span.price          { color: var(--aa-green-mid); }
.service-text .service-badge.popular { background-color: var(--aa-green-mid); }

/* 4. Star glyphs used as a rating graphic, 24px at 1.6:1 against a 3:1 need. */
.testimonials-section .container div div div { color: var(--aa-amber-deep); }

/* 5. Links on white that used the Bootstrap default blue. 3.98:1. */
.contact-card-details a,
.contact-card-details p a,
.contact-methods-grid .contact-card a { color: var(--aa-link-onlight); }

/* 6. Everything sitting on the dark #1f2937 footer.
      4.12:1, 3.13:1, 3.69:1, 1.69:1, 1.56:1. */
.footer .footer-contact .contact-item a,
.footer .footer-contact .contact-item div a,
.footer .footer-contact p a                  { color: var(--aa-onfooter); }
.footer .footer-bottom .footer-text p,
.footer .footer-bottom-content .footer-text p { color: var(--aa-onfooter-mut); }
.footer .footer-bottom .footer-text p a,
.footer .footer-bottom-content .footer-text p a,
.footer .footer-bottom p a                   { color: var(--aa-onfooter-lnk); }
.footer .footer-bottom div > span,
.footer .footer-bottom span                  { color: var(--aa-onfooter-sep); }
.footer p.bf-facts-link a                    { color: var(--aa-onfooter-lnk); }

/* 7. White label on the orange call-to-action. 3.56:1 at 18px. */
.areas-cta a.cta-primary,
a.cta-primary { background-color: var(--aa-orange-deep); }

/* 8. The A+ grade inside the BBB badge, 24px gold on white at 2.10:1
      against a 3:1 requirement for large text. Hue kept, value deepened. */
.bbb-center-rating-grade { color: var(--aa-gold-deep); }

/* 10. .btn-primary paints white on the brand gold #F4A261 at 2.06:1. The gold is the
       client's own brand colour and has other jobs, so the TEXT changes, not the token
       (PART 107.4). Forest ink on the gold measures 7.92:1. */
.btn.btn-primary,
.btn-primary { color: var(--color-forest-dark, #0f2419); }

/* 11. .section-subtitle inside the dark #contact band: gray-600 on #111827 = 2.35:1. */
#contact .section-header p.section-subtitle,
section.contact .section-header p.section-subtitle { color: #d1d5db; }