/**
 * Optional high-contrast presentation.
 *
 * This stylesheet is intentionally isolated from the design system. It only
 * takes effect after the visitor enables the control in the site header.
 */

.synapser-contrast-toggle {
  display: inline-grid;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
  place-items: center;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #151417;
  color: #ffffff;
  font: 700 1.25rem/1 Arial, sans-serif;
  cursor: pointer;
}

.synapser-contrast-toggle:hover,
.synapser-contrast-toggle[aria-pressed="true"] {
  border-color: #ffe66d;
  background: #ffe66d;
  color: #000000;
}

.synapser-contrast-toggle:focus-visible {
  outline: 3px solid #ffe66d;
  outline-offset: 3px;
}

html[data-synapser-high-contrast] {
  color-scheme: dark;
  --color-background: #000000;
  --color-surface: #000000;
  --color-surface-subtle: #000000;
  --color-surface-dark: #000000;
  --color-surface-dark-raised: #000000;
  --color-text: #ffffff;
  --color-text-muted: #ffffff;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #ffffff;
  --color-border: #ffffff;
  --color-border-inverse: #ffffff;
  --color-accent: #ffe66d;
  --color-link: #ffe66d;
  --color-link-hover: #ffffff;
  --color-focus: #ffe66d;
  --color-bronze: #ffe66d;
  --color-copper: #ffe66d;
  --color-light-copper: #fff3a6;
  --color-orange: #ffe66d;
  /* White/bone are also used as component backgrounds in the normal theme. */
  --color-bone: #000000;
  --color-sand: #000000;
  --color-graphite: #000000;
  --color-deep-graphite: #000000;
  --color-dark-graphite: #000000;
  --color-graphite-96: #000000;
  --color-graphite-22: #ffffff;
  --color-graphite-12: #ffffff;
  --color-bone-75: #ffffff;
  --color-bone-64: #ffffff;
  --color-bone-15: #ffffff;
  --color-bone-12: #ffffff;
  --color-white: #000000;
  --color-white-06: #000000;
}

html[data-synapser-high-contrast] body,
html[data-synapser-high-contrast] header,
html[data-synapser-high-contrast] nav,
html[data-synapser-high-contrast] main,
html[data-synapser-high-contrast] section,
html[data-synapser-high-contrast] article,
html[data-synapser-high-contrast] aside,
html[data-synapser-high-contrast] footer,
html[data-synapser-high-contrast] div,
html[data-synapser-high-contrast] form,
html[data-synapser-high-contrast] ul,
html[data-synapser-high-contrast] ol,
html[data-synapser-high-contrast] li {
  background-color: #000000 !important;
  color: #ffffff !important;
}

html[data-synapser-high-contrast] body *:not(.language-flag) {
  background-image: none !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
  color: inherit !important;
  text-shadow: none !important;
}

html[data-synapser-high-contrast] a,
html[data-synapser-high-contrast] a * {
  color: #ffe66d !important;
  text-decoration-color: currentColor !important;
}

html[data-synapser-high-contrast] a:not(.custom-logo-link, .site-logo-fallback) {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.12em !important;
  text-underline-offset: 0.18em !important;
}

/*
 * Links that behave as controls must not inherit yellow text over the yellow
 * fills used by the normal design. In high contrast they share one stable,
 * predictable treatment: yellow text on black with a visible white border.
 */
html[data-synapser-high-contrast] :is(
  .syn-button,
  .syn-context-cta__link,
  .syn-manifesto__link,
  .syn-competencies__link,
  .syn-moments__link,
  .syn-intelligence__manifest a,
  .syn-solutions__action a,
  .syn-about__button,
  .syn-platforms-cta__link,
  .syn-solution-platforms__cta-link,
  .syn-solution-cta__button,
  .wp-block-button__link,
  .search-submit
) {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
  color: #ffe66d !important;
}

html[data-synapser-high-contrast] :is(
  .syn-button,
  .syn-context-cta__link,
  .syn-manifesto__link,
  .syn-competencies__link,
  .syn-moments__link,
  .syn-intelligence__manifest a,
  .syn-solutions__action a,
  .syn-about__button,
  .syn-platforms-cta__link,
  .syn-solution-platforms__cta-link,
  .syn-solution-cta__button,
  .wp-block-button__link,
  .search-submit
) * {
  color: #ffe66d !important;
}

html[data-synapser-high-contrast] :is(
  .syn-button,
  .syn-context-cta__link,
  .syn-manifesto__link,
  .syn-competencies__link,
  .syn-moments__link,
  .syn-intelligence__manifest a,
  .syn-solutions__action a,
  .syn-about__button,
  .syn-platforms-cta__link,
  .syn-solution-platforms__cta-link,
  .syn-solution-cta__button,
  .wp-block-button__link,
  .search-submit
):is(:hover, :focus-visible) {
  border-color: #ffe66d !important;
  background: #ffe66d !important;
  color: #000000 !important;
}

