/**
 * HFHC Accessibility - front-end styles.
 *
 * Scoped, low-specificity rules only: no resets, no layout changes. Kept
 * intentionally small (~2 KB uncompressed) so it has no measurable impact
 * on page weight or render time, and is safe for WP Rocket to combine /
 * minify with other front-end CSS.
 */

/* ---------------------------------------------------------------------
 * 1) Skip to main content link
 * ------------------------------------------------------------------- */
.hfhc-skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #ffffff;
	color: #0b1f45;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	border: 2px solid #0b57d0;
	border-radius: 0 0 4px 0;
}

.hfhc-skip-link:focus {
	top: 0;
	left: 0;
	outline: none;
}

/* ---------------------------------------------------------------------
 * 2) Visible keyboard focus indicator
 *
 * Only applies for keyboard focus (:focus-visible), so mouse/touch users
 * see no visual change from before. A browser without :focus-visible
 * support (older Safari) falls back to :focus, which is still correct
 * behaviour for a site this size.
 * ------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible,
.et-pb-icon:focus-visible,
[tabindex]:focus-visible,
.mobile_menu_bar:focus-visible,
.mobile-toggle:focus-visible,
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible {
	outline: 3px solid #0b57d0 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85) !important;
}

/* Dark/photo backgrounds (hero sections, dark menu bar) need a focus ring
 * that still reads against a dark or busy background. */
.et_pb_bg_layout_dark a:focus-visible,
.et_pb_bg_layout_dark button:focus-visible,
.et_pb_fullwidth_header a:focus-visible,
.et_pb_fullwidth_header button:focus-visible {
	outline-color: #ffffff !important;
	box-shadow: 0 0 0 5px rgba(11, 87, 208, 0.9) !important;
}

/* ---------------------------------------------------------------------
 * 3) Mobile menu toggle controls made keyboard operable
 *
 * The hamburger (.mobile_menu_bar) and submenu carets (.mobile-toggle)
 * are given role="button"/tabindex by PHP or JS; these rules only make
 * sure that new interactive role actually looks focusable/clickable.
 * ------------------------------------------------------------------- */
.mobile_menu_bar,
.mobile-toggle {
	cursor: pointer;
}

.mobile_menu_bar[role="button"],
.mobile-toggle[role="button"] {
	display: inline-block;
}

/* ---------------------------------------------------------------------
 * 4) Text over background images/video (WCAG 1.4.3)
 *
 * Confirmed on the home page hero ("Become a Child Sponsor"): white
 * heading text sits over a background video with only a semi-transparent
 * white gradient behind it, which fails contrast whenever a bright frame
 * of the video shows through - and Divi's own "light/dark background"
 * module setting doesn't reliably reflect this (the text module here is
 * tagged "light" despite rendering white text). A subtle dark text-shadow
 * keeps every section's existing text color/overlay design untouched
 * while guaranteeing legibility against any photo or video frame behind
 * it, wherever a section actually has one:
 *  - `.et_pb_section_video`      Divi background-video sections.
 *  - `.et_pb_fullwidth_header_container` the Fullwidth Header module.
 *  - any element with an inline `background-image` (manually set photo
 *    backgrounds on a section/row/column).
 * On sections with a plain solid-color background the shadow blends in
 * and is not visible, so this is safe to apply broadly.
 * ------------------------------------------------------------------- */
.et_pb_section_video h1,
.et_pb_section_video h2,
.et_pb_section_video h3,
.et_pb_section_video p,
.et_pb_fullwidth_header_container h1,
.et_pb_fullwidth_header_container h2,
.et_pb_fullwidth_header_container h3,
.et_pb_fullwidth_header_container .et_pb_fullwidth_header_subhead,
.et_pb_fullwidth_header_container .et_pb_content_area_center,
[style*="background-image"] h1,
[style*="background-image"] h2,
[style*="background-image"] h3,
[style*="background-image"] p {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------
 * 5) Screen-reader-only utility, kept for any future module that needs
 * to add visually hidden but announced text.
 * ------------------------------------------------------------------- */
.hfhc-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;
}