/*
 * Device theme color roles. Layout and type live in editorial.css.
 * Brand identity: primary #371693, secondary #8790c4.
 * Fixed artwork and partner marks retain their original colors.
 */

:root {
	color-scheme: light dark;
	--abacus-primary: #371693;
	--abacus-secondary: #8790c4;
	--abacus-canvas: #ffffff;
	--abacus-raised: #ffffff;
	--abacus-paper: var(--abacus-canvas);
	--abacus-surface: #f5f5f3;
	--abacus-surface-strong: #ebebe8;
	--abacus-ink: #171717;
	--abacus-muted: #636360;
	--abacus-rule: #deded9;
	--abacus-control: #80807a;
	--abacus-accent: var(--abacus-primary);
	--abacus-accent-hover: #2c1276;
	--abacus-accent-soft: #f1eef8;
	--abacus-brand: var(--abacus-accent);
	--abacus-brand-hover: var(--abacus-accent-hover);
	--abacus-soft-brand: var(--abacus-accent-soft);
	--abacus-focus: var(--abacus-accent);
	--abacus-action: #171717;
	--abacus-on-action: #ffffff;
	--abacus-action-hover: #393939;
	--abacus-error: #a52f2b;
	--abacus-error-surface: #fff3f2;
	--abacus-success: #23663b;
	--abacus-success-surface: #eef8f0;
	--abacus-selection: #dfd5f5;
	--abacus-on-selection: #241747;
	--abacus-mark-backing: #ffffff;

	--abcd-canvas: #f4fbff;
	--abcd-surface: #e9f5fc;
	--abcd-surface-strong: #dceef7;
	--abcd-raised: #ffffff;
	--abcd-ink: #101820;
	--abcd-muted: #52626d;
	--abcd-control: #73838d;
	--abcd-line: #c9e0ea;
	--abcd-blue-dark: #076d93;
	--abcd-action: #152936;
	--abcd-on-action: #ffffff;
	--abcd-action-hover: #076d93;
	--abcd-selection: #b8e4f7;
	--abcd-on-selection: #152936;
	--abcd-blue-surface: #e9f7fd;
	--abcd-violet-surface: #eef2ff;
	--abcd-mint-surface: #edfaf6;
	--abcd-sun-surface: #fff6d8;
	--abcd-mint-ink: #17694f;
	--abcd-sun-ink: #93462e;
	--abcd-nav-surface: #f4fbff;
	--abcd-soft-shadow: 0 8px 24px rgba(7, 76, 103, 0.045);
}

