/*
 * Fleet Trust display options (SPEC.md section 7).
 *
 * 1. The display classes, set on <html> by the head bootstrap (#ft-display-boot) from localStorage.ft_display:
 *    ft-size-1|2|3, ft-contrast, ft-underline, ft-spacing, ft-reduce-motion, ft-readable-font. They are generic
 *    (any theme): root font scaling only (no zoom, no transforms), !important so theme rules do not undo them.
 * 2. The panel UI: the floating button and <dialog id="ft-display">, themed only through the --ft-* custom
 *    properties (fallbacks are the spec defaults, which pass WCAG 2.2 AA contrast on their own).
 *
 * Opt-out for theme parts that must keep their own colours in contrast mode: class "ft-contrast-keep"
 * (or attribute data-ft-contrast-keep) on the element; it applies to its descendants too.
 */

/* ---------------------------------------------------------------------------
 * 1a. Text size: scales the root by +12.5/25/50 % of the theme's own root size, so rem-based themes (fleet-base)
 *     scale fully, also with html{font-size:62.5%}; px-based themes scale less. --ft-root-base is the theme's root
 *     size in px, measured at the end of <head> (#ft-display-boot-base) and by display-options.js; until then the
 *     browser default (100%) is the base. No zoom, no transforms.
 * ------------------------------------------------------------------------ */

html.ft-size-1 { font-size: calc(var(--ft-root-base, 100%) * 1.125) !important; }
html.ft-size-2 { font-size: calc(var(--ft-root-base, 100%) * 1.25) !important; }
html.ft-size-3 { font-size: calc(var(--ft-root-base, 100%) * 1.5) !important; }

/* Long words wrap instead of pushing the page sideways at the larger sizes. */
html:is(.ft-size-2, .ft-size-3) body { overflow-wrap: break-word; }
html:is(.ft-size-2, .ft-size-3) :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
 * 1b. Contrast: black text on white, links #0645ad underlined, buttons and fields with visible borders.
 *     Media (img, picture, video, audio, canvas, svg, iframe, object, embed) is never styled. Background images
 *     on containers stay; elements with text get a white background so the text stays readable on top of them.
 *     Empty elements (overlays, drawn shapes) keep their background. Our own UI is excluded (own palette below).
 * ------------------------------------------------------------------------ */

html.ft-contrast,
html.ft-contrast body {
	color: #000 !important;
	background-color: #fff !important;
}

