.cti-accessibility-skip-links {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 9999999;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 90vw;
	pointer-events: none; /* IMPORTANT: Don't intercept clicks when hidden */
}

.cti-accessibility-skip-links--top_right {
	left: auto;
	right: 0.5rem;
}

.cti-accessibility-skip-links--bottom_left {
	top: auto;
	bottom: 0.5rem;
}

.cti-accessibility-skip-links--bottom_right {
	top: auto;
	left: auto;
	right: 0.5rem;
	bottom: 0.5rem;
}

/* Offset for WordPress admin bar when logged in - only for top positions */
.admin-bar .cti-accessibility-skip-links:not(.cti-accessibility-skip-links--bottom_left):not(.cti-accessibility-skip-links--bottom_right) {
	top: calc(32px + 0.5rem);
}

.admin-bar .cti-accessibility-skip-links--top_right {
	top: calc(32px + 0.5rem);
}

/* Ensure bottom positions stay at bottom even when admin bar is present */
.admin-bar .cti-accessibility-skip-links--bottom_left,
.admin-bar .cti-accessibility-skip-links--bottom_right {
	top: auto;
	bottom: 0.5rem;
}

@media (max-width: 782px) {
	.admin-bar .cti-accessibility-skip-links:not(.cti-accessibility-skip-links--bottom_left):not(.cti-accessibility-skip-links--bottom_right) {
		top: calc(46px + 0.25rem);
	}
	
	.admin-bar .cti-accessibility-skip-links--top_right {
		top: calc(46px + 0.25rem);
	}
	
	/* Ensure bottom positions stay at bottom on mobile when admin bar is present */
	.admin-bar .cti-accessibility-skip-links--bottom_left,
	.admin-bar .cti-accessibility-skip-links--bottom_right {
		top: auto;
		bottom: 0.5rem;
	}
}

