/*
 * CTSFW 2.4.0-dark.2 - dark mode for third-party markup that renders into
 * the page with unlayered styles of its own (Formstack, Ajax Search Lite).
 *
 * The theme bundle is imported inside the "vite" cascade layer, and an
 * unlayered stylesheet beats any layered rule whatever its specificity, so
 * these rules cannot live in src/css/default/dark.css. This file is enqueued
 * on its own by includes/dark-mode.php, after plugin styles, and only when the
 * Customizer allows dark mode. It has no effect unless the root element
 * carries ctsfw-dm and the device prefers dark, or ctsfw-dm-force is present
 * (administrator preview).
 *
 * Every declaration is !important. Formstack themes, including the CTSFW
 * Formstack overrides, set colours with !important; among unlayered
 * important declarations the more specific selector wins, and every selector
 * here starts with the root gate.
 *
 * Colours come from the theme's role tokens, so they follow any later change
 * to the dark palette. Formstack forms can be kept light with the Customizer
 * option "Formstack forms in dark mode: Keep light", which adds
 * dm-forms-light to the body.
 *
 * Generated from one rule list: each rule appears twice, once per gate.
 * Edit both copies, or regenerate.
 *
 * Like dark.css, everything sits inside @supports (color: light-dark(...)):
 * a browser older than 2024 sees the light site, whole.
 *
 * 2.4.1 adds two more: inline SVG icons saved in page content with a navy
 * fill or stroke attribute (they vanished on the dark page), and the BoxCast
 * player, whose light theme paints white panels but leaves text colour to the
 * page. Formstack validation errors keep an error red rather than the accent.
 *
 * 2.4.2 brings back the block group "pattern" background, which dark.css
 * hides: the same artwork is used as a mask over the accent at 18%, so the
 * planes keep their shape and turn light blue. Desktop only, as in light mode
 * (the image is hidden below the lg breakpoint). If this file does not load,
 * dark.css still hides the image, which is the 2.4.1 look.
 *
 * 2.4.3: every selector in a list now carries the gate. Up to 2.4.2 only the
 * first one did, so the second inline SVG selector also applied in light
 * mode whenever this file was loaded.
 */