/* Browsers without :has(). */
@supports not selector(:has(*)) {
	html.ft-contrast body *:where(:not(img, picture, video, audio, canvas, svg, svg *, iframe, object, embed, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
		color: #000 !important;
		-webkit-text-fill-color: currentcolor !important;
		text-shadow: none !important;
	}

	html.ft-contrast body *:where(:not(:empty, img, picture, video, audio, canvas, svg, svg *, iframe, object, embed, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
		background-color: #fff !important;
	}

	/* Icon-font elements get a white background even when empty, so a black glyph never sits on a dark badge. */
	html.ft-contrast body :is(i, [class*="icon"], [class*="fa-"], .dashicons):where(:not(svg, svg *, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
		background-color: #fff !important;
	}

	/* Links (and what is inside them). */
	html.ft-contrast body :is(a, a *):where(:not(svg, svg *, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
		color: #0645ad !important;
	}
}

/* With :has(): icon wrappers that draw an SVG (Elementor stacked or framed icons, icon badges) keep their own colours,
 * because the SVG fill was designed against that background (a white star must not land on a white circle). */
@supports selector(:has(*)) {
	html.ft-contrast body *:where(:not(img, picture, video, audio, canvas, svg, svg *, iframe, object, embed, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *, [class*="icon"]:has(> svg))) {
		color: #000 !important;
		-webkit-text-fill-color: currentcolor !important;
		text-shadow: none !important;
	}

	html.ft-contrast body *:where(:not(:empty, img, picture, video, audio, canvas, svg, svg *, iframe, object, embed, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *, [class*="icon"]:has(> svg))) {
		background-color: #fff !important;
	}

	/* Icon-font elements get a white background even when empty, so a black glyph never sits on a dark badge. */
	html.ft-contrast body :is(i, [class*="icon"], [class*="fa-"], .dashicons):where(:not(svg, svg *, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *, [class*="icon"]:has(> svg))) {
		background-color: #fff !important;
	}

	/* Links (and what is inside them). */
	html.ft-contrast body :is(a, a *):where(:not(svg, svg *, #ft-banner, #ft-banner *, #ft-prefs, #ft-prefs *, #ft-display, #ft-display *, #ft-display-button, #ft-display-button *, .ft-placeholder, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *, [class*="icon"]:has(> svg))) {
		color: #0645ad !important;
	}
}

/* Text elements: no decorative gradients or images behind the letters. */
html.ft-contrast body :is(p, h1, h2, h3, h4, h5, h6, li, dt, dd, blockquote, figcaption, caption, label, legend, th, td, a, span, strong, em, b, small, mark, cite, q, abbr, time, code, pre, sup, sub):where(:not(:empty, svg *, #ft-banner *, #ft-prefs *, #ft-display *, #ft-display-button *, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
	background-image: none !important;
}

html.ft-contrast body a:where(:not(#ft-banner *, #ft-prefs *, #ft-display *, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
	text-decoration-line: underline !important;
}

/* Buttons and button-styled links: black on white with a visible border (inset ring: no layout shift). */
html.ft-contrast body :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], .wp-element-button, .wp-block-button__link, .elementor-button, .button, .btn):where(:not(#ft-banner *, #ft-prefs *, #ft-display *, #ft-display-button, .ft-placeholder *, .ft-contrast-keep, .ft-contrast-keep *, [data-ft-contrast-keep], [data-ft-contrast-keep] *)) {
	color: #000 !important;
	background-color: #fff !important;
	background-image: none !important;
	border-color: #000 !important;
	box-shadow: inset 0 0 0 2px #000 !important;
}

html.ft-contrast body :is(button, [role="button"], .wp-element-button, .wp-block-button__link, .elementor-button, .button, .btn) *:where(:not(svg, svg *, #ft-banner *, #ft-prefs *, #ft-display *, #ft-display-button *, .ft-placeholder *, .ft-contrast-keep *, [data-ft-contrast-keep] *)) {
	color: #000 !important;
}

/* Form fields. */
html.ft-contrast body :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"], #ft-banner *, #ft-prefs *, #ft-display *, .ft-placeholder *, .ft-contrast-keep *, [data-ft-contrast-keep] *)) {
	color: #000 !important;
	background-color: #fff !important;
	background-image: none !important;
	border-color: #000 !important;
	box-shadow: inset 0 0 0 1px #000 !important;
}

html.ft-contrast body ::placeholder {
	color: #4a4a4a !important;
	-webkit-text-fill-color: #4a4a4a !important;
	opacity: 1 !important;
}

html.ft-contrast body :focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
 * 1c. Underline every link.
 * ------------------------------------------------------------------------ */

html.ft-underline a,
html.ft-underline a :where(span, strong, em, b, small, mark, bdi) {
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
}

/* ---------------------------------------------------------------------------
 * 1d. Text spacing: the WCAG 1.4.12 values. Icon fonts are left alone (letter-spacing breaks ligature icons).
 * ------------------------------------------------------------------------ */

html.ft-spacing body,
html.ft-spacing body *:where(:not(svg *, i, [class*="icon"], [class*="fa-"], .dashicons, .material-icons, .material-symbols-outlined, .material-symbols-rounded)) {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

html.ft-spacing body p {
	margin-bottom: 2em !important;
}

/* ---------------------------------------------------------------------------
 * 1e. Reduce motion.
 * ------------------------------------------------------------------------ */

html.ft-reduce-motion,
html.ft-reduce-motion *,
html.ft-reduce-motion *::before,
html.ft-reduce-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0s !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------------------
 * 1f. Readable font: a system font for text; icon fonts and code keep theirs.
 * ------------------------------------------------------------------------ */

html.ft-readable-font body,
html.ft-readable-font body *:where(:not(svg *, i, [class*="icon"], [class*="fa-"], .dashicons, .genericon, .material-icons, .material-symbols-outlined, .material-symbols-rounded, code, pre, kbd, samp, code *, pre *)) {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* ---------------------------------------------------------------------------
 * 2. Panel UI. Scoped by id, so theme and page-builder rules for button, input, dialog and :focus-visible
 *    (often class-qualified) do not restyle it.
 * ------------------------------------------------------------------------ */

#ft-display,
#ft-display-button {
	--ftd-bg: var(--ft-bg, #fff);
	--ftd-fg: var(--ft-fg, #1f2328);
	--ftd-muted: var(--ft-muted, #57606a);
	--ftd-accent: var(--ft-accent, #0b57d0);
	--ftd-accent-fg: var(--ft-accent-fg, #fff);
	--ftd-border: var(--ft-border, #d0d7de);
	--ftd-radius: var(--ft-radius, 12px);
}

html.ft-contrast #ft-display,
html.ft-contrast #ft-display-button {
	--ftd-bg: #fff;
	--ftd-fg: #000;
	--ftd-muted: #000;
	--ftd-accent: #000;
	--ftd-accent-fg: #fff;
	--ftd-border: #000;
}

.ft-display-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Floating button: 44 x 44, bottom corner, lifted above the consent banner (--ft-banner-h, set by consent.js) and
 * above the GPC toast when that is on the same side (--ftd-lift, computed by display-options.js from --ft-toast-h
 * and --ft-toast-side). The script also moves it to the other corner while it would cover the focused element
 * (WCAG 2.4.11) and takes it out of the page while it would cover the footer (2.5.8; the footer has the Display
 * options link) or while a very tall banner leaves no room. */
#ft-display-button {
	position: fixed;
	z-index: var(--ft-z, 2147483000);
	top: auto;
	bottom: calc(16px + var(--ftd-lift, var(--ft-banner-h, 0px)));
	left: 16px;
	right: auto;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid var(--ftd-accent-fg);
	border-radius: 50%;
	background: var(--ftd-accent);
	color: var(--ftd-accent-fg);
	box-shadow: var(--ft-shadow, 0 8px 30px rgb(0 0 0 / 0.18));
	font: inherit;
	line-height: 1;
	text-transform: none;
	opacity: 1;
	cursor: pointer;
}

#ft-display-button[hidden] {
	display: none !important;
}

#ft-display-button.ft-display-button--right,
#ft-display-button.ft-display-button--left.ft-display-button--swap {
	left: auto;
	right: 16px;
}

#ft-display-button.ft-display-button--right.ft-display-button--swap {
	left: 16px;
	right: auto;
}


#ft-display-button svg {
	display: block;
	width: 24px;
	height: 24px;
	flex: none;
	pointer-events: none;
}

#ft-display-button:hover {
	background: var(--ftd-fg);
	color: var(--ftd-bg);
}

/* White gap + dark ring: visible on light and dark pages alike. */
#ft-display-button:focus-visible {
	outline: 3px solid var(--ftd-fg);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ftd-bg);
}

/* Room at the end of the page for the floating button (shown with it by display-options.js). */
#ft-display-spacer {
	display: block;
	flex: none;
	clear: both;
	width: 100%;
	height: 76px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

#ft-display-spacer[hidden] {
	display: none;
}

/* Dialog. Inherits the site font; text scales with the site but never below 16px. */
#ft-display {
	box-sizing: border-box;
	width: min(28em, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--ftd-border);
	border-radius: var(--ftd-radius);
	background: var(--ftd-bg);
	color: var(--ftd-fg);
	box-shadow: var(--ft-shadow, 0 8px 30px rgb(0 0 0 / 0.18));
	font-family: inherit;
	font-size: max(16px, 1rem);
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
}

/* Browsers without <dialog> support would otherwise show it inline. */
#ft-display:not([open]) {
	display: none;
}

#ft-display::backdrop {
	background: rgb(0 0 0 / 0.45);
}

