/* Homepage emergency-appeal banner (e.g. Kenscoff Emergency Relief).
   Solid brand coral panel. Remove this file (and its enqueue/editor-style lines in functions.php) to drop the styling. */
.alert-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem 2rem;
	margin-top: 0.75rem !important;
	margin-bottom: 1.25rem !important;
	padding: 1rem 1.25rem 1rem 1.5rem;
	border-radius: 10px;
	background-color: var(--wp--preset--color--custom-orange, #ef505d);
	color: #fff;
}

.alert-banner .alert-copy {
	position: relative;
	flex: 1 1 420px;
	margin: 0;
	padding: 0 0 0 4rem;
	min-height: 48px;
}

/* Icon: heart with a plus, in a soft translucent circle */
.alert-banner .alert-copy::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='24' r='24' fill='%23fff' fill-opacity='.22'/><g transform='translate(10 10) scale(1.1667)'><path fill='%23fff' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/><path fill='%23ef505d' d='M11 7h2v2.5h2.5v2H13V14h-2v-2.5H8.5v-2H11z'/></g></svg>") no-repeat center / contain;
}

.alert-banner .alert-title {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.alert-banner .alert-text {
	margin: 0.2rem 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
}

.alert-banner .alert-action {
	flex: none;
	margin: 0;
}

.alert-banner .alert-button .wp-block-button__link {
	padding: 0.8rem 1.4rem;
	border-radius: 5px;
	background-color: #fff;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

@media (max-width: 700px) {
	.alert-banner {
		padding: 1rem 1.25rem;
	}

	/* Icon beside the headline; description runs full width underneath */
	.alert-banner .alert-copy {
		display: grid;
		grid-template-columns: 40px 1fr;
		align-items: center;
		flex-basis: 100%;
		column-gap: 0.75rem;
		padding-left: 0;
		min-height: 0;
	}

	.alert-banner .alert-copy::before {
		position: static;
		grid-column: 1;
		grid-row: 1;
		width: 40px;
		height: 40px;
		transform: none;
	}

	.alert-banner .alert-title {
		grid-column: 2;
		grid-row: 1;
	}

	.alert-banner .alert-text {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0.6rem;
		font-size: var(--wp--preset--font-size--base);
	}

	.alert-banner .alert-action,
	.alert-banner .alert-button,
	.alert-banner .alert-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}