/* Click-to-load placeholder for video embeds held until marketing consent
   (inc/embed-consent.php). CF brand: navy box, beige text, yellow pill button. */

.gmcc-embed {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto 2rem;
	padding: 2rem;
	box-sizing: border-box;
	border-radius: 0.75rem;
	background: #112D40;
	color: #FDF9E3;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	text-align: center;
}

/* Pasted Vimeo code sits in a padded ratio wrapper (100% square, 177% portrait). While the video
   is held, collapse that wrapper and show a compact 16:9 box; the wrapper's own height comes back
   once the iframe replaces the placeholder. */
:has(> .gmcc-embed[style*="absolute"]) {
	padding: 0 !important;
	height: auto !important;
}

.gmcc-embed[style*="absolute"] {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin: 0 0 2rem;
}

.gmcc-embed__inner {
	max-width: 42rem;
}

.gmcc-embed .gmcc-embed__text {
	margin: 0 0 1.25rem;
	color: #FDF9E3;
	font-size: 18px;
	line-height: 1.5;
}

.gmcc-embed .gmcc-embed__text strong {
	color: #FDF9E3;
}

.gmcc-embed .gmcc-embed__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 2rem;
	margin: 0;
}

.gmcc-embed .gmcc-embed__load {
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 9999px;
	background: #FFBC21;
	color: #112D40;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.gmcc-embed .gmcc-embed__load:hover {
	background: #D09440;
}

.gmcc-embed .gmcc-embed__load:focus-visible,
.gmcc-embed .gmcc-embed__settings:focus-visible {
	outline: 2px solid #FFBC21;
	outline-offset: 3px;
}

.gmcc-embed .gmcc-embed__actions a.gmcc-embed__settings[data-gmcc-open][href] {
	color: #CCE2D6;
	font-size: 16px;
	text-decoration: underline;
}

.gmcc-embed .gmcc-embed__actions a.gmcc-embed__settings[data-gmcc-open][href]:hover {
	color: #FDF9E3;
}

@media (max-width: 599px) {
	.gmcc-embed {
		padding: 1.25rem;
	}

	.gmcc-embed .gmcc-embed__text {
		font-size: 15px;
		margin-bottom: 0.75rem;
	}
}