/* =========================================================================
 * WP PowerSuite — Accessibility Widget (frontend)
 *
 * Architecture notes:
 * - All page-level visual filters compose into a single custom property
 *   (--wpps-a11y-filter) applied once to the root element (<html>). A filter
 *   on the document root does NOT create a containing block for
 *   fixed-position descendants (Filter Effects spec exception), so sticky
 *   headers, cookie banners, and chat widgets keep working while active.
 * - The widget UI, reading guide, skip link, and SVG filter defs are moved by
 *   JS to be children of <html> (outside <body>), so body-level contrast
 *   classes never tint the widget itself.
 * - All icons are bundled inline SVGs (no icon font, no CDN, no external
 *   requests).
 * ========================================================================= */

:root {
	--wpps-a11y-btn-color: #2271b1;
	--wpps-a11y-btn-size: 56px;
	--wpps-a11y-offset: 20px;
	--wpps-a11y-panel-width: min(400px, calc(100vw - 24px));
	--wpps-a11y-z: 2147482000;
	--wpps-a11y-radius: 14px;
	/* Readable text/icon color on top of the accent (overridden inline in PHP
	   based on the accent's luminance). */
	--wpps-a11y-on-accent: #fff;
	/* Tints/shadows derived from the accent so a custom color (e.g. black)
	   applies everywhere instead of leaving hardcoded blues behind. The soft
	   tint is intentionally light so hover states never look heavy/dark. */
	--wpps-a11y-soft: color-mix(in srgb, var(--wpps-a11y-btn-color) 7%, #fff);
	--wpps-a11y-shadow: color-mix(in srgb, var(--wpps-a11y-btn-color) 28%, transparent);
	--wpps-a11y-guide: color-mix(in srgb, var(--wpps-a11y-btn-color) 14%, transparent);
	--wpps-a11y-guide-border: color-mix(in srgb, var(--wpps-a11y-btn-color) 55%, transparent);
}

/* Single composed filter for the whole page, on the root element. `none`
   keeps the default so no stacking context is created while inactive, and the
   root-element exception keeps position: fixed working while active. */
html {
	filter: var(--wpps-a11y-filter, none);
}

/* -------------------------------------------------------------------------
 * Widget shell
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget {
	position: fixed;
	z-index: var(--wpps-a11y-z);
	font-size: 16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	line-height: 1.4;
}

.wpps-a11y-widget *,
.wpps-a11y-widget *::before,
.wpps-a11y-widget *::after {
	box-sizing: border-box;
}

/* Anchor positions. Horizontal spacing: --wpps-a11y-offset; vertical spacing:
   --wpps-a11y-offset-y (falls back to the horizontal value). */
.wpps-a11y-widget--pos-bottom-right { inset-block-end: var(--wpps-a11y-offset-y, var(--wpps-a11y-offset)); inset-inline-end: var(--wpps-a11y-offset); }
.wpps-a11y-widget--pos-bottom-left { inset-block-end: var(--wpps-a11y-offset-y, var(--wpps-a11y-offset)); inset-inline-start: var(--wpps-a11y-offset); }
.wpps-a11y-widget--pos-top-right { inset-block-start: calc(var(--wpps-a11y-offset-y, var(--wpps-a11y-offset)) + var(--wp-admin--admin-bar--height, 0px)); inset-inline-end: var(--wpps-a11y-offset); }
.wpps-a11y-widget--pos-top-left { inset-block-start: calc(var(--wpps-a11y-offset-y, var(--wpps-a11y-offset)) + var(--wp-admin--admin-bar--height, 0px)); inset-inline-start: var(--wpps-a11y-offset); }
/* Vertically centered anchors. */
.wpps-a11y-widget--pos-middle-right { inset-block-start: 50%; inset-inline-end: var(--wpps-a11y-offset); transform: translateY(-50%); }
.wpps-a11y-widget--pos-middle-left { inset-block-start: 50%; inset-inline-start: var(--wpps-a11y-offset); transform: translateY(-50%); }

.wpps-a11y-widget--size-small { --wpps-a11y-btn-size: 48px; }
.wpps-a11y-widget--size-medium { --wpps-a11y-btn-size: 56px; }
.wpps-a11y-widget--size-large { --wpps-a11y-btn-size: 64px; }

/* -------------------------------------------------------------------------
 * Trigger button
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wpps-a11y-btn-size);
	height: var(--wpps-a11y-btn-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wpps-a11y-btn-color);
	color: var(--wpps-a11y-on-accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.wpps-a11y-widget__trigger:hover,
.wpps-a11y-widget__trigger:focus-visible {
	/* Re-declare background so a theme's generic `button:hover` (often blue)
	   can never override the chosen accent color. */
	background: var(--wpps-a11y-btn-color);
	color: var(--wpps-a11y-on-accent);
	transform: scale(1.06);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
	filter: brightness(0.92);
}

