/*************************
styles for core blocks
*************************/


.wp-block-pullquote {
	margin-top: 60px;
	margin-bottom: 60px;
	padding-top: 0;
	padding-bottom: 0;
}
.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	margin: 0;
	padding: 0;
}
.wp-block-pullquote blockquote {
	padding: 30px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	text-align: left;
}
.wp-block-pullquote p {
	margin-bottom: 20px;
	font-size: clamp(1.875rem, 1.474rem + 1.603vw, 2.5rem);
	line-height: 1.1;
}
.wp-block-pullquote cite {
	margin-top: 20px;
	font-size: 1rem;
	font-weight: 500;
	font-style: normal;
}

.wp-block-columns.is-layout-flex {
	gap: 10px;
}
.wp-block-column .wp-block-heading {
	margin-top: 40px;
}

.wp-block-separator {
	margin-top: 40px;
	margin-bottom: 40px;
	border: 0;
	height: 1px;
	background-color: var(--color-black);
}


/*************************
styles for custom blocks
*************************/

/*
shared styles
*/
.page-blocks .block-content > .intro,
.editor-styles-wrapper .block-content > .intro {
	margin-bottom: 48px;
}
.page-blocks .intro .eyebrow,
.editor-styles-wrapper .intro .eyebrow {
	margin-bottom: 16px;
}
.page-blocks .intro p,
.editor-styles-wrapper .intro p {
	margin: 16px 0 0 0;
	max-width: 890px;
}
.page-blocks .intro ul,
.page-blocks .intro ol,
.editor-styles-wrapper .intro ul,
.editor-styles-wrapper .intro ol {
	margin-top: 24px;
}
.page-blocks .intro .buttons,
.editor-styles-wrapper .intro .buttons {
	margin-top: 32px;
}
.page-blocks .intro.centered,
.editor-styles-wrapper .intro.centered {
	text-align: center;
}
.page-blocks .intro.centered p,
.editor-styles-wrapper .intro.centered p {
	margin-right: auto;
	margin-left: auto;
}


.video-overlay-button {
	display: block;
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}
.video-overlay-button:before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.2);
	background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 30C0 18.3899 0 0 29.7661 0C59.5322 0 59.5322 18.3899 59.5322 30C59.5322 41.6101 59.5322 60 29.7661 60C0 60 0 41.6101 0 30Z" fill="white"/%3E%3Cpath d="M43.5781 30.6523L22.5781 42.7767L22.5781 18.528L43.5781 30.6523Z" fill="%23224b17"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60px 60px;
	z-index: 10;
	transition: all 0.25s;
}
.video-overlay-button:hover:before {
	background-color: rgba(0, 0, 0, 0.3);
}

#video-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
#video-modal .modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
#video-modal .modal-content {
	position: relative;
	width: 96%;
	max-width: 1000px;
	z-index: 10;
}
#video-modal .video-wrapper {
}
#video-modal .video-wrapper iframe {
	display: block;
	width: 100%;
	height: auto;
	/* border-radius: 20px; */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--color-black);
}
#video-modal .close-modal {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 0;
	width: 50px;
    background: none;
    border: none;
    font-size: 40px;
    color: white;
    line-height: 50px;
    cursor: pointer;
}




/*
themeblocks/hero-header
*/

/* if first on the page, move under the nav */
.page-blocks .block-hero-header:first-child {
	margin-top: -73px;
	padding-top: 164px;
}

.block-hero-header {
	padding-top: var(--spacing-block-default);
	padding-bottom: var(--spacing-block-default);
}
.block-hero-header .intro {
	margin-bottom: 0 !important;
}
.block-hero-header .intro > p {
	max-width: 800px;
}

.block-hero-header .stats {
	display: flex;
	gap: 22px;
	margin-top: 34px;
}
.block-hero-header .stats.centered {
	justify-content: center;
}
.block-hero-header .stat {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 20px;
	max-width: 450px;
	border-radius: 12px;
	text-align: left;

	background: var(--color-green-light);
	color: var(--color-green-dark);
}

