/* Dialog Group websiteconcept v31
   Centrale contrastlaag voor blauwe en donkerblauwe oppervlakken.

   Scope:
   - uitsluitend kleur, contrast en functionele visuele ondersteuning;
   - geen wijzigingen aan tekst, structuur, afmetingen, spacing of positionering;
   - semantische tokens voorkomen nieuwe contrastproblemen op donkere vlakken.
*/

body.v31-contrast {
  /* Tekst op de lichtste donkere merkkleur die in v31 wordt gebruikt. */
  --dg-on-blue-primary: #FFFFFF;
  --dg-on-blue-secondary: #FEFFFF;
  --dg-on-blue-subtle: #FEFEFF;
  --dg-on-blue-link: #FFFFFF;

  /* Functionele iconen op donkere oppervlakken. */
  --dg-on-blue-icon-surface: #F2F7FF;
  --dg-on-blue-icon-ink: #002766;
  --dg-on-blue-icon-border: rgba(255, 255, 255, 0.74);
  --dg-on-blue-functional-icon: #FFFFFF;

  /* Grenzen en states op donkere oppervlakken. */
  --dg-on-blue-border: rgba(255, 255, 255, 0.74);
  --dg-on-blue-divider: rgba(255, 255, 255, 0.48);
  --dg-on-blue-focus: #FFFFFF;

  /* Licht oppervlak dat binnen een donkere sectie staat. */
  --dg-on-light-primary: #002766;
  --dg-on-light-secondary: #4F6078;
  --dg-on-light-subtle: #56677F;
  --dg-on-light-link: #2557B8;
}

/* --------------------------------------------------------------------------
   1. Semantische oppervlakte-tokens
   -------------------------------------------------------------------------- */

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .solution-page-visual,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .insights-category-visual,
  .insights-hub-visual,
  .insight-detail-hero-image,
  .editorial-photo-card,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .contact-person-links-v26 a,
  .role-panel,
  .fit-grid article,
  .photo-frame blockquote
) {
  --dg-surface-title: var(--dg-on-blue-primary);
  --dg-surface-copy: var(--dg-on-blue-secondary);
  --dg-surface-meta: var(--dg-on-blue-subtle);
  --dg-surface-link: var(--dg-on-blue-link);
  --dg-surface-icon-bg: var(--dg-on-blue-icon-surface);
  --dg-surface-icon-fg: var(--dg-on-blue-icon-ink);
  --dg-surface-border: var(--dg-on-blue-border);
  color: var(--dg-surface-copy);
}

/* Lichte componenten binnen een donker vlak behouden donkere tekst. */
body.v31-contrast :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) {
  --dg-surface-title: var(--dg-on-light-primary);
  --dg-surface-copy: var(--dg-on-light-secondary);
  --dg-surface-meta: var(--dg-on-light-subtle);
  --dg-surface-link: var(--dg-on-light-link);
  --dg-surface-icon-bg: var(--ice);
  --dg-surface-icon-fg: var(--navy);
  --dg-surface-border: var(--border);
}

/* --------------------------------------------------------------------------
   2. Tekst op blauwe oppervlakken
   -------------------------------------------------------------------------- */

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .solution-page-visual,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .insights-category-visual,
  .insights-hub-visual,
  .insight-detail-hero-image,
  .editorial-photo-card,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .contact-person-links-v26 a,
  .role-panel,
  .fit-grid article,
  .photo-frame blockquote
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  .heading-part,
  .heading-base,
  .heading-accent,
  .result-number,
  .result-copy h3,
  .proof-grid strong,
  .footer-heading,
  .score-ring strong,
  .detail-summary-grid strong
) {
  color: var(--dg-surface-title) !important;
  opacity: 1 !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .solution-page-visual,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .insights-category-visual,
  .insights-hub-visual,
  .insight-detail-hero-image,
  .editorial-photo-card,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .contact-person-links-v26 a,
  .role-panel,
  .fit-grid article,
  .photo-frame blockquote
) :is(
  p,
  li,
  dd,
  address,
  figcaption,
  blockquote,
  small,
  label,
  .hero-lead,
  .hero-fit,
  .solution-detail-lead,
  .detail-hero-lead,
  .article-lead,
  .proof-grid span,
  .team-badge span,
  .detail-summary-grid span,
  .trust-chips span,
  .office-map-offices-v30,
  .office-map-markets-v30,
  .office-map-legend,
  .contact-alt,
  .contact-page-direct,
  .footer-bottom,
  .footer-bottom span
) {
  color: var(--dg-surface-copy) !important;
  opacity: 1 !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .role-panel,
  .fit-grid article
) :is(
  .eyebrow,
  .eyebrow-dark,
  .eyebrow--light,
  .step-label,
  .breadcrumbs,
  .breadcrumbs a,
  .breadcrumbs li,
  .breadcrumb,
  .breadcrumb a,
  .breadcrumb li,
  .article-meta,
  .article-meta span,
  .case-client,
  .related-kicker,
  .office-map-label,
  .contact-person-eyebrow-v26,
  .contact-person-role-v26,
  .score-explanation
) {
  color: var(--dg-surface-meta) !important;
  opacity: 1 !important;
}