@media (prefers-color-scheme: dark) {
	:root {
		--abacus-canvas: #111111;
		--abacus-raised: #1b1b1b;
		--abacus-surface: #1c1c1c;
		--abacus-surface-strong: #2a2a2a;
		--abacus-ink: #f3f3f1;
		--abacus-muted: #aaa9a5;
		--abacus-rule: #393938;
		--abacus-control: #858581;
		--abacus-accent: var(--abacus-secondary);
		--abacus-accent-hover: #a5acd3;
		--abacus-accent-soft: #2b243c;
		--abacus-action: #f3f3f1;
		--abacus-on-action: #171717;
		--abacus-action-hover: #d9d9d5;
		--abacus-error: #ffa49b;
		--abacus-error-surface: #382321;
		--abacus-success: #96d4a8;
		--abacus-success-surface: #203327;
		--abacus-selection: #55416f;
		--abacus-on-selection: #ffffff;

		--abcd-canvas: #101b24;
		--abcd-surface: #172936;
		--abcd-surface-strong: #253d4b;
		--abcd-raised: #1a2c38;
		--abcd-ink: #f0f8fc;
		--abcd-muted: #b2c4cf;
		--abcd-control: #819aa9;
		--abcd-line: #38505f;
		--abcd-blue-dark: #81d5f1;
		--abcd-action: #a7e1f5;
		--abcd-on-action: #122936;
		--abcd-action-hover: #c5edfa;
		--abcd-selection: #34596d;
		--abcd-on-selection: #ffffff;
		--abcd-blue-surface: #1b3545;
		--abcd-violet-surface: #2b304b;
		--abcd-mint-surface: #203f3b;
		--abcd-sun-surface: #403a28;
		--abcd-mint-ink: #99dfc6;
		--abcd-sun-ink: #ffd69c;
		--abcd-nav-surface: #172936;
		--abcd-soft-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
}

/* Shared controls inherit ABCD roles throughout its own page and navigation. */
.page-abcd-panel,
.page-panel-abcd-login,
.page-abcdpanel,
.abacus-panel-page,
.abcd-site-header,
.abcd-footer {
	--abacus-canvas: var(--abcd-canvas);
	--abacus-paper: var(--abcd-canvas);
	--abacus-raised: var(--abcd-raised);
	--abacus-surface: var(--abcd-surface);
	--abacus-surface-strong: var(--abcd-surface-strong);
	--abacus-ink: var(--abcd-ink);
	--abacus-muted: var(--abcd-muted);
	--abacus-rule: var(--abcd-line);
	--abacus-control: var(--abcd-control);
	--abacus-accent: var(--abcd-blue-dark);
	--abacus-accent-hover: var(--abcd-blue-dark);
	--abacus-accent-soft: var(--abcd-blue-surface);
	--abacus-brand: var(--abcd-blue-dark);
	--abacus-brand-hover: var(--abcd-blue-dark);
	--abacus-soft-brand: var(--abcd-blue-surface);
	--abacus-focus: var(--abcd-blue-dark);
	--abacus-action: var(--abcd-action);
	--abacus-on-action: var(--abcd-on-action);
	--abacus-action-hover: var(--abcd-action-hover);
	--abacus-selection: var(--abcd-selection);
	--abacus-on-selection: var(--abcd-on-selection);
}

body {
	background: var(--abacus-paper);
	color: var(--abacus-ink);
}

::selection {
	background: var(--abacus-selection);
	color: var(--abacus-on-selection);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--abacus-focus);
}

.abacus-button,
.abacus-nav-button .wp-block-button__link,
.abacus-nav-link--contact,
.abacus-skip-link,
.abacus-generic-page .wp-block-post-content .wp-block-button__link {
	border-color: var(--abacus-action);
	background: var(--abacus-action);
	color: var(--abacus-on-action);
}

.abacus-button:hover,
.abacus-nav-button .wp-block-button__link:hover,
.abacus-nav-link--contact:hover,
.abacus-nav-link--contact.is-active,
.abacus-generic-page .wp-block-post-content .wp-block-button__link:hover {
	border-color: var(--abacus-action-hover);
	background: var(--abacus-action-hover);
	color: var(--abacus-on-action);
}

.abacus-button--secondary,
.abacus-nav-button-ghost .wp-block-button__link {
	border-color: transparent;
	background: var(--abacus-surface);
	color: var(--abacus-ink);
}

.abacus-button--secondary:hover,
.abacus-nav-button-ghost .wp-block-button__link:hover {
	border-color: transparent;
	background: var(--abacus-surface-strong);
	color: var(--abacus-ink);
}

.abacus-site-header:not(.abcd-site-header),
.abacus-site-nav,
.abacus-site-header.is-scrolled .abacus-site-nav,
.abacus-mobile-nav {
	background: var(--abacus-paper);
}

.abacus-mobile-nav { border-color: var(--abacus-rule); }

.abacus-nav-link:not(.abacus-nav-link--contact):hover,
.abacus-nav-link.is-active:not(.abacus-nav-link--contact),
.abacus-mobile-nav a:hover,
.abacus-mobile-nav a.is-active,
.abacus-mobile-nav-toggle:hover,
.abacus-mobile-nav-toggle[aria-expanded="true"] {
	background: var(--abacus-surface);
	color: var(--abacus-ink);
	box-shadow: none;
}

.abacus-hero-visual,
.abacus-page-hero__visual,
.abacus-services__visual,
.abacus-form-layout__form,
.abacus-contact-layout__form .abacus-form-card,
.abacus-process-line li {
	background: var(--abacus-surface);
}

