/**
 * Accessibility Adjustments Styles
 *
 * CSS classes applied by JavaScript based on user preferences.
 * Uses higher-specificity selectors to override theme styles.
 *
 * @package Plexa_Lib
 * @subpackage Services/Accessibility
 */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
	--a11y-font-scale: 1;
	--a11y-line-height-scale: 1;
	--a11y-letter-spacing: 0;
	--a11y-word-spacing: 0;
	--a11y-focus-ring-width: 2px;
	--a11y-focus-ring-color: var(--focus-ring, #4f46e5);
	--a11y-focus-ring-offset: 2px;
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */

.plexa-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 0.5rem 1rem;
	background: var(--bg-card, #ffffff);
	color: var(--text-body, #1f2937);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border: 2px solid var(--a11y-focus-ring-color);
	border-radius: 0.25rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: top 0.15s ease;
}

.plexa-skip-link:focus {
	top: 0.5rem;
	left: 0.5rem;
	outline: none;
}

/* Dark mode skip link */
@media (prefers-color-scheme: dark) {
	.plexa-skip-link {
		background: var(--bg-card, #1f2937);
		color: var(--text-body, #f3f4f6);
	}
}

/* ==========================================================================
   BASE ACTIVE STATE
   ========================================================================== */

/**
 * Applied when any accessibility preference is non-default.
 * Enables CSS variable-based scaling.
 */
body.a11y-active {
	font-size: calc(1rem * var(--a11y-font-scale));
	line-height: calc(1.5 * var(--a11y-line-height-scale));
}

/* Ensure headings scale proportionally */
body.a11y-active h1,
body.a11y-active h2,
body.a11y-active h3,
body.a11y-active h4,
body.a11y-active h5,
body.a11y-active h6 {
	line-height: calc(1.2 * var(--a11y-line-height-scale));
}

/* ==========================================================================
   HIGH CONTRAST - LIGHT MODE
   ========================================================================== */

body.a11y-active.high-contrast-light {
	--bg-page: #ffffff;
	--bg-section: #ffffff;
	--bg-card: #ffffff;
	--text-heading: #000000;
	--text-body: #000000;
	--text-muted: #333333;
	--border-default: #000000;
	--border-subtle: #666666;
}

body.a11y-active.high-contrast-light {
	background-color: #ffffff !important;
	color: #000000 !important;
}

body.a11y-active.high-contrast-light a {
	color: #0000ee !important;
	text-decoration: underline !important;
}

body.a11y-active.high-contrast-light a:visited {
	color: #551a8b !important;
}

body.a11y-active.high-contrast-light img {
	filter: contrast(1.1);
}

body.a11y-active.high-contrast-light button,
body.a11y-active.high-contrast-light .btn {
	border: 2px solid #000000 !important;
}

/* ==========================================================================
   HIGH CONTRAST - DARK MODE
   ========================================================================== */

body.a11y-active.high-contrast-dark {
	--bg-page: #000000;
	--bg-section: #000000;
	--bg-card: #111111;
	--text-heading: #ffffff;
	--text-body: #ffffff;
	--text-muted: #cccccc;
	--border-default: #ffffff;
	--border-subtle: #888888;
}

body.a11y-active.high-contrast-dark {
	background-color: #000000 !important;
	color: #ffffff !important;
}

body.a11y-active.high-contrast-dark a {
	color: #ffff00 !important;
	text-decoration: underline !important;
}

body.a11y-active.high-contrast-dark a:visited {
	color: #ff99ff !important;
}

body.a11y-active.high-contrast-dark img {
	filter: contrast(1.1) brightness(0.9);
}

body.a11y-active.high-contrast-dark button,
body.a11y-active.high-contrast-dark .btn {
	border: 2px solid #ffffff !important;
}

/* ==========================================================================
   STOP ANIMATIONS
   ========================================================================== */

/**
 * Disables all animations and transitions.
 * Uses !important to override inline styles and keyframe animations.
 * Required for WCAG 2.3.1 compliance.
 */
body.a11y-active.a11y-stop-animations,
body.a11y-active.a11y-stop-animations *,
body.a11y-active.a11y-stop-animations *::before,
body.a11y-active.a11y-stop-animations *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	animation-delay: 0ms !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0ms !important;
	scroll-behavior: auto !important;
}

/* Stop video autoplay indicator */
body.a11y-active.a11y-stop-animations video[autoplay] {
	/* Note: CSS cannot stop video playback, but we can indicate it */
	outline: 3px dashed var(--a11y-focus-ring-color);
	outline-offset: 2px;
}

/* Pause animated GIFs visually (opacity flash) */
body.a11y-active.a11y-stop-animations img[src$=".gif"] {
	filter: grayscale(0.3);
}

/* ==========================================================================
   FOCUS ENHANCEMENT
   ========================================================================== */

/**
 * Enhanced focus indicators for keyboard navigation.
 * Provides highly visible focus rings on all interactive elements.
 */
body.a11y-active.a11y-focus-enhancement :focus {
	outline: 3px solid var(--a11y-focus-ring-color) !important;
	outline-offset: var(--a11y-focus-ring-offset) !important;
}

body.a11y-active.a11y-focus-enhancement :focus:not(:focus-visible) {
	outline: 3px solid var(--a11y-focus-ring-color) !important;
}

body.a11y-active.a11y-focus-enhancement :focus-visible {
	outline: 4px solid var(--a11y-focus-ring-color) !important;
	outline-offset: var(--a11y-focus-ring-offset) !important;
	box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.25) !important;
}

/* Enhanced focus for links */
body.a11y-active.a11y-focus-enhancement a:focus {
	background-color: rgba(79, 70, 229, 0.1);
	text-decoration: underline !important;
}

/* Enhanced focus for buttons */
body.a11y-active.a11y-focus-enhancement button:focus,
body.a11y-active.a11y-focus-enhancement .btn:focus,
body.a11y-active.a11y-focus-enhancement [role="button"]:focus {
	transform: scale(1.02);
}

/* Enhanced focus for form inputs */
body.a11y-active.a11y-focus-enhancement input:focus,
body.a11y-active.a11y-focus-enhancement select:focus,
body.a11y-active.a11y-focus-enhancement textarea:focus {
	border-color: var(--a11y-focus-ring-color) !important;
	box-shadow:
		0 0 0 3px rgba(79, 70, 229, 0.25),
		inset 0 0 0 1px var(--a11y-focus-ring-color) !important;
}

/* Tab highlight animation */
body.a11y-active.a11y-focus-enhancement *:focus-visible::after {
	content: '';
	position: absolute;
	inset: -4px;
	border: 2px dashed var(--a11y-focus-ring-color);
	border-radius: inherit;
	pointer-events: none;
	animation: a11y-focus-pulse 1s ease-in-out infinite;
}

@keyframes a11y-focus-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* Disable pulse animation if stop animations is also active */
body.a11y-active.a11y-stop-animations.a11y-focus-enhancement *:focus-visible::after {
	animation: none !important;
	opacity: 1;
}

/* ==========================================================================
   UTILITY CLASSES (for JavaScript)
   ========================================================================== */

/* Hide visually but keep accessible to screen readers */
.a11y-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Make sr-only content visible on focus */
.a11y-sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	padding: inherit;
	margin: inherit;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	/* Reset all accessibility adjustments for print */
	body.a11y-active {
		font-size: 12pt !important;
		line-height: 1.5 !important;
		color: #000000 !important;
		background: #ffffff !important;
	}

	.plexa-skip-link {
		display: none !important;
	}
}