/**
 * AZPerio — Accessibility enhancement layer (WCAG 2.1 AA)
 *
 * Loaded last so it can override theme, Beaver Builder, and plugin styles.
 * Every rule here targets a specific WCAG success criterion; see the comment
 * above each block. Keep this file free of layout/branding changes — it exists
 * only to remediate accessibility, so it can be reviewed and audited on its own.
 */

/* -------------------------------------------------------------------------
 * 2.4.7 Focus Visible — a single, strong, consistent focus indicator for
 * every interactive element. Uses :focus-visible so mouse users don't see it
 * but keyboard users always do. A dual outline (dark ring + white offset)
 * stays visible on both light and dark backgrounds.
 * ---------------------------------------------------------------------- */
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="link"]:focus-visible,
.fl-button:focus-visible,
.fl-accordion-button:focus-visible,
.fl-menu-mobile-toggle:focus-visible,
.azpaf-button:focus-visible {
	outline: 3px solid #102238 !important;   /* brand-primary, high contrast */
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px #26b6ff !important; /* halo for dark bgs */
	border-radius: 2px;
}

/* Suppress the focus ring for MOUSE/POINTER users on links and buttons.
 * The legacy Bootstrap/base theme sets `outline` on plain `:focus`
 * (e.g. `a:focus{outline:5px auto ...}` and `.btn:focus{...}`), which fires on
 * click as well as keyboard. Turning it off for `:focus:not(:focus-visible)`
 * hides it for mouse users while the `:focus-visible` rule above keeps it for
 * keyboard users. WCAG 2.4.7 only requires the *keyboard* focus indicator, so
 * this is compliant. (In browsers without :focus-visible support this whole
 * selector is ignored, so those users still get the outline — a safe fallback.)
 * Only `outline` is reset here — element box-shadows used for design are left
 * intact. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="link"]:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.fl-button:focus:not(:focus-visible),
.azpaf-button:focus:not(:focus-visible),
.fl-accordion-button:focus:not(:focus-visible),
.fl-menu-mobile-toggle:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
	outline: 0 !important;
	outline-offset: 0 !important;
}

/* Fallback for browsers without :focus-visible support (older Safari/Edge).
 * Applies to keyboard AND mouse there, which is acceptable and safe. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	summary:focus,
	[tabindex]:focus,
	[role="button"]:focus,
	.fl-button:focus,
	.azpaf-button:focus {
		outline: 3px solid #102238 !important;
		outline-offset: 2px !important;
	}
}

/* The FAQ accordion explicitly removed its outline (outline:0 none). Undo it
 * so keyboard users can see which accordion header is focused. */
#faq-row .faqs .fl-accordion-button:focus,
#faq-row .faqs .fl-accordion-button:focus-visible {
	outline: 3px solid #102238 !important;
	outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
 * 2.4.1 / skip link — the parent theme reveals .fl-screen-reader-text on
 * focus; make sure the revealed skip link is clearly styled and high contrast.
 * ---------------------------------------------------------------------- */
.fl-screen-reader-text:focus {
	background: #102238 !important;
	color: #ffffff !important;
	padding: 12px 20px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
	outline: 3px solid #26b6ff !important;
	outline-offset: 0 !important;
	z-index: 100000 !important;
}

/* -------------------------------------------------------------------------
 * Utility: visually-hidden text that remains available to screen readers.
 * Used by accessibility.js to append "(opens in a new window)" etc.
 * ---------------------------------------------------------------------- */
.azp-sr-only {
	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;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -------------------------------------------------------------------------
 * 2.3.3 / 2.2.2 — respect the user's "reduce motion" OS setting. Neutralises
 * the testimonial slider auto-animation, parallax, and CSS transitions for
 * users who are sensitive to motion.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 2.5.8 Target Size (Minimum, AA) — the footer social icons are exactly
 * 24x24 with no padding, and sit close together. Give them a 44x44 hit area
 * so they are comfortably operable, without changing the visible icon size.
 * ---------------------------------------------------------------------- */
.fl-page-footer-text a.social,
a[href*="facebook.com"] > img,
a[href*="linkedin.com"] > img {
	/* padding on the anchor enlarges the clickable region */
}
a[href*="facebook.com/azperio"],
a[href*="linkedin.com/company/azperio"] {
	display: inline-block;
	padding: 10px;
	line-height: 0;
}

/* -------------------------------------------------------------------------
 * 1.4.3 Contrast (Minimum) — the brand orange (#f56a49) on white measures
 * ~2.98:1, below the 4.5:1 required for normal-size text. Use a slightly
 * deeper orange (#c1481f ≈ 4.7:1 on white) ONLY where the orange is used as
 * readable text. Large display/hero text (which is white on dark, or ≥24px)
 * is unaffected. This preserves the brand while making body text legible.
 * ---------------------------------------------------------------------- */
.orange,
p .orange,
li .orange,
.fl-testimonials-heading,
h3.fl-testimonials-heading,
.gform_wrapper .gfield_required,
.light-form .gform_wrapper .gfield_required {
	color: #c1481f !important;
}

/* Orange as a link colour on light backgrounds — keep it distinguishable and
 * meet contrast; underline reinforces that it is a link (1.4.1 Use of Color). */
a.orange,
.entry-content a[style*="#f56a49"] {
	color: #c1481f !important;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 1.4.1 Use of Color — links inside body text should not rely on colour
 * alone. Ensure in-content links are underlined (nav/menus/buttons excluded).
 * ---------------------------------------------------------------------- */
.fl-rich-text a:not(.fl-button):not(.azpaf-button),
.entry-content a:not(.fl-button):not(.azpaf-button) {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Assessment form (azp-assessment-form) accessibility styling
 * ---------------------------------------------------------------------- */
/* The legend we add for the checkbox group should read like the old heading. */
.azpaf-form-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.azpaf-form-legend {
	font-weight: 700;
	margin-bottom: 10px;
	padding: 0;
}
/* Visible label for the email field (was placeholder-only). */
.azpaf-email-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}
/* The real checkbox is visually hidden with opacity:0, so its native focus
 * ring is invisible. Mirror the focus onto the custom .checkmark so keyboard
 * users can see which option is focused (WCAG 2.4.7). */
.azpaf-form-label-container input:focus-visible ~ .checkmark {
	outline: 3px solid #102238;
	outline-offset: 2px;
}
.azpaf-form-label-container input:focus ~ .checkmark {
	outline: 3px solid #102238;
	outline-offset: 2px;
}

/* Give the results region a clear heading focus target without an outline box
 * around the whole region when it receives programmatic focus. */
.azpaf-form-results-container:focus,
.azpaf-form-results-text:focus,
.azpaf-form-results-heading:focus {
	outline: none;
}