/* Two-tone focus ring stays visible on any page background. The transparent
   outline is repainted by Windows forced-colors mode, where box-shadow is
   removed. */
.wpps-a11y-widget__trigger:focus-visible {
	outline: 3px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1d2327;
}

.wpps-a11y-widget__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--wpps-a11y-icon-color, var(--wpps-a11y-on-accent));
	font-size: calc(var(--wpps-a11y-btn-size) * var(--wpps-a11y-icon-scale, 0.5));
}

/* Bundled inline SVG icons: sized by the surrounding font-size (1em). */
.wpps-a11y-widget svg.wpps-a11y-ico {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: -0.125em;
}

/* -------------------------------------------------------------------------
 * Panel
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget__panel {
	position: absolute;
	inset-block-end: calc(var(--wpps-a11y-btn-size) + 14px);
	inset-inline-end: 0;
	width: var(--wpps-a11y-panel-width);
	max-height: min(78vh, 640px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: #1d2327;
	border-radius: var(--wpps-a11y-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.wpps-a11y-widget__panel[hidden] { display: none; }

.wpps-a11y-widget__panel.is-animating-in {
	opacity: 0;
	transform: translateY(10px) scale(0.98);
}

.wpps-a11y-widget--pos-bottom-left .wpps-a11y-widget__panel,
.wpps-a11y-widget--pos-middle-left .wpps-a11y-widget__panel,
.wpps-a11y-widget--pos-top-left .wpps-a11y-widget__panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
}

.wpps-a11y-widget--pos-top-right .wpps-a11y-widget__panel,
.wpps-a11y-widget--pos-top-left .wpps-a11y-widget__panel {
	inset-block-end: auto;
	inset-block-start: calc(var(--wpps-a11y-btn-size) + 14px);
}

/* JS sets is-open-up / is-open-down on open (and on resize) so the panel
   always expands toward the larger half of the viewport. These outrank the
   static per-position defaults above. */
.wpps-a11y-widget.is-open-up .wpps-a11y-widget__panel { inset-block-end: calc(var(--wpps-a11y-btn-size) + 14px); inset-block-start: auto; }
.wpps-a11y-widget.is-open-down .wpps-a11y-widget__panel { inset-block-start: calc(var(--wpps-a11y-btn-size) + 14px); inset-block-end: auto; }

/* Oversized widget: larger panel and controls. */
.wpps-a11y-widget.is-oversized { --wpps-a11y-panel-width: min(460px, calc(100vw - 24px)); }
.wpps-a11y-widget.is-oversized .wpps-a11y-widget__panel { font-size: 1.12em; }

.wpps-a11y-widget__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--wpps-a11y-btn-color);
	color: var(--wpps-a11y-on-accent);
}

.wpps-a11y-widget__panel-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--wpps-a11y-on-accent);
}

.wpps-a11y-widget__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--wpps-a11y-on-accent) 22%, transparent);
	color: var(--wpps-a11y-on-accent);
	width: 34px;
	height: 34px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 16px;
	transition: background 0.15s ease;
}

.wpps-a11y-widget__close:hover { background: color-mix(in srgb, var(--wpps-a11y-on-accent) 38%, transparent); }
.wpps-a11y-widget__close:focus-visible { outline: 2px solid var(--wpps-a11y-on-accent); outline-offset: 2px; }