html[data-synapser-high-contrast] :is(
  .syn-button,
  .syn-context-cta__link,
  .syn-manifesto__link,
  .syn-competencies__link,
  .syn-moments__link,
  .syn-intelligence__manifest a,
  .syn-solutions__action a,
  .syn-about__button,
  .syn-platforms-cta__link,
  .syn-solution-platforms__cta-link,
  .syn-solution-cta__button,
  .wp-block-button__link,
  .search-submit
):is(:hover, :focus-visible) * {
  color: #000000 !important;
}

html[data-synapser-high-contrast] .syn-content-tabs__item {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
  color: #ffe66d !important;
}

html[data-synapser-high-contrast] .syn-content-tabs__item.is-active,
html[data-synapser-high-contrast] .syn-content-pagination .current {
  border-color: #ffe66d !important;
  background: #ffe66d !important;
  color: #000000 !important;
}

html[data-synapser-high-contrast] .syn-value__marquees {
  /* Decorative moving text competes with the readable foreground content. */
  display: none !important;
}

/* Home: keep the three-intelligences diagram fully legible. */
html[data-synapser-high-contrast] :is(
  .syn-intelligence__lines,
  .syn-intelligence__card-lines
) span {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* Home: remove the decorative offset that clipped the value-chain heading. */
html[data-synapser-high-contrast] .syn-value__content > h2 {
  position: relative !important;
  z-index: 4 !important;
  margin-bottom: 1rem !important;
  transform: none !important;
}

html[data-synapser-high-contrast] .syn-value__chart {
  margin-top: 0 !important;
}

html[data-synapser-high-contrast] .syn-draw-path {
  stroke: #ffffff !important;
  stroke-width: 5 !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

html[data-synapser-high-contrast] .syn-value-point b {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-synapser-high-contrast] .syn-value-point--final b {
  border-color: transparent !important;
  color: #ffe66d !important;
}

/* Home: strengthen photographic detail without replacing the imagery. */
html[data-synapser-high-contrast] .syn-proof-card img {
  border: 3px solid #ffffff !important;
  filter: grayscale(1) contrast(1.55) brightness(1.15) !important;
}

/* Home: make the competencies staircase visible against pure black. */
html[data-synapser-high-contrast] .syn-engagement__structure {
  opacity: 1 !important;
}

html[data-synapser-high-contrast] .syn-engagement__structure :is(path, line) {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 3 !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
}

html[data-synapser-high-contrast] .syn-engagement__structure :is(rect, circle),
html[data-synapser-high-contrast] .syn-engagement-step__column {
  border-color: #ffe66d !important;
  background: #ffe66d !important;
  fill: #ffe66d !important;
  stroke: #ffe66d !important;
  opacity: 1 !important;
}

/* CTA artwork is decorative but must remain visually perceivable. */
html[data-synapser-high-contrast] :is(
  .syn-manifesto__link,
  .syn-competencies__link,
  .syn-intelligence__manifest a,
  .syn-solutions__action a,
  .syn-button
) img {
  filter: grayscale(1) brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Preserve the real flags and strengthen their boundary instead of hiding them. */
html[data-synapser-high-contrast] .language-flag {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px #000000 !important;
  filter: contrast(1.35) saturate(1.25) !important;
  opacity: 1 !important;
}

html[data-synapser-high-contrast] .language-option {
  opacity: 1 !important;
}

html[data-synapser-high-contrast] button,
html[data-synapser-high-contrast] [role="button"],
html[data-synapser-high-contrast] input,
html[data-synapser-high-contrast] select,
html[data-synapser-high-contrast] textarea {
  border: 2px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-synapser-high-contrast] input::placeholder,
html[data-synapser-high-contrast] textarea::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-synapser-high-contrast] input[type="checkbox"],
html[data-synapser-high-contrast] input[type="radio"] {
  accent-color: #ffe66d;
}

html[data-synapser-high-contrast] button:hover,
html[data-synapser-high-contrast] [role="button"]:hover,
html[data-synapser-high-contrast] button[aria-pressed="true"] {
  border-color: #ffe66d !important;
  background: #ffe66d !important;
  color: #000000 !important;
}

html[data-synapser-high-contrast] :focus-visible {
  outline: 3px solid #ffe66d !important;
  outline-offset: 3px !important;
}

html[data-synapser-high-contrast] img,
html[data-synapser-high-contrast] video {
  background: transparent !important;
}

html[data-synapser-high-contrast] svg:not([aria-hidden="true"]) {
  fill: currentColor !important;
  stroke: currentColor !important;
}

@media (forced-colors: active) {
  .synapser-contrast-toggle {
    forced-color-adjust: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-synapser-high-contrast] *,
  html[data-synapser-high-contrast] *::before,
  html[data-synapser-high-contrast] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}