
/**
 * Hunt Regional Healthcare – Global Accessibility Stylesheet
 * WCAG 2.1 Level AA Compliance
 * =============================================================
 *
 * Version:  2.0.1
 * Updated:  2026-03-31
 * Author:   Hunt Regional Marketing
 *
 * Enqueue in child theme functions.php:
 *
 *   wp_enqueue_style(
 *       'hr-wcag-enhancements',
 *       get_stylesheet_directory_uri() . '/hr-wcag-enhancements.css',
 *       array( 'avada-stylesheet' ),
 *       '2.0.0'
 *   );
 *
 * Primary focus color: #4f2d8f (Hunt Regional purple, 8.1:1 on white)
 * White buffer ring ensures visibility on any background color.
 *
 * Search: Custom SearchWP dropdown (Ivory Search removed).
 * Cards: avada-card-keyboard-nav.js handles Post Card focus styles
 *        separately — this file covers everything else site-wide.
 *
 * Sections:
 *   1. Global Focus Indicators
 *   2. Color Contrast Fixes
 *   3. Link Distinguishability
 *   4. Button & Interactive Contrast
 *   5. Touch Target Sizing
 *   6. Image & Media
 *   7. Reduced Motion
 *   8. High Contrast Mode
 *   9. Print Accessibility
 */

/* =============================================================
   1. GLOBAL FOCUS INDICATORS (WCAG 2.4.7, 2.4.11, 2.4.12)
   =============================================================
   Three-rule progressive enhancement pattern:
   - *:focus            → fallback for older browsers
   - *:focus:not(…)     → removes fallback when :focus-visible supported
   - *:focus-visible    → keyboard-only focus ring (modern browsers)
   ============================================================= */

/* Fallback for browsers without :focus-visible support */
*:focus {
	outline: 2px solid #4f2d8f;
	outline-offset: 2px;
}

/* Remove fallback when :focus-visible IS supported (mouse clicks) */
*:focus:not(:focus-visible) {
	outline: none;
}

/* Keyboard-only focus indicator */
*:focus-visible {
	outline: 3px solid #4f2d8f;
	outline-offset: 2px;
}

/*
 * Enhanced focus for interactive elements:
 * White buffer between element and purple ring guarantees
 * contrast on ANY background color.
 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid #4f2d8f;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #fff, 0 0 0 4px #4f2d8f;
}

/* Same elements: remove fallback on mouse click */
a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), [role="link"]:focus:not(:focus-visible), [role="tab"]:focus:not(:focus-visible), [role="menuitem"]:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/*
 * Avada main menu: use purple on nav as well.
 * If nav background is dark, the white buffer handles contrast.
 */
.fusion-main-menu a:focus-visible, .fusion-main-menu .fusion-megamenu a:focus-visible, .fusion-mobile-nav-holder a:focus-visible {
	outline: 3px solid #4f2d8f;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #fff, 0 0 0 4px #4f2d8f;
}

/* Avada mega menu dropdowns */
.fusion-megamenu-wrapper a:focus-visible, .fusion-dropdown-menu a:focus-visible {
	outline: 3px solid #4f2d8f;
	outline-offset: 1px;
	box-shadow: 0 0 0 1px #fff, 0 0 0 4px #4f2d8f;
}

/* Footer links on dark background */
.fusion-footer-widget-area a:focus-visible, .fusion-footer-copyright-area a:focus-visible {
	outline: 3px solid #4f2d8f;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #fff, 0 0 0 4px #4f2d8f;
}

/* FacetWP filter controls */
.facetwp-facet a:focus-visible, .facetwp-facet select:focus-visible, .facetwp-facet input:focus-visible, .facetwp-facet button:focus-visible, .facetwp-facet .facetwp-checkbox:focus-visible {
	outline: 3px solid #4f2d8f;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #fff, 0 0 0 4px #4f2d8f;
}

/* =============================================================
   2. COLOR CONTRAST FIXES (WCAG 1.4.3, 1.4.6)
   =============================================================
   Minimum 4.5:1 for normal text, 3:1 for large text (18px+).
   These target common Avada elements that ship with
   insufficient contrast out of the box.
   ============================================================= */

/* Body text: ensure minimum contrast */
body, .post-content, .entry-content, .fusion-post-content, .page-content {
	color: #1a1a1a;
}

/* Meta text (dates, categories, breadcrumbs) */
.fusion-meta, .fusion-date, .single-line-meta, .fusion-breadcrumbs, .fusion-post-content .fusion-meta {
	color: #595959;
}

/* Placeholder text */
::placeholder {
	color: #767676;
	/* 4.5:1 on #fff — minimum AA */
	opacity: 1;
}