.wpps-a11y-widget__panel-body {
	padding: 14px;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1 1 auto;
}

.wpps-a11y-widget__group-title {
	margin: 0 0 10px;
	font-size: 0.82em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #646970;
}

/* -------------------------------------------------------------------------
 * Accessibility profiles
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget__profiles {
	margin-bottom: 16px;
	border: 1px solid #d5d8dc;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.wpps-a11y-widget__profiles-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	color: #1d2327;
	user-select: none;
}

.wpps-a11y-widget__profiles-summary::-webkit-details-marker { display: none; }
.wpps-a11y-widget__profiles-summary::marker { content: ""; }
.wpps-a11y-widget__profiles-summary:hover { background: #f0f0f1; }
.wpps-a11y-widget__profiles-summary:focus-visible { outline: 2px solid var(--wpps-a11y-btn-color); outline-offset: -2px; }

.wpps-a11y-widget__profiles-head-icon { flex: 0 0 auto; display: inline-flex; color: var(--wpps-a11y-btn-color); font-size: 18px; }
.wpps-a11y-widget__profiles-title { flex: 1 1 auto; font-size: 0.95em; }
.wpps-a11y-widget__profiles-chevron { flex: 0 0 auto; display: inline-flex; color: #50575e; font-size: 14px; transition: transform 0.2s ease; }
.wpps-a11y-widget__profiles[open] .wpps-a11y-widget__profiles-chevron { transform: rotate(180deg); }

.wpps-a11y-widget__profiles-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid #ededf0;
}

.wpps-a11y-profile {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 11px 10px;
	border: 1.5px solid #d5d8dc;
	border-radius: 10px;
	background: #fff;
	color: #1d2327;
	font-family: inherit;
	font-size: 0.84em;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.wpps-a11y-profile:hover { border-color: var(--wpps-a11y-btn-color); background: var(--wpps-a11y-soft); color: #1d2327; }
.wpps-a11y-profile:focus-visible { outline: 2px solid var(--wpps-a11y-btn-color); outline-offset: 2px; }
.wpps-a11y-profile__label { color: inherit; }

.wpps-a11y-profile__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--wpps-a11y-soft);
	color: var(--wpps-a11y-btn-color);
}

.wpps-a11y-profile__icon { font-size: 15px; }
.wpps-a11y-profile__label { flex: 1 1 auto; line-height: 1.25; }

/* Active profile: solid accent fill with white text for strong contrast. */
.wpps-a11y-profile[aria-pressed="true"] {
	border-color: var(--wpps-a11y-btn-color);
	background: var(--wpps-a11y-btn-color);
	color: var(--wpps-a11y-on-accent);
}

.wpps-a11y-profile[aria-pressed="true"] .wpps-a11y-profile__icon {
	background: color-mix(in srgb, var(--wpps-a11y-on-accent) 22%, transparent);
	color: var(--wpps-a11y-on-accent);
}

/* -------------------------------------------------------------------------
 * Oversized-widget row
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget__oversize-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 16px;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	background: #fff;
}

.wpps-a11y-widget__oversize-icon {
	display: inline-flex;
	color: var(--wpps-a11y-btn-color);
	font-size: 17px;
}

.wpps-a11y-widget__oversize-label { flex: 1 1 auto; font-weight: 600; font-size: 0.92em; }

.wpps-a11y-widget__oversize-toggle {
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #8c8f94;
	position: relative;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wpps-a11y-widget__oversize-knob {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: inset-inline-start 0.15s ease;
}

.wpps-a11y-widget__oversize-toggle[aria-checked="true"] { background: var(--wpps-a11y-btn-color); }
.wpps-a11y-widget__oversize-toggle[aria-checked="true"] .wpps-a11y-widget__oversize-knob { inset-inline-start: 22px; }
.wpps-a11y-widget__oversize-toggle:focus-visible { outline: 2px solid var(--wpps-a11y-btn-color); outline-offset: 2px; }

/* Re-declare hover backgrounds so a theme's generic `button:hover` (often a
   blue) never tints the switch track. */
