/**
 * salesfision-a11y.css — toegankelijkheidscorrecties op gedeelde componentklassen
 * van de bespoke *-salesfision blokken (Ronde 6): kleurcontrast (WCAG 2.1 AA,
 * ≥ 4,5:1) en verminderde beweging (onderaan).
 *
 * Gemeten met axe-core op de sjabloonfamilies (home, blog, artikel, cases,
 * dienst, contact, careers): dezelfde klassen falen in meerdere blokken omdat de
 * blok-CSS is gekopieerd. Dit bestand corrigeert UITSLUITEND kleuren (tekst,
 * knopvulling) en animatietiming, en raakt geen maatvoering of lay-out; het laadt
 * ná de blok-CSS (wp_enqueue_scripts prio 51) en prefixt met body zodat het de
 * blokregels voorspelbaar overschrijft. Blokeigen kleuren staan in het blokbestand.
 *
 * Referenties (op de donkere achtergronden #0d0d0d / #161616 / #2b1a1b):
 *   #f4707a  6,4:1   #f0616c  5,7:1   #9a9db0  6,7:1   #999999  6,4:1
 *   #a0a0a0  7,4:1   #b0b0b0  7,0:1 (op #2b2615)
 *   wit op var(--sf-red-cta, #d63340) 4,8:1 (het bestaande CTA-token; wit op
 *   #e63946 haalt 4,2:1 en faalt).
 */

/* Tags en labels in rood op donkere kaarten */
body .blog-tag,
body .usecase-card-body .blog-tag,
body .blog-meta .blog-tag,
body .article-meta .blog-tag { color: #f4707a; }
body .blog-read-more,
body .blog-card:hover .blog-read-more,
body .featured-label { color: #f0616c; }

/* Datum- en metatekst */
body .blog-date,
body .blog-meta time,
body .article-meta time,
body .article-body time,
body .post-meta time { color: #9a9db0; }

/* Artikelinhoud (single-post.php): geïmporteerde spans/divs zonder eigen kleur erven
   anders de Tailwind-bodykleur (#1f2937) op de donkere achtergrond. */
body .article-body { color: #c9cbd6; }

/* Toelichtende tekst op de usecase-/casekaarten */
body .usecases-header p { color: #a0a0a0; }
body .usecase-card-body p { color: #999999; }

/* Groei-visual (dienstpagina Growth) */
body .fv-source span { color: #9a9db0; }
body .fv-output-label { color: #b0b0b0; }

/* Witte tekst op rode vulling: het CTA-token in plaats van #e63946 */
body .case-metric { background: var(--sf-red-cta, #d63340); border-color: var(--sf-red-cta, #d63340); }
body .filter-btn:hover,
body .filter-btn.active { background: var(--sf-red-cta, #d63340); border-color: var(--sf-red-cta, #d63340); }
body .btn-submit { background: var(--sf-red-cta, #d63340); }
body .btn-submit:hover { background: var(--sf-red-cta-hover, #c8202e); }

/* Sectiebadges: witte tekst op de lichte accentkleuren (geel #eab308, lime #84cc16,
   teal #14b8a6, groen #22c55e, hemelsblauw #38bdf8, oranje #f97316, magenta #d946ef)
   haalt 1,9–3,5:1; donkere tekst haalt daar 5,5–9,9:1. Op de donkere accenten
   (marineblauw #1e40af, paars #8b5cf6, rood) blijft wit staan. De kleur komt óf uit
   de blok-CSS van de dienstblokken (daar staat de tekstkleur nu in het blokbestand
   zelf), uit de per-pagina accentvariabele van het sf-faq-blok (salesfision-sf-reskin.css,
   body.page-<slug>) óf uit een inline style met het accent (dan per hex). */
body.page-growth [data-sf-block="sf-faq"] .section-badge,
body.page-data-analytics [data-sf-block="sf-faq"] .section-badge,
body.page-digital [data-sf-block="sf-faq"] .section-badge,
body.page-ai-for-business [data-sf-block="sf-faq"] .section-badge,
body.page-hosting-support [data-sf-block="sf-faq"] .section-badge,
body.page-reach-audience [data-sf-block="sf-faq"] .section-badge,
body.page-service-management [data-sf-block="sf-faq"] .section-badge,
body .section-badge[style*="#eab308"],
body .section-badge[style*="#84cc16"],
body .section-badge[style*="#14b8a6"],
body .section-badge[style*="#22c55e"],
body .section-badge[style*="#38bdf8"],
body .section-badge[style*="#f97316"],
body .section-badge[style*="#d946ef"] { color: #111111; }

/* sf-faq-badge (blueprint): op pagina's zonder eigen accent is de vulling merkrood
   #e63946 (wit 4,2:1); alleen de badge krijgt dan het CTA-token. Op pagina's met een
   accent (salesfision-sf-reskin.css) blijft het accent, met donkere tekst waar nodig;
   paars #8b5cf6 (design thinking) haalt met wit 4,2:1 en krijgt een iets diepere tint. */
body [data-sf-block="sf-faq"] .section-badge { background: var(--sf-faq-badge, var(--sf-red-cta, #d63340)); }
body.page-growth [data-sf-block="sf-faq"],
body.page-data-analytics [data-sf-block="sf-faq"],
body.page-digital [data-sf-block="sf-faq"],
body.page-ai-for-business [data-sf-block="sf-faq"],
body.page-hosting-support [data-sf-block="sf-faq"],
body.page-reach-audience [data-sf-block="sf-faq"],
body.page-service-management [data-sf-block="sf-faq"],
body.page-social-media [data-sf-block="sf-faq"] { --sf-faq-badge: var(--sf-faq-accent); }
body.page-design-thinking [data-sf-block="sf-faq"] { --sf-faq-badge: #7c3aed; }

/* Verminderde beweging (WCAG 2.2.2 / 2.3.3): de blok-CSS animeert hero-visuals,
   tellers, pulsen en knipperende indicatoren zonder prefers-reduced-motion
   (40 blokstylesheets). Bij die voorkeur springt elke animatie direct naar haar
   eindstand en duren overgangen vrijwel niets (0,01 ms, zodat transitionend nog
   vuurt). De Business Scan-app regelt dit zelf en valt erbuiten. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body :not(#sf-bsc-root, #sf-bsc-root *),
  body :not(#sf-bsc-root, #sf-bsc-root *)::before,
  body :not(#sf-bsc-root, #sf-bsc-root *)::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Elementen die alleen via een oneindige animatie zichtbaar worden (basis opacity 0),
     tonen dan statisch hun zichtbare stand. */
  body .soc-float { opacity: 1 !important; }
}