/* Dialog Group websiteconcept v31, green accent edition.
   Restores the green accent system from v23 while retaining the v31 WCAG 2.2 AA
   contrast layer. Green is used for emphasis and action, never as low-contrast
   body copy on light surfaces.
*/

:root {
  --mint: #87FFC7;
  --mint-cta: #4DDBA0;
  --emerald: #0B7A4E;
  --emerald-brand: #2CAF73;
  --mint-soft: #E5FFF2;
  --mint-border: #74E6B5;
  --mint-shadow: rgba(77, 219, 160, 0.30);
}

body.v31-contrast.v31-green-accent {
  --mint: #87FFC7;
  --mint-cta: #4DDBA0;
  --emerald: #0B7A4E;
  --emerald-brand: #2CAF73;
  --mint-soft: #E5FFF2;
  --mint-border: #74E6B5;

  /* Accessible green surfaces and functional marks. */
  --dg-green-heading: #87FFC7;
  --dg-green-action: #4DDBA0;
  --dg-green-functional: #0B7A4E;
  --dg-green-icon-surface: #87FFC7;
  --dg-green-icon-ink: #002766;
}

/* Selection and skip navigation use the restored accent with navy text. */
body.v31-green-accent ::selection {
  color: var(--navy);
  background: var(--mint);
}

body.v31-green-accent .skip-link {
  color: var(--navy) !important;
  background: var(--mint) !important;
}

/* --------------------------------------------------------------------------
   Green emphasis on dark brand surfaces
   -------------------------------------------------------------------------- */

/* Large accent copy meets the 3:1 requirement for large text, including the
   lightest blue point in the existing gradients. The certification page keeps
   its deliberately single-colour heading treatment from v29. */
body.v31-contrast.v31-green-accent :is(
  .hero:not(.check-hero),
  .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,
  .partner-ecosystem-v27,
  .detail-summary-strip,
  .plain-card-primary,
  .team-badge,
  .case-result,
  .story-metric,
  .article-highlight,
  .office-map-caption,
  .office-map-caption-v30,
  .contact-person-card-v26,
  .role-panel,
  .fit-grid article
) .heading-accent {
  color: var(--dg-green-heading) !important;
  opacity: 1 !important;
}

/* The thin eyebrow line carries the accent. The small eyebrow text remains
   near-white for normal-text contrast. */
body.v31-contrast.v31-green-accent :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,
  .partner-ecosystem-v27,
  .site-footer,
  .detail-summary-strip
) .eyebrow::before {
  background: var(--mint) !important;
}

/* Restore the v23 green glow in the most visible blue surfaces. */
body.v31-green-accent .hero-orb-one {
  background: radial-gradient(circle, rgba(135, 255, 199, 0.28), rgba(135, 255, 199, 0)) !important;
}

body.v31-green-accent .roadmap-section {
  background:
    radial-gradient(circle at 92% 12%, rgba(135, 255, 199, 0.16), transparent 28%),
    linear-gradient(150deg, var(--navy), var(--blue)) !important;
}

body.v31-green-accent .contact-section,
body.v31-green-accent .contact-page-form-section {
  background:
    radial-gradient(circle at 85% 10%, rgba(135, 255, 199, 0.15), transparent 25%),
    linear-gradient(150deg, var(--navy), var(--blue)) !important;
}

/* --------------------------------------------------------------------------
   Calls to action and component accents
   -------------------------------------------------------------------------- */

body.v31-contrast.v31-green-accent .button-accent,
body.v31-contrast.v31-green-accent .button-accent * {
  color: var(--navy) !important;
}

body.v31-contrast.v31-green-accent .button-accent {
  border-color: transparent !important;
  background: var(--mint-cta) !important;
  box-shadow: 0 12px 26px rgba(77, 219, 160, 0.28) !important;
}

body.v31-contrast.v31-green-accent .button-accent:hover,
body.v31-contrast.v31-green-accent .button-accent:active {
  color: var(--navy) !important;
  background: var(--mint) !important;
  box-shadow: 0 16px 34px rgba(77, 219, 160, 0.35) !important;
}

body.v31-green-accent :is(
  .signal-callout,
  .team-copy blockquote,
  .archive-note,
  .article-quote,
  .contact-page-direct,
  .solution-quick-answer,
  .job-contact-detail,
  .integrator-callout,
  .article-aside-card--accent
) {
  border-left-color: var(--mint-cta) !important;
}

body.v31-green-accent .form-status:not(:empty) {
  border-left-color: var(--mint-cta) !important;
}

body.v31-green-accent .solution-visual-result {
  color: var(--navy) !important;
  background: var(--mint-cta) !important;
}