.wpps-a11y-widget__oversize-toggle:hover { background: #8c8f94; }
.wpps-a11y-widget__oversize-toggle[aria-checked="true"]:hover { background: var(--wpps-a11y-btn-color); filter: brightness(0.95); }

/* -------------------------------------------------------------------------
 * Feature card grid
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.wpps-a11y-widget--layout-list .wpps-a11y-widget__grid { grid-template-columns: repeat(2, 1fr); }

.wpps-a11y-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 92px;
	padding: 14px 8px 10px;
	border: 1.5px solid #d5d8dc;
	border-radius: 12px;
	background: #fff;
	color: #1d2327;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.wpps-a11y-card:hover {
	border-color: var(--wpps-a11y-btn-color);
	background: var(--wpps-a11y-soft);
	box-shadow: 0 2px 8px var(--wpps-a11y-shadow);
}

.wpps-a11y-card:focus-visible { outline: 2px solid var(--wpps-a11y-btn-color); outline-offset: 2px; }

.wpps-a11y-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wpps-a11y-btn-color);
	font-size: 22px;
	line-height: 1;
}

.wpps-a11y-card__label {
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.25;
	color: #1d2327;
}

/* Active state: solid accent fill + white content for strong contrast. */
.wpps-a11y-card[aria-pressed="true"] {
	border-color: var(--wpps-a11y-btn-color);
	background: var(--wpps-a11y-btn-color);
	box-shadow: 0 2px 10px var(--wpps-a11y-shadow);
}

.wpps-a11y-card[aria-pressed="true"] .wpps-a11y-card__icon,
.wpps-a11y-card[aria-pressed="true"] .wpps-a11y-card__label {
	color: var(--wpps-a11y-on-accent);
}

.wpps-a11y-card__check {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--wpps-a11y-on-accent);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.12s ease, transform 0.12s ease;
}

.wpps-a11y-card__check::after {
	content: "";
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 6px;
	width: 4px;
	height: 8px;
	border: solid var(--wpps-a11y-btn-color);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wpps-a11y-card[aria-pressed="true"] .wpps-a11y-card__check { opacity: 1; transform: scale(1); }

/* Level dots (e.g. Bigger Text) */
.wpps-a11y-card__levels {
	display: inline-flex;
	gap: 4px;
	margin-top: 2px;
}

.wpps-a11y-card__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #a7aaae;
	transition: background 0.12s ease;
}

.wpps-a11y-card__dot.is-on { background: var(--wpps-a11y-btn-color); }
.wpps-a11y-card[aria-pressed="true"] .wpps-a11y-card__dot { background: rgba(255, 255, 255, 0.45); }
.wpps-a11y-card[aria-pressed="true"] .wpps-a11y-card__dot.is-on { background: #fff; }

/* -------------------------------------------------------------------------
 * Panel footer
 * ---------------------------------------------------------------------- */

.wpps-a11y-widget__panel-footer {
	flex: 0 0 auto;
	padding: 12px 14px;
	border-top: 1px solid #f0f0f1;
	background: #fafafa;
}

.wpps-a11y-widget__statement-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wpps-a11y-btn-color);
	font-family: inherit;
	font-size: 0.86em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.wpps-a11y-widget__statement-link:hover,
.wpps-a11y-widget__statement-link:focus { background: none; color: var(--wpps-a11y-btn-color); text-decoration: underline; }
.wpps-a11y-widget__statement-link:focus-visible { outline: 2px solid var(--wpps-a11y-btn-color); outline-offset: 2px; }

/* Inline accessibility-statement modal (text mode) */
.wpps-a11y-widget__statement-modal {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(0, 0, 0, 0.45);
}

.wpps-a11y-widget__statement-modal[hidden] { display: none; }

.wpps-a11y-widget__statement-modal-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 100%;
	background: #fff;
	color: #1d2327;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.wpps-a11y-widget__statement-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: var(--wpps-a11y-btn-color);
	color: var(--wpps-a11y-on-accent);
}

.wpps-a11y-widget__statement-modal-title { font-weight: 700; font-size: 0.95em; }

