/*
 * Oznam: the bar above the header (includes/theme/inc/notice.php, behaviour assets/js/notice.js).
 * .wa-notice (--alert|--info|--action), .wa-notice__inner, .wa-notice__badge, .wa-notice__text, .wa-notice__btn,
 * .wa-notice__chev, .wa-notice__close(-icon).
 * Not sticky: it scrolls away, the sticky header stays. Colour per type comes from --nd-c-notice-* tokens.
 */

.wa-notice {
	--notice-bg: var(--nd-c-notice-alert);
	background-color: var(--notice-bg);
	color: var(--nd-c-on-brand);
}

.wa-notice[hidden] {
	display: none;
}

.wa-notice--info {
	--notice-bg: var(--nd-c-notice-info);
}

.wa-notice--action {
	--notice-bg: var(--nd-c-notice-action);
}

.wa-notice__inner {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-12);
	padding-block: var(--nd-sp-6);
}

/* Badge, text and button sit together in the middle, the cross on the right edge. */
.wa-notice__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--nd-sp-4);
	margin-inline-start: auto;
	padding: 3px var(--nd-sp-8) 3px var(--nd-sp-6);
	border-radius: var(--nd-radius-pill);
	background-color: var(--nd-c-surface);
	color: var(--notice-bg);
	font-size: var(--nd-fs-11);
	font-weight: var(--nd-fw-bold);
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wa-notice__badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	animation: wa-notice-pulse 1.6s ease-in-out infinite;
}

@keyframes wa-notice-pulse {
	50% {
		opacity: .25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-notice__badge::before {
		animation: none;
	}
}

.wa-notice__text {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--nd-fs-14);
	line-height: var(--nd-lh-tight);
	text-align: center;
}

.wa-notice__text b,
.wa-notice__text strong {
	font-weight: var(--nd-fw-bold);
}

.wa-notice__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	gap: var(--nd-sp-2);
	padding-inline: var(--nd-sp-12) var(--nd-sp-10);
	border-radius: var(--nd-radius-btn);
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
	color: var(--nd-c-on-brand);
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-bold);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.wa-notice__btn {
	margin-inline-end: auto;
}

.wa-notice__chev {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Without a button the badge and text alone keep the centre. */
.wa-notice__inner:not(:has(.wa-notice__btn)) .wa-notice__text {
	margin-inline-end: auto;
}

.wa-notice__btn:hover {
	background-color: var(--nd-c-surface);
	color: var(--notice-bg);
	text-decoration: none;
}

.wa-notice__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.wa-notice__close-icon {
	display: inline-flex;
	width: var(--nd-icon-s);
	height: var(--nd-icon-s);
}

.wa-notice__close-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Snippet 165 removes the focus outline globally; the bar needs its own. */
.wa-notice :is(a, button):focus-visible {
	outline: var(--focus-width) solid var(--nd-c-on-brand);
	outline-offset: var(--focus-width);
}

.wa-notice__btn:focus-visible {
	outline-color: var(--nd-c-on-brand);
	box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--notice-bg);
}

@media (max-width: 720px) {
	/* Badge on the left, text with the button below it, the cross on the right. */
	.wa-notice__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		column-gap: var(--nd-sp-10);
		row-gap: var(--nd-sp-6);
		align-items: center;
		padding-block: var(--nd-sp-8);
		padding-inline: var(--nd-sp-12) var(--nd-sp-4);
	}

	.wa-notice__badge {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		margin: 2px 0 0;
	}

	.wa-notice__text {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
	}

	.wa-notice__btn {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin: 0;
	}

	.wa-notice__close {
		grid-column: 3;
		grid-row: 1 / span 2;
		width: 40px;
		height: 40px;
	}

	/* Without a button everything stays on one row. */
	.wa-notice__inner:not(:has(.wa-notice__btn)) :is(.wa-notice__badge, .wa-notice__close) {
		grid-row: 1;
	}
}