/* Homepage enrollment banner */
.wp-block-uagb-container.enrollment-banner {
	padding: 24px 0;
	background-color: var(--theme-clr-primary-light-blue-50);
}

.wp-block-uagb-container.alignfull.uagb-is-root-container .enrollment-banner-content > .uagb-container-inner-blocks-wrap {
	display: block;
	padding-left: 30px;
	position: relative;

	&:after {
		content: '';
		background-color: var(--theme-clr-secondary_orange);
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 10px;
		border-radius: 2px;
	}
}

.wp-block-uagb-container.alignfull.uagb-is-root-container .enrollment-banner-content .enrollment-banner-header > .uagb-heading-text {
	color: var(--theme-clr-dark);
	font-size: 22px;
	text-align: left;
	line-height: 28px !important;
}

/* TODO: improve selector so !important isn't needed here */
.enrollment-banner-content .uagb-container-inner-blocks-wrap p {
	color: var(--theme-clr-dark) !important;
	font-size: 20px !important;
	text-align: left !important;
	line-height: 28px !important;
}

.wp-block-uagb-container.enrollment-banner .uagb-container-inner-blocks-wrap {
	gap: 1rem !important;
	/* other container classes remove gaps */
}

.wp-block-uagb-container.enrollment-banner p {
	margin-bottom: 0;
	line-height: var(--theme-def-p-height);
	/* Astra theme 4 seemed to change this */
}