.abacus-tableau-toolbar,
.abacus-tableau-frame,
.abacus-process-line,
.abacus-form-admin-note,
.abacus-form-unavailable,
.abacus-researcher-page .abacus-mode-rail--researcher li,
.abacus-researcher-page .abacus-mode-rail--researcher li::before {
	background: var(--abacus-raised);
}

.abacus-researcher-page .abacus-mode-rail--researcher li:first-child::before {
	background: var(--abacus-accent);
}

.abacus-process-line li::before {
	background: color-mix(in srgb, var(--abacus-accent) 25%, transparent);
}

.abacus-process-line li:first-child::before {
	background: var(--abacus-accent);
}

.abacus-process-line__index {
	border-color: color-mix(in srgb, var(--abacus-accent) 38%, transparent);
}

.abacus-tableau-frame--consent {
	background:
		linear-gradient(90deg, transparent 0 49.9%, color-mix(in srgb, var(--abacus-rule) 58%, transparent) 50%, transparent 50.1%),
		linear-gradient(0deg, transparent 0 49.9%, color-mix(in srgb, var(--abacus-rule) 58%, transparent) 50%, transparent 50.1%),
		var(--abacus-surface);
	background-size: 96px 96px;
}

.abacus-tableau-frame--consent::before {
	background: color-mix(in srgb, var(--abacus-raised) 96%, transparent);
}

/* The remote Tableau view keeps its own theme; its frame follows this site. */
.abacus-tableau-frame iframe {
	color-scheme: light;
	background: #ffffff;
}

.abacus-recruitment-band {
	background: var(--abacus-surface);
	color: var(--abacus-ink);
}

.abacus-recruitment-band h2 {
	color: var(--abacus-ink);
}

.abacus-recruitment-band .abacus-kicker {
	color: var(--abacus-accent);
}

.abacus-recruitment-band__aside p,
.abacus-recruitment-band__modes {
	color: var(--abacus-muted);
}

.abacus-recruitment-band::before,
.abacus-recruitment-band::after,
.abacus-recruitment-band__modes,
.abacus-recruitment-band__modes li + li {
	border-color: var(--abacus-rule);
}

.abacus-button--inverse,
.abacus-recruitment-band .abacus-button--inverse {
	border-color: var(--abacus-action);
	background: var(--abacus-action);
	color: var(--abacus-on-action);
}

.abacus-button--inverse:hover,
.abacus-recruitment-band .abacus-button--inverse:hover {
	border-color: var(--abacus-action-hover);
	background: var(--abacus-action-hover);
	color: var(--abacus-on-action);
}

.abacus-recruitment-band a:focus-visible {
	outline-color: var(--abacus-focus);
}

/* WPForms exposes color roles for its custom checkbox/radio/select controls. */
.abacus-wpforms-shell .wpforms-container-full {
	--wpforms-field-background-color: var(--abacus-raised);
	--wpforms-field-text-color: var(--abacus-ink);
	--wpforms-field-border-color: var(--abacus-control);
	--wpforms-label-color: var(--abacus-ink);
	--wpforms-label-sublabel-color: var(--abacus-muted);
	--wpforms-label-error-color: var(--abacus-error);
	--wpforms-button-background-color: var(--abacus-action);
	--wpforms-button-background-color-alt: var(--abacus-action-hover);
	--wpforms-button-border-color: var(--abacus-action);
	--wpforms-button-text-color: var(--abacus-on-action);
}

.abacus-wpforms-shell input[type="text"],
.abacus-wpforms-shell input[type="email"],
.abacus-wpforms-shell input[type="tel"],
.abacus-wpforms-shell input[type="number"],
.abacus-wpforms-shell input[type="date"],
.abacus-wpforms-shell select,
.abacus-wpforms-shell textarea {
	background: var(--abacus-raised) !important;
	color: var(--abacus-ink) !important;
	border-color: var(--abacus-control) !important;
}

.abacus-wpforms-shell select option {
	background: var(--abacus-raised);
	color: var(--abacus-ink);
}

.abacus-wpforms-shell input::placeholder,
.abacus-wpforms-shell textarea::placeholder {
	color: var(--abacus-muted) !important;
	opacity: 1 !important;
}

