/* Grondgidsen word swap (assets/word-swap/word-swap.js). */
.gg-swap-word__text {
	display: inline-block;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.gg-swap-word__text.is-leaving {
	opacity: 0;
	transform: translateY(0.25em);
}
@media (prefers-reduced-motion: reduce) {
	.gg-swap-word__text {
		transition: none;
	}
	.gg-swap-word__text.is-leaving {
		transform: none;
	}
}

/*
 * Highlight of the active item: primary green with white text, as designed on
 * Ons manifest. All items share the radius so only the colours change.
 * !important beats the per-widget colours that Elementor writes.
 */
.gg-swap-item,
.e-con.gg-swap-item {
	--border-radius: 2rem; /* Elementor containers read their radius from this variable */
	border-radius: 2rem;
	transition: background-color 0.35s ease;
}
.gg-swap-item .elementor-heading-title,
.gg-swap-item .elementor-widget-text-editor {
	transition: color 0.35s ease;
}
.gg-swap-item.gg-swap-active {
	background-color: var(--e-global-color-primary, #1D6757);
}
.gg-swap-item.gg-swap-active .elementor-heading-title,
.gg-swap-item.gg-swap-active .elementor-widget-text-editor,
.gg-swap-item.gg-swap-active .elementor-widget-text-editor a {
	color: var(--e-global-color-6767003, #FFFFFF) !important;
}
@media (prefers-reduced-motion: reduce) {
	.gg-swap-item,
	.gg-swap-item .elementor-heading-title,
	.gg-swap-item .elementor-widget-text-editor {
		transition: none;
	}
}