/* Fallback for browsers without showModal() (Safari < 15.4). */
#ft-display.ft-display--fallback {
	position: fixed;
	inset: 0;
	z-index: var(--ft-z, 2147483000);
}

#ft-display *,
#ft-display *::before,
#ft-display *::after {
	box-sizing: border-box;
}

#ft-display .ft-display-box {
	padding: 1em 1.25em 1.25em;
}

#ft-display .ft-display-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	margin: 0 0 0.75em;
}

#ft-display .ft-display-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

#ft-display .ft-display-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: -6px -10px -6px 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--ftd-fg);
	box-shadow: none;
	cursor: pointer;
}

#ft-display .ft-display-x svg {
	display: block;
	pointer-events: none;
}

#ft-display .ft-display-x:hover {
	border-color: var(--ftd-muted);
}

#ft-display .ft-display-sizes {
	min-width: 0;
	margin: 0 0 1em;
	padding: 0;
	border: 0;
}

#ft-display .ft-display-legend {
	float: none;
	width: auto;
	margin: 0 0 0.5em;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: 1em;
	font-weight: 600;
}

#ft-display .ft-display-size-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

#ft-display .ft-display-size {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 44px;
	margin: 0;
	padding: 0.25em 0.9em 0.25em 0.75em;
	border: 1px solid var(--ftd-muted);
	border-radius: 999px;
	background: var(--ftd-bg);
	color: var(--ftd-fg);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
}

