/**
 * Half-and-half Divi slider navigation.
 *
 * Apply .half-half-right-slider when the content occupies the right half.
 * Apply .half-half-left-slider when the content occupies the left half.
 */

.half-half-right-slider,
.half-half-left-slider {
	--fase-half-control-size: 48px;
	--fase-half-control-gap: 16px;
	--fase-half-outside-offset: clamp(24px, 3.4vw, 68px);
	--fase-half-control-bottom: clamp(20px, 2.6vw, 34px);
	--fase-half-dot-inner-offset: clamp(28px, 3.6vw, 64px);
	--fase-half-dots-bottom: clamp(12px, 1.45vw, 20px);
	--fase-half-control-background: rgba(255, 255, 255, 0.94);
	--fase-half-control-background-hover: #ffffff;
	--fase-half-control-border: rgba(20, 52, 91, 0.24);
	--fase-half-control-color: #111820;
	--fase-half-control-focus: #26aae1;
	--fase-half-dot: rgba(255, 255, 255, 0.42);
	--fase-half-dot-active: #ffffff;
}

.half-half-right-slider .et_pb_slider,
.half-half-left-slider .et_pb_slider {
	position: relative;
}

/* Both Divi arrows become one grouped control at the outside edge. */
.half-half-right-slider .et-pb-slider-arrows,
.half-half-left-slider .et-pb-slider-arrows {
	position: absolute;
	bottom: var(--fase-half-control-bottom);
	z-index: 110;
	display: flex;
	align-items: center;
	gap: var(--fase-half-control-gap);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.half-half-right-slider .et-pb-slider-arrows {
	right: var(--fase-half-outside-offset);
	left: auto;
}

.half-half-left-slider .et-pb-slider-arrows {
	right: auto;
	left: var(--fase-half-outside-offset);
}

.half-half-right-slider .et_pb_slider:hover > .et-pb-slider-arrows,
.half-half-right-slider .et_pb_slider:focus-within > .et-pb-slider-arrows,
.half-half-left-slider .et_pb_slider:hover > .et-pb-slider-arrows,
.half-half-left-slider .et_pb_slider:focus-within > .et-pb-slider-arrows {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

.half-half-right-slider .et-pb-slider-arrows .et-pb-arrow-prev,
.half-half-right-slider .et-pb-slider-arrows .et-pb-arrow-next,
.half-half-left-slider .et-pb-slider-arrows .et-pb-arrow-prev,
.half-half-left-slider .et-pb-slider-arrows .et-pb-arrow-next,
.half-half-right-slider .et_pb_slider:hover .et-pb-slider-arrows .et-pb-arrow-prev,
.half-half-right-slider .et_pb_slider:hover .et-pb-slider-arrows .et-pb-arrow-next,
.half-half-left-slider .et_pb_slider:hover .et-pb-slider-arrows .et-pb-arrow-prev,
.half-half-left-slider .et_pb_slider:hover .et-pb-slider-arrows .et-pb-arrow-next {
	position: relative !important;
	inset: auto !important;
	display: grid;
	place-items: center;
	width: var(--fase-half-control-size);
	height: var(--fase-half-control-size);
	margin: 0 !important;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--fase-half-control-border);
	border-radius: 0;
	background: var(--fase-half-control-background);
	box-shadow: none;
	color: var(--fase-half-control-color) !important;
	font-size: 0 !important;
	line-height: 1;
	opacity: 1 !important;
	transform: none !important;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.half-half-right-slider .et-pb-slider-arrows a:hover,
.half-half-left-slider .et-pb-slider-arrows a:hover {
	background: var(--fase-half-control-background-hover);
	border-color: currentColor;
	transform: translateY(-1px) !important;
}

.half-half-right-slider .et-pb-slider-arrows a:focus-visible,
.half-half-left-slider .et-pb-slider-arrows a:focus-visible {
	outline: 3px solid var(--fase-half-control-focus);
	outline-offset: 3px;
}

/* Match the approved homepage hero controls without relying on Divi icon fonts. */
.half-half-right-slider .et-pb-slider-arrows .et-pb-arrow-prev::before,
.half-half-right-slider .et-pb-slider-arrows .et-pb-arrow-next::before,
.half-half-left-slider .et-pb-slider-arrows .et-pb-arrow-prev::before,
.half-half-left-slider .et-pb-slider-arrows .et-pb-arrow-next::before {
	content: "" !important;
	display: block;
	width: 11px;
	height: 11px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	font-family: inherit !important;
	font-size: 0 !important;
	line-height: 1;
}

.half-half-right-slider .et-pb-arrow-prev::before,
.half-half-left-slider .et-pb-arrow-prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.half-half-right-slider .et-pb-arrow-next::before,
.half-half-left-slider .et-pb-arrow-next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

.half-half-right-slider .et-pb-slider-arrows a > span,
.half-half-left-slider .et-pb-slider-arrows a > span {
	position: absolute !important;
	display: block !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;
}

/* Dots live inside the content-side 50%, opposite the outside arrow group. */
.half-half-right-slider .et-pb-controllers,
.half-half-left-slider .et-pb-controllers {
	position: absolute !important;
	bottom: var(--fase-half-dots-bottom) !important;
	z-index: 110;
	width: auto !important;
	height: auto !important;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.half-half-right-slider .et-pb-controllers {
	right: auto !important;
	left: calc(50% + var(--fase-half-dot-inner-offset)) !important;
	text-align: left !important;
}

.half-half-left-slider .et-pb-controllers {
	right: calc(50% + var(--fase-half-dot-inner-offset)) !important;
	left: auto !important;
	text-align: right !important;
}

.half-half-right-slider .et_pb_slider:hover > .et-pb-controllers,
.half-half-right-slider .et_pb_slider:focus-within > .et-pb-controllers,
.half-half-left-slider .et_pb_slider:hover > .et-pb-controllers,
.half-half-left-slider .et_pb_slider:focus-within > .et-pb-controllers {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

.half-half-right-slider .et-pb-controllers a,
.half-half-left-slider .et-pb-controllers a,
.half-half-right-slider .et_pb_bg_layout_dark .et-pb-controllers a,
.half-half-left-slider .et_pb_bg_layout_dark .et-pb-controllers a,
.half-half-right-slider .et_pb_bg_layout_light .et-pb-controllers a,
.half-half-left-slider .et_pb_bg_layout_light .et-pb-controllers a {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fase-half-dot) !important;
	box-shadow: none;
	color: transparent !important;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	vertical-align: middle;
	transition: background-color 160ms ease, transform 160ms ease;
}

.half-half-left-slider .et-pb-controllers a {
	margin-right: 0;
	margin-left: 8px;
}

.half-half-right-slider .et-pb-controllers a.et-pb-active-control,
.half-half-left-slider .et-pb-controllers a.et-pb-active-control,
.half-half-right-slider .et_pb_bg_layout_dark .et-pb-controllers a.et-pb-active-control,
.half-half-left-slider .et_pb_bg_layout_dark .et-pb-controllers a.et-pb-active-control,
.half-half-right-slider .et_pb_bg_layout_light .et-pb-controllers a.et-pb-active-control,
.half-half-left-slider .et_pb_bg_layout_light .et-pb-controllers a.et-pb-active-control {
	background: var(--fase-half-dot-active) !important;
	transform: scale(1.08);
}

.half-half-right-slider .et-pb-controllers a:focus-visible,
.half-half-left-slider .et-pb-controllers a:focus-visible {
	outline: 3px solid var(--fase-half-control-focus);
	outline-offset: 3px;
}

@media (max-width: 980px) {
	.half-half-right-slider,
	.half-half-left-slider {
		--fase-half-control-size: 44px;
		--fase-half-outside-offset: 28px;
		--fase-half-control-bottom: 22px;
		--fase-half-dot-inner-offset: 30px;
		--fase-half-dots-bottom: 18px;
	}
}

/* A phone layout no longer has two visual halves, so keep mirrored edge placement. */
@media (max-width: 767px) {
	.half-half-right-slider,
	.half-half-left-slider {
		--fase-half-control-size: 40px;
		--fase-half-control-gap: 8px;
		--fase-half-outside-offset: 18px;
		--fase-half-control-bottom: 16px;
		--fase-half-dots-bottom: 14px;
	}

	.half-half-right-slider .et-pb-controllers {
		right: auto !important;
		left: 22px !important;
	}

	.half-half-left-slider .et-pb-controllers {
		right: 22px !important;
		left: auto !important;
	}

	.half-half-right-slider .et-pb-controllers a,
	.half-half-left-slider .et-pb-controllers a {
		width: 7px;
		height: 7px;
	}
}

@media (hover: none), (pointer: coarse) {
	.half-half-right-slider .et-pb-slider-arrows,
	.half-half-right-slider .et-pb-controllers,
	.half-half-left-slider .et-pb-slider-arrows,
	.half-half-left-slider .et-pb-controllers {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.half-half-right-slider .et-pb-slider-arrows,
	.half-half-right-slider .et-pb-controllers,
	.half-half-left-slider .et-pb-slider-arrows,
	.half-half-left-slider .et-pb-controllers,
	.half-half-right-slider .et-pb-slider-arrows a,
	.half-half-left-slider .et-pb-slider-arrows a,
	.half-half-right-slider .et-pb-controllers a,
	.half-half-left-slider .et-pb-controllers a {
		transition: none !important;
	}
}
