/**
 * KATV Accessibility Styles — WCAG 2.1 AA
 * ========================================
 */

/* ========================================
   1. FOCUS STYLES
   ======================================== */

/* Universal focus outline — visible and high contrast */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.button:focus,
summary:focus {
	outline: 3px solid #005fcc !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3) !important;
}

/* Use :focus-visible for keyboard-only focus (modern browsers) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.button:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
summary:focus-visible {
	outline: 3px solid #005fcc !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3) !important;
}

/* Enhanced skip link */
.skip-link.screen-reader-text:focus {
	background: #005fcc !important;
	color: #ffffff !important;
	display: block !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	padding: 15px 23px !important;
	position: fixed !important;
	top: 7px !important;
	left: 7px !important;
	z-index: 100001 !important;
	text-decoration: none !important;
	line-height: normal !important;
	border-radius: 4px !important;
	clip: auto !important;
	width: auto !important;
	height: auto !important;
}

/* ========================================
   2. SCREEN READER TEXT (Utility)
   ======================================== */

.screen-reader-text,
.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	word-wrap: normal !important;
	white-space: nowrap !important;
}

.screen-reader-text:focus,
.sr-only:focus {
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	position: fixed !important;
	top: 5px;
	left: 5px;
	z-index: 100000;
	background: #fff;
	padding: 10px 15px;
	font-size: 1rem;
	color: #21759b;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
}

/* ========================================
   3. LINKS — Distinguish from text
   ======================================== */

/* Links MUST be distinguishable not only by color */
.entry-content a,
.page-content a,
.post-content a,
.text-content a,
article a:not(.button):not(.btn) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover,
.page-content a:hover,
.post-content a:hover,
article a:not(.button):not(.btn):hover {
	text-decoration-thickness: 2px;
}

/* ========================================
   4. MINIMUM TOUCH TARGET SIZE (44x44px)
   ======================================== */

/* Buttons and interactive elements need 44px min */
@media (pointer: coarse) {
	button,
	.button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	a.button,
	.btn {
		min-height: 44px;
		min-width: 44px;
	}
}

/* ========================================
   5. FORM ACCESSIBILITY
   ======================================== */

/* Required fields indicator */
.wpcf7-form .wpcf7-validates-as-required {
	border-left: 3px solid #b40438;
}

/* Error state styling */
.wpcf7-not-valid {
	border-color: #cc0000 !important;
	background-color: #fff5f5 !important;
}

/* Error message styling */
.wpcf7-not-valid-tip {
	color: #cc0000;
	font-weight: 600;
	font-size: 0.875rem;
}

/* Response output — ensure visible */
.wpcf7-response-output {
	font-weight: 600;
	padding: 12px 16px;
	border-width: 2px !important;
}

/* Labels — ensure they're clearly associated */
label {
	cursor: pointer;
}

/* Placeholder contrast */
::placeholder {
	color: #595959;
	opacity: 1;
}

/* ========================================
   6. CONTRAST IMPROVEMENTS
   ======================================== */

/* Ensure body text has sufficient contrast */
body,
p,
li,
td,
th,
dd,
dt {
	color: #1a1a1a;
}

/* Caption and smaller text — needs 4.5:1 ratio on white */
figcaption,
.wp-caption-text,
small,
.small,
.meta,
.post-date,
.post-author {
	color: #595959;
}

/* Remove/close links */
a.icon-remove,
a.remove {
	color: #767676 !important;
}

/* Star ratings empty state */
.star-rating::before,
.stars a::after {
	color: #767676 !important;
}

/* Lightbox preloader */
.mfp-preloader,
.mfp-preloader a,
.mfp-counter {
	color: #767676 !important;
}

/* Footer text contrast fix — ensure light text on dark footer bg */
#footer a:not(.button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Absolute footer (dark bg #4d4d4d) — force white text & links for 4.5:1+ contrast */
.absolute-footer.dark,
.absolute-footer.dark p,
.absolute-footer.dark span,
.absolute-footer.dark div {
	color: #fff !important;
}
.absolute-footer.dark a,
.absolute-footer.dark a:visited {
	color: #fff !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.absolute-footer.dark a:hover,
.absolute-footer.dark a:focus {
	color: #ffff00 !important;
}

/* Disabled state — still needs to be perceivable */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.button.disabled,
.button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ========================================
   7. 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;
	}

	.owl-carousel .owl-stage {
		transition-duration: 0s !important;
	}

	/* Disable the wiggle button animation */
	#menu-item-1286 a,
	#menu-item-1310 a {
		animation: none !important;
		-webkit-animation: none !important;
	}

	/* Disable background-animation section */
	.background-animation::before,
	.background-animation::after {
		animation: none !important;
		-webkit-animation: none !important;
	}
}

