/* Site Alert — Frontend Styles */

.community-connect-site-alert {
	padding: var(--spacing-sm, 16px) var(--spacing-md, 24px);
	text-align: center;
}

.community-connect-site-alert-content {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm, 16px);
	flex-wrap: wrap;
}

.community-connect-site-alert-message {
	color: #fff;
	font-family: var(--font-primary, sans-serif);
	font-size: var(--text-body-lg);
	font-weight: var(--font-weight-regular, 400);
	line-height: var(--line-height-normal, 1.5);
}

/* CTA: plain white text link with SVG arrow — no button box */
.community-connect-site-alert-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-family: var(--font-primary, sans-serif);
	font-size: var(--text-body-base, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: var(--line-height-snug, 1.3);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease-in-out;
}

.community-connect-site-alert-cta::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M8.88888 3.3335L13.3333 8.00016M13.3333 8.00016L8.88888 12.6668M13.3333 8.00016L2.66666 8.00016' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
	transition: transform 0.2s ease-in-out;
}

.community-connect-site-alert-cta:hover {
	opacity: 0.85;
}

.community-connect-site-alert-cta:hover::after {
	transform: translateX(3px);
}

.community-connect-site-alert-cta:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.community-connect-site-alert {
		padding: var(--spacing-xs, 8px) var(--spacing-sm, 16px);
	}

	.community-connect-site-alert-content {
		flex-direction: column;
		gap: var(--spacing-xs, 8px);
	}

	.community-connect-site-alert-message {
		font-size: var(--text-body-sm, 14px);
	}
}