/**
 * Ohio CAPS — skip link + visible focus (DEV child theme).
 *
 * Rows: focus hidden with CSS; WCAG 2.4.7 Focus Visible.
 * Loads after parent/Elementor so outline:none and overflow do not hide rings.
 *
 * Rings use :focus-visible only so mouse/touch clicks do not paint a ring;
 * keyboard Tab (and AT) still get a clear indicator.
 */

/* Skip link: visually hidden until focused (WCAG 2.4.1). */
.ohio-caps-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.6em 1em;
	background: #000;
	color: #fff;
	font-size: 1rem;
	text-decoration: none;
}

.ohio-caps-skip-link:focus,
.ohio-caps-skip-link:focus-visible {
	left: 8px;
	top: 8px;
	outline: 3px solid #fff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px #fff;
}

/*
 * Interactive controls — keyboard focus must stay visible (2.4.7).
 * Do not style bare :focus: that matches mouse/touch activation and shows
 * a ring on every click. :focus-visible is keyboard / modality-aware.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="link"]:focus-visible {
	outline: 3px solid #0b57d0 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px #0b57d0;
}

/* Explicitly clear mouse/touch :focus so theme/UA defaults stay quiet. */
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),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="tab"]:focus:not(:focus-visible),
[role="menuitem"]:focus:not(:focus-visible),
[role="link"]:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none;
}

/* Elementor / Eduma controls that zero out focus in kit CSS. */
.elementor-button:focus-visible,
.elementor-button-link:focus-visible,
.elementor-tab-title:focus-visible,
.navigation a:focus-visible,
.navigation button:focus-visible,
.menu-mobile-effect.navbar-toggle:focus-visible {
	outline: 3px solid #0b57d0 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px #0b57d0;
}

/* Drawer links/buttons: inset ring — wrapper overflow-x:hidden clips outward outlines. */
.mobile-menu-wrapper a:focus-visible,
.mobile-menu-wrapper button:focus-visible,
.mobile-menu-container a:focus-visible,
.mobile-menu-container button:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: inset 0 0 0 3px #0b57d0 !important;
}

.elementor-button:focus:not(:focus-visible),
.elementor-button-link:focus:not(:focus-visible),
.elementor-tab-title:focus:not(:focus-visible),
.navigation a:focus:not(:focus-visible),
.navigation button:focus:not(:focus-visible),
.mobile-menu-wrapper a:focus:not(:focus-visible),
.mobile-menu-wrapper button:focus:not(:focus-visible),
.mobile-menu-container a:focus:not(:focus-visible),
.mobile-menu-container button:focus:not(:focus-visible),
.menu-mobile-effect.navbar-toggle:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none;
}

/* Rings clipped by overflow:hidden on cards/columns. */
.elementor-widget-wrap:has(a:focus-visible),
.elementor-widget-wrap:has(button:focus-visible),
.elementor-column:has(a:focus-visible),
.elementor-column:has(button:focus-visible) {
	overflow: visible;
}

/*
 * Mobile drawer: Eduma sets overflow-x:hidden on .mobile-menu-wrapper.
 * Slight horizontal inset so rings/text aren't flush to the clip edge.
 */
.mobile-menu-wrapper .mobile-menu-inner,
.mobile-menu-wrapper nav.mobile-menu-container,
.mobile-menu-wrapper .navbar-nav {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	box-sizing: border-box;
}

/*
 * Home hero scroll cue (a[href="#aboutocwtp"]): .icon-scroll is position:absolute
 * + scale(2), so the bare <a> collapses to 0×0. Size the anchor to contain the
 * painted mouse so the focus ring hugs the icon (not a short box mid-glyph).
 */
a[href="#aboutocwtp"] {
	display: block;
	position: relative;
	width: 3rem;
	height: 7.5rem;
	min-width: 44px;
	min-height: 44px;
	margin-left: auto;
	margin-right: auto;
	z-index: 99999;
	border-radius: 0.5rem;
}

a[href="#aboutocwtp"] .icon-scroll {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(2);
}

a[href="#aboutocwtp"]:focus-visible {
	outline: 3px solid #ffffff !important;
	outline-offset: 4px;
	box-shadow: 0 0 0 6px #0b57d0;
}

a[href="#aboutocwtp"]:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none;
}

/*
 * Content <pre> used as a callout (ITNA steps) overflows by a few px with
 * white-space:pre, so axe flags scrollable-region-focusable. Wrap instead
 * of adding the box to Tab order.
 */
#main-content pre,
.elementor-widget-text-editor pre,
.elementor-widget-theme-post-content pre,
.entry-content pre {
	white-space: pre-wrap;
	overflow: visible;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}