/**
 * EUS Theme - Accessibility Styles
 *
 * Comprehensive focus, focus-visible, and active state styles
 * for WCAG 2.1 AA compliance.
 *
 * @package EUSTheme
 * @since 1.0.0
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES FOR ACCESSIBILITY
   ========================================================================== */
:root {
	/* Focus ring colors */
	--a11y-focus-color: var(--wp--preset--color--brand-accent, #e65054);
	--a11y-focus-color-alt: var(--wp--preset--color--brand-primary, #0073aa);
	--a11y-focus-width: 3px;
	--a11y-focus-offset: 2px;

	/* Active state */
	--a11y-active-scale: 0.98;
	--a11y-active-brightness: 0.9;

	/* Transitions */
	--a11y-transition-speed: 150ms;
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */
.skip-link {
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	padding: 1em 2em;
	background-color: var(--wp--preset--color--text-dark, #1a1a1a);
	color: var(--wp--preset--color--background-light, #ffffff);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: top var(--a11y-transition-speed) ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	outline: none;
}

/* Screen reader text (visually hidden but accessible) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--background-light, #ffffff);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--text-dark, #1a1a1a);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

#wpadminbar {
	position: fixed !important;
}

/* ==========================================================================
   FOCUS STYLES - BASE
   All interactive elements get a base focus style
   ========================================================================== */

/* Remove default outline - we'll add our own */
*:focus {
	outline: none;
}

/* Base focus style for all focusable elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
summary:focus,
[contenteditable="true"]:focus {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

/* ==========================================================================
   FOCUS-VISIBLE STYLES
   Only show focus ring for keyboard navigation, not mouse clicks
   ========================================================================== */

/* Reset focus styles when :focus-visible is supported */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
	outline: none;
}

/* Apply focus ring only for keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

/* High contrast focus ring for dark backgrounds */
.has-text-dark-background-color a:focus-visible,
.has-text-dark-background-color button:focus-visible,
.has-brand-primary-background-color a:focus-visible,
.has-brand-primary-background-color button:focus-visible,
.has-brand-secondary-background-color a:focus-visible,
.has-brand-secondary-background-color button:focus-visible {
	outline-color: var(--wp--preset--color--background-light, #ffffff);
}

/* ==========================================================================
   ACTIVE STYLES
   Visual feedback when clicking/tapping
   ========================================================================== */

/* Links - subtle color shift */
a:active {
	filter: brightness(var(--a11y-active-brightness));
}

/* Buttons - scale down slightly */
button:active,
.wp-block-button__link:active,
.wp-element-button:active,
input[type="submit"]:active,
input[type="button"]:active {
	transform: scale(var(--a11y-active-scale));
	filter: brightness(var(--a11y-active-brightness));
}

/* Cards and clickable containers */
[role="button"]:active,
.wp-block-post:active,
.wp-block-query-pagination-previous:active,
.wp-block-query-pagination-next:active {
	transform: scale(var(--a11y-active-scale));
}

/* ==========================================================================
   FORM ELEMENTS - ENHANCED FOCUS
   ========================================================================== */

/* Text inputs, textareas, selects */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="date"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible,
input[type="time"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 0;
	border-color: var(--a11y-focus-color);
}

/* Checkboxes and radio buttons */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 2px;
}

/* File inputs */
input[type="file"]:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 4px;
}

/* Range sliders */
input[type="range"]:focus-visible {
	outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 var(--a11y-focus-width) var(--a11y-focus-color);
}

input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 var(--a11y-focus-width) var(--a11y-focus-color);
}

/* ==========================================================================
   WORDPRESS BLOCKS - SPECIFIC FOCUS STYLES
   ========================================================================== */

/* Navigation links */
.wp-block-navigation a:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 4px;
}

/* Submenu items - no offset to stay within container */
.wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
	outline-offset: 0;
}

/* Navigation submenu toggle button */
.wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 2px;
}

/* Mobile menu toggle */
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 2px;
}

/* Buttons block */
.wp-block-button__link:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

/* Outline button variant - use contrasting color */
.is-style-outline .wp-block-button__link:focus-visible {
	outline-color: currentColor;
}

/* Search block */
.wp-block-search__button:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

.wp-block-search__input:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 0;
	border-color: var(--a11y-focus-color);
}

/* Social links */
.wp-block-social-links .wp-social-link a:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 2px;
	border-radius: 50%;
}

/* File block download button */
.wp-block-file a:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

/* Image links */
.wp-block-image a:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 4px;
}

/* Gallery image links */
.wp-block-gallery .wp-block-image a:focus-visible {
	outline-offset: -4px;
}

/* Post navigation links */
.wp-block-post-navigation-link a:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

/* Pagination */
.wp-block-query-pagination a:focus-visible,
.wp-block-query-pagination span:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: var(--a11y-focus-offset);
}

/* Comments form */
.wp-block-post-comments-form input:focus-visible,
.wp-block-post-comments-form textarea:focus-visible {
	outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
	outline-offset: 0;
	border-color: var(--a11y-focus-color);
}

.wp-block-post-comments-form input[type="submit"]:focus-visible {
	outline-offset: var(--a11y-focus-offset);
}

/* ==========================================================================
   REDUCED MOTION
   Respect user preferences for reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.skip-link {
		transition: none;
	}

	button:active,
	.wp-block-button__link:active,
	.wp-element-button:active,
	input[type="submit"]:active,
	input[type="button"]:active,
	[role="button"]:active {
		transform: none;
	}
}

/* ==========================================================================
   HIGH CONTRAST MODE
   Enhanced styles for Windows High Contrast Mode
   ========================================================================== */
@media (forced-colors: active) {
	.skip-link:focus {
		outline: 3px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}

	a:active,
	button:active {
		outline-color: LinkText;
	}
}

/* ==========================================================================
   KEYBOARD NAVIGATION DETECTION (via JS class)
   Enhanced focus styles only when keyboard navigation is detected
   ========================================================================== */
.using-keyboard *:focus-visible {
	outline-width: 4px;
}

/* ==========================================================================
   TOUCH DEVICE OPTIMIZATION
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

	/* Larger touch targets */
	button,
	.wp-block-button__link,
	.wp-element-button,
	input[type="submit"],
	input[type="button"],
	a.wp-block-navigation-item__content {
		min-height: 44px;
		min-width: 44px;
	}

	/* Remove hover effects that might stick on touch */
	a:active {
		filter: none;
	}
}

/* ==========================================================================
   PRINT STYLES
   Accessibility considerations for print
   ========================================================================== */
@media print {

	.skip-link,
	.screen-reader-text {
		display: none !important;
	}

	/* Show link URLs */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		font-weight: normal;
	}

	/* Don't show URLs for anchors and JS links */
	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}
}