/* =========================================================================
   Befello Announcement Bar.

   A 3px brand-coloured line across the top of the page with a compact label
   hanging from its centre, bottom corners rounded. In the page flow: it
   pushes the header down by its own height and covers nothing.

   The colours arrive as two custom properties on the element, set by the
   plugin from the settings: --befello-ab-bg (line and label) and
   --befello-ab-ink (text and ×, always ink or white, whichever has the higher
   contrast). Everything else is Befello's own tokens, with the design
   system's values as fallbacks for when the theme is not active.

   Every class contains "befello", so the theme shell's generic button and
   form rules (guarded with :not([class*="befello"])) never reach it.
   ========================================================================= */

.befello-announcement {
	--befello-ab-line: 3px;

	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 16px;
	border-top: var(--befello-ab-line) solid var(--befello-ab-bg, #0069c7);
	font-family: var(--bf-font-sans, "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.befello-announcement[hidden] {
	display: none;
}

.befello-announcement *,
.befello-announcement *::before,
.befello-announcement *::after {
	box-sizing: border-box;
}

.befello-announcement__label {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	min-height: 28px;
	padding: 5px 12px;
	border-radius: 0 0 var(--bf-radius-sm, 6px) var(--bf-radius-sm, 6px);
	background: var(--befello-ab-bg, #0069c7);
	color: var(--befello-ab-ink, #fff);
}

.befello-announcement .befello-announcement__text {
	align-self: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	/* §6.2 caption: 12/18, weight 600 as a label. */
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* The close button fills the label's height, so the target is 28 x 28
   without making the label any taller. Selectors carry the element name to
   outrank the Customizer's `button:not(.menu-toggle):focus` (0,2,1). */
.befello-announcement__label:has(.befello-announcement__close) {
	padding-right: 2px;
}

.befello-announcement button.befello-announcement__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	min-height: 28px;
	margin: -5px 0 -5px 6px;
	padding: 0;
	border: 0;
	border-radius: var(--bf-radius-xs, 4px);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	opacity: 0.85;
}

.befello-announcement button.befello-announcement__close:focus {
	background: transparent;
	color: inherit;
	outline: none;
}

.befello-announcement button.befello-announcement__close:hover {
	background: rgba(0, 0, 0, 0.12);
	background: color-mix(in srgb, currentColor 18%, transparent);
	color: inherit;
	opacity: 1;
}

/* The ring is the label's own text colour: it already passes 4.5:1 on the
   background, so the focus indicator clears WCAG's 3:1 by construction. */
.befello-announcement button.befello-announcement__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
	opacity: 1;
}

.befello-announcement button.befello-announcement__close:active {
	background: rgba(0, 0, 0, 0.2);
	background: color-mix(in srgb, currentColor 28%, transparent);
}

.befello-announcement__close svg {
	display: block;
	flex: none;
	width: 12px;
	height: 12px;
}

@media (max-width: 480px) {
	.befello-announcement__label {
		padding-left: 10px;
		padding-right: 10px;
	}

	.befello-announcement .befello-announcement__text {
		letter-spacing: 0.04em;
	}
}

@media (forced-colors: active) {
	.befello-announcement__label {
		border: 1px solid CanvasText;
		border-top: 0;
	}
}

@media print {
	.befello-announcement {
		display: none;
	}
}