.abacus-wpforms-shell .wpforms-field-sublabel,
.abacus-wpforms-shell .wpforms-field-description {
	color: var(--abacus-muted) !important;
}

.abacus-wpforms-shell input:-webkit-autofill,
.abacus-wpforms-shell input:-webkit-autofill:hover,
.abacus-wpforms-shell input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--abacus-ink) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--abacus-raised) inset !important;
	caret-color: var(--abacus-ink);
}

.abacus-wpforms-shell input:focus,
.abacus-wpforms-shell select:focus,
.abacus-wpforms-shell textarea:focus {
	border-color: var(--abacus-focus) !important;
	background: var(--abacus-raised) !important;
	outline-color: var(--abacus-focus) !important;
}

.abacus-wpforms-shell--researcher .wpforms-field-radio li {
	background: var(--abacus-raised);
}

.abacus-wpforms-shell--researcher .wpforms-field-checkbox li,
.abacus-wpforms-shell--contact .wpforms-field-checkbox li {
	background: var(--abacus-accent-soft);
}

.abacus-wpforms-shell--researcher div.wpforms-container-full .wpforms-field-radio li:has(input[type="radio"]:checked) {
	border-color: var(--abacus-action) !important;
	background: var(--abacus-action) !important;
}

.abacus-wpforms-shell--researcher div.wpforms-container-full .wpforms-field-radio input[type="radio"]:checked + label.wpforms-field-label-inline {
	color: var(--abacus-on-action) !important;
}

.abacus-wpforms-shell div.wpforms-container-full button.wpforms-submit[type="submit"] {
	border-color: var(--abacus-action) !important;
	background: var(--abacus-action) !important;
	color: var(--abacus-on-action) !important;
}

.abacus-wpforms-shell div.wpforms-container-full button.wpforms-submit[type="submit"]:hover,
.abacus-wpforms-shell div.wpforms-container-full button.wpforms-submit[type="submit"]:active {
	border-color: var(--abacus-action-hover) !important;
	background: var(--abacus-action-hover) !important;
	color: var(--abacus-on-action) !important;
}

.abacus-wpforms-shell :is(input, select, textarea).wpforms-error,
.abacus-wpforms-shell :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--abacus-error) !important;
	background: var(--abacus-error-surface) !important;
}

.abacus-wpforms-shell :is(input, select, textarea).wpforms-error:focus,
.abacus-wpforms-shell :is(input, select, textarea)[aria-invalid="true"]:focus {
	border-color: var(--abacus-error) !important;
	outline-color: var(--abacus-error) !important;
}

.abacus-wpforms-shell .wpforms-confirmation-container-full {
	border-color: var(--abacus-success) !important;
	background: var(--abacus-success-surface) !important;
	color: var(--abacus-ink) !important;
}

.abacus-wpforms-shell .wpforms-error-container,
.abacus-wpforms-shell .wpforms-error-alert {
	border-color: var(--abacus-error) !important;
	background: var(--abacus-error-surface) !important;
	color: var(--abacus-error) !important;
}

.abacus-button:disabled,
.abacus-button[aria-disabled="true"],
.abacus-wpforms-shell div.wpforms-container-full button.wpforms-submit[type="submit"]:disabled {
	border-color: var(--abacus-control) !important;
	background: var(--abacus-surface-strong) !important;
	color: var(--abacus-muted) !important;
	opacity: 1;
}

/* ABCD keeps its own colored canvas, pill navigation, and soft card surfaces. */
.abcd-site-nav,
.abacus-site-header.is-scrolled .abcd-site-nav,
.abcd-mobile-nav {
	border-color: var(--abcd-line);
	background: var(--abcd-nav-surface);
	color: var(--abcd-ink);
	box-shadow: var(--abcd-soft-shadow);
}

.abcd-site-nav::before {
	background: none;
}

.abcd-site-nav__links a:not(.abcd-site-nav__return):hover,
.abcd-site-nav__links a.is-active:not(.abcd-site-nav__return),
.abcd-mobile-nav a:hover,
.abcd-mobile-nav a.is-active {
	background: var(--abcd-surface-strong);
	color: var(--abcd-blue-dark);
	box-shadow: none;
}

