/* =========================================================================
   NI Accessibility Toolbar v1.0.0
   Two parts:
   (A) The toolbar widget UI
   (B) Body/HTML helper classes that apply each accessibility transformation
   High z-index + !important are intentional: they must win against Divi's
   own fixed elements and high-specificity rules.
   ========================================================================= */

/* ---- CSS variables (accent injected by JS from plugin settings) ---- */
:root {
	--nia11y-accent: #1d4ed8;
	--nia11y-z: 2147483600;
}

/* =========================================================================
   (A) TOOLBAR UI
   ========================================================================= */

/* Toggle button */
#nia11y-toggle {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	z-index: var(--nia11y-z) !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--nia11y-accent) !important;
	color: #fff !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	transition: transform 0.15s ease !important;
}
#nia11y-toggle.nia11y-left {
	right: auto !important;
	left: 20px !important;
}
#nia11y-toggle:hover { transform: scale(1.06) !important; }
#nia11y-toggle:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 3px !important;
}
#nia11y-toggle svg { width: 30px !important; height: 30px !important; display: block !important; }

/* Panel */
#nia11y-panel {
	position: fixed !important;
	bottom: 88px !important;
	right: 20px !important;
	z-index: var(--nia11y-z) !important;
	width: 340px !important;
	max-width: calc(100vw - 40px) !important;
	max-height: calc(100vh - 120px) !important;
	overflow-y: auto !important;
	background: #ffffff !important;
	color: #14181f !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	display: none !important;
}
#nia11y-panel.nia11y-open { display: block !important; }
#nia11y-panel.nia11y-left { right: auto !important; left: 20px !important; }

#nia11y-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 18px !important;
	background: var(--nia11y-accent) !important;
	color: #fff !important;
	border-radius: 14px 14px 0 0 !important;
	position: sticky !important;
	top: 0 !important;
}
#nia11y-header h2 {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #fff !important;
	padding: 0 !important;
	border: 0 !important;
}
#nia11y-close {
	background: rgba(255,255,255,0.15) !important;
	border: 0 !important;
	color: #fff !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	font-size: 20px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#nia11y-close:hover { background: rgba(255,255,255,0.3) !important; }

#nia11y-body { padding: 14px 16px 8px !important; }

.nia11y-section-label {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #5b6472 !important;
	font-weight: 700 !important;
	margin: 14px 0 8px !important;
}
.nia11y-section-label:first-child { margin-top: 0 !important; }

/* Stepper rows (text size, spacing) */
.nia11y-stepper {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 8px 10px !important;
	border: 1px solid #e2e6ec !important;
	border-radius: 10px !important;
	margin-bottom: 8px !important;
}
.nia11y-stepper .nia11y-stepper-label { font-weight: 600 !important; color: #14181f !important; }
.nia11y-stepper-controls { display: flex !important; align-items: center !important; gap: 6px !important; }
.nia11y-stepper button {
	width: 34px !important;
	height: 34px !important;
	border: 1px solid #c8ced6 !important;
	background: #f4f6f9 !important;
	color: #14181f !important;
	border-radius: 8px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	line-height: 1 !important;
}
.nia11y-stepper button:hover { background: #e7ebf1 !important; }
.nia11y-stepper-value { min-width: 38px !important; text-align: center !important; font-variant-numeric: tabular-nums !important; font-weight: 700 !important; }

/* Toggle button grid */
.nia11y-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 8px !important;
}
.nia11y-toggle-btn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 12px 8px !important;
	border: 1px solid #e2e6ec !important;
	background: #fff !important;
	color: #14181f !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-align: center !important;
	cursor: pointer !important;
	min-height: 64px !important;
}
.nia11y-toggle-btn:hover { border-color: var(--nia11y-accent) !important; }
.nia11y-toggle-btn svg { width: 22px !important; height: 22px !important; }
.nia11y-toggle-btn[aria-pressed="true"] {
	background: var(--nia11y-accent) !important;
	color: #fff !important;
	border-color: var(--nia11y-accent) !important;
}

/* Focus visibility for everything inside the panel */
#nia11y-panel button:focus-visible {
	outline: 3px solid var(--nia11y-accent) !important;
	outline-offset: 2px !important;
}
#nia11y-panel.nia11y-open button:focus-visible { outline-color: #14181f !important; }

/* Footer */
#nia11y-footer {
	padding: 10px 16px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}
#nia11y-reset {
	width: 100% !important;
	padding: 10px !important;
	border: 1px solid #d33 !important;
	background: #fff !important;
	color: #c0231f !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	font-size: 14px !important;
}
#nia11y-reset:hover { background: #fdeaea !important; }
#nia11y-statement-link {
	text-align: center !important;
	font-size: 13px !important;
	color: var(--nia11y-accent) !important;
	text-decoration: underline !important;
}

.nia11y-sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}

/* =========================================================================
   (B) ACCESSIBILITY TRANSFORMATIONS (applied to <html> via classes)
   ========================================================================= */

