/* ========================================
   WCAG AAA Accessibility Stylesheet (Q5)
   Loaded by ALL pages
   ======================================== */

/* ========================================
   1. REDUCED MOTION SUPPORT
   Disables all animations when user prefers reduced motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	/* Kill all animations, transitions, and transforms */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Prevent layout shifts from animations */
	html {
		scroll-behavior: auto !important;
	}

	/* Remove transform animations */
	.btn:hover,
	.card:hover,
	.provider-option:hover,
	.unit-toggle:hover,
	.image-preview:hover,
	a:hover {
		transform: none !important;
	}
}

/* ========================================
   2. FOCUS INDICATORS (WCAG AAA)
   Visible focus ring on all interactive elements
   ======================================== */

/* Base focus-visible styles for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

/* Override defaults to ensure focus is always visible */
button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

/* Ensure form inputs show focus */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="file"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
	border-color: var(--catlap-yellow, #ffc300);
}

/* Radio and checkbox focus */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

/* Never hide focus outline */
*:focus {
	outline: none;
}

*:focus:not(:focus-visible) {
	outline: none;
}

/* ========================================
   3. SKIP NAVIGATION LINK
   Visually hidden by default, visible on focus
   ======================================== */
.skip-to-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
	padding: 1rem;
	background: var(--catlap-yellow, #ffc300);
	color: var(--bg, #000);
	text-decoration: none;
	font-weight: 600;
	border-radius: 0 0 var(--radius-md, 0.375rem) 0;
	transform: translateY(-100%);
	transition: transform 0.3s ease-out;
}

.skip-to-content:focus {
	transform: translateY(0);
	outline: none;
}

.skip-to-content:focus-visible {
	outline: 3px solid var(--bg, #000);
	outline-offset: 2px;
}

/* ========================================
   4. HIGH CONTRAST MODE SUPPORT
   Ensures visible borders and focus in Windows High Contrast
   ======================================== */
@media (forced-colors: active) {
	/* Ensure borders are visible in high contrast mode */
	button,
	input,
	select,
	textarea,
	.card {
		border: 1px solid CanvasText;
	}

	/* Make focus indicators visible */
	button:focus-visible,
	a:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}

	/* Ensure interactive elements have clear visual states */
	button:hover,
	a:hover,
	input:hover,
	select:hover,
	textarea:hover {
		border-color: Highlight;
		background-color: Highlight;
		color: HighlightText;
	}

	/* Disabled state */
	button:disabled,
	input:disabled,
	select:disabled,
	textarea:disabled {
		opacity: 0.5;
	}

	/* Focus within compounds */
	.card:focus-within {
		border: 2px solid CanvasText;
	}

	/* Remove background colors that might not work in high contrast */
	.profile-banner,
	.api-key-section,
	.location-preview,
	.format-details {
		background-color: Canvas;
		border: 1px solid CanvasText;
	}
}

/* ========================================
   5. TOUCH TARGET SIZES (AAA: 44×44px minimum)
   ======================================== */
.touch-target,
button,
a[href],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
[role="button"],
[tabindex] {
	min-width: 44px;
	min-height: 44px;
	padding: calc(22px - 0.5em) 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Adjust padding for elements that already have it */
button {
	min-height: 44px;
	line-height: 1;
}

/* Ensure checkbox/radio are at least 44x44 */
input[type="checkbox"],
input[type="radio"] {
	min-width: 44px;
	min-height: 44px;
	accent-color: var(--catlap-yellow, #ffc300);
}

/* Links should be at least 44x44 or have padding */
a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0.5rem;
}

/* Select and input sizing */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="datetime-local"],
textarea {
	min-height: 44px;
	padding: 0.75rem;
}

/* ========================================
   6. ARIA LIVE REGIONS
   Screen reader announcements and status updates
   ======================================== */

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

/* For visually hidden but still interactive elements */
.sr-only-focusable:focus,
.sr-only-focusable:active {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ARIA live regions for announcements */
[aria-live="polite"],
.aria-live-polite {
	position: relative;
}

[aria-live="assertive"],
.aria-live-assertive {
	position: relative;
	z-index: 1000;
}

/* Status updates (e.g., save indicator) */
[role="status"],
.status-message {
	position: relative;
	display: block;
}

/* Alert regions */
[role="alert"],
.alert-message {
	padding: 1rem;
	margin: 1rem 0;
	border-left: 4px solid var(--error-color, #ff4c4c);
	background: rgba(255, 76, 76, 0.1);
	color: var(--error-color, #ff4c4c);
}

[role="alert"].warning {
	border-left-color: #ffa500;
	background: rgba(255, 165, 0, 0.1);
	color: #ffa500;
}

[role="alert"].success {
	border-left-color: var(--success-color, #4caf50);
	background: rgba(76, 175, 80, 0.1);
	color: var(--success-color, #4caf50);
}

[role="alert"].info {
	border-left-color: #2196f3;
	background: rgba(33, 150, 243, 0.1);
	color: #2196f3;
}

/* ========================================
   7. TEXT SPACING SUPPORT (WCAG AAA)
   Ensure readability with increased spacing
   ======================================== */
@media (prefers-contrast: more) {
	/* Increase letter spacing for better readability */
	body,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	label,
	button,
	input,
	select,
	textarea {
		letter-spacing: 0.02em;
	}

	/* Increase line height */
	body,
	p,
	label,
	.help-text,
	.form-field {
		line-height: 1.8;
	}

	/* Increase paragraph spacing */
	p {
		margin: 1.5rem 0;
	}

	/* Headings */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		letter-spacing: 0.03em;
		margin: 1.5rem 0 1rem 0;
	}

	/* Form labels */
	label {
		margin-bottom: 0.75rem;
		display: block;
	}

	/* Help text */
	.help-text,
	.form-field .help-text {
		margin-top: 0.5rem;
		line-height: 1.6;
	}
}

/* ========================================
   8. COLOR CONTRAST HELPERS (WCAG AAA)
   Utility classes for 7:1 normal, 4.5:1 large text
   ======================================== */

/* High contrast text (WCAG AAA: 7:1) */
.text-high-contrast {
	color: #000;
	background-color: #fff;
}

html[data-mode="dark"] .text-high-contrast {
	color: #fff;
	background-color: #000;
}

/* Text on dark backgrounds */
.text-on-dark {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-mode="light"] .text-on-dark {
	color: #000;
	text-shadow: none;
}

/* Text on light backgrounds */
.text-on-light {
	color: #000;
	background-color: transparent;
}

html[data-mode="dark"] .text-on-light {
	color: #fff;
}

/* Ensure primary text meets contrast requirements */
body,
p,
label,
span:not(.icon) {
	color: var(--text-primary, #000);
	background-color: transparent;
}

/* Secondary text still needs sufficient contrast (4.5:1 minimum) */
.text-secondary,
.help-text,
.form-field .help-text {
	color: var(--text-secondary, #666);
}

/* Links must meet contrast requirements */
a {
	color: var(--catlap-yellow, #ffc300);
	text-decoration: underline;
}

a:visited {
	color: #cc9900;
}

a:focus-visible,
a:hover {
	text-decoration: underline;
	color: var(--catlap-yellow, #ffc300);
}

/* Buttons */
.btn-primary {
	color: #000;
	background-color: var(--catlap-yellow, #ffc300);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: #ffb800;
}

.btn-secondary {
	color: var(--text-primary, #000);
	background-color: var(--bg-secondary, #f5f5f5);
	border: 1px solid var(--border-color, #ccc);
}

/* Error states */
.btn-danger {
	color: #fff;
	background-color: #ff4c4c;
}

.btn-danger:hover,
.btn-danger:focus-visible {
	background-color: #ff2020;
}

/* Form field labels */
.form-field label {
	font-weight: 600;
	color: var(--text-primary, #000);
}

/* Ensure error messages are visible */
.error-message,
[role="alert"],
.alert-message {
	color: #ff4c4c;
	background-color: rgba(255, 76, 76, 0.1);
	border: 1px solid #ff4c4c;
}

/* Success messages */
.success-message,
[role="status"].success {
	color: #4caf50;
	background-color: rgba(76, 175, 80, 0.1);
	border: 1px solid #4caf50;
}

/* ========================================
   9. KEYBOARD NAVIGATION & TAB ORDER
   Ensure logical tab order and visible focus
   ======================================== */

/* Focus-within for compound widgets (dropdowns, tab panels) */
.card:focus-within {
	border-color: var(--catlap-yellow, #ffc300);
}

.provider-option:has(input[type="radio"]:focus-visible) {
	border-color: var(--catlap-yellow, #ffc300);
}

.image-preview:focus-within {
	border-color: var(--catlap-yellow, #ffc300);
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

/* Tab panel focus */
[role="tabpanel"]:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

/* Dropdown menu keyboard navigation */
select:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
	border-color: var(--catlap-yellow, #ffc300);
}

/* Prevent keyboard focus from being hidden */
:focus-visible {
	outline: 3px solid var(--catlap-yellow, #ffc300);
	outline-offset: 2px;
}

/* ========================================
   10. PRINT ACCESSIBILITY
   Ensure readable print output
   ======================================== */
@media print {
	/* Remove decorative elements */
	.save-indicator,
	[aria-hidden="true"],
	.decorative-element,
	.app-shell::before,
	.app-shell::after {
		display: none !important;
	}

	/* Set text to black on white for printing */
	body,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	label,
	button,
	a {
		color: #000 !important;
		background-color: #fff !important;
	}

	/* Show URLs after links */
	a[href]::after {
		content: " (" attr(href) ")";
		word-break: break-all;
		font-size: 0.85em;
		color: #000;
	}

	/* Don't print email/phone links with URLs */
	a[href^="mailto:"]::after,
	a[href^="tel:"]::after,
	a[href^="javascript:"]::after {
		display: none;
	}

	/* Ensure images print properly */
	img {
		max-width: 100%;
		page-break-inside: avoid;
	}

	/* Prevent page breaks in important sections */
	.card,
	.form-field,
	table {
		page-break-inside: avoid;
	}

	/* Use sans-serif for printing */
	body,
	p,
	label,
	button {
		font-family: Arial, sans-serif;
	}

	/* Increase font size for print readability */
	body {
		font-size: 12pt;
		line-height: 1.6;
	}

	p,
	label,
	.help-text {
		font-size: 11pt;
		line-height: 1.6;
	}

	h1 {
		font-size: 20pt;
		margin: 0.5in 0;
	}

	h2 {
		font-size: 16pt;
		margin: 0.3in 0;
	}

	h3 {
		font-size: 14pt;
		margin: 0.25in 0;
	}

	/* Remove background colors */
	.card,
	.form-field,
	.profile-banner,
	.api-key-section,
	.location-preview {
		background-color: #fff !important;
		border: 1px solid #000 !important;
	}

	/* Buttons in print */
	button,
	.btn {
		border: 1px solid #000;
		background-color: transparent !important;
		color: #000 !important;
		padding: 0.25rem 0.5rem;
	}

	/* Form fields in print */
	input,
	select,
	textarea {
		border: 1px solid #000;
		background-color: transparent;
		color: #000;
	}

	/* Print margins */
	body {
		margin: 0.5in;
	}

	/* Avoid orphans and widows */
	p {
		orphans: 3;
		widows: 3;
	}
}

/* ========================================
   WCAG AAA COLOR CONTRAST MATRIX
   Validates against minimum requirements
   ======================================== */

/* All text should meet at least 4.5:1 contrast (7:1 recommended) */
body {
	/* Ensure sufficient contrast */
	color: var(--text-primary);
	background-color: var(--bg);
}

/* Form labels: 7:1 contrast */
label,
.form-field label {
	color: var(--text-primary);
	font-weight: 600;
}

/* Placeholder text: meets 4.5:1 minimum */
input::placeholder,
textarea::placeholder,
select option {
	color: var(--text-secondary);
	opacity: 1;
}

/* Disabled form elements: at least 3:1 contrast */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
	opacity: 0.6;
	color: var(--text-secondary);
}

/* ========================================
   ADDITIONAL ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure all interactive elements are visible */
button:not([aria-hidden="true"]),
a:not([aria-hidden="true"]),
input:not([aria-hidden="true"]),
select:not([aria-hidden="true"]),
textarea:not([aria-hidden="true"]) {
	visibility: visible;
}

/* Remove browser default focus styles before applying custom ones */
button,
a,
input,
select,
textarea {
	outline: none;
}

/* Ensure form validation messages are accessible */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown),
select:invalid {
	border-color: #ff4c4c;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4c4c' stroke-width='2'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='12'%3e%3c/line%3e%3cline x1='12' y1='16' x2='12.01' y2='16'%3e%3c/line%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.2em 1.2em;
	padding-right: 2.5rem;
}

/* Add aria-invalid indicator */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
	border: 2px solid #ff4c4c;
	background-color: rgba(255, 76, 76, 0.05);
}

/* Successful validation */
input[aria-invalid="false"],
textarea[aria-invalid="false"],
select[aria-invalid="false"] {
	border-color: #4caf50;
}

/* Loading states (spinner) should be accessible */
[aria-busy="true"]::after {
	content: " (Loading...)";
	font-size: 0.85em;
}

/* Loading indicator should not block interaction */
[aria-busy="true"] {
	pointer-events: auto;
}

/* Ensure form groups have proper spacing */
fieldset {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 1rem;
	margin: 1rem 0;
}

fieldset legend {
	padding: 0 0.5rem;
	font-weight: 600;
	color: var(--text-primary);
}