/* ========================================
   8. HIGH CONTRAST MODE (Windows)
   ======================================== */

@media (forced-colors: active) {
	a {
		text-decoration: underline;
	}

	button,
	.button,
	input[type="submit"] {
		border: 2px solid ButtonText;
	}

	:focus,
	:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* ========================================
   9. PREFERS CONTRAST (High)
   ======================================== */

@media (prefers-contrast: more) {
	body,
	p, li, td, th {
		color: #000 !important;
	}

	a {
		color: #00008b !important;
		text-decoration: underline !important;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #000 !important;
	}

	.button,
	button,
	input[type="submit"] {
		border: 2px solid #000 !important;
	}
}

/* ========================================
   10. OWL CAROUSEL ACCESSIBILITY
   ======================================== */

/* Carousel status for screen readers */
.owl-carousel .katv-carousel-status {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Carousel dots hidden — arrows only */
.flickity-page-dots,
.owl-dots {
	display: none !important;
}

/* ========================================
   11. HEADING VISUAL HIERARCHY
   ======================================== */

/* Ensure headings are visually distinct */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
}

/* ========================================
   12. SELECTION / HIGHLIGHT
   ======================================== */

::selection {
	background: #005fcc;
	color: #fff;
}

/* ========================================
   13. SPACING & READABILITY
   ======================================== */

/* Minimum line-height for readability (WCAG 1.4.12) */
p,
li,
dd,
td,
th,
blockquote,
.entry-content {
	line-height: 1.6;
}

/* Ensure paragraph spacing (WCAG 1.4.12) */
p + p {
	margin-top: 1em;
}

/* ========================================
   14. ACCESSIBILITY TOOLBAR STYLES
   ======================================== */

/* Toolbar toggle button — circle, aligned with back-to-top */
#katv-a11y-toolbar-toggle {
	position: fixed;
	bottom: 65px;
	right: 0px;
	z-index: 99999;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	background: #005fcc;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	line-height: 1;
	overflow: hidden;
}

#katv-a11y-toolbar-toggle:hover,
#katv-a11y-toolbar-toggle:focus {
	background: #003d99;
}

/* Toolbar panel */
#katv-a11y-toolbar {
	position: fixed;
	bottom: 130px;
	right: 20px;
	z-index: 99998;
	background: #fff;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	display: none;
	min-width: 220px;
}

#katv-a11y-toolbar.is-open {
	display: block;
}

#katv-a11y-toolbar h3 {
	font-size: 0.9rem;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ddd;
	color: #333;
}

#katv-a11y-toolbar button {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 6px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	text-align: left;
	font-size: 0.875rem;
	color: #333;
	transition: background 0.15s;
}

#katv-a11y-toolbar button:hover,
#katv-a11y-toolbar button:focus {
	background: #e0e0e0;
}

#katv-a11y-toolbar button.active {
	background: #005fcc;
	color: #fff;
	border-color: #005fcc;
}

/* ========================================
   15. TOOLBAR ACTIVE MODES
   ======================================== */

/* Large text mode */
body.katv-large-text {
	font-size: 120% !important;
}

body.katv-large-text h1 { font-size: 2.8em; }
body.katv-large-text h2 { font-size: 2.5em; }
body.katv-large-text h3 { font-size: 2em; }
body.katv-large-text h4 { font-size: 1.5em; }

/* High contrast mode */
body.katv-high-contrast {
	background: #000 !important;
	color: #fff !important;
}

body.katv-high-contrast *:not(img):not(video):not(svg):not(canvas) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}

body.katv-high-contrast a {
	color: #ffff00 !important;
	text-decoration: underline !important;
}

body.katv-high-contrast button,
body.katv-high-contrast .button,
body.katv-high-contrast input[type="submit"] {
	background: #fff !important;
	color: #000 !important;
	border: 2px solid #fff !important;
}

body.katv-high-contrast img {
	filter: contrast(1.2);
}

/* Highlight links mode */
body.katv-highlight-links a {
	outline: 2px solid #ffff00 !important;
	background: rgba(255, 255, 0, 0.15) !important;
}

/* Readable font mode */
body.katv-readable-font,
body.katv-readable-font * {
	font-family: Arial, Helvetica, sans-serif !important;
	letter-spacing: 0.03em !important;
	word-spacing: 0.1em !important;
}