/*
 * Notice bar ("Meldungen") – front-end styles.
 *
 * Styles the markup printed by Busol_Hinweise::render() in busol-hinweise.php (.bh-stack, .bh,
 * .bh__*) and the colour variants .bh--<style> from Busol_Hinweise::STYLES. Uses the theme
 * variable --brand and the theme's dark mode attribute (data-theme on <html>, set by the plugin
 * busol-darkmode). .is-hidden is added by hinweise.js when a visitor dismisses a notice.
 */
.bh-stack {
	position: relative;
}
/* The grid row collapses from 1fr to 0fr, which animates the height without a fixed value. */
.bh {
	--bh-bg: var(--brand, #1b569e);
	--bh-fg: #fff;
	background: var(--bh-bg);
	color: var(--bh-fg);
	overflow: hidden;
	display: grid;
	grid-template-rows: 1fr;
	transition:
		grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity 0.3s;
}
.bh > .bh__inner {
	min-height: 0;
}
.bh.is-hidden {
	grid-template-rows: 0fr;
	opacity: 0;
}
.bh--warn {
	--bh-bg: #e9a23b;
	--bh-fg: #2a1900;
}
.bh--ok {
	--bh-bg: #1f9d6b;
}
.bh--dark {
	--bh-bg: #0d2342;
}
.bh__inner {
	max-width: 1264px;
	margin: 0 auto;
	padding: 10px clamp(16px, 4vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	text-align: center;
}
.bh__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}
.bh__text {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
}
.bh__link {
	color: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.bh__link:hover {
	color: inherit;
	opacity: 0.85;
}
.bh__close {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	cursor: pointer;
	transition:
		background-color 0.2s,
		transform 0.3s;
}
.bh--warn .bh__close {
	background: rgba(0, 0, 0, 0.08);
}
.bh__close:hover {
	transform: rotate(90deg);
}
.bh__close svg {
	width: 15px;
	height: 15px;
}
:root[data-theme="dark"] .bh--info {
	--bh-bg: #1d4f8f;
}
@media (prefers-reduced-motion: reduce) {
	.bh,
	.bh__close {
		transition: none;
	}
}
.bh--alert {
	--bh-bg: #c0392b;
}
.bh__icon .ico,
.bh__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}
/* Phones: compact bar – symbol on the left, text in the middle, close button on the right. */
@media (max-width: 640px) {
	.bh__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: start;
		justify-items: start;
		gap: 2px 10px;
		padding: 9px 12px;
		text-align: left;
	}
	.bh__icon {
		grid-row: 1 / 3;
		margin-top: 2px;
	}
	.bh__icon svg,
	.bh__icon .ico {
		width: 16px;
		height: 16px;
	}
	.bh__text {
		grid-column: 2;
		font-size: 0.86rem;
		line-height: 1.35;
	}
	.bh__link {
		grid-column: 2;
		font-size: 0.86rem;
	}
	.bh__close {
		grid-column: 3;
		grid-row: 1 / 3;
		width: 26px;
		height: 26px;
		margin: 0;
	}
}