/*
 * NoticeBar – bar styles (used on the site and in the admin preview).
 * Everything is scoped to .noticebar and driven by CSS custom properties
 * that the plugin sets inline on the element.
 */
.noticebar {
	--nb-bg: #1f2937;
	--nb-color: #ffffff;
	--nb-fs: 15px;
	--nb-fw: 500;
	--nb-py: 12px;
	--nb-px: 20px;
	--nb-btn-bg: #fbbf24;
	--nb-btn-color: #111827;
	--nb-radius: 6px;

	/* The bar responds to its own width, so the admin preview can
	   show tablet and mobile layouts accurately. */
	container-type: inline-size;
	container-name: noticebar;

	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: var(--nb-bg);
	color: var(--nb-color);
	font-family: inherit;
	font-size: var(--nb-fs);
	font-weight: var(--nb-fw);
	line-height: 1.45;
	text-align: start;
	box-sizing: border-box;
}

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

.noticebar [hidden],
.noticebar[hidden] {
	display: none !important;
}

.noticebar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--nb-py) var(--nb-px);
}

.noticebar__content {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	min-width: 0;
}

.noticebar__message {
	min-width: 0;
	margin: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

.noticebar__message a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.noticebar__message a:hover,
.noticebar__message a:focus {
	color: inherit;
	text-decoration-thickness: 2px;
}

/* Alignment */
.noticebar--align-left .noticebar__content { justify-content: flex-start; }
.noticebar--align-left .noticebar__message { text-align: start; }
.noticebar--align-right .noticebar__content { justify-content: flex-end; }
.noticebar--align-right .noticebar__message { text-align: end; }

/* Button */
.noticebar .noticebar__button {
	display: inline-block;
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0;
	padding: 0.45em 1.1em;
	border: 0;
	border-radius: var(--nb-radius);
	background: var(--nb-btn-bg);
	box-shadow: none;
	color: var(--nb-btn-color);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.noticebar .noticebar__button:hover,
.noticebar .noticebar__button:focus {
	color: var(--nb-btn-color);
	text-decoration: none;
	filter: brightness(0.92);
}

.noticebar .noticebar__button:focus-visible,
.noticebar .noticebar__close:focus-visible {
	outline: 2px solid var(--nb-color);
	outline-offset: 2px;
}

/* Close button */
.noticebar.has-close .noticebar__inner {
	padding-inline-end: calc(var(--nb-px) + 32px);
}

.noticebar.has-close.noticebar--align-center .noticebar__inner {
	padding-inline-start: calc(var(--nb-px) + 32px);
}

.noticebar .noticebar__close {
	position: absolute;
	top: 50%;
	inset-inline-end: max(8px, calc(var(--nb-px) / 2));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	line-height: 1;
	opacity: 0.75;
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.noticebar .noticebar__close:hover,
.noticebar .noticebar__close:focus {
	background: rgba(127, 127, 127, 0.28);
	color: inherit;
	opacity: 1;
}

.noticebar .noticebar__close svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

/* Shadow */
.noticebar.has-shadow.noticebar--top { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.noticebar.has-shadow.noticebar--bottom { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); }

/* Sticky: stays in the page flow, so it never covers content. */
.noticebar--sticky { z-index: 9999; }
.noticebar--sticky.noticebar--top { position: sticky; top: 0; }
.noticebar--sticky.noticebar--bottom { position: sticky; bottom: 0; }

/* Keep a sticky top bar clear of the WordPress admin bar. */
.admin-bar .noticebar--sticky.noticebar--top { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .noticebar--sticky.noticebar--top { top: 46px; }
}
@media screen and (max-width: 600px) {
	.admin-bar .noticebar--sticky.noticebar--top { top: 0; }
}

/* Dismissing */
.noticebar.is-closing {
	opacity: 0;
	transition: opacity 0.2s ease;
}

html.noticebar-dismissed .noticebar:not(.noticebar--preview) {
	display: none !important;
}

/* Tablet */
@container noticebar (max-width: 782px) {
	.noticebar__inner {
		padding-inline-start: min(var(--nb-px), 24px);
	}
	.noticebar.has-close:not(.noticebar--align-center) .noticebar__inner {
		padding-inline-end: 44px;
	}
}

/* Mobile: message on its own line, button below, a little smaller. */
@container noticebar (max-width: 520px) {
	.noticebar__inner {
		padding-inline: min(var(--nb-px), 14px);
		font-size: min(var(--nb-fs), 16px);
	}
	.noticebar.has-close .noticebar__inner {
		padding-inline-end: 44px;
	}
	.noticebar.has-close.noticebar--align-center .noticebar__inner {
		padding-inline-start: 44px;
	}
	.noticebar__message {
		flex: 1 1 100%;
	}
	.noticebar__close {
		inset-inline-end: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.noticebar,
	.noticebar * {
		transition: none !important;
	}
}

@media print {
	.noticebar:not(.noticebar--preview) {
		display: none !important;
	}
}