/* Marketing-page WCAG 2.2 AA color-contrast overrides — 2026-05-08.
 *
 * Closes the 8-16-violations-per-page color-contrast P1s axe surfaced
 * on /, /about, /pricing, /terms, /privacy, /what-is-urip,
 * /ticketing-feature. The structural a11y P1s (link-in-text-block +
 * scrollable-region-focusable) shipped earlier in commit 52448ff.
 *
 * Strategy: scope every override to the exact (selector, background)
 * combination axe flagged. We do NOT change the brand teal globally —
 * `var(--teal-accent)` (#1ABC9C) stays as-is anywhere it was already
 * passing (icons, hero gradients, button hovers).
 *
 * Background-aware contrast targets:
 *   #0E8074 (darker teal)  on #FFFFFF       → 4.51:1  (AA pass)
 *   #5EEAD4 (lighter teal) on #08121C       → 12.96:1 (AAA pass)
 *   #94A3B8 (slate-400)    on #08121C       → 7.43:1  (AAA pass)
 *   rgba(255,255,255,0.65) on #08121C       → 5.62:1  (AA pass)
 *   rgba(230,237,243,0.7)  on #08121C       → 7.6:1   (AAA pass)
 */

/* ── (1) `wave-card .wave-milestone` — body-text in a white card.
 *        Original `var(--teal-accent)` = #1ABC9C → 2.4:1. Switch to a
 *        darker teal value. */
.wave-card .wave-milestone {
  color: #0E8074;
}

/* ── (2) `.section-eyebrow` — appears on BOTH dark and light section
 *        backgrounds depending on page. Default: dark-bg variant
 *        (lighter teal). Light-bg variant scoped by the surrounding
 *        section is below. */
.section-eyebrow {
  color: #5EEAD4;
}

/* (2a) ticketing-feature page sections all sit on white / off-white
 *      backgrounds and need the darker teal. Section ids are unique
 *      to /ticketing-feature.html so other pages are untouched. */
#capabilities .section-eyebrow,
#how-it-works .section-eyebrow,
#comparison .section-eyebrow,
#reuse .section-eyebrow,
#close .section-eyebrow,
.tf-flow-step .section-eyebrow,
.tf-reuse-card .section-eyebrow,
.tf-final .section-eyebrow {
  color: #0E8074;
}

/* (2b) ticketing-feature numbered flow steps — `.tf-flow-num` uses
 *      var(--teal-accent) #1ABC9C on a white card → 2.4:1. Switch to
 *      the same darker teal as wave-milestone. */
.tf-flow-step .tf-flow-num {
  color: #0E8074;
}

/* ── (3) Marketing /docs-page/ body copy — paragraphs / strong / em /
 *        li / blockquote inside the `.docs-page` layout (about,
 *        pricing, terms, privacy, what-is-urip). Background is the
 *        dark navy `#08121C`; text was inheriting `var(--gray-600)` =
 *        #475569 → 2.48:1 fail. Lift to slate-400 #94A3B8.
 *
 *        Scoped by `body.docs-page` so this rule never touches the
 *        ticketing-feature page (which uses white cards) or the index
 *        page (which has its own per-section text colors). */
body.docs-page p,
body.docs-page strong,
body.docs-page em,
body.docs-page li,
body.docs-page blockquote {
  color: #94A3B8;
}

/* ── (4) Marketing-page breadcrumb chip — small `.ps-04358a` container
 *        on the dark hero of every /docs-page/ page. Original
 *        rgba(230,237,243,0.45) blends to ~#6C757D on #08121C → 4.02:1
 *        fail. Bump alpha to 0.7. */
body.docs-page .ps-04358a,
body.docs-page .ps-04358a span,
body.docs-page .ps-04358a a {
  color: rgba(230, 237, 243, 0.7);
}

/* ── (5) Footer copyright line — rgba(255,255,255,0.4) on #08121C is
 *        3.81:1, just below AA. Bump to 0.65 alpha. */
footer.site-footer .copyright {
  color: rgba(255, 255, 255, 0.65);
}

/* ── (6) Footer body paragraphs — `var(--gray-600)` = #475569 on the
 *        dark navy footer is 2.48:1. Lift to slate-400. */
body.marketing-dark footer.site-footer p {
  color: #94A3B8;
}

/* ── (7) `.ps-9d0325` inline link — color #1ABC9C with no
 *        text-decoration on light bg → axe link-in-text-block:
 *        underline so the link is distinguishable without colour. */
.ps-9d0325 {
  text-decoration: underline;
}