/**
 * Accessibility Styles — Eco Balloon Stand Theme
 * Focus management, screen reader utilities, WCAG 2.1 AA compliance
 */

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

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 9999;
	padding: 0.625rem 1.25rem;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* ============================================================
   SCREEN READER ONLY
   ============================================================ */

.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;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ============================================================
   FOCUS STYLES
   WCAG 2.1 AA: visible focus indicator, min 3:1 contrast ratio
   ============================================================ */

/* Remove default outline, replace with custom */
:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Interactive elements — always show focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}

/* Dark backgrounds — white outline for contrast */
.section--bg-dark a:focus-visible,
.section--bg-dark button:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
	outline-color: #fff;
}

/* Form fields — inline focus ring */
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
	outline: none; /* handled by border + box-shadow in main.css */
}

/* ============================================================
   BUTTONS — accessible states
   ============================================================ */

/* Disabled state */
button:disabled,
.btn:disabled,
[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Ensure minimum touch target: 44×44px (WCAG 2.5.5) */
.btn,
button,
[role="button"] {
	min-height: 44px;
	min-width: 44px;
}

/* Exception: icon-only buttons */
.btn--icon-only {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   LINKS — accessible states
   ============================================================ */

/* Ensure links have visible non-color indicator */
a:not([class]) {
	text-underline-offset: 3px;
}

/* Don't rely on color alone */
a:not([class]):visited {
	color: var(--color-primary);
	opacity: 0.85;
}

/* ============================================================
   FORMS — accessible states
   ============================================================ */

/* Required field asterisk */
.form-field label span[aria-hidden="true"] {
	color: var(--color-accent);
	margin-inline-start: 0.125rem;
}

/* Error state — communicated via aria-invalid */
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}

/* Error messages */
.field-error {
	color: #c0392b;
	font-size: 0.8125rem;
	margin-block-start: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.field-error::before {
	content: '⚠';
	font-size: 0.75rem;
}

/* Fieldset legend — visually styled as label */
.form-field--checkboxes legend {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	margin-block-end: 0.5rem;
	float: left;
	width: 100%;
}

/* ============================================================
   ACCORDION — accessible open/close states
   ============================================================ */

.accordion-trigger[aria-expanded="true"] .accordion-icon {
	transform: rotate(180deg);
}

.accordion-trigger:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Ensure hidden panels are truly hidden from AT */
.accordion-panel[hidden] {
	display: none;
}

/* ============================================================
   LANGUAGE TOGGLE — accessible state
   ============================================================ */

.lang-btn[aria-current="true"],
.lang-btn[aria-pressed="true"] {
	font-weight: 700;
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ============================================================
   NAVIGATION — current page indicator
   ============================================================ */

.nav-link[aria-current="section"],
.nav-link[aria-current="page"] {
	color: var(--color-accent);
}

/* ============================================================
   IMAGES & ICONS
   ============================================================ */

/* SVG icons that are purely decorative */
svg[aria-hidden="true"] {
	pointer-events: none;
}

/* Images without alt text — flag visually in dev */
img:not([alt]) {
	outline: 3px solid red;
}

/* ============================================================
   COLOR CONTRAST HELPERS
   Ensure text on backgrounds meets WCAG AA (4.5:1 normal, 3:1 large)
   ============================================================ */

/* Section label on white — override to ensure contrast */
.section-label {
	/* Forest green on white: ~6:1 — OK */
	color: var(--color-primary);
}

/* Muted text — ensure minimum contrast */
.text-muted,
.form-note,
.media-distributor-note {
	color: #666; /* ~5.7:1 on white — OK */
}

/* Trust badge text on dark */
.trust-badge span,
.distributor-trust .trust-badge span {
	color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   LIVE REGIONS — visual feedback
   ============================================================ */

/* Status / alert messages */
[role="status"],
[role="alert"] {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
}

.form-success[role="status"] {
	background: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #a5d6a7;
}

.form-error[role="alert"] {
	background: #ffebee;
	color: #b71c1c;
	border: 1px solid #ef9a9a;
}

/* ============================================================
   REDUCED MOTION — additional preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	/* Stop shimmer on remaining placeholders */
	.placeholder-visual {
		animation: none;
		background: var(--wp--preset--color--background-alt);
	}

	/* No scroll behavior */
	html {
		scroll-behavior: auto;
	}

	/* Remove all transitions */
	.site-header,
	.btn,
	.nav-link,
	.lang-btn,
	.product-card,
	.component-card,
	.application-card,
	.accordion-panel,
	.usp-card {
		transition: none !important;
	}

	/* Keep focus outlines even without animation */
	:focus-visible {
		outline: 3px solid var(--color-accent);
		outline-offset: 3px;
	}
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */

@media (forced-colors: active) {

	.btn--primary,
	.btn--outline {
		border: 2px solid ButtonText;
	}

	.nav-link::after {
		background: Highlight;
	}

	.section-title::after {
		background: Highlight;
	}

	.site-header {
		border-bottom: 1px solid ButtonText;
	}
}

/* ============================================================
   PRINT — accessible printed document
   ============================================================ */

@media print {

	/* Show URLs after links */
	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 0.75em;
		color: #555;
	}

	/* Don't show URL for anchor links */
	a[href^="#"]::after {
		content: '';
	}

	/* Ensure black text on white */
	body,
	.section--bg-dark,
	.site-footer {
		color: #000 !important;
		background: #fff !important;
	}
}