/**
 * Announcement bar.
 *
 * Colours come from the Šnof palette. #5C8A92 cannot carry white text at AA, so
 * the badge fill uses the darker #47727A. Override any of these variables from
 * the theme rather than editing this file.
 */

.snof-notice {
	--snof-notice-bg: #efede6;
	--snof-notice-border: #e0dbd1;
	--snof-notice-text: #47727a;
	--snof-notice-badge-bg: #47727a;
	--snof-notice-badge-text: #ffffff;

	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 17px 8px 10px;
	border: 1px solid var(--snof-notice-border);
	border-radius: 100px;
	background: var(--snof-notice-bg);
	color: var(--snof-notice-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

a.snof-notice:hover,
a.snof-notice:focus-visible {
	border-color: var(--snof-notice-badge-bg);
	background: #ffffff;
}

a.snof-notice:focus-visible {
	outline: 2px solid var(--snof-notice-badge-bg);
	outline-offset: 2px;
}

.snof-notice__badge {
	flex: none;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--snof-notice-badge-bg);
	color: var(--snof-notice-badge-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.snof-notice__text {
	color: inherit;
}

/* Urgency variant, set by adding class="is-urgent" on the shortcode. */
.snof-notice.is-urgent {
	--snof-notice-badge-bg: #b25f28;
	--snof-notice-text: #8f4a1e;
}

@media (max-width: 600px) {
	.snof-notice {
		align-items: flex-start;
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snof-notice {
		transition: none;
	}
}