/* FCSF Launch Fixes: accessibility styles. Brand: navy #121b46, yellow #ffd140. */

/* Screen-reader-only text */
.fcsf-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Skip link: hidden until focused */
.fcsf-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000000;
	padding: 12px 20px;
	background: #121b46;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: underline;
	border-radius: 0 0 4px 4px;
}
.fcsf-skip-link:focus {
	top: 0;
	outline: 3px solid #ffd140;
	outline-offset: 0;
}
#main-content:focus {
	outline: none;
}

/*
 * Visible keyboard focus. Divi ships `:focus{outline:0}`, which removes it site-wide.
 * Navy ring with a white inner ring reads on white, light-blue and navy backgrounds.
 */
:focus-visible {
	outline: 3px solid #121b46 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}
/* Dark areas: yellow ring (11:1 on navy) */
.et-l--footer :focus-visible,
.et_pb_bg_layout_dark :focus-visible,
.tma-notification-bar :focus-visible {
	outline-color: #ffd140 !important;
	box-shadow: 0 0 0 2px #121b46 !important;
}
/* Form fields: the Fluent Forms yellow glow is ~1.4:1 on white, so add a real outline */
.fluentform .ff-el-form-control:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	outline: 3px solid #121b46 !important;
	outline-offset: 1px !important;
}

/* Divi mobile menu toggle, now a focusable button */
.mobile_menu_bar[role="button"] {
	cursor: pointer;
}

/* Divi Toggle titles rendered as buttons */
.et_pb_toggle_title .fcsf-toggle-btn {
	all: unset;
	display: block;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.et_pb_toggle_title .fcsf-toggle-btn:focus-visible {
	outline: 3px solid #121b46 !important;
	outline-offset: 4px !important;
}

/* Carousel pause/play control: small outlined pill, centered under the dots */
.fcsf-carousel-control {
	display: flex;
	justify-content: center;
	margin: 12px 0 0;
}
.fcsf-carousel-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 16px;
	background: transparent;
	color: #121b46;
	border: 2px solid #121b46;
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}
.fcsf-carousel-toggle:hover {
	background: #121b46;
	color: #fff;
}

/*
 * Carousel dots (WCAG 2.5.8 target size, spacing exception): plain bullets get
 * 24px between centers without changing the dot itself. Dynamic bullets are left
 * alone; turn "Dynamic Bullets" off in the module to make them pass.
 */
.swiper-pagination-bullets:not(.swiper-pagination-bullets-dynamic) .swiper-pagination-bullet {
	margin-left: 8px !important;
	margin-right: 8px !important;
}

/*
 * CompressX wraps images in <picture>. Inside Divi 5's flex image wrapper the
 * <picture> only grows to the photo's natural width, so "Force Fullwidth" stops
 * working for any image smaller than its column. Let <picture> fill the wrapper;
 * images without Force Fullwidth keep their natural size (the wrapper is fit-content).
 */
.et_pb_image_wrap > picture {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}
.et_pb_image_wrap > picture > img {
	width: 100%;
	height: auto;
}

/* Respect reduced-motion preferences (Divi + Divi Pixel entrance animations, parallax, smooth scroll) */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.et-pb-parallax-background {
		transform: none !important;
	}
}