/**
 * CCC Accessibility — Global reset
 *
 * Baseline accessibility corrections applied on every CCC site, regardless of
 * theme. Keep this file theme-agnostic: anything that needs an Avada, Elementor
 * or plugin-specific selector belongs in that module's stylesheet instead.
 *
 * Tuning: override the custom properties below from a child theme or via the
 * `ccc_a11y_inline_css` filter rather than editing this file per site.
 */

:root {
	--ccc-a11y-focus-color: #005fcc;
	--ccc-a11y-focus-color-contrast: #ffffff;
	--ccc-a11y-focus-width: 3px;
	--ccc-a11y-focus-offset: 2px;
	--ccc-a11y-target-size: 44px;
	/* Height of any sticky header, so anchor targets are not hidden beneath it. */
	--ccc-a11y-scroll-offset: 100px;
}

/* -------------------------------------------------------------------------
 * 1. Focus visibility
 *
 * Themes routinely zero out the UA focus ring. Restore a ring that is visible
 * on both light and dark backgrounds via a two-tone outline + shadow, applied
 * only for keyboard users so mouse interaction looks unchanged.
 * ---------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: var(--ccc-a11y-focus-width) solid var(--ccc-a11y-focus-color);
	outline-offset: var(--ccc-a11y-focus-offset);
	box-shadow: 0 0 0 calc(var(--ccc-a11y-focus-width) + var(--ccc-a11y-focus-offset))
		var(--ccc-a11y-focus-color-contrast);
	border-radius: 2px;
}

/* Elements given focus programmatically (skip-link targets, modals) should not
   flash a ring at mouse users. */
[tabindex="-1"]:focus {
	outline: none;
}

@media (prefers-contrast: more) {
	:root {
		--ccc-a11y-focus-width: 4px;
	}
}

@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:focus-visible {
		outline: 3px solid CanvasText;
		box-shadow: none;
	}
}

/* -------------------------------------------------------------------------
 * 2. Screen-reader-only text
 *
 * The clip-path technique. Covers WordPress core's `.screen-reader-text`,
 * the Bootstrap/Tailwind `.sr-only` convention, and Avada's `.fusion-sr-only`.
 * ---------------------------------------------------------------------- */

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

/* Reveal when focused, so hidden-until-focused links actually work. */
.screen-reader-text:focus,
.sr-only:focus,
.sr-only-focusable:focus,
.visually-hidden:focus {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 24px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: #ffffff;
	color: #111111;
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: underline;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------
 * 3. Skip link
 *
 * Works with the markup `<a class="ccc-a11y-skip-link" href="#content">`.
 * Off-screen until focused, then pinned to the top-left of the viewport.
 * ---------------------------------------------------------------------- */

.ccc-a11y-skip-link {
	position: absolute;
	top: -100vh;
	left: 0;
	z-index: 100001;
	padding: 12px 24px;
	background: #ffffff;
	color: #111111;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: underline;
}

.ccc-a11y-skip-link:focus {
	top: 0;
}

/* -------------------------------------------------------------------------
 * 4. Anchor targets under sticky headers
 * ---------------------------------------------------------------------- */

:target,
[id]:target {
	scroll-margin-top: var(--ccc-a11y-scroll-offset);
}

/* -------------------------------------------------------------------------
 * 5. Minimum target size (WCAG 2.2 SC 2.5.8)
 *
 * Applied to icon-only controls, which are where the failures cluster. Uses
 * min-block-size/min-inline-size so it does not fight explicit layout widths
 * on text buttons.
 * ---------------------------------------------------------------------- */

button:not([class*="menu-item"]) > svg:only-child,
a[aria-label]:not([class*="menu-item"]) > svg:only-child,
a[aria-label]:not([class*="menu-item"]) > i:only-child {
	min-width: 1em;
	min-height: 1em;
}

.ccc-a11y-target,
button.ccc-a11y-target,
a.ccc-a11y-target {
	min-width: var(--ccc-a11y-target-size);
	min-height: var(--ccc-a11y-target-size);
}

/* -------------------------------------------------------------------------
 * 6. Reduced motion
 *
 * Honour the OS preference. Animations are not removed outright (which can
 * break scripts that wait on transitionend); they are collapsed to ~0s.
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * 7. Link affordance in body content
 *
 * Links inside prose must not rely on colour alone (WCAG 1.4.1). Scoped to
 * content areas so navigation, buttons and widgets are unaffected.
 * ---------------------------------------------------------------------- */

.entry-content a:not([class]),
.post-content a:not([class]),
.page-content a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
 * 8. Form usability
 * ---------------------------------------------------------------------- */

/* Never suppress the required/invalid signal entirely. */
[aria-invalid="true"] {
	outline: 1px solid #b32d2e;
}

/* Text resize: inputs below 16px trigger zoom-on-focus in iOS Safari. */
@media (max-width: 782px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	select,
	textarea {
		font-size: max(16px, 1rem);
	}
}