/*
 * WCF Construction Group Accessibility
 *
 * Rules are deliberately low-specificity and avoid !important (one guarded
 * exception, see the contrast section), so Ally / Pojo Accessibility toolbar
 * modes always win when a visitor turns them on. Nothing here changes font
 * sizes of normal text, so the toolbar's text resizing keeps working.
 */

/* Visually hidden text (link context, required markers). */
.wcfcg-a11y-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Target of the "Skip to content" link. */
.wcfcg-a11y-skip-target {
	height: 0;
	margin: 0;
	padding: 0;
	outline: 0;
}

/* Clearly visible keyboard focus. */
body :is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
	outline: 3px solid #213b73;
	outline-offset: 2px;
}

body :is(.et_pb_bg_layout_dark, #main-footer, .et-l--footer, .et_pb_with_background[style*="background"]) :is(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 5px #213b73;
}

/* Hamburger button keeps Divi's look but gets a focus ring. */
.mobile_menu_bar[role="button"]:focus-visible {
	outline: 3px solid #213b73;
	outline-offset: 4px;
}

/* Dropdowns open for keyboard users too (Divi only opens them on :hover). */
.et-menu li:focus-within > ul,
#top-menu li:focus-within > ul,
.nav li:focus-within > ul {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.et-menu li.wcfcg-a11y-closed > ul,
#top-menu li.wcfcg-a11y-closed > ul,
.nav li.wcfcg-a11y-closed > ul {
	visibility: hidden;
	opacity: 0;
}

/* Slideshow pause button injected by wcfcg-a11y.js. */
.wcfcg-a11y-pause {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 20;
	padding: 6px 12px;
	border: 2px solid #fff;
	border-radius: 3px;
	background: #213b73;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.wcfcg-a11y-pause:hover {
	background: #162a52;
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_slider .et_pb_slide,
	.dica-container .swiper-wrapper {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}
}

/*
 * Re-levelled headings keep the look of the level they were designed with.
 *
 * When the heading module changes e.g. an H4 into an H2, the global H2 font
 * size would apply. These rules restore the size of the original level
 * (Divi > Theme Customizer > Typography on wcfcg.com: 35 / 30 / 25 / 21 / 18 / 16 px,
 * and Divi's narrow-column sizes). Specificity (0,1,1) is deliberately below any
 * module-level typography setting, so explicit settings from the builder still win.
 */
.wcfcg-as-h1:is(h1, h2, h3, h4, h5, h6) { font-size: 35px; }
.wcfcg-as-h2:is(h1, h2, h3, h4, h5, h6) { font-size: 30px; }
.wcfcg-as-h3:is(h1, h2, h3, h4, h5, h6) { font-size: 25px; }
.wcfcg-as-h4:is(h1, h2, h3, h4, h5, h6) { font-size: 21px; }
.wcfcg-as-h5:is(h1, h2, h3, h4, h5, h6) { font-size: 18px; }
.wcfcg-as-h6:is(h1, h2, h3, h4, h5, h6) { font-size: 16px; }

:where(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6, .et_pb_column_2_5) .wcfcg-as-h1:is(h1, h2, h3, h4, h5, h6) { font-size: 26px; }
:where(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6, .et_pb_column_2_5) .wcfcg-as-h2:is(h1, h2, h3, h4, h5, h6) { font-size: 23px; }
:where(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6, .et_pb_column_2_5) .wcfcg-as-h3:is(h1, h2, h3, h4, h5, h6) { font-size: 20px; }
:where(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6, .et_pb_column_2_5) .wcfcg-as-h4:is(h1, h2, h3, h4, h5, h6) { font-size: 18px; }
:where(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6, .et_pb_column_2_5) .wcfcg-as-h5:is(h1, h2, h3, h4, h5, h6) { font-size: 16px; }
:where(.et_pb_column_1_3, .et_pb_column_1_4, .et_pb_column_1_5, .et_pb_column_1_6, .et_pb_column_2_5) .wcfcg-as-h6:is(h1, h2, h3, h4, h5, h6) { font-size: 15px; }

/* Divi removes the bottom padding of H2s inside posts on phones; keep it for headings that used to be another level. */
@media only screen and (max-width: 479px) {
	.et_pb_post :is(.wcfcg-as-h1, .wcfcg-as-h3, .wcfcg-as-h4, .wcfcg-as-h5, .wcfcg-as-h6):is(h2) {
		padding-bottom: 10px;
	}
}

/*
 * Target size (WCAG 2.5.8): slider dots are 7-8px wide. The visible dot is
 * unchanged; the clickable box grows to 24px by padding that is not painted.
 */
.et-pb-controllers a {
	box-sizing: content-box;
	padding: 8.5px;
	margin-right: 0;
	border-radius: 50%;
	background-clip: content-box;
}

.dica-container .swiper-pagination-bullet {
	box-sizing: content-box;
	padding: 8px;
	margin: 0;
	background-clip: content-box;
}

/*
 * Colour contrast (WCAG 1.4.3). Only pairs that fail 4.5:1 are changed, and
 * only while no Ally / Pojo contrast mode is active (those set their own colours).
 *
 * "See Previous / Next Project" links: green #287250 on navy #1f2e56 was 2.28:1;
 * the light green below is about 8:1. (!important is needed because the Divi
 * module prints its colour with !important; the Pojo guard above still applies.)
 *
 * Automation cannot judge white text over photographs, so slide captions also
 * get a soft shadow to stay legible on the lighter parts of the photos.
 */
body:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast):not(.pojo-a11y-light-background) .et_pb_posts_nav a .nav-label,
body:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast):not(.pojo-a11y-light-background) .et_pb_posts_nav a .meta-nav {
	color: #9fdcb9 !important; /* the builder sets this colour with !important */
}

body:not(.pojo-a11y-high-contrast):not(.pojo-a11y-negative-contrast):not(.pojo-a11y-light-background) .et_pb_bg_layout_dark .et_pb_slide_description {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}