/**
 * Accessibility Stylesheet
 *
 * Provides keyboard navigation support, focus indicators, 
 * skip links, and WCAG 2.1 AA color contrast.
 *
 * @package gistextract-theme
 */

/* Skip Links */
.gx-skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}

.gx-skip-link {
	display: block;
	clip: rect(0, 0, 0, 0);
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.gx-skip-link:focus {
	clip: auto;
	height: auto;
	overflow: visible;
	width: auto;
	white-space: normal;
	padding: 1rem;
	background: var(--gx-accent, #333);
	color: var(--gx-bg, #fff);
	text-decoration: none;
	border: 2px solid var(--gx-accent, #333);
	border-radius: 4px;
	font-weight: bold;
}

/* Focus Indicators */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--gx-accent, #333);
	outline-offset: 2px;
}

/* Improve button focus visibility */
.gx-button:focus {
	outline: 3px solid var(--gx-accent, #333);
	outline-offset: 2px;
}

/* Search input focus */
input[type="search"]:focus {
	outline: 2px solid var(--gx-accent, #333);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

/* Tab focus for visible keyboard navigation */
:focus-visible {
	outline: 2px solid var(--gx-accent, #333);
	outline-offset: 2px;
}

/* Ensure sufficient color contrast on interactive elements */
.gx-button,
button,
input[type="submit"],
input[type="button"] {
	background-color: var(--gx-accent, #333);
	color: #fff;
	border: 2px solid var(--gx-accent, #333);
	/* Ensure min 4.5:1 contrast ratio (WCAG 2.1 AA) */
	min-height: 44px; /* Touch target minimum */
	padding: 0.5rem 1rem;
}

.gx-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	opacity: 0.9;
	cursor: pointer;
}

/* Link contrast */
a {
	color: var(--gx-accent, #0066cc);
	text-decoration: underline;
}

a:visited {
	color: var(--gx-accent-visited, #663399);
}

a:hover,
a:focus {
	text-decoration: none;
	background-color: rgba(0, 102, 204, 0.1);
}

/* Reduce motion for users who prefer it */
@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;
	}
}

/* High contrast mode support */
@media (prefers-contrast: more) {
	.gx-button,
	button,
	input[type="submit"],
	input[type="button"] {
		border-width: 3px;
	}

	a:focus,
	button:focus,
	input:focus {
		outline-width: 3px;
	}
}

/* Low vision zoom support */
@media (min-width: 1024px) {
	/* Ensure clickable elements remain accessible at 200% zoom */
	a,
	button,
	.gx-button,
	input[type="submit"],
	input[type="button"] {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Screen reader only text */
.screen-reader-text {
	clip: rect(0, 0, 0, 0);
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip: auto;
	height: auto;
	overflow: visible;
	width: auto;
	white-space: normal;
	padding: 0.5rem;
	background: var(--gx-accent, #333);
	color: #fff;
	text-decoration: none;
	z-index: 99999;
}

/* List accessibility */
[role="list"] {
	list-style: none;
	padding: 0;
}

[role="listitem"] {
	display: list-item;
	list-style-position: inside;
}

/* Semantic heading hierarchy */
h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

h2 {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

/* Ensure proper spacing for readability */
p {
	line-height: 1.6;
	margin-bottom: 1rem;
}

/* Form labels */
label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
}

/* Input spacing */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
	padding: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	min-height: 44px;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"] {
	width: 100%;
	max-width: 100%;
}

/* Fieldset and legend styling */
fieldset {
	border: 1px solid #ccc;
	padding: 1rem;
	margin-bottom: 1rem;
	border-radius: 4px;
}

legend {
	padding: 0 0.5rem;
	font-weight: 600;
}