@supports (color: light-dark(#000, #fff)) {
@media screen and (prefers-color-scheme: dark) {
	/* Formstack: the form sits on the page instead of a white card */
	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsBody, .fsForm, .fsWelcomeMessage, .fsPage, .fsSection, .fsWelcomeMessage__content) {
		background-color: transparent !important;
		color: var(--color-ink) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsLabel, .fsSectionHeading, .fsOptionLabel, .fsBody label, .fsBody legend, .fsBody [class^="StyledLabelText"]) {
		color: var(--color-heading) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsSectionHeader:not([style*="background"]) {
		color: var(--color-heading) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsSupporting, .fsSupportingSubLabel, .fsBody [class^="StyledSupportingText"], .fsBody [class^="StyledSupportingText"] > span) {
		color: var(--color-muted) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsBody [class^="StyledSupportingText"] a, .fsBody [class^="StyledLabel"] a, .fsSectionText a, .fsWelcomeMessage__message a) {
		color: var(--color-accent) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsRequiredMarker, .fsValidationError) {
		color: var(--color-emphasis-red) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsValidationError {
		color: #f87171 !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsBody :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
		color-scheme: dark !important;
		background-color: var(--color-surface-raised) !important;
		color: var(--color-ink) !important;
		border-color: #8a93a8 !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsBody :is(input, textarea)::placeholder {
		color: var(--color-muted) !important;
		opacity: 1 !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsBody :is(input, select, textarea):focus {
		border-color: var(--color-accent) !important;
		outline: 2px solid var(--color-accent) !important;
		outline-offset: 1px !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsBody :is(input[type="checkbox"], input[type="radio"]) {
		color-scheme: dark !important;
		accent-color: var(--color-accent) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsSubmitButton, .fsNextButton, .fsPreviousButton, .fsSaveResumeButton, .fsWelcomeMessage__start-button, .fsSubmit button, .fsBody input[type="submit"]) {
		background: transparent !important;
		color: var(--color-heading) !important;
		border-color: var(--color-heading) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) :is(.fsSubmitButton, .fsNextButton, .fsPreviousButton, .fsSaveResumeButton, .fsWelcomeMessage__start-button, .fsSubmit button, .fsBody input[type="submit"]):is(:hover, :focus-visible) {
		background: var(--color-heading) !important;
		color: var(--color-on-heading) !important;
		border-color: var(--color-heading) !important;
	}

	:root.ctsfw-dm body:not(.dm-forms-light) .fsBody :is(.MuiIconButton-root, .fsDatePickerAdornment, .fsTimePickerAdornment) svg {
		color: var(--color-ink) !important;
		fill: currentColor !important;
	}

	/* Inline SVG icons pasted into page content with a navy fill or stroke attribute */
	:root.ctsfw-dm .prose svg:is([fill="#001846" i], [fill="#002c81" i]), :root.ctsfw-dm .prose svg :is([fill="#001846" i], [fill="#002c81" i]) {
		fill: var(--color-accent) !important;
	}

	:root.ctsfw-dm .prose svg:is([stroke="#001846" i], [stroke="#002c81" i]), :root.ctsfw-dm .prose svg :is([stroke="#001846" i], [stroke="#002c81" i]) {
		stroke: var(--color-accent) !important;
	}

	/* BoxCast player, light theme: its panels are white and its text inherits ours */
	:root.ctsfw-dm .boxcast-boxoffice.boxcast-theme-light {
		color-scheme: light !important;
		color: #333333 !important;
	}

	/* Block group "pattern" background: the planes return as the accent at 18%, drawn through the artwork as a mask */
	:root.ctsfw-dm img[src*="pattern-background"] {
		object-position: -99999px 0 !important;
		background-color: color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
		-webkit-mask-image: url("../../parts/images/pattern-background.webp") !important;
		mask-image: url("../../parts/images/pattern-background.webp") !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
	}

	@media (min-width: 64rem) {
		:root.ctsfw-dm img[src*="pattern-background"] {
			display: block !important;
		}
	}

	/* Ajax Search Lite results panel under the header search */
	:root.ctsfw-dm div.asl_r.asl_w {
		background-color: var(--color-surface-raised) !important;
	}

	:root.ctsfw-dm div.asl_r.asl_w .results .item {
		background-color: var(--color-surface-raised) !important;
		border-bottom-color: var(--color-hairline) !important;
	}

	:root.ctsfw-dm div.asl_r.asl_w .results .item:is(:hover, :focus-within) {
		background-color: var(--color-surface-alt) !important;
	}

	:root.ctsfw-dm div.asl_r.asl_w .results .item :is(h3, h3 a, .asl_res_url) {
		color: var(--color-accent) !important;
	}

	:root.ctsfw-dm div.asl_r.asl_w .results .item :is(.asl_content, .asl_desc) {
		color: var(--color-ink) !important;
	}

	:root.ctsfw-dm div.asl_r.asl_w :is(.asl_nores, .asl_nores_header, .asl_simple-circle) {
		color: var(--color-ink) !important;
	}
}

@media screen {
	/* Formstack: the form sits on the page instead of a white card */
	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsBody, .fsForm, .fsWelcomeMessage, .fsPage, .fsSection, .fsWelcomeMessage__content) {
		background-color: transparent !important;
		color: var(--color-ink) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsLabel, .fsSectionHeading, .fsOptionLabel, .fsBody label, .fsBody legend, .fsBody [class^="StyledLabelText"]) {
		color: var(--color-heading) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsSectionHeader:not([style*="background"]) {
		color: var(--color-heading) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsSupporting, .fsSupportingSubLabel, .fsBody [class^="StyledSupportingText"], .fsBody [class^="StyledSupportingText"] > span) {
		color: var(--color-muted) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsBody [class^="StyledSupportingText"] a, .fsBody [class^="StyledLabel"] a, .fsSectionText a, .fsWelcomeMessage__message a) {
		color: var(--color-accent) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsRequiredMarker, .fsValidationError) {
		color: var(--color-emphasis-red) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsValidationError {
		color: #f87171 !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsBody :is(input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
		color-scheme: dark !important;
		background-color: var(--color-surface-raised) !important;
		color: var(--color-ink) !important;
		border-color: #8a93a8 !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsBody :is(input, textarea)::placeholder {
		color: var(--color-muted) !important;
		opacity: 1 !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsBody :is(input, select, textarea):focus {
		border-color: var(--color-accent) !important;
		outline: 2px solid var(--color-accent) !important;
		outline-offset: 1px !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsBody :is(input[type="checkbox"], input[type="radio"]) {
		color-scheme: dark !important;
		accent-color: var(--color-accent) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsSubmitButton, .fsNextButton, .fsPreviousButton, .fsSaveResumeButton, .fsWelcomeMessage__start-button, .fsSubmit button, .fsBody input[type="submit"]) {
		background: transparent !important;
		color: var(--color-heading) !important;
		border-color: var(--color-heading) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) :is(.fsSubmitButton, .fsNextButton, .fsPreviousButton, .fsSaveResumeButton, .fsWelcomeMessage__start-button, .fsSubmit button, .fsBody input[type="submit"]):is(:hover, :focus-visible) {
		background: var(--color-heading) !important;
		color: var(--color-on-heading) !important;
		border-color: var(--color-heading) !important;
	}

	:root.ctsfw-dm-force body:not(.dm-forms-light) .fsBody :is(.MuiIconButton-root, .fsDatePickerAdornment, .fsTimePickerAdornment) svg {
		color: var(--color-ink) !important;
		fill: currentColor !important;
	}

	/* Inline SVG icons pasted into page content with a navy fill or stroke attribute */
	:root.ctsfw-dm-force .prose svg:is([fill="#001846" i], [fill="#002c81" i]), :root.ctsfw-dm-force .prose svg :is([fill="#001846" i], [fill="#002c81" i]) {
		fill: var(--color-accent) !important;
	}

	:root.ctsfw-dm-force .prose svg:is([stroke="#001846" i], [stroke="#002c81" i]), :root.ctsfw-dm-force .prose svg :is([stroke="#001846" i], [stroke="#002c81" i]) {
		stroke: var(--color-accent) !important;
	}

	/* BoxCast player, light theme: its panels are white and its text inherits ours */
	:root.ctsfw-dm-force .boxcast-boxoffice.boxcast-theme-light {
		color-scheme: light !important;
		color: #333333 !important;
	}

	/* Block group "pattern" background: the planes return as the accent at 18%, drawn through the artwork as a mask */
	:root.ctsfw-dm-force img[src*="pattern-background"] {
		object-position: -99999px 0 !important;
		background-color: color-mix(in srgb, var(--color-accent) 18%, transparent) !important;
		-webkit-mask-image: url("../../parts/images/pattern-background.webp") !important;
		mask-image: url("../../parts/images/pattern-background.webp") !important;
		-webkit-mask-size: 100% 100% !important;
		mask-size: 100% 100% !important;
		-webkit-mask-repeat: no-repeat !important;
		mask-repeat: no-repeat !important;
	}

	@media (min-width: 64rem) {
		:root.ctsfw-dm-force img[src*="pattern-background"] {
			display: block !important;
		}
	}

	/* Ajax Search Lite results panel under the header search */
	:root.ctsfw-dm-force div.asl_r.asl_w {
		background-color: var(--color-surface-raised) !important;
	}

	:root.ctsfw-dm-force div.asl_r.asl_w .results .item {
		background-color: var(--color-surface-raised) !important;
		border-bottom-color: var(--color-hairline) !important;
	}

	:root.ctsfw-dm-force div.asl_r.asl_w .results .item:is(:hover, :focus-within) {
		background-color: var(--color-surface-alt) !important;
	}

	:root.ctsfw-dm-force div.asl_r.asl_w .results .item :is(h3, h3 a, .asl_res_url) {
		color: var(--color-accent) !important;
	}

	:root.ctsfw-dm-force div.asl_r.asl_w .results .item :is(.asl_content, .asl_desc) {
		color: var(--color-ink) !important;
	}

	:root.ctsfw-dm-force div.asl_r.asl_w :is(.asl_nores, .asl_nores_header, .asl_simple-circle) {
		color: var(--color-ink) !important;
	}
}
}