/*
 * Thank You page (page-templates/template-thank-you.php) and 404 page
 * (404.php) -- the centered status message from
 * template-parts/status/message.php.
 *
 * Enqueued only on those two pages -- see inc/enqueue/styles.php.
 */

.status-accent {
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.status-message {
	background-color: #fff;
	border-bottom: 1px solid var(--color-border-light);
}

.status-message__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 760px;
	margin-inline: auto;
	padding: 96px var(--header-padding-x) 88px;
	text-align: center;
}

.status-message__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin-bottom: 28px;
	border-radius: 50%;
	color: #16a34a;
	background-color: #dcfce7;
}

.status-message__check svg {
	width: 64px;
	height: 64px;
}

.status-message__code {
	margin: 0 0 8px;
	font-size: 140px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.status-message__heading {
	margin: 0;
	font-size: 56px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-heading);
}

.status-message__text {
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-body-text);
}

.status-message__btn {
	margin-top: 36px;
}

@media (max-width: 1024px) {
	.status-message__inner {
		padding: 72px var(--header-padding-x-tablet) 64px;
	}

	.status-message__heading {
		font-size: 40px;
	}

	.status-message__code {
		font-size: 110px;
	}
}

@media (max-width: 640px) {
	.status-message__inner {
		padding: 56px var(--header-padding-x-mobile) 48px;
	}

	.status-message__check {
		width: 96px;
		height: 96px;
	}

	.status-message__check svg {
		width: 52px;
		height: 52px;
	}

	.status-message__heading {
		font-size: 32px;
	}

	.status-message__code {
		font-size: 88px;
	}

	.status-message__text {
		font-size: 16px;
	}
}