/* Expliciete copyselectors winnen van oudere, specifiekere rgba-regels. */
body.v31-contrast .hero:not(.check-hero) :is(.hero-lead, .hero-fit, .article-lead, .solution-detail-lead, .detail-hero-lead),
body.v31-contrast .contact-page-hero :is(.hero-lead, .detail-hero-lead, .contact-alt),
body.v31-contrast .certification-hero-v27 :is(.detail-hero-lead, .breadcrumb, .breadcrumb a, .breadcrumb li),
body.v31-contrast .insight-detail-hero :is(.article-lead, .breadcrumb, .breadcrumb a, .breadcrumb li),
body.v31-contrast .insights-category-hero :is(.breadcrumb, .breadcrumb a, .breadcrumb li) {
  color: var(--dg-surface-copy) !important;
  opacity: 1 !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .article-highlight,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .contact-person-links-v26 a
) a:not(.button) {
  color: var(--dg-surface-link) !important;
  opacity: 1 !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) a:not(.button):hover,
body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) a:not(.button):focus-visible {
  color: var(--dg-on-blue-primary) !important;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.22em;
}

/* --------------------------------------------------------------------------
   3. Bestaande merkgradients
   -------------------------------------------------------------------------- */

/*
   De achtergrondkleuren en gradients uit v30 blijven ongewijzigd.
   De contrastlaag past uitsluitend voorgrondkleuren, randen en states aan.
*/

/* --------------------------------------------------------------------------
   4. Vinkjes en kleine functionele iconen
   -------------------------------------------------------------------------- */

body.v31-contrast :is(
  .roadmap-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .plain-card-primary,
  .article-highlight
) :is(.check-list, .solution-benefits, .contact-benefits, .plain-card-primary) li::before {
  display: grid !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  place-items: center !important;
  border: 1px solid var(--dg-on-blue-icon-border) !important;
  border-radius: 50% !important;
  color: var(--dg-on-blue-icon-ink) !important;
  background: var(--dg-on-blue-icon-surface) !important;
  box-shadow: none !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .solution-detail-hero,
  .insights-hero,
  .insight-detail-hero,
  .proof-strip,
  .partner-ecosystem-v27
) :is(
  .proof-icon-v27,
  .step-icon,
  .feature-icon,
  .metric-icon,
  .contact-icon,
  .signal-icon,
  .integrator-icon,
  .functional-icon
) {
  color: var(--dg-on-blue-icon-ink) !important;
  border-color: var(--dg-on-blue-icon-border) !important;
  background: var(--dg-on-blue-icon-surface) !important;
}