/* Line spacing */
html.nia11y-line-1 body *:not(#nia11y-panel):not(#nia11y-panel *) { line-height: 1.5 !important; }
html.nia11y-line-2 body *:not(#nia11y-panel):not(#nia11y-panel *) { line-height: 1.8 !important; }
html.nia11y-line-3 body *:not(#nia11y-panel):not(#nia11y-panel *) { line-height: 2.2 !important; }

/* Letter spacing */
html.nia11y-letter-1 body *:not(#nia11y-panel):not(#nia11y-panel *) { letter-spacing: 0.06em !important; }
html.nia11y-letter-2 body *:not(#nia11y-panel):not(#nia11y-panel *) { letter-spacing: 0.12em !important; }
html.nia11y-letter-3 body *:not(#nia11y-panel):not(#nia11y-panel *) { letter-spacing: 0.2em !important; word-spacing: 0.16em !important; }

/* Readable font */
html.nia11y-readable-font body *:not(.fa):not([class^="et-pb-icon"]):not([class*=" et-pb-icon"]):not(#nia11y-panel):not(#nia11y-panel *) {
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
}

/* High contrast (dark) */
html.nia11y-contrast-dark body { background: #000 !important; }
html.nia11y-contrast-dark body *:not(#nia11y-panel):not(#nia11y-panel *) {
	background-color: #000 !important;
	color: #ffea00 !important;
	border-color: #ffea00 !important;
	text-shadow: none !important;
}
html.nia11y-contrast-dark body a:not(#nia11y-panel a) { color: #4ad6ff !important; }
html.nia11y-contrast-dark img,
html.nia11y-contrast-dark video,
html.nia11y-contrast-dark iframe { filter: grayscale(100%) !important; }

/* High contrast (light) */
html.nia11y-contrast-light body { background: #fff !important; }
html.nia11y-contrast-light body *:not(#nia11y-panel):not(#nia11y-panel *) {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
	text-shadow: none !important;
}
html.nia11y-contrast-light body a:not(#nia11y-panel a) { color: #00408a !important; text-decoration: underline !important; }

/* Smart dark mode / invert (whole page, then re-invert media so photos look right) */
html.nia11y-invert { filter: invert(1) hue-rotate(180deg) !important; background: #fff !important; }
html.nia11y-invert img,
html.nia11y-invert video,
html.nia11y-invert iframe,
html.nia11y-invert [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; }
/* keep the toolbar itself normal */
html.nia11y-invert #nia11y-toggle,
html.nia11y-invert #nia11y-panel { filter: invert(1) hue-rotate(180deg) !important; }

/* Highlight links */
html.nia11y-links a:not(#nia11y-panel a) {
	outline: 2px solid #ff6a00 !important;
	outline-offset: 1px !important;
	text-decoration: underline !important;
	background: #fff4e6 !important;
	color: #8a3b00 !important;
}

/* Highlight headings */
html.nia11y-headings h1:not(#nia11y-panel h1),
html.nia11y-headings h2:not(#nia11y-panel h2),
html.nia11y-headings h3:not(#nia11y-panel h3),
html.nia11y-headings h4, html.nia11y-headings h5, html.nia11y-headings h6 {
	outline: 2px dashed #007a3d !important;
	outline-offset: 2px !important;
}

/* Pause animations / motion */
html.nia11y-no-motion *:not(#nia11y-panel):not(#nia11y-panel *),
html.nia11y-no-motion *::before, html.nia11y-no-motion *::after {
	animation-play-state: paused !important;
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Big cursor */
html.nia11y-big-cursor,
html.nia11y-big-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.2' d='M4 2l16 9-7 1.5L9.5 20z'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Reading guide (horizontal bar following the cursor) */
#nia11y-guide {
	position: fixed !important;
	left: 0 !important;
	width: 100% !important;
	height: 22px !important;
	background: rgba(255, 235, 59, 0.35) !important;
	border-top: 2px solid #f59e0b !important;
	border-bottom: 2px solid #f59e0b !important;
	pointer-events: none !important;
	z-index: calc(var(--nia11y-z) - 2) !important;
	display: none !important;
}
html.nia11y-guide #nia11y-guide { display: block !important; }

/* Reading mask (dim everything except a strip) */
#nia11y-mask-top, #nia11y-mask-bottom {
	position: fixed !important;
	left: 0 !important;
	width: 100% !important;
	background: rgba(0, 0, 0, 0.7) !important;
	pointer-events: none !important;
	z-index: calc(var(--nia11y-z) - 3) !important;
	display: none !important;
}
html.nia11y-mask #nia11y-mask-top,
html.nia11y-mask #nia11y-mask-bottom { display: block !important; }

/* Respect users who already asked the OS for reduced motion */
@media (prefers-reduced-motion: reduce) {
	#nia11y-toggle { transition: none !important; }
}