/* a11y-contrast.css — sitewide WCAG AA contrast fixes (2026-05-09)
   Loaded LAST so it wins specificity battles. Targets the color tokens
   identified by axe-core that fall below 4.5:1 on dark backgrounds. */

:root {
  /* Bump muted text from rgba(255,255,255,0.55) (effective ~3.4:1 due to
     translucent blend) to a SOLID #a9a9a9 (8.21:1 vs #050505 → AAA). */
  --text-muted: #a9a9a9;
  --text-secondary: #d8d8d8;

  /* --garnet-main (#db143c) = 4.05:1 vs #050505 — borderline for normal text.
     Brighter variant for text contexts; existing var stays for bg/borders. */
  --garnet-text: hsl(348, 83%, 65%); /* #ec4561 — 5.85:1 vs black */
}

/* Non-button anchors using garnet → garnet-text variant */
a:not([class*="btn"]):not([class*="button"]):not([class*="cta"]) {
  color: var(--garnet-text);
}

/* Default browser-blue links on dark bg → garnet-text */
a:link:not([class*="btn"]):not([class*="button"]):not([class*="cta"]) {
  color: var(--garnet-text);
}

/* Garnet button text → pure white (4.55:1 vs #db143c → AA pass) */
.btn-primary,
.btn-primary-small,
.arc-btn-primary,
[class*="btn-primary"]:not(.btn-primary-small),
button[class*="primary"] {
  color: #ffffff;
}

/* Small / muted / legal text */
small, .small-text, .text-muted, [class*="muted"], .legal {
  color: var(--text-muted);
}

/* ─── Targeted 2026-05-10 fixes from axe-core deep scan ─────────────────
   axe found 281 color-contrast nodes across 10 URLs × 2 viewports. The
   `:not([class*="btn"])` anchor rule above covered most links, but the
   following selectors carry hard-coded garnet (#db143c, 4.01:1) or
   deep-garnet (#9a0f2b / #9b1b30, ~2.4:1) colors that didn't match the
   anchor selector — either because they're not anchors (e.g. .ribbon-
   title strong, .gg-insight-title) or use a stuck hash class from the
   May-9 inline-style hoist sweep that fixed the color literally. Targeted
   overrides below close the remaining contrast gap to AA.                */

/* Tool-card titles — were #db143c via inherited link color inside cards. */
.gg-tool-title,
.tool-card-compact .gg-tool-title,
.gg-insight-title {
  color: var(--garnet-text) !important;
}

/* Footer architect-ribbon segment labels were #9a0f2b (deep garnet) on
   near-black — 2.44:1. Bump to garnet-text variant.
   ALSO opacity:1 — these labels inherit a 0.7 opacity from the ribbon
   parent which dropped effective contrast to 3.5:1 even AFTER the color
   bump. axe computes effective color factoring in opacity, so the bright
   garnet-text needs full alpha to pass AA. */
.ribbon-nav .segment-label,
.nav-segment .segment-label,
.ribbon-title strong {
  color: var(--garnet-text) !important;
  opacity: 1 !important;
}

/* .hc-section-label etc. — homepage section eyebrow labels. They use a
   smaller font + #db143c base color. Bump to garnet-text. */
.hc-section-label,
.hc-section .hc-section-label,
[class*="section-label"]:not(.architect-ribbon *) {
  color: var(--garnet-text) !important;
}

/* .gg-minor-label + .ar-hero__back + .ar-hero__date/__read — small grey
   text patterns. Bump from #636363 / #727272 / #575757 to text-muted. */
/* Article-tier metadata colors. Source CSS sets these to
   rgba(240,240,240,0.35) — translucent white that BLENDS with the
   dark background to an effective ~#575757 (axe computes effective
   contrast through opacity, so even though raw rgba is light grey,
   the rendered output fails AA). Replace with solid var(--text-muted)
   (#a9a9a9, 8.21:1 → AAA). */
.gg-minor-label,
.ar-hero__back,
.ar-hero__date,
.ar-hero__read,
.ar-hero__cat,
.hc-insight-card p,
.garnetgrid-badge,
.ar-stat-card__label,
.ar-stat-card__num,
.ar-toc__label,
.process-step .step-num,
.cap-num,
.tier-name,
.hero-label,
.ar-author__role,
.hc-ecosystem-title,
[class*="ecosystem-title"],
/* Onboarding-walkthroughs strict-WCAG closure 2026-05-11. axe flagged
   the CHILD eyebrow elements, not the parent containers. .day-step
   (parent div) didn't carry the contrast issue — .day-tag (child
   span eyebrow) did. Same for .doc-eyebrow + .vf-tag + .video-frame
   span captions. Updated selectors target the actual children: */
.day-step .day-tag,
.day-step .artifact-tag,
.artifact-tag,
.lane-eyebrow,
.lane-section-header .lane-eyebrow,
.day-step,
.day-tag,
.doc-eyebrow,
.video-frame > span,
.video-frame span,
.vf-tag,
.video-caption,
.lane-crosssell-eyebrow {
  color: var(--text-muted) !important;
}

/* Hoisted hash-classes from inline-style sweep carry #666 grey on dark
   backgrounds. The hash names are content-derived (sha256[:6]) so we
   target the patterns that axe flagged. If new hashes appear, extend. */
.u-a41497,
.u-2eb2b3,
.u-c5979d .u-a41497,
.u-c5979d .u-1b592f .u-2eb2b3 {
  color: var(--text-muted) !important;  /* #a9a9a9, 8.21:1 → AAA */
}

/* Hoisted garnet-on-black hashes — same family as above. */
.u-36383c,
.u-1cd896 .u-36383c {
  color: var(--garnet-text) !important;
}

/* ─── Article-tier (.ar-*) variants flagged by axe second pass ───────────
   Long-form article pages use a 30+ utility-class family prefixed .ar-*
   for stats cards, hero metadata, TOC labels, categorization chips, etc.
   Many use dark-red (#aa0000, #680202, #9a0f2b, #c51236) or mid-grey
   (#636363, #676363, #575757) on near-black backgrounds — all fail AA.
   Broad pattern rules below to catch them without enumerating each.    */

[class*="ar-"][class*="num"],
[class*="ar-"][class*="cat"],
[class*="ar-"][class*="label"],
[class*="ar-"][class*="date"],
[class*="ar-"][class*="read"],
[class*="ar-toc"],
[class*="ar-stat"] {
  color: var(--garnet-text) !important;
}

.gg-garnet-link,
.lane-crosssell-eyebrow,
.lane-cta-eyebrow,
.ih-card__cat,
.ih-card__date {
  color: var(--garnet-text) !important;
}

/* In-page hash anchors that inherit a low-contrast color from
   the article container's typography rules. */
a[href^="#"]:not([class*="btn"]):not([class*="cta"]) {
  color: var(--garnet-text) !important;
}

/* Browser-default a:link inside consent banner text */
.gg-consent__text a,
.gg-consent a {
  color: var(--garnet-text) !important;
}

/* Pink-on-garnet button text (#fadce2 on #db143c, 3.92:1) — ensure
   button text is solid white on the garnet bg. */
.btn-primary,
[class*="btn-primary"],
.nav-links .btn-primary {
  color: #ffffff !important;
}

/* Inline opacity:0.5 on .video-frame caption spans drops effective
   contrast below 3:1 even with text-muted color. CSS !important
   beats inline non-!important styles, so force opacity to 1. */
.video-frame > span,
.video-frame span[style*="opacity"] {
  opacity: 1 !important;
}