.wpps-a11y-widget__statement-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wpps-a11y-on-accent) 22%, transparent);
	color: var(--wpps-a11y-on-accent);
	font-size: 15px;
	cursor: pointer;
}

.wpps-a11y-widget__statement-close:hover { background: color-mix(in srgb, var(--wpps-a11y-on-accent) 38%, transparent); }
.wpps-a11y-widget__statement-close:focus-visible { outline: 2px solid var(--wpps-a11y-on-accent); outline-offset: 2px; }

.wpps-a11y-widget__statement-modal-body {
	padding: 14px;
	overflow-y: auto;
	font-size: 0.88em;
	line-height: 1.6;
}

.wpps-a11y-widget__statement-modal-body p { margin: 0 0 10px; }
.wpps-a11y-widget__statement-modal-body p:last-child { margin-bottom: 0; }
.wpps-a11y-widget__statement-modal-body a { color: var(--wpps-a11y-btn-color); }

.wpps-a11y-widget__reset-all {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 11px 12px;
	border: 0;
	border-radius: 8px;
	background: var(--wpps-a11y-btn-color);
	color: var(--wpps-a11y-on-accent);
	font-size: 0.9em;
	font-family: inherit;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.wpps-a11y-widget__reset-all:hover,
.wpps-a11y-widget__reset-all:focus { background: var(--wpps-a11y-btn-color); color: var(--wpps-a11y-on-accent); filter: brightness(0.92); }
.wpps-a11y-widget__reset-all:focus-visible { outline: 2px solid var(--wpps-a11y-btn-color); outline-offset: 2px; }

.wpps-a11y-widget__disclaimer {
	margin: 0;
	font-size: 0.72em;
	line-height: 1.5;
	color: #787c82;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	:root {
		--wpps-a11y-offset: 12px;
		--wpps-a11y-panel-width: calc(100vw - 24px);
	}

	.wpps-a11y-widget--hide-mobile { display: none !important; }
	.wpps-a11y-widget__panel { max-height: 82vh; }
	.wpps-a11y-widget.is-oversized { --wpps-a11y-panel-width: calc(100vw - 24px); }
}

/* -------------------------------------------------------------------------
 * Overlay helpers (relocated outside <body> by JS)
 * ---------------------------------------------------------------------- */

.wpps-a11y-skip-link {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: calc(var(--wpps-a11y-z) + 2);
	padding: 10px 14px;
	background: #1d2327;
	color: #fff;
	font-family: system-ui, sans-serif;
	border-radius: 6px;
	transform: translateY(-200%);
	transition: transform 0.15s ease;
}

.wpps-a11y-skip-link:focus {
	transform: translateY(0);
	outline: 3px solid var(--wpps-a11y-btn-color);
	outline-offset: 2px;
}

.wpps-a11y-reading-guide {
	position: fixed;
	inset-inline: 0;
	height: 38px;
	margin-top: -19px;
	background: var(--wpps-a11y-guide);
	border-block: 2px solid var(--wpps-a11y-guide-border);
	pointer-events: none;
	z-index: calc(var(--wpps-a11y-z) - 1);
}

.wpps-a11y-reading-mask {
	position: fixed;
	inset-inline: 0;
	height: 120px;
	margin-top: -60px;
	background: transparent;
	box-shadow: 0 0 0 100vh rgba(0, 0, 0, 0.55);
	pointer-events: none;
	z-index: calc(var(--wpps-a11y-z) - 1);
}

.wpps-a11y-tooltip {
	position: fixed;
	display: none;
	max-width: 280px;
	padding: 6px 10px;
	background: #1d2327;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	z-index: calc(var(--wpps-a11y-z) + 1);
}

.wpps-a11y-structure-panel {
	margin-top: 8px;
	padding: 8px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	background: #fff;
	max-height: 200px;
	overflow: auto;
}

