/**
 * Accessibility Module - Frontend Styles
 * 
 * Improves keyboard navigation and focus indicators
 * Ensures WCAG 2.1 compliance for interactive elements
 */

/* ===========================
   Keyboard Focus Indicators
   =========================== */

/**
 * Ensure all interactive elements have visible focus indicators
 * for keyboard navigation accessibility
 */
/* Accessible submenu visibility for keyboard users */
.menu-primary .sub-menu {
	display: none;
	visibility: visible;
}

.menu-primary .menu-item:focus-within > .sub-menu,
.menu-primary .menu-item:hover > .sub-menu {
	display: block;
	visibility: visible;
}

/* Primary Menu Focus Styles */
.menu-primary a:focus,
.menu-primary button:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	position: relative;
	z-index: 1000;
}

/* Enhanced focus for menu items */
#menu-primary .menu-item a:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 115, 170, 0.1) !important;
}

/* Sub-menu focus indicators */
#menu-primary .sub-menu .menu-item a:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 1px !important;
	background-color: rgba(0, 115, 170, 0.15) !important;
}

/* Expander button focus */
#menu-primary .expander:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
}

/* Search button focus */
.menu-search button:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 115, 170, 0.1) !important;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2) !important;
}

/* Search form elements focus */
.menu-search-form .search-field:focus,
.menu-search-form input[type="search"]:focus,
.search-form .search-field:focus,
.search-form input[type="search"]:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	border-color: #0073aa !important;
	box-shadow: 0 0 0 1px #0073aa !important;
}

/* Search submit button focus */
.menu-search-form .search-submit:focus,
.menu-search-form input[type="submit"]:focus,
.search-form .search-submit:focus,
.search-form input[type="submit"]:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 115, 170, 0.1) !important;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2) !important;
}

/* Menu toggle skip link focus */
.menu-toggle-skip-link:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 115, 170, 0.1) !important;
}

/* ===========================
   Global Focus Improvements
   =========================== */

/**
 * Ensure focus indicators are never hidden
 * Override any theme styles that might remove them
 */

/* All interactive elements - primary rule */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus {
	outline: 2px solid #0073aa !important;
	outline-offset: 2px !important;
	/* Prevent theme from hiding focus */
	outline-style: solid !important;
}

/* Specific form elements need extra enforcement */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
button[type="submit"]:focus,
button[type="button"]:focus {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
	outline-style: solid !important;
}

/* Ensure focus is visible over other content */
*:focus {
	position: relative;
	z-index: 10;
}

/* Remove any outline: none that might be set */
*:focus:not(:focus-visible) {
	outline: 2px solid #0073aa !important;
}

/* Modern focus-visible support */
*:focus-visible {
	outline: 3px solid #0073aa !important;
	outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	a:focus,
	button:focus,
	input:focus,
	textarea:focus,
	select:focus,
	[tabindex]:focus {
		outline-width: 4px !important;
		outline-color: currentColor !important;
	}
}

/* ===========================
   Skip Links
   =========================== */

/**
 * Ensure skip links are visible when focused
 */

.skip-link:focus,
.skip-to-content:focus,
.menu-toggle-skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	background: #fff;
	color: #000;
	padding: 10px 15px;
	text-decoration: none;
	border: 3px solid #0073aa;
	z-index: 100000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ===========================
   Reduced Motion Support
   =========================== */

/**
 * Respect user's motion preferences
 */

@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 Fixes
   =========================== */

/**
 * Fix plugin-generated skip links with poor contrast
 * Ensure they're either properly styled or hidden for screen readers only
 */

.summary-link-wrap,
.page-summary-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.summary-link-wrap:focus-within,
.page-summary-link:focus-within {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
}

.summary-link-wrap a:focus,
.page-summary-link a:focus {
	position: absolute;
	left: 6px;
	top: 6px;
	background-color: #fff;
	color: #000 !important;
	padding: 10px 15px;
	text-decoration: none;
	border: 3px solid #0073aa;
	z-index: 100000;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	outline: 3px solid #0073aa;
	outline-offset: 2px;
}