#ft-display .ft-display-size:has(input:checked) {
	border-color: var(--ftd-accent);
	box-shadow: inset 0 0 0 1px var(--ftd-accent);
	font-weight: 600;
}

#ft-display .ft-display-size input {
	-webkit-appearance: radio;
	appearance: auto;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	min-width: 18px;
	min-height: 18px;
	margin: 0;
	padding: 0;
	accent-color: var(--ftd-accent);
	cursor: pointer;
}

#ft-display .ft-display-options {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

#ft-display .ft-display-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0;
	padding: 0.6em 0;
	border-top: 1px solid var(--ftd-border);
	list-style: none;
}

#ft-display .ft-display-option::before,
#ft-display .ft-display-option::marker {
	content: none;
}

#ft-display .ft-display-option-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#ft-display .ft-display-option-label {
	margin: 0;
	color: inherit;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
}

#ft-display .ft-display-hint {
	color: var(--ftd-muted);
	font-size: 0.875em;
	line-height: 1.4;
}

/* Switch: a native checkbox with role="switch", drawn without pseudo-elements (works in every engine). */
#ft-display .ft-display-switch {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	box-sizing: border-box;
	width: 3.25em;
	height: 1.85em;
	min-width: 48px;
	min-height: 28px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--ftd-muted);
	border-radius: 999px;
	background-color: var(--ftd-bg);
	background-image: radial-gradient(circle closest-side, var(--ftd-muted) 0 calc(100% - 1.5px), transparent 100%);
	background-repeat: no-repeat;
	background-size: calc(1.85em - 8px) calc(1.85em - 8px);
	background-position: left 2px center;
	box-shadow: none;
	cursor: pointer;
	transition: background-position 0.15s ease;
}

#ft-display .ft-display-switch:checked {
	border-color: var(--ftd-accent);
	background-color: var(--ftd-accent);
	background-image: radial-gradient(circle closest-side, var(--ftd-accent-fg) 0 calc(100% - 1.5px), transparent 100%);
	background-position: right 2px center;
}

#ft-display .ft-display-note {
	margin: 0 0 0.75em;
	color: var(--ftd-muted);
	font-size: 0.875em;
}

#ft-display .ft-display-statement {
	margin: 0 0 0.75em;
}

#ft-display a {
	color: var(--ftd-accent);
	text-decoration: underline;
}

#ft-display a:hover {
	text-decoration-thickness: 2px;
}

#ft-display .ft-display-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5em;
	margin-top: 1em;
}

#ft-display .ft-display-btn {
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0.4em 1.1em;
	border: 2px solid var(--ftd-accent);
	border-radius: calc(var(--ftd-radius) / 1.5);
	background: var(--ftd-bg);
	color: var(--ftd-accent);
	box-shadow: none;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}

#ft-display .ft-display-btn--primary {
	background: var(--ftd-accent);
	color: var(--ftd-accent-fg);
}

#ft-display .ft-display-btn:hover {
	text-decoration: underline;
}

#ft-display :focus-visible {
	outline: 3px solid var(--ftd-accent);
	outline-offset: 2px;
}

/* Footer link (block, shortcode or fallback paragraph). */
.ft-display-link {
	cursor: pointer;
}

.ft-footer-links--display {
	margin: 0;
	padding: 1rem 16px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	#ft-display .ft-display-switch {
		transition: none;
	}
}

@media (forced-colors: active) {
	#ft-display .ft-display-switch {
		-webkit-appearance: auto;
		appearance: auto;
		width: auto;
		height: auto;
		min-width: 24px;
		min-height: 24px;
		border: 0;
		background: none;
	}

	#ft-display-button {
		border-color: ButtonText;
	}
}

@media print {
	#ft-display-button,
	#ft-display {
		display: none !important;
	}
}