/* color options */
.block-hero-header.green {
	background: var(--color-green-light);
}
.block-hero-header.green .title,
.block-hero-header.green .stat {
	color: var(--color-green-dark);
}
.block-hero-header.green .stat {
	background: var(--color-green);
}

.block-hero-header.pink {
	background: var(--color-pink-light);
}
.block-hero-header.pink .title,
.block-hero-header.pink .stat {
	color: var(--color-pink-dark);
}
.block-hero-header.pink .stat {
	background: var(--color-pink);
}

.block-hero-header.blue {
	background: var(--color-blue-light);
}
.block-hero-header.blue .title,
.block-hero-header.blue .stat {
	color: var(--color-blue-dark);
}
.block-hero-header.blue .stat {
	background: var(--color-blue);
}

.block-hero-header.orange {
	background: var(--color-orange-light);
}
.block-hero-header.orange .title,
.block-hero-header.orange .stat {
	color: var(--color-orange-dark);
}
.block-hero-header.orange .stat {
	background: var(--color-orange);
}

.block-hero-header.purple {
	background: var(--color-purple-light);
}
.block-hero-header.purple .title,
.block-hero-header.purple .stat {
	color: var(--color-purple-dark);
}
.block-hero-header.purple .stat {
	background: var(--color-purple);
}

@media (max-width: 860px) {
	.block-hero-header .stats {
		display: block;
	}
	.block-hero-header .stat {
		margin-top: 16px;
	}
	.block-hero-header .stats.centered .stat {
		margin-left: auto;
		margin-right: auto;
	}
}
@media (max-width: 660px) {
	.block-hero-header .intro {
		text-align: left !important;
	}
	.block-hero-header .stats {
		margin-top: 16px;
	}
	.block-hero-header .stats.centered .stat {
		margin-left: 0;
	}
	.block-hero-header .buttons {
		justify-content: flex-start !important;
		align-content: flex-start !important;
	}
}
/*
themeblocks/hero-header
*/






/*
themeblocks/cards-50-50
*/
.block-cards-50-50 {
	margin-top: var(--spacing-block-default);
	margin-bottom: var(--spacing-block-default);
}
.block-cards-50-50 .columns {
	display: flex;
	align-items: center;
	gap: 40px;
}
.block-cards-50-50.media-right .columns {
	flex-direction: row-reverse;
}
.block-cards-50-50 .media {
	width: 48%;
	max-width: 580px;
	text-align: center;
}
.block-cards-50-50 .media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 58 / 48;
	object-fit: cover;
	border-radius: 20px;
	overflow: hidden;
}
.block-cards-50-50 .media.tall img {
	aspect-ratio: 58 / 70;
}

.block-cards-50-50 .text {
	flex: 1;
}

.block-cards-50-50 .text .grid .title {
	margin-bottom: 40px;
}
.block-cards-50-50 .text .grid .list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 20px;
}
.block-cards-50-50 .text .grid .item .icon {
	margin-bottom: 12px;
	width: 35px;
	height: 35px;
	background-color: var(--color-green);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 6px;
}
.block-cards-50-50.pink .text .grid .item .icon {
	background-color: var(--color-pink);
}
.block-cards-50-50.blue .text .grid .item .icon {
	background-color: var(--color-blue);
}
.block-cards-50-50.orange .text .grid .item .icon {
	background-color: var(--color-orange);
}
.block-cards-50-50 .text.purple .grid .item .icon {
	background-color: var(--color-purple);
}
.block-cards-50-50 .text .grid .item p {
	margin: 6px 0 0 0;
}

@media (max-width: 860px) {
	.block-cards-50-50 .columns, 
	.block-cards-50-50.media-right .columns {
		flex-direction: column;
		gap: 40px;
	}
	.block-cards-50-50 .media {
		width: 100%;
	}
	.block-cards-50-50 .media img {
		width: auto;
	}

	.block-cards-50-50 .text:has(.intro) {
		order: -1;
	}

}
@media (max-width: 560px) {
	.block-cards-50-50 .text .grid .title {
		margin-bottom: 24px;
	}
	.block-cards-50-50 .text .grid .list {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}
/*
themeblocks/cards-50-50
*/


