/**
 * BS360 Notification Bar - frontend styles.
 *
 * Values in this file (bar height, padding, font sizes, shimmer timing) are
 * a documented research starting point (see concept doc section 3c), not a
 * betterspace-specific brand mandate -- check against the live preview and
 * the theme's font scale in theme.json before treating them as final.
 *
 * @since 1.0.0
 */

.bs360-nb-bar {
	position: relative;
	width: 100%;
	min-height: 40px;
	overflow-x: clip; /* not "hidden": hidden breaks position:sticky on ancestors. */
}

.bs360-nb-bar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 9px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 8px;
}

@media (min-width: 768px) {
	.bs360-nb-bar__inner {
		padding: 9px 40px;
	}
}

.bs360-nb-bar__group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	flex-wrap: wrap;
}

.bs360-nb-bar__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.bs360-nb-bar__icon svg {
	width: 100%;
	height: 100%;
}

.bs360-nb-bar__headline {
	font-size: 0.8125rem; /* 13px */
	line-height: 1.4;
	font-weight: 400;
}

/* Since 1.0.6: global "Text size" setting (class-global-settings.php) is
   applied via WordPress's own has-{slug}-font-size utility class (see
   class-renderer.php). WordPress outputs that class's rule globally as
   `.has-{slug}-font-size { font-size: var(--wp--preset--font-size--{slug})
   !important; }` whenever the active theme defines theme.json font sizes,
   so no separate override rule is needed here: the !important in that core
   rule already wins over the plain font-size declarations above. */

.bs360-nb-bar__button {
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}

.bs360-nb-bar__button-label {
	/* Plain inline wrapper around the button's text; only exists so the
	   shimmer effect (background-clip: text) can target it in isolation
	   without also clipping the button's own solid background color. */
	color: inherit;
}

.bs360-nb-bar__link-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bs360-nb-bar--full-link .bs360-nb-bar__close {
	z-index: 2;
}

.bs360-nb-bar__close {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	z-index: 2;
	color: rgba(255, 255, 255, 0.5);
}

.bs360-nb-bar--white .bs360-nb-bar__close {
	color: rgba(94, 115, 127, 0.5);
}

.bs360-nb-bar__close svg {
	width: 16px;
	height: 16px;
}

.bs360-nb-bar__close:hover,
.bs360-nb-bar__close:focus-visible {
	color: rgba(255, 255, 255, 1);
}

.bs360-nb-bar--white .bs360-nb-bar__close:hover,
.bs360-nb-bar--white .bs360-nb-bar__close:focus-visible {
	color: rgba(94, 115, 127, 1);
}

.bs360-nb-bar__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 479px) {
	.bs360-nb-bar__inner {
		flex-wrap: nowrap;
	}
}

/* Color variants: radial "spotlight" gradient, lightest point centered.
   Values per brand spec (14.09.2026): 600-tone at edges, 400/050-tone at center. */