body.v31-contrast .check-option input:checked + label::after {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

body.v31-contrast .office-map-caption-v30 .legend-dot--office,
body.v31-contrast .office-map-caption .legend-dot--office {
  border: 3px solid var(--dg-on-blue-icon-surface) !important;
  background: var(--royal) !important;
  box-shadow: 0 0 0 1px var(--dg-on-blue-primary) !important;
}

body.v31-contrast .office-map-caption-v30 .legend-dot--market,
body.v31-contrast .office-map-caption .legend-dot--market {
  border: 2px solid var(--dg-on-blue-primary) !important;
  background: var(--dg-on-blue-icon-surface) !important;
}

/* --------------------------------------------------------------------------
   5. Grenzen, hover, focus, active en disabled
   -------------------------------------------------------------------------- */

body.v31-contrast :is(
  .roadmap-step,
  .featured-step,
  .role-panel,
  .fit-grid article,
  .audience-sectors li,
  .article-meta span,
  .contact-person-card-v26,
  .contact-person-links-v26 a,
  .solution-benefits li,
  .plain-card-primary,
  .proof-grid > div
) {
  border-color: var(--dg-on-blue-border) !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer
) :focus-visible {
  outline: 3px solid var(--dg-on-blue-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--navy) !important;
}

body.v31-contrast :is(.button-primary, .button-accent, .nav-cta),
body.v31-contrast :is(.button-primary, .button-accent, .nav-cta) * {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .solution-page-visual,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .role-panel,
  .fit-grid article
) .button-secondary {
  color: var(--dg-on-blue-primary) !important;
  border-color: var(--dg-on-blue-border) !important;
  background: rgba(0, 39, 102, 0.18) !important;
}

body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .solution-page-visual,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .role-panel,
  .fit-grid article
) .button-secondary:hover,
body.v31-contrast :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .solution-page-visual,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .office-map-caption,
  .office-map-caption-v30,
  .certification-proof-v27,
  .contact-person-card-v26,
  .role-panel,
  .fit-grid article
) .button-secondary:active {
  color: var(--dg-on-blue-primary) !important;
  border-color: var(--dg-on-blue-primary) !important;
  background: rgba(0, 39, 102, 0.30) !important;
}

/* De witte CTA in de certificeringshero behoudt donkerblauwe tekst. */
body.v31-contrast .certification-hero-v27 .button-secondary,
body.v31-contrast .certification-hero-v27 .button-secondary * {
  color: var(--navy) !important;
  border-color: var(--white) !important;
  background: var(--white) !important;
}

body.v31-contrast .certification-hero-v27 .button-secondary:hover,
body.v31-contrast .certification-hero-v27 .button-secondary:active {
  color: var(--navy) !important;
  border-color: var(--ice) !important;
  background: var(--ice) !important;
}

body.v31-contrast :is(.button-primary, .button-accent, .button-secondary):disabled,
body.v31-contrast :is(.button-primary, .button-accent, .button-secondary)[aria-disabled="true"] {
  color: #3F5068 !important;
  border-color: #AAB7C7 !important;
  background: #E3E8EF !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. Lichte componenten binnen donkere secties
   -------------------------------------------------------------------------- */

body.v31-contrast :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) {
  color: var(--dg-surface-copy) !important;
}

body.v31-contrast :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) :is(h1, h2, h3, h4, strong, label, legend) {
  color: var(--dg-surface-title) !important;
}

body.v31-contrast :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) :is(p, li, small, span, .optional, .form-note, .form-privacy) {
  color: var(--dg-surface-copy) !important;
}

body.v31-contrast :is(.contact-form, .solution-mini-form, .search-dialog-panel) :is(input, textarea, select) {
  color: var(--ink) !important;
  background: var(--white) !important;
}

body.v31-contrast :is(.contact-form, .solution-mini-form, .search-dialog-panel) ::placeholder {
  color: #56677F !important;
  opacity: 1 !important;
}

body.v31-contrast :is(.case-content, .roadmap-cta, .search-dialog-panel) a:not(.button) {
  color: var(--dg-surface-link) !important;
}


/* --------------------------------------------------------------------------
   7. Gerichte contrastcorrecties voor specifieke componenten
   -------------------------------------------------------------------------- */

/* De snelle uitleg staat op een transparante kaart binnen de blauwe hero. */
body.v31-contrast .solution-detail-hero .solution-quick-answer {
  color: var(--dg-on-blue-secondary) !important;
  background: rgba(0, 39, 102, 0.34) !important;
  border-color: var(--dg-on-blue-border) !important;
  opacity: 1 !important;
}

