/*------------------------------------*\
    
    WebFX WYSIWYG Customizations - Global styling for all ACF WYSIWYG's

    Add custom WYSIWYG styling to this file if it should be applied to all ACF WYSIWYG's on the site
    Otherwise, put your block-specific styles in individual block stylesheets

\*------------------------------------*/

.wysiwyg-block {
	position: relative;
}

.bg-dark-blue h2,
.bg-dark-blue h3,
.bg-dark-blue h4,
.bg-dark-blue h5,
.bg-dark-blue h6,
.bg-dark-blue .sub-heading {
	color: var(--white);
}

.bg-dark-blue ul li:before {
	background: var(--light-blue);
}

.bg-dark-blue p a:not(.btn) {
	color: var(--white);
	-webkit-text-decoration-color: var(--white);
	text-decoration-color: var(--white);
}

.bg-dark-blue .btn-primary {
	background: var(--light-green);
	border-color: #006731;
}

.bg-dark-blue .btn-tertiary {
	color: var(--white);
}

.bg-dark-blue .btn-tertiary::before {
	background: var(--white);
}

.top-curve {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: auto;
	z-index: -1;
}

.bottom-curve {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: auto;
	z-index: -1;
}

.top-wave-shape {
	position: relative;
	z-index: 1;
}

.wysiwyg__content .expand {
	color: var(--dark-blue);
	margin-top: 0.5rem;
}

@media (min-width: 1200px) {
	.top-wave-shape {
		padding-top: 136px;
	}

	.bottom-wave-shape {
		padding-bottom: 146px;
	}

	.bg-dark-blue .btn-primary:hover {
		background: var(--green);
		border-color: #004c25;
		box-shadow: 0 0 16px 0 rgba(0, 159, 76, 0.75);
	}

	.bg-dark-blue .btn-secondary:hover {
		background: var(--light-blue);
		color: var(--blue);
		border-color: var(--blue);
		box-shadow: 0 0 8px 0 rgba(216, 238, 255, 0.75);
	}

	.wysiwyg__content .read-more__box--mobile-only {
		max-height: none;
		overflow: visible;
	}

	.wysiwyg__content .read-more__box--mobile-only .expand {
		display: none;
	}
}