.bs360-nb-bar--green {
	background: radial-gradient(ellipse at center, #86c741 0%, #527e25 100%);
	color: #ffffff;
}

.bs360-nb-bar--gray {
	background: radial-gradient(ellipse at center, #5e737f 0%, #323e44 100%);
	color: #ffffff;
}

.bs360-nb-bar--bordeaux {
	background: radial-gradient(ellipse at center, #e7186f 0%, #8b0e42 100%);
	color: #ffffff;
}

.bs360-nb-bar--white {
	background: radial-gradient(ellipse at center, #ffffff 0%, #f5f6f7 100%);
	color: #5e737f;
}

/* Since 1.0.8: button background made 25% more transparent per request
   (opacity 100% -> 75%, i.e. alpha 1.0 -> 0.75); text colors unchanged. */
.bs360-nb-bar--green .bs360-nb-bar__button {
	background: rgba(255, 255, 255, 0.75);
	color: #679d2e;
}

.bs360-nb-bar--gray .bs360-nb-bar__button {
	background: rgba(255, 255, 255, 0.75);
	color: #3f4d55;
}

.bs360-nb-bar--bordeaux .bs360-nb-bar__button {
	background: rgba(255, 255, 255, 0.75);
	color: #ae1253;
}

.bs360-nb-bar--white .bs360-nb-bar__button {
	background: rgba(94, 115, 127, 0.75);
	color: #ffffff;
}

/* Text shimmer: a narrow light streak sweeps across otherwise fully visible
   text, with a pause between repeats, not a seamless loop.

   Bug fix (14.09.2026, v1.0.4): the previous version positioned the gradient
   so that its solid currentColor band was, at rest, shifted entirely outside
   the element -- meaning the headline/button text was invisible except for
   the brief moment the sweep itself passed over it. Fixed by using a
   gradient that is currentColor almost everywhere (a wide solid band on both
   sides) with only a narrow highlight streak, sized and positioned so the
   solid band always covers the full text at rest; background-repeat:
   no-repeat is now explicit rather than relying on the (undefined here)
   default.

   Bug fix (14.09.2026, v1.0.5): that fix still left the text invisible at
   every position, not just at rest. Root cause: currentColor resolves
   against the computed `color` of the element it is used on. The gradient
   and `color: transparent` were declared on the *same* element
   (.bs360-nb-bar__headline / .bs360-nb-bar__button-label), so currentColor
   inside the gradient resolved to transparent too, not to the element's
   original (inherited) text color -- the "solid" band was invisible from
   the start, not just briefly. A CSS custom property is used instead: it is
   set on a selector with normal `color` still active, then read into the
   gradient. Since custom-property values themselves don't carry
   currentColor's dependency on the element's own `color`, this avoids the
   circular reference. The base color still has to be a concrete value per
   color variant (see the --bs360-nb-shimmer-base declarations below), since
   the shimmer rule's own color:transparent would otherwise still be what
   currentColor resolves against if referenced directly at that point. */

.bs360-nb-bar--green .bs360-nb-bar__headline,
.bs360-nb-bar--gray .bs360-nb-bar__headline,
.bs360-nb-bar--bordeaux .bs360-nb-bar__headline {
	--bs360-nb-shimmer-base: #ffffff;
}

.bs360-nb-bar--white .bs360-nb-bar__headline {
	--bs360-nb-shimmer-base: #5e737f;
}

.bs360-nb-bar--shimmer .bs360-nb-bar__headline {
	background-image: linear-gradient(
		100deg,
		var(--bs360-nb-shimmer-base) 0%,
		var(--bs360-nb-shimmer-base) 45%,
		rgba(255, 255, 255, 0.55) 50%,
		var(--bs360-nb-shimmer-base) 55%,
		var(--bs360-nb-shimmer-base) 100%
	);
	background-repeat: no-repeat;
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: bs360-nb-shimmer 9s ease-in-out infinite;
}

/* Button background is white for Green/Gray/Bordeaux, so its shimmer
   highlight is darkened there to stay visible. The White variant's button
   has a dark background (#5e737f) instead, so it gets its own, lightened
   highlight, set via --bs360-nb-shimmer-base below.

   Bug fix (14.09.2026, v1.0.4): shimmer targets the inner
   .bs360-nb-bar__button-label span, not .bs360-nb-bar__button itself.
   background-clip: text clips ALL background layers on an element, not just
   background-image -- applying it directly to the button would also clip
   its solid background-color (the button's white/colored box) down to the
   text shape, making the button box itself disappear and leaving only
   shimmering text with no visible button.

   Base color per variant matches each variant's .bs360-nb-bar__button color
   declared above: the button's own text color, not the bar's text color. */

.bs360-nb-bar--green .bs360-nb-bar__button-label {
	--bs360-nb-shimmer-base: #679d2e;
}

.bs360-nb-bar--gray .bs360-nb-bar__button-label {
	--bs360-nb-shimmer-base: #3f4d55;
}

.bs360-nb-bar--bordeaux .bs360-nb-bar__button-label {
	--bs360-nb-shimmer-base: #ae1253;
}

.bs360-nb-bar--white .bs360-nb-bar__button-label {
	--bs360-nb-shimmer-base: #ffffff;
}

.bs360-nb-bar--shimmer .bs360-nb-bar__button-label {
	background-image: linear-gradient(
		100deg,
		var(--bs360-nb-shimmer-base) 0%,
		var(--bs360-nb-shimmer-base) 45%,
		rgba(0, 0, 0, 0.2) 50%,
		var(--bs360-nb-shimmer-base) 55%,
		var(--bs360-nb-shimmer-base) 100%
	);
	background-repeat: no-repeat;
	background-size: 300% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: bs360-nb-shimmer 9s ease-in-out infinite;
}

.bs360-nb-bar--white.bs360-nb-bar--shimmer .bs360-nb-bar__button-label {
	background-image: linear-gradient(
		100deg,
		var(--bs360-nb-shimmer-base) 0%,
		var(--bs360-nb-shimmer-base) 45%,
		rgba(255, 255, 255, 0.55) 50%,
		var(--bs360-nb-shimmer-base) 55%,
		var(--bs360-nb-shimmer-base) 100%
	);
}

.bs360-nb-bar--white.bs360-nb-bar--shimmer .bs360-nb-bar__headline {
	background-image: linear-gradient(
		100deg,
		var(--bs360-nb-shimmer-base) 0%,
		var(--bs360-nb-shimmer-base) 45%,
		rgba(94, 115, 127, 0.25) 50%,
		var(--bs360-nb-shimmer-base) 55%,
		var(--bs360-nb-shimmer-base) 100%
	);
}

@keyframes bs360-nb-shimmer {
	0% {
		background-position: 100% 0;
	}
	18% {
		background-position: 0% 0;
	}
	100% {
		background-position: 0% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs360-nb-bar--shimmer .bs360-nb-bar__headline,
	.bs360-nb-bar--shimmer .bs360-nb-bar__button-label {
		animation: none;
		background: none;
		-webkit-text-fill-color: currentColor;
		color: inherit;
	}
}

.bs360-nb-bar.bs360-nb-bar--hidden {
	display: none;
}