body.v31-contrast .solution-detail-hero .solution-quick-answer strong {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

/* Het scorepercentage staat op koningsblauw en gebruikt daarom volledig wit. */
body.v31-contrast .check-result-panel .score-ring :is(strong, span),
body.v31-contrast .score-ring > div :is(strong, span) {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

/* Contactlinks in de donkere contactkaart blijven ook op de lichtste blauwe tint leesbaar. */
body.v31-contrast .contact-person-links-v26 a span {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast .contact-person-links-v26 a strong {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

/* De lichte checkhero behoudt donkere tekst met AA-contrast, ook in de blauwe gloed. */
body.v31-contrast .check-hero p:not(.eyebrow) {
  color: var(--dg-on-light-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast .check-hero .eyebrow {
  color: var(--dg-on-light-link) !important;
  opacity: 1 !important;
}

/* Functionele SVG-iconen op donkere oppervlakken volgen één voorgrondtoken. */
body.v31-contrast :is(
  .hero:not(.check-hero),
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) :is(svg, .icon, [class*="-icon"]):not(.partner-logo-v27):not(.certification-logo-v27) {
  color: var(--dg-on-blue-functional-icon);
}

/* --------------------------------------------------------------------------
   8. Forced colours
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  body.v31-contrast :is(
    .roadmap-step,
    .role-panel,
    .fit-grid article,
    .audience-sectors li,
    .article-meta span,
    .contact-person-card-v26,
    .contact-person-links-v26 a
  ) {
    border: 1px solid CanvasText !important;
  }

  body.v31-contrast :is(
    .roadmap-section,
    .section-blue,
    .contact-section,
    .contact-page-form-section,
    .plain-card-primary,
    .article-highlight
  ) :is(.check-list, .solution-benefits, .contact-benefits, .plain-card-primary) li::before {
    color: Canvas !important;
    background: CanvasText !important;
    border-color: CanvasText !important;
  }
}

/* --------------------------------------------------------------------------
   8. Specificiteitsborging voor gedeelde donkere componenten

   Oudere componentlagen gebruikten gedeeltelijk transparante witwaarden met
   selectors die specifieker waren dan de semantische tokens hierboven. Deze
   laatste laag koppelt die componenten expliciet aan de centrale v31-tokens.
   -------------------------------------------------------------------------- */

body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero) .hero-copy,
  .solution-detail-hero .solution-detail-copy,
  .solution-hero .solution-hero-copy,
  .insights-hero .insights-hero-copy,
  .insights-category-hero .insights-category-hero-copy,
  .insight-detail-hero .insight-detail-copy,
  .article-hero .article-hero-grid > div:first-child,
  .contact-page-hero .contact-page-hero-copy,
  .contact-section .contact-copy,
  .contact-page-form-section .contact-copy,
  .check-result-panel,
  .site-footer
) :is(p, li, small, address, figcaption, a):not(.button) {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero),
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .contact-page-hero,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .certification-hero-v27,
  .certification-proof-v27
) :is(
  .eyebrow,
  .eyebrow-dark,
  .eyebrow--light,
  .breadcrumb,
  .breadcrumb a,
  .breadcrumb li,
  .breadcrumbs,
  .breadcrumbs a,
  .breadcrumbs li,
  .article-meta,
  .article-meta span,
  .step-label,
  .case-client,
  .related-kicker,
  .score-explanation
) {
  color: var(--dg-on-blue-subtle) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero),
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .contact-page-hero,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .certification-hero-v27,
  .certification-proof-v27
) :is(h1, h2, h3, h4, h5, h6, strong, .heading-base, .heading-accent) {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa .contact-person-card-v26 :is(
  p,
  span,
  address,
  .contact-person-role-v26,
  .contact-person-eyebrow-v26
),
body.v31-contrast.ui-accessible-v24-aa .contact-person-links-v26 a {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa .contact-person-card-v26 :is(h2, h3, strong),
body.v31-contrast.ui-accessible-v24-aa .contact-person-links-v26 a strong {
  color: var(--dg-on-blue-primary) !important;
}

body.v31-contrast.ui-accessible-v24-aa .site-footer a:not(.button) {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa .site-footer a:not(.button):hover,
body.v31-contrast.ui-accessible-v24-aa .site-footer a:not(.button):focus-visible {
  color: var(--dg-on-blue-primary) !important;
}

/* De korte samenvatting staat op een transparant donkerblauw vlak in de
   oplossingshero. Daarom gebruikt deze component de on-blue tokens, niet de
   on-light tokens van witte kaarten. */
body.v31-contrast .solution-detail-hero .solution-quick-answer {
  --dg-surface-title: var(--dg-on-blue-primary);
  --dg-surface-copy: var(--dg-on-blue-secondary);
  --dg-surface-meta: var(--dg-on-blue-subtle);
  --dg-surface-link: var(--dg-on-blue-link);
  color: var(--dg-on-blue-secondary) !important;
  background: rgba(0, 39, 102, 0.34) !important;
  border-color: var(--dg-on-blue-border) !important;
}

body.v31-contrast .solution-detail-hero .solution-quick-answer strong {
  color: var(--dg-on-blue-primary) !important;
}

/* Metadata en foto-onderschriften op donkere beeldvlakken gebruiken dezelfde
   centrale tinten, ook waar oudere componentregels extra specifiek zijn. */
body.v31-contrast.ui-accessible-v24-aa .insight-detail-hero .article-meta :is(span, time, a),
body.v31-contrast.ui-accessible-v24-aa .article-hero .article-meta :is(span, time, a) {
  color: var(--dg-on-blue-subtle) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .home-editorial-figure,
  .editorial-photo-card,
  .home-photo-duo figure,
  .insights-category-visual,
  .insights-hub-visual,
  .insight-detail-hero-image
) figcaption :is(span, p):not(.content-type) {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .home-editorial-figure,
  .editorial-photo-card,
  .home-photo-duo figure,
  .insights-category-visual,
  .insights-hub-visual,
  .insight-detail-hero-image
) figcaption strong {
  color: var(--dg-on-blue-primary) !important;
  opacity: 1 !important;
}

/* Article metadata on the lightest blue end of detail-hero gradients. */
body.v31-contrast .insight-detail-hero .article-meta span {
  color: var(--dg-on-blue-subtle) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(.insight-detail-hero, .article-hero) .insight-meta-row :is(span, time, a) {
  color: var(--dg-on-blue-subtle) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   9. Lichte componenten binnen blauwe secties

   Witte kaarten in een donker vlak vormen een eigen leesoppervlak. Deze
   afsluitende reset voorkomt dat de on-blue teksttokens doorerven naar de
   inhoud van formulieren, floating cards en andere lichte componenten.
   -------------------------------------------------------------------------- */

body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) {
  --dg-surface-title: var(--dg-on-light-primary);
  --dg-surface-copy: var(--dg-on-light-secondary);
  --dg-surface-meta: var(--dg-on-light-subtle);
  --dg-surface-link: var(--dg-on-light-link);
  color: var(--dg-on-light-secondary) !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) :is(h1, h2, h3, h4, h5, h6, strong, label, legend) {
  color: var(--dg-on-light-primary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) :is(p, li, dd, small, span, address, figcaption, .optional, .form-note, .form-privacy) {
  color: var(--dg-on-light-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) a:not(.button) {
  color: var(--dg-on-light-link) !important;
}

/* Hoogste specificiteit voor tekst binnen lichte kaarten die in een donker
   component zijn genest. Dit waarborgt de lokale contrastcontext. */
body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) :is(h1, h2, h3, h4, h5, h6, strong, label, legend) {
  color: var(--dg-on-light-primary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .partner-logo--light-v27,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) :is(p, li, dd, small, span, address, figcaption, .optional, .form-note, .form-privacy) {
  color: var(--dg-on-light-secondary) !important;
  opacity: 1 !important;
}

body.v31-contrast.ui-accessible-v24-aa :is(
  .hero:not(.check-hero),
  .contact-page-hero,
  .certification-hero-v27,
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .insights-hero,
  .insights-category-hero,
  .insight-detail-hero,
  .article-hero,
  .check-result-panel,
  .proof-strip,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) :is(
  .contact-form,
  .floating-card,
  .roadmap-cta,
  .solution-mini-form,
  .case-content,
  .office-map-label,
  .search-dialog-panel,
  .article-summary-card,
  .content-card,
  .office-card,
  .check-question,
  .plain-card:not(.plain-card-primary),
  .integrator-callout,
  .insights-featured-card,
  .menu-advice-card,
  .menu-feature-card,
  .about-menu-card,
  .language-panel,
  .job-list-card,
  .vacancy-card,
  .article-source-note
) a:not(.button) {
  color: var(--dg-on-light-link) !important;
}

/* Localised inspiration detail pages use article-lead in the blue hero. */
body.v31-contrast .insight-detail-hero .article-lead {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}

/* Compact inspiration templates inherit a highly specific legacy lead color.
   This v31 rule keeps the same layout and restores AA contrast on blue. */
body.v31-contrast.ui-accessible-v24-aa .insight-detail-hero .article-hero-grid .article-lead {
  color: var(--dg-on-blue-secondary) !important;
  opacity: 1 !important;
}