/* -------------------------------------------------------------
   2.1 Dark-background link contrast fix
   -------------------------------------------------------------
   Section 3's global .fusion-text a rule sets #005a9c (5.2:1 on
   white) — great on light backgrounds, but fails contrast on
   Avada columns whose background is set to the Hunt Regional
   purple (#4f2d8f) via --awb-bg-color. This override forces
   white text on those specific columns. Covers phone links,
   email links, and any other anchor inside a .fusion-text block
   on a purple-background column (e.g., single location pages).
   ------------------------------------------------------------- */
.fusion-layout-column[style*="--awb-bg-color:var(--awb-color6)"] .fusion-text a, .fusion-layout-column[style*="--awb-bg-color: var(--awb-color6)"] .fusion-text a, .fusion-layout-column[style*="--awb-bg-color:#4f2d8f"] .fusion-text a, .fusion-layout-column[style*="--awb-bg-color: #4f2d8f"] .fusion-text a, .fusion-layout-column[style*="--awb-bg-color:#4F2D8F"] .fusion-text a, .fusion-layout-column[style*="--awb-bg-color: #4F2D8F"] .fusion-text a {
	color: #fff !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.fusion-layout-column[style*="--awb-bg-color:var(--awb-color6)"] .fusion-text a:hover, .fusion-layout-column[style*="--awb-bg-color: var(--awb-color6)"] .fusion-text a:hover, .fusion-layout-column[style*="--awb-bg-color:#4f2d8f"] .fusion-text a:hover, .fusion-layout-column[style*="--awb-bg-color: #4f2d8f"] .fusion-text a:hover, .fusion-layout-column[style*="--awb-bg-color:#4F2D8F"] .fusion-text a:hover, .fusion-layout-column[style*="--awb-bg-color: #4F2D8F"] .fusion-text a:hover {
	color: #e8d9ff !important;
	text-decoration-thickness: 2px;
}

.fusion-layout-column[style*="--awb-bg-color:var(--awb-color6)"] .fusion-text a:focus-visible, .fusion-layout-column[style*="--awb-bg-color: var(--awb-color6)"] .fusion-text a:focus-visible, .fusion-layout-column[style*="--awb-bg-color:#4f2d8f"] .fusion-text a:focus-visible, .fusion-layout-column[style*="--awb-bg-color: #4f2d8f"] .fusion-text a:focus-visible, .fusion-layout-column[style*="--awb-bg-color:#4F2D8F"] .fusion-text a:focus-visible, .fusion-layout-column[style*="--awb-bg-color: #4F2D8F"] .fusion-text a:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 1px #4f2d8f, 0 0 0 5px #fff !important;
}

/* =============================================================
   3. LINK DISTINGUISHABILITY (WCAG 1.4.1)
   =============================================================
   Links in body content must be distinguishable by more than
   color alone. Underline is the standard method.
   ============================================================= */
.entry-content a, .post-content a, .fusion-post-content a, .page-content a, .textwidget a, .fusion-text a {
	color: #005a9c;
	/* 5.2:1 on #fff */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:hover, .post-content a:hover, .fusion-post-content a:hover, .page-content a:hover, .textwidget a:hover, .fusion-text a:hover {
	color: #003d6b;
	/* 8.1:1 on #fff */
	text-decoration-thickness: 2px;
}

.entry-content a:focus-visible, .post-content a:focus-visible, .fusion-post-content a:focus-visible, .page-content a:focus-visible {
	color: #003d6b;
	text-decoration-thickness: 2px;
}

/*
 * Exceptions: elements that don't need underlines.
 * Nav links, buttons, card wrappers, image rollovers,
 * Read More links (styled as buttons), breadcrumbs.
 */
.fusion-main-menu a, .fusion-megamenu a, .fusion-mobile-nav-holder a, .fusion-button, .fusion-read-more, .fusion-post-wrapper a, .fusion-rollover a, .fusion-breadcrumbs a, .fusion-footer-widget-area a, .fusion-footer-copyright-area a, .facetwp-facet a {
	text-decoration: none;
}

/*
 * Content-scoped button overrides: these beat the
 * .post-content a / .entry-content a underline rules
 * which have specificity 0-1-1. We match that here.
 */
.entry-content .fusion-button, .post-content .fusion-button, .fusion-post-content .fusion-button, .page-content .fusion-button, .fusion-text .fusion-button, .entry-content .fusion-read-more, .post-content .fusion-read-more, .fusion-post-content .fusion-read-more, .page-content .fusion-read-more {
	text-decoration: none;
	color: revert;
}

/*
 * Heading links: no underline by default,
 * underline on hover/focus for discoverability.
 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .fusion-title a, .entry-title a {
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .fusion-title a:hover, .entry-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* =============================================================
   4. BUTTON & INTERACTIVE CONTRAST (WCAG 1.4.3, 1.4.11)
   =============================================================
   Ensures buttons meet text contrast AND the 3:1
   non-text contrast requirement for UI component boundaries.
   ============================================================= */

/* Primary buttons: ensure hover/focus contrast */
.fusion-button:hover, .fusion-button:focus-visible, button[type="submit"]:hover, input[type="submit"]:hover {
	opacity: 1;
}

/* Non-text contrast: borders on UI components (WCAG 1.4.11) */
input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea {
	border: 1px solid #767676;
}

/* =============================================================
   5. TOUCH TARGET SIZING (WCAG 2.5.8 – Level AA in WCAG 2.2)
   =============================================================
   Minimum 24×24 CSS px required; 44×44 recommended.
   Healthcare audiences skew older — we target 44×44.
   ============================================================= */

/* Buttons and explicit interactive controls only.
   We do NOT target bare `a` tags — Avada uses links for
   styled components and a blanket min-height breaks them. */
button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], .fusion-button {
	min-height: 44px;
	min-width: 44px;
}

/* Nav links: ensure adequate tap targets in mobile menu. */
.fusion-mobile-nav-holder a, .fusion-mobile-nav-holder .fusion-open-nav-submenu {
	min-height: 44px;
	padding-top: 12px;
	padding-bottom: 12px;
}

/* FacetWP checkboxes and filter items */
.facetwp-facet .facetwp-checkbox {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 4px 0;
}

.awb-menu.collapse-enabled .awb-menu__main-ul {
	max-height: 0 !important;
}

.awb-menu.collapse-enabled.expanded .awb-menu__main-ul {
	max-height: 100vh !important;
	max-height: max-content !important;
}

/* =============================================================
   6. IMAGE & MEDIA (WCAG 1.1.1, 1.4.5)
   ============================================================= */

/* Responsive images */
img {
	max-width: 100%;
	height: auto;
}

/* Decorative images: no border */
img[alt=""] {
	border: 0;
}

/* Responsive media */
video, audio {
	max-width: 100%;
}

/* Ensure NitroPack lazy-loaded images don't break layout */
img[nitro-empty-id] {
	max-width: 100%;
	height: auto;
}

/* =============================================================
   7. REDUCED MOTION (WCAG 2.3.3)
   =============================================================
   Respects user's OS-level motion preferences.
   Critical for users with vestibular disorders.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	
	/* Avada-specific animated elements */
	.fusion-animated, .fusion-post-wrapper, .fusion-post-wrapper:hover, .fusion-portfolio-post, .fusion-rollover, .fusion-imageframe, .fusion-column-wrapper {
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	
	/* Sliders and carousels */
	.fusion-slider-container, .swiper-container, .fusion-carousel {
		transition: none !important;
	}
	
	/* Homepage slider: stop autoplay via CSS
       (JS autoplay should also be disabled) */
	.fusion-slider-container .flex-direction-nav, .fusion-slider-container .flex-pauseplay {
		display: block !important;
	}
}

/* =============================================================
   8. HIGH CONTRAST MODE (WCAG 1.4.3, 1.4.11)
   ============================================================= */

/* User prefers high contrast */
@media (prefers-contrast: high) {
	a {
		text-decoration: underline !important;
	}
	
	*:focus-visible {
		outline-width: 4px !important;
		outline-style: solid !important;
	}
	
	input, select, textarea {
		border-width: 2px !important;
		border-color: currentColor !important;
	}
	
	.fusion-button, button {
		border: 2px solid currentColor !important;
	}
}

/* Windows High Contrast / Forced Colors */
@media (forced-colors: active) {
	*:focus-visible {
		outline: 3px solid Highlight !important;
	}
	
	a {
		color: LinkText;
	}
	
	.fusion-button, button {
		border: 2px solid ButtonText !important;
	}
	
	/* Ensure FacetWP checkboxes remain visible */
	.facetwp-facet .facetwp-checkbox::before {
		border: 2px solid ButtonText;
	}
}

/* =============================================================
   9. PRINT ACCESSIBILITY
   ============================================================= */
@media print {
	/* Show link URLs after link text */
	.entry-content a[href]::after, .post-content a[href]::after, .fusion-text a[href]::after {
		content: " (" attr(href) ")";
		font-size: .85em;
		color: #595959;
	}
	
	/* Don't print URLs for anchors or javascript links */
	.entry-content a[href^="#"]::after, .entry-content a[href^="javascript"]::after, .post-content a[href^="#"]::after, .fusion-text a[href^="#"]::after {
		content: none;
	}
	
	/* Don't print URLs for internal nav links */
	.fusion-main-menu a::after, .fusion-breadcrumbs a::after, .fusion-footer-widget-area a::after {
		content: none;
	}
	
	/* Hide non-essential elements */
	.fusion-social-links, .fusion-slider-container, .facetwp-facet {
		display: none !important;
	}
}