.wpps-a11y-structure-panel ul {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.wpps-a11y-structure-link {
	display: block;
	width: 100%;
	padding: 4px 6px;
	border: 0;
	background: transparent;
	color: var(--wpps-a11y-btn-color);
	font: inherit;
	font-size: 0.86em;
	text-align: start;
	text-decoration: underline;
	cursor: pointer;
}

.wpps-a11y-structure-link:hover {
	background: var(--wpps-a11y-soft);
}

/* Screen-reader-only live region (in case the theme lacks the WP utility). */
.wpps-a11y-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * Page-level effect classes (applied to <body> / <html> by JS)
 * ========================================================================= */

/* Text scaling: the main script applies measured per-element sizes (works on
   px-based themes too); these root classes only serve the pre-paint bootstrap
   so rem/em themes render close to the saved size before JS finishes. */
html.wpps-a11y-text-scale-1 { font-size: 112%; }
html.wpps-a11y-text-scale-2 { font-size: 124%; }
html.wpps-a11y-text-scale-3 { font-size: 136%; }
html.wpps-a11y-text-scale-4 { font-size: 148%; }
html.wpps-a11y-text-scale-5 { font-size: 160%; }

/* Stepped line height (3 levels). */
body.wpps-a11y-line-height-1, body.wpps-a11y-line-height-1 * { line-height: 1.5 !important; }
body.wpps-a11y-line-height-2, body.wpps-a11y-line-height-2 * { line-height: 1.8 !important; }
body.wpps-a11y-line-height-3, body.wpps-a11y-line-height-3 * { line-height: 2.2 !important; }

/* Stepped letter spacing (3 levels). */
body.wpps-a11y-letter-spacing-1, body.wpps-a11y-letter-spacing-1 * { letter-spacing: 0.05em !important; }
body.wpps-a11y-letter-spacing-2, body.wpps-a11y-letter-spacing-2 * { letter-spacing: 0.1em !important; }
body.wpps-a11y-letter-spacing-3, body.wpps-a11y-letter-spacing-3 * { letter-spacing: 0.16em !important; }

/* Stepped word spacing (3 levels). */
body.wpps-a11y-word-spacing-1, body.wpps-a11y-word-spacing-1 * { word-spacing: 0.1em !important; }
body.wpps-a11y-word-spacing-2, body.wpps-a11y-word-spacing-2 * { word-spacing: 0.2em !important; }
body.wpps-a11y-word-spacing-3, body.wpps-a11y-word-spacing-3 * { word-spacing: 0.32em !important; }

body.wpps-a11y-readable-font,
body.wpps-a11y-readable-font * {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif !important;
}

body.wpps-a11y-dyslexia-font,
body.wpps-a11y-dyslexia-font * {
	font-family: "Comic Sans MS", "Trebuchet MS", Verdana, Geneva, Tahoma, sans-serif !important;
	letter-spacing: 0.05em !important;
	word-spacing: 0.12em !important;
}

/* "Align text" removes centered/justified text. `start` (not `left`) keeps
   RTL languages (Arabic, Hebrew, Urdu) aligned to their natural edge. */
body.wpps-a11y-text-align-left,
body.wpps-a11y-text-align-left p,
body.wpps-a11y-text-align-left li,
body.wpps-a11y-text-align-left td {
	text-align: start !important;
}

/* Links / headings emphasis. */
body.wpps-a11y-highlight-links a {
	background: #fff3bf !important;
	outline: 2px solid #e67700 !important;
	color: #1d2327 !important;
}

body.wpps-a11y-highlight-headings :is(h1, h2, h3, h4, h5, h6) {
	background: #e7f5ff !important;
	outline: 2px solid #1c7ed6 !important;
}

body.wpps-a11y-underline-links a {
	text-decoration: underline !important;
	text-underline-offset: 0.15em !important;
}

/* Hide images: keep each image's box (no layout shift) but hide the pixels
   and remove it from the accessibility tree. Elements that only *carry* an
   inline background image lose the background, not their content — a hero
   section keeps its text and buttons. */
body.wpps-a11y-hide-images :is(img, picture) {
	visibility: hidden !important;
	opacity: 0 !important;
}

body.wpps-a11y-hide-images [style*="background-image"] {
	background-image: none !important;
}

/* Cursors. */
body.wpps-a11y-large-cursor,
body.wpps-a11y-large-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M4 4l8 24 4-10 10-4z'/%3E%3C/svg%3E") 4 4, auto !important;
}