.abcd-site-nav__return,
.abcd-site-nav__return:hover,
.abcd-mobile-nav .abcd-site-nav__return:hover {
	border-color: var(--abcd-control);
	background: var(--abcd-raised);
	color: var(--abcd-blue-dark);
	box-shadow: none;
}

.abcd-button--secondary {
	border-color: var(--abcd-line);
	background: var(--abcd-raised);
	color: var(--abcd-ink);
}

.abcd-button--secondary:hover {
	border-color: var(--abcd-blue-dark);
	background: var(--abcd-raised);
	color: var(--abcd-blue-dark);
}

.abcd-hero__visual,
.abcd-form-layout__form,
.abcd-reward-strip__option {
	background: var(--abcd-raised);
	box-shadow: none;
}

.abcd-fact-rail > div,
.abcd-step-list li {
	background-image: none;
	box-shadow: var(--abcd-soft-shadow);
}

.abcd-fact-rail > div:nth-child(1) {
	--fact-surface: var(--abcd-blue-surface);
}

.abcd-fact-rail > div:nth-child(2) {
	--fact-surface: var(--abcd-violet-surface);
}

.abcd-fact-rail > div:nth-child(3) {
	--fact-surface: var(--abcd-sun-surface);
}

.abcd-step-list li:nth-child(1) {
	--step-accent: var(--abcd-blue-dark);
	--step-surface: var(--abcd-blue-surface);
}

.abcd-step-list li:nth-child(2) {
	--step-accent: var(--abcd-mint-ink);
	--step-surface: var(--abcd-mint-surface);
}

.abcd-step-list li:nth-child(3) {
	--step-accent: var(--abcd-sun-ink);
	--step-surface: var(--abcd-sun-surface);
}

.abcd-step-list li::before {
	background: var(--step-surface);
	border-color: color-mix(in srgb, var(--step-accent) 42%, var(--step-surface));
}

.abacus-wpforms-shell--panel .wpforms-field-checkbox li,
.abcd-reward-strip {
	background: var(--abcd-blue-surface);
	box-shadow: none;
}

.abcd-reward-strip__option img {
	background: var(--abacus-mark-backing);
}

.abcd-faq-layout .abacus-accordion,
.abcd-faq-layout .abacus-accordion-item {
	border-color: var(--abcd-line);
}

.abcd-faq-layout .abacus-accordion-content {
	color: var(--abcd-muted);
}

/* Light backings preserve the artwork of fixed logos and accreditation marks. */
@media (prefers-color-scheme: dark) {
	.abcd-site-nav__return img,
	.abacus-certification-mark img,
	.abacus-document-entry__mark,
	.abacus-footer__trust-list img,
	.abcd-footer__trust img,
	.abacus-credibility-summary img,
	.abacus-pathways__intro > img,
	.abcd-brand img,
	.abcd-hero__brand img,
	.abcd-footer__identity > img {
		border-radius: 4px;
		background: var(--abacus-mark-backing);
		box-shadow: 0 0 0 4px var(--abacus-mark-backing);
	}

	/* A neutral reversed treatment preserves the existing mark until rebranding. */
	.abacus-brand__logo {
		filter: grayscale(1) invert(1);
		mix-blend-mode: screen;
	}
}

@media (prefers-contrast: more) {
	:root {
		--abacus-rule: var(--abacus-control);
		--abcd-line: var(--abcd-control);
	}
}

@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary):focus-visible {
		outline-color: Highlight;
	}
}

