/* ==========================================================================
   BJS Accessibility Remediation (WCAG 2.1 AA)
   Greater Naples Fire Rescue District - Brian Joseph Studios
   ========================================================================== */

/* Screen-reader-only utility */
.bjs-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.4.7 Focus Visible
   Two-tone ring (white inner / near-black outer) stays visible on the red
   header, white content areas and the dark footer alike.
   -------------------------------------------------------------------------- */
:focus-visible,
.sl-doc-link:focus-visible,
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor [tabindex]:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 0 !important;
	box-shadow: 0 0 0 4px #1b1b1b !important;
	border-radius: 2px;
}
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
	outline: 2px solid #1b1b1b !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Skip link: make it visible when focused */
.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000000;
	padding: 12px 18px !important;
	background: #ffffff !important;
	color: #1b1b1b !important;
	font-weight: 700;
	text-decoration: underline;
}

/* 1.4.3 Contrast: color fixes are made in the Elementor widget settings
   (header tagline #E4BABD > #F5D5D8, Mission/Vision/Values #FDCA68 > #9A6B0A). */

/* --------------------------------------------------------------------------
   1.4.1 Use of Color
   Links inside body copy are distinguished by color alone. Underline them.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button),
.gnfrd-offcanvas a:not(.elementor-button):not(.elementor-icon),
.gform_wrapper .gfield_description a,
.acf-repeater a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Bio off-canvas panels (Command Staff, Board, Apparatus)
   Hidden panels must also be hidden from keyboard and screen readers.
   -------------------------------------------------------------------------- */
.gnfrd-offcanvas {
	visibility: hidden;
	transition: transform 280ms cubic-bezier(.25,.8,.25,1), visibility 0s linear 280ms !important;
}
.gnfrd-offcanvas.is-open {
	visibility: visible;
	transition: transform 280ms cubic-bezier(.25,.8,.25,1), visibility 0s linear 0s !important;
}
.gnfrd-open-bio [data-bjs-bio-trigger] {
	cursor: pointer;
}
.gnfrd-close-bio [role="button"] {
	display: inline-flex;
	min-width: 32px;
	min-height: 32px;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Gravity Forms datepicker toggle: enlarge hit area (Lighthouse target-size)
   -------------------------------------------------------------------------- */
.gform_wrapper .gform-datepicker-toggle,
.gform-theme--framework .gform-datepicker-toggle {
	min-width: 28px !important;
	min-height: 28px !important;
	width: 28px !important;
	height: 28px !important;
}

/* Body-copy heading promoted h4 > h2 (Public Records): keep the h4 appearance */
.elementor-widget-text-editor h2.bjs-h4 {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: #333333;
	margin: 8px 0 16px;
}

/* Section titles promoted h3 > h2: keep the h3 appearance */
.gform_wrapper h2.gsection_title {
	font-size: 1.25em;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Reduced motion (supports 2.3.3 best practice, honors OS setting)
   -------------------------------------------------------------------------- */
@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;
	}
}