body.wpps-a11y-big-black-cursor,
body.wpps-a11y-big-black-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M7 7l12 34 6-15 15-6z'/%3E%3C/svg%3E") 7 7, auto !important;
}

/* Pause animations / reduce motion. */
body.wpps-a11y-pause-animations *,
body.wpps-a11y-pause-animations *::before,
body.wpps-a11y-pause-animations *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* Enhanced focus outlines. */
body.wpps-a11y-focus-outlines :focus-visible,
body.wpps-a11y-focus-outlines :focus {
	outline: 3px solid #ff8800 !important;
	outline-offset: 3px !important;
}

/* Simplified layout: hide complementary/decorative regions. Navigation
   landmarks are deliberately preserved. */
body.wpps-a11y-simplify-layout :is(aside, .sidebar, .widget-area, [role="complementary"]) {
	display: none !important;
}

/* Contrast modes. Best-effort forced palette; documented as a usability aid,
   not a guaranteed accessible color scheme for every theme. Media keeps its
   own rendering. */
body.wpps-a11y-high-contrast {
	background: #000 !important;
}

body.wpps-a11y-high-contrast *:not(img):not(svg):not(video):not(canvas):not(picture):not(iframe) {
	background-color: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.wpps-a11y-high-contrast a,
body.wpps-a11y-high-contrast a * {
	color: #ffea00 !important;
}

body.wpps-a11y-dark-contrast {
	background: #14181f !important;
}

body.wpps-a11y-dark-contrast *:not(img):not(svg):not(video):not(canvas):not(picture):not(iframe) {
	background-color: transparent !important;
	color: #e6e6e6 !important;
	border-color: #3a3f47 !important;
}

body.wpps-a11y-dark-contrast a,
body.wpps-a11y-dark-contrast a * {
	color: #7db1ff !important;
}

body.wpps-a11y-light-contrast {
	background: #fff !important;
}

body.wpps-a11y-light-contrast *:not(img):not(svg):not(video):not(canvas):not(picture):not(iframe) {
	background-color: transparent !important;
	color: #111 !important;
	border-color: #111 !important;
}

body.wpps-a11y-light-contrast a,
body.wpps-a11y-light-contrast a * {
	color: #0040c1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.wpps-a11y-widget *,
	.wpps-a11y-skip-link {
		transition: none !important;
		animation: none !important;
	}

	.wpps-a11y-widget__trigger:hover,
	.wpps-a11y-widget__trigger:focus-visible {
		transform: none;
	}

	.wpps-a11y-widget__panel.is-animating-in {
		opacity: 1;
		transform: none;
	}
}

/* Windows High Contrast / forced-colors: backgrounds and shadows are removed
   by the platform, so give every control a real border and let selected
   states read through border thickness (not color alone). */
@media (forced-colors: active) {
	.wpps-a11y-widget__trigger,
	.wpps-a11y-widget__close,
	.wpps-a11y-widget__reset-all,
	.wpps-a11y-widget__oversize-toggle,
	.wpps-a11y-widget__statement-close {
		border: 1px solid ButtonText;
	}

	.wpps-a11y-card[aria-pressed="true"],
	.wpps-a11y-profile[aria-pressed="true"] {
		border-width: 3px;
	}
}

/* =========================================================================
 * Admin advisory scanner (settings screen only)
 * ========================================================================= */

.wpps-a11y-admin-checks__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0;
}

.wpps-a11y-compliance-score {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 8px 0;
}

.wpps-a11y-check-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.wpps-a11y-check-list__item {
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: 6px;
	background: #f6f7f7;
	border-left: 4px solid #72aee6;
}

.wpps-a11y-check-list__item--warning {
	border-left-color: #dba617;
	background: #fff8e5;
}

.wpps-a11y-check-list__item--info {
	border-left-color: #72aee6;
}

.wpps-a11y-check-list__wcag {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.82rem;
	color: #50575e;
}