/* Confirmed Abacus identity: enquiry actions and restrained detail accents. */
:root { --abacus-on-brand: #ffffff; }
@media (prefers-color-scheme: dark) {
 :root { --abacus-on-brand: #111111; }
}
.abacus-home a.abacus-button[href$="epikoinonia/"],
.abacus-site-header .abacus-nav-link--contact,
.abacus-contact-page {
 --abacus-action: var(--abacus-accent);
 --abacus-action-hover: var(--abacus-accent-hover);
 --abacus-on-action: var(--abacus-on-brand);
}
.abacus-home .abacus-kicker,
.abacus-researcher-page .abacus-kicker,
.abacus-contact-page .abacus-kicker,
.abacus-researcher-page .abacus-process-section .abacus-process-line__index,
.abacus-home .abacus-text-link > span[aria-hidden="true"],
.abacus-researcher-page .abacus-text-link > span[aria-hidden="true"] {
 color: var(--abacus-accent);
}
body:not(.page-abcd-panel) .abacus-text-link:hover,
body:not(.page-abcd-panel) .abacus-footer a:hover,
.abacus-site-header .abacus-nav-link:not(.abacus-nav-link--contact):hover,
.abacus-site-header .abacus-nav-link.is-active:not(.abacus-nav-link--contact),
.abacus-home .abacus-document-group > summary:hover,
.abacus-contact-page .abacus-brief-guide > summary:hover {
 color: var(--abacus-accent);
}
body:not(.page-abcd-panel) .abacus-wpforms-shell input[type="checkbox"],
body:not(.page-abcd-panel) .abacus-wpforms-shell input[type="radio"] {
 accent-color: var(--abacus-accent);
}

/* Compact, consistent membership row and panel chrome. */
.abacus-affiliation-link { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.abacus-footer__affiliations .abacus-esomar-logo { width: 100px; height: 44px; padding: 8px; }
.abcd-site-header { height: 76px; background: var(--abcd-canvas); border-bottom: 1px solid var(--abcd-line); }
.abcd-site-header .abcd-site-nav,
.abcd-site-header.is-scrolled .abcd-site-nav { height: 100%; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.abcd-site-header .abcd-brand img { width: 44px; height: 44px; border-radius: 6px; background: white; box-shadow: none; }
/* One white capsule keeps the full-color mark legible in both themes. */
.abcd-site-nav .abcd-site-nav__return,
.abcd-site-nav .abcd-site-nav__return:hover {
 display: inline-flex; align-items: center; justify-content: center;
 height: 44px; min-height: 44px; gap: 10px;
 padding: 8px 14px !important; border: 1px solid #dce2e8;
 border-radius: 999px; background: #fff; color: #371693;
 box-shadow: none; transform: none;
}
.abcd-site-nav .abcd-site-nav__return:hover { border-color: #8790c4; }
.abcd-site-nav .abcd-site-nav__return img {
 width: 100px; height: 28px; max-height: 28px; object-fit: contain;
 background: transparent; border-radius: 0; box-shadow: none;
}
.abcd-mobile-nav .abcd-site-nav__return { width: fit-content; margin-top: 12px; }
.abcd-footer__shell { padding-block: 40px 24px; }
.abcd-footer__identity { padding-bottom: 24px; }
.abcd-footer__identity > img { width: 52px; height: 52px; box-shadow: none; border-radius: 6px; background: white; }
.abcd-footer__shell > nav { padding-block: 24px 0; }
.abcd-footer__bottom { margin-top: 0; border-top: 0; flex-wrap: wrap; gap: 16px 24px; }
@media (max-width: 767px) { .abcd-site-header { height: 68px; } }

/* Homepage cube video, preserving the original framing. */
.abacus-hero-visual--cube {
 background: #f8f8fa;
 aspect-ratio: 16 / 9;
 overflow: hidden;
}
.abacus-hero-visual--cube video {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Blend the loop into the same canvas in each device theme. */
.abacus-hero-visual--cube {
 background: var(--abacus-canvas);
 isolation: isolate;
}
@media (prefers-color-scheme: dark) {
 .abacus-hero-visual--cube video {
  filter: invert(1) hue-rotate(180deg) contrast(1.08);
  mix-blend-mode: screen;
 }
}

.abacus-hero-visual--cube .abacus-cube-video--dark { display: none; }
@media (prefers-color-scheme: dark) {
 .abacus-hero-visual--cube .abacus-cube-video--light { display: none; }
 .abacus-hero-visual--cube .abacus-cube-video--dark { display: block; }
}