body.v31-green-accent .case-mint .case-result {
  color: var(--navy) !important;
  background:
    radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.40), transparent 26%),
    var(--mint-cta) !important;
}

body.v31-green-accent .case-mint .case-result :is(h2, h3, strong, p, span, small, a) {
  color: var(--navy) !important;
}

body.v31-green-accent .score-ring {
  color: var(--mint) !important;
  background: conic-gradient(var(--mint-cta) var(--score-percentage), rgba(255, 255, 255, 0.14) 0) !important;
}

body.v31-green-accent .score-ring > div {
  background: var(--navy) !important;
}

/* --------------------------------------------------------------------------
   Floating cards and status indicators
   -------------------------------------------------------------------------- */

body.v31-green-accent .status-dot:not(.status-dot--route):not(.status-dot--blue) {
  background: var(--emerald-brand) !important;
  border: 2px solid var(--emerald) !important;
  box-shadow: 0 0 0 8px rgba(44, 175, 115, 0.16) !important;
}

body.v31-green-accent .status-dot--route,
body.v31-green-accent .status-dot--blue {
  background: var(--royal) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 8px rgba(52, 104, 208, 0.16) !important;
}

/* --------------------------------------------------------------------------
   Checks, success marks and functional icons
   -------------------------------------------------------------------------- */

/* On dark cards, a mint surface with navy ink provides clear non-text
   contrast. The same geometry from v31 is retained. */
body.v31-contrast.v31-green-accent :is(
  .roadmap-section,
  .audience-section,
  .section-blue,
  .contact-section,
  .contact-page-form-section,
  .solution-detail-hero,
  .solution-hero,
  .check-result-panel,
  .plain-card-primary
) :is(.check-list, .solution-benefits, .contact-benefits, .plain-card-primary) li::before {
  color: var(--navy) !important;
  border-color: var(--mint-border) !important;
  background: var(--mint) !important;
}

/* On light cards, use an AA-safe dark green for small success marks. */
body.v31-green-accent :is(
  .plain-card:not(.plain-card-primary) li::before,
  .article-bullets li::before,
  .article-summary-list li::before,
  .form-status,
  .success-text
) {
  color: var(--emerald) !important;
}

body.v31-green-accent .check-option input:checked + label::after {
  color: var(--navy) !important;
  border-color: var(--mint) !important;
  background: var(--mint) !important;
}

body.v31-green-accent .check-option input:checked + label {
  border-color: var(--mint-border) !important;
  box-shadow: 0 0 0 3px rgba(77, 219, 160, 0.20) !important;
}

/* --------------------------------------------------------------------------
   Maps, progress and selection states
   -------------------------------------------------------------------------- */

body.v31-green-accent :is(.europe-office-map .map-network, .office-route-lines path) {
  stroke: var(--mint-cta) !important;
}

body.v31-green-accent :is(.europe-office-map .map-marker, .office-map-marker) {
  fill: var(--mint-cta) !important;
  background: var(--mint-cta) !important;
}

body.v31-green-accent .europe-office-map .map-pulse {
  fill: rgba(135, 255, 199, 0.16) !important;
  stroke: rgba(135, 255, 199, 0.62) !important;
}

body.v31-green-accent .europe-office-map a:hover .map-pulse,
body.v31-green-accent .europe-office-map a:focus .map-pulse {
  fill: rgba(135, 255, 199, 0.30) !important;
}

body.v31-green-accent .office-map-dot {
  background: var(--mint-cta) !important;
  box-shadow: 0 0 0 7px rgba(77, 219, 160, 0.22), 0 8px 20px rgba(0, 39, 102, 0.30) !important;
}

body.v31-green-accent .office-card:target {
  border-color: var(--mint-cta) !important;
  box-shadow: 0 0 0 4px rgba(77, 219, 160, 0.20), var(--shadow-md) !important;
}

/* Small accent chips use a pale green surface with navy copy, not green text
   on white. */
body.v31-green-accent :is(
  .integrator-icon,
  .contact-direct-links a > span:first-child,
  .office-note,
  .office-service-badge,
  .content-type,
  .menu-badge
) {
  color: var(--navy) !important;
  background: var(--mint-soft) !important;
  border-color: var(--mint-border) !important;
}

/* Retain the v31 high-visibility focus ring. A green inner highlight is added
   to accent actions only, while the white/navy double ring stays intact. */
body.v31-green-accent .button-accent:focus-visible {
  outline-color: var(--white) !important;
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 7px var(--mint) !important;
}

@media (forced-colors: active) {
  body.v31-green-accent .button-accent,
  body.v31-green-accent .status-dot,
  body.v31-green-accent .score-ring,
  body.v31-green-accent .office-map-dot {
    forced-color-adjust: auto;
  }
}