/* Skip link - HIDDEN STATE (proper sr-only technique) */
.cti-accessibility-skip-link {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none; /* No interactions when hidden */
	background-color: #ffffff;
	color: var(--cti-accessibility-skip-color, #005bb5);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.2s ease;
	min-width: fit-content;
}

.cti-accessibility-skip-link:hover {
	background-color: var(--cti-accessibility-skip-color, #005bb5);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 
		0 4px 8px rgba(0, 0, 0, 0.15),
		0 0 0 1px rgba(0, 0, 0, 0.05);
}

.cti-accessibility-skip-link:hover .cti-accessibility-skip-link__hint {
	background-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

.cti-accessibility-skip-links--style-compact .cti-accessibility-skip-link {
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.875rem;
}

.cti-accessibility-skip-link__label {
	flex: 1;
}

.cti-accessibility-skip-link__hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	background-color: var(--cti-accessibility-skip-color, #005bb5);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.cti-accessibility-skip-links--style-compact .cti-accessibility-skip-link__hint {
	font-size: 0.625rem;
	padding: 0.1rem 0.4rem;
}

/* Skip link - VISIBLE STATE (when focused) */
.cti-accessibility-skip-link:focus,
.cti-accessibility-skip-link:focus-visible {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	padding: 0.75rem 1.25rem !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	pointer-events: auto; /* Enable interactions when visible */
	border: 2px solid var(--cti-accessibility-skip-color, #005bb5) !important;
	box-shadow: 
		0 4px 12px rgba(0, 91, 181, 0.3),
		0 0 0 3px rgba(0, 91, 181, 0.2),
		0 2px 4px rgba(0, 0, 0, 0.1);
	outline: 3px solid var(--cti-accessibility-skip-color, #005bb5);
	outline-offset: 3px;
	transform: translateY(0);
}

/* When one link is focused, show all links stacked */
.cti-accessibility-skip-links:has(.cti-accessibility-skip-link:focus) .cti-accessibility-skip-link,
.cti-accessibility-skip-links:has(.cti-accessibility-skip-link:focus-visible) .cti-accessibility-skip-link {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	padding: 0.75rem 1.25rem !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	pointer-events: auto !important;
	border: 2px solid var(--cti-accessibility-skip-color, #005bb5) !important;
}

/* Fallback for browsers that don't support :has() */
.cti-accessibility-skip-links.cti-skip-links-active .cti-accessibility-skip-link {
	position: relative !important;
	width: auto !important;
	height: auto !important;
	padding: 0.75rem 1.25rem !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	pointer-events: auto !important;
	border: 2px solid var(--cti-accessibility-skip-color, #005bb5) !important;
}

/* Enable pointer events on container when any link is focused */
.cti-accessibility-skip-links:focus-within,
.cti-accessibility-skip-links.cti-skip-links-active {
	pointer-events: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.cti-accessibility-skip-links {
		top: 0.25rem;
		left: 0.25rem;
		right: 0.25rem;
		max-width: calc(100vw - 0.5rem);
	}
	
	.cti-accessibility-skip-links--top_right {
		left: 0.25rem;
		right: 0.25rem;
	}

	.cti-accessibility-skip-links--bottom_left,
	.cti-accessibility-skip-links--bottom_right {
		left: 0.25rem;
		right: 0.25rem;
		top: auto;
		bottom: 0.5rem;
	}
	
	/* Ensure bottom positions stay at bottom on mobile when admin bar is present */
	.admin-bar .cti-accessibility-skip-links--bottom_left,
	.admin-bar .cti-accessibility-skip-links--bottom_right {
		top: auto;
		bottom: 0.5rem;
	}

	.cti-accessibility-skip-link {
		font-size: 0.875rem;
		padding: 0.625rem 1rem;
		width: 100%;
		justify-content: space-between;
	}

	.cti-accessibility-skip-link__hint {
		font-size: 0.625rem;
		padding: 0.1rem 0.4rem;
	}
}


/* Form accessibility styles */
.cti-form-error {
	border-color: #d63638 !important;
	background-color: #fff3cd !important;
}

.cti-form-error-message {
	display: block;
	color: #d63638;
	font-size: 14px;
	margin-top: 5px;
}

.cti-form-error-summary {
	margin-bottom: 15px;
	padding: 15px;
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	color: #721c24;
}

.cti-form-error-summary h2 {
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 10px;
}

.cti-form-error-summary ul {
	margin: 0;
	padding-left: 20px;
}

.cti-form-error-summary a {
	color: #721c24;
	text-decoration: underline;
}

.cti-form-error-summary a:hover {
	text-decoration: none;
}

.cti-form-success-message {
	margin-bottom: 15px;
	padding: 15px;
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 4px;
	color: #155724;
}

/* Modal open helper: prevent background scroll when a CTI modal is active. */
.cti-modal-open {
	overflow: hidden;
}

/* Generic modal visibility helper class used by keyboard-navigation.js */
.cti-accessibility-modal-open {
	display: block !important;
}

/* ================================
   UNIVERSAL FOCUS STYLE
   Two-color indicator (W3C technique C40): a white inner outline plus a
   black outer box-shadow by default, ring following each element's own
   shape (not a forced rectangle). White/black are ~21:1 apart, well
   past C40's 9:1 minimum, guaranteeing at least one ring clears the
   WCAG 2.2 SC 1.4.11 (Non-Text Contrast) 3:1 minimum against any
   background a section/card happens to use.

   Some elements (mainly Divi buttons styled for a dark card) already
   have their OWN white border, which a white inner ring would blend
   straight into. assets/js/focus-management.js listens for focusin,
   reads the focused element's actual border color, and - only when
   that border is itself light/white - adds the .cti-focus-invert class,
   swapping the ring to a black inner outline + white outer box-shadow
   so it never sits flush against a matching border. Plain text links
   with no border of their own, and elements with a black/dark border,
   are untouched and keep the default white/black ring.

   A link whose content is an image (logo, badges, social icons) gets
   the ring on the <img> itself rather than the anchor, since an inline
   anchor's own box is often mis-sized relative to the image inside it.
   ================================ */

*:focus-visible:not(.cti-focus-invert):not(:has(> img)) {
	outline: 3px solid #fff !important;
	outline-offset: 0px !important;
	box-shadow: 0 0 0 6px var(--cti-accessibility-focus-color, #000000) !important;
}

*:focus-visible.cti-focus-invert:not(:has(> img)) {
	outline: 3px solid #000 !important;
	outline-offset: 0px !important;
	box-shadow: 0 0 0 6px var(--cti-accessibility-focus-color, #fff) !important;
}

*:focus-visible:has(> img) {
	outline: none !important;
}

*:focus-visible:not(.cti-focus-invert) > img {
	outline: 3px solid #fff !important;
	outline-offset: 0px !important;
	box-shadow: 0 0 0 6px var(--cti-accessibility-focus-color, #000000) !important;
}

*:focus-visible.cti-focus-invert > img {
	outline: 3px solid #000 !important;
	outline-offset: 0px !important;
	box-shadow: 0 0 0 6px var(--cti-accessibility-focus-color, #fff) !important;
}

/* ================================
   SCREEN READER ONLY ELEMENTS
   Visually hidden but accessible
   ================================ */

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

/* Allow sr-only elements to be focusable and visible when focused */
.cti-sr-only:focus,
.cti-sr-only:active,
.cti-visually-hidden:focus,
.cti-visually-hidden:active {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: inherit !important;
	margin: inherit !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}

/* ================================
   LIVE REGION ANNOUNCEMENTS
   ================================ */

#cti-accessibility-live-region,
#cti-kb-announce,
#cti-focus-announce {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ================================
   HIGH CONTRAST MODE SUPPORT
   For Windows High Contrast Mode
   ================================ */

@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	[tabindex]:not([tabindex="-1"]):focus-visible {
		outline: 3px solid CanvasText !important;
		outline-offset: 3px !important;
	}
	
	.cti-accessibility-skip-link:focus {
		background-color: Canvas !important;
		color: CanvasText !important;
		outline: 3px solid CanvasText !important;
	}
}

/* ================================
   REDUCED MOTION SUPPORT
   Respect user preferences
   ================================ */

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


/* aria-current="page" is for screen readers only - no visual styling needed */
/* The attribute itself provides the semantic information to assistive technologies */

/* ================================
   MENU SUBMENU VISIBILITY CLASSES
   Used by keyboard-navigation.js
   ================================ */

/* Hide submenu - but NOT inside DIVI menus (DIVI uses et-hover class) */
.cti-menu-hidden {
	display: none;
	visibility: hidden;
}

/* Override for DIVI menus - let DIVI's CSS handle visibility */
.et-menu .cti-menu-hidden,
#et-top-navigation .cti-menu-hidden,
.et_pb_menu .cti-menu-hidden {
	display: revert;
	visibility: revert;
}

.cti-menu-visible {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Allow CSS hover to override hidden state when user hovers */
li:hover > ul.cti-menu-hidden,
li.menu-item-has-children:hover > ul.cti-menu-hidden,
li:hover > .sub-menu.cti-menu-hidden {
	display: block;
	visibility: visible;
}

/* ================================
   DIVI ACCORDION & TABS ACCESSIBILITY
   Tab-key navigation enhancements
   ================================ */

/* Focus styles for accordion titles */
.et_pb_toggle_title:focus-visible {
	outline: 3px solid #005bb5 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(0, 91, 181, 0.25) !important;
}

/* Focus styles for tab controls */
.et_pb_tabs_controls a:focus-visible {
	outline: 3px solid #005bb5 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(0, 91, 181, 0.25) !important;
}

/* Keyboard user highlight for accordion titles */
.cti-keyboard-user .et_pb_toggle_title:focus {
	background-color: rgba(0, 91, 181, 0.05);
}

/* Keyboard user highlight for tab controls */
.cti-keyboard-user .et_pb_tabs_controls a:focus {
	background-color: rgba(0, 91, 181, 0.05);
}

/* Content focus when tabbed into */
.et_pb_toggle_content[tabindex="0"]:focus,
.et_pb_toggle_content[tabindex="-1"]:focus,
.et_pb_tab[tabindex="0"]:focus,
.et_pb_tab[tabindex="-1"]:focus {
	outline: 2px solid #005bb5;
	outline-offset: -2px;
}

/* Ensure accordion titles are focusable and have proper cursor */
.et_pb_toggle_title[role="button"] {
	cursor: pointer;
}

/* Ensure tab controls are focusable */
.et_pb_tabs_controls a[role="tab"] {
	cursor: pointer;
}

/* High contrast mode support for DIVI elements */
@media (forced-colors: active) {
	.et_pb_toggle_title:focus-visible,
	.et_pb_tabs_controls a:focus-visible {
		outline: 3px solid CanvasText !important;
		outline-offset: 3px !important;
	}
	
	.et_pb_toggle_content[tabindex="0"]:focus,
	.et_pb_toggle_content[tabindex="-1"]:focus,
	.et_pb_tab[tabindex="0"]:focus,
	.et_pb_tab[tabindex="-1"]:focus {
		outline: 2px solid CanvasText !important;
	}
}

/* Reduced motion support for DIVI accordion/tabs */
@media (prefers-reduced-motion: reduce) {
	.et_pb_toggle_content,
	.et_pb_tab {
		transition: none !important;
		animation: none !important;
	}
}

/* ================================
   DIVI ETMODULES ICON FONT ACCESSIBILITY
   Hide icon font characters from screen readers
   ================================ */

/* Universal solution: Hide ETmodules icon fonts from screen readers */
.cti-has-icon-font::before,
.cti-has-icon-font::after {
	speak: never !important;
	-webkit-alt: "" !important;
}

/* Fallback for common DIVI ETmodules usage patterns */
[style*="ETmodules"]::before,
[style*="ETmodules"]::after,
[style*="etmodules"]::before,
[style*="etmodules"]::after,
.et-pb-icon::before,
.et_pb_icon::before,
.et_pb_button::after,
.et_pb_toggle_title::before,
.et_pb_toggle_title::after,
.et_pb_tabs_controls a::before,
.et_pb_tabs_controls a::after,
#et-top-navigation a::before,
#et-top-navigation a::after,
.et-menu a::before,
.et-menu a::after {
	speak: never !important;
	-webkit-alt: "" !important;
}

/* ================================
   SC 2.4.11 Focus Not Obscured (Minimum)
   ================================ */

/* Divi's #main-header is position:fixed at 130px tall on this theme. Without
   this, a keyboard user tabbing to (or skip-linking to) something near the
   top of the page gets it hidden behind the fixed header. scroll-padding
   covers anchor jumps (skip links, in-page #links); scroll-margin covers
   the browser's own scroll-into-view behavior when an element gains focus. */
html {
	scroll-padding-top: 140px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	scroll-margin-top: 140px;
}

/* ================================
   SC 2.2.2 Pause, Stop, Hide
   Play/pause control for Divi's autoplaying hero background video.
   ================================ */
#cti-hero-video-control {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 50;
	width: 40px;
	height: 40px;
	min-width: 24px;
	min-height: 24px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	border: 2px solid #ffffff;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	font-size: 16px;
	padding: 0;
	box-sizing: border-box;
}

#cti-hero-video-control:focus-visible {
	outline: 3px solid #C9A96A;
	outline-offset: 2px;
}


