/**
 * Announcement top bars.
 *
 * Every per-bar choice arrives as a custom property on the bar element, so this stylesheet is
 * static and cacheable no matter how many bars exist or how they are configured.
 *
 * Marquee motion is a single CSS animation on a duplicated track — no JS timer, so it keeps
 * running smoothly during layout work and costs nothing on the main thread. front.js only
 * decides how many copies the track needs to fill the bar's width (3.11.0).
 */

.mwc-bar {
	--mwc-bar-bg: #111827;
	--mwc-bar-ink: #ffffff;
	--mwc-bar-link: #93c5fd;
	--mwc-bar-size: 14px;
	--mwc-bar-pad: 10px;
	--mwc-bar-speed: 22s;
	--mwc-bar-track: 0px;

	position: relative;
	z-index: 9998;
	width: 100%;
	background: var(--mwc-bar-bg);
	color: var(--mwc-bar-ink);
	font-size: var(--mwc-bar-size);
	letter-spacing: var(--mwc-bar-track);
	line-height: 1.35;
	overflow: hidden;
	box-sizing: border-box;
}

.mwc-bar *,
.mwc-bar *::before,
.mwc-bar *::after { box-sizing: inherit; }

.mwc-bar[hidden] { display: none !important; }

.mwc-bar.is-bold { font-weight: 700; }
.mwc-bar.is-upper { text-transform: uppercase; }

/*
 * Sticky sits under the WordPress toolbar when it is showing. A theme's own sticky header is
 * pushed down by front.js (it pins itself at top:0 and would otherwise cover the bar).
 */
.mwc-bar--pos-sticky { position: sticky; top: 0; }
@media (min-width: 783px) { body.admin-bar .mwc-bar--pos-sticky { top: 32px; } }
@media (min-width: 601px) and (max-width: 782px) { body.admin-bar .mwc-bar--pos-sticky { top: 46px; } }
.mwc-bar--pos-bottom { position: fixed; bottom: 0; left: 0; }

.mwc-bar__inner {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: var(--mwc-bar-pad) 14px;
	min-width: 0;
}

.mwc-bar__static {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.9em;
	flex-wrap: wrap;
}

.mwc-bar--align-center .mwc-bar__static { justify-content: center; }
.mwc-bar--align-right .mwc-bar__static { justify-content: flex-end; }

.mwc-bar__msg { display: inline-block; }
/*
 * !important on purpose: a page builder's kit rule (`.elementor-kit-243 a`) has the same weight
 * and loads later, so the theme's link colour won on the live site while the admin preview -
 * which has no theme CSS - showed the chosen one (3.11.0). The colour is this bar's own setting;
 * nothing else should repaint it.
 */
.mwc-bar a,
.mwc-bar a:visited,
.mwc-bar a:hover,
.mwc-bar a:focus,
.mwc-bar a:active { color: var(--mwc-bar-link) !important; }
.mwc-bar a { text-decoration: underline; }
.mwc-bar a:hover { text-decoration: none; }

.mwc-bar__cta {
	display: inline-block;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.2em 0.9em;
	text-decoration: none !important;
	font-weight: 700;
	white-space: nowrap;
}

.mwc-bar__dismiss {
	flex: none;
	border: 0;
	background: none;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	font-size: 1.5em;
	line-height: 1;
	padding: 0 0.2em;
}
.mwc-bar__dismiss:hover { opacity: 1; }

/* ------------------------------------------------------------- marquee */

.mwc-bar__marquee {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.mwc-bar__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.mwc-bar__run {
	display: flex;
	align-items: center;
	gap: 3em;
	padding-right: 3em;
	white-space: nowrap;
}

.mwc-bar--marquee-left .mwc-bar__track {
	animation: mwc-bar-scroll-left var(--mwc-bar-speed) linear infinite;
}
.mwc-bar--marquee-right .mwc-bar__track {
	animation: mwc-bar-scroll-right var(--mwc-bar-speed) linear infinite;
}

.mwc-bar.is-pausable:hover .mwc-bar__track,
.mwc-bar.is-pausable:focus-within .mwc-bar__track {
	animation-play-state: paused;
}

@keyframes mwc-bar-scroll-left {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@keyframes mwc-bar-scroll-right {
	from { transform: translate3d(-50%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------- rotation */

.mwc-bar--rotate .mwc-bar__static { position: relative; justify-content: center; }

.mwc-bar--rotate .mwc-bar__msg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mwc-bar--rotate .mwc-bar__msg.is-active {
	position: relative;
	left: auto;
	top: auto;
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

/* --------------------------------------------------------- device gates */

@media (max-width: 781px) {
	.mwc-bar--device-desktop { display: none !important; }
	.mwc-bar__inner { padding-left: 10px; padding-right: 10px; }
	.mwc-bar__run { gap: 2em; padding-right: 2em; }
}

@media (min-width: 782px) {
	.mwc-bar--device-mobile { display: none !important; }
}

/* ------------------------------------------------------ reduced motion */

/*
 * A visitor who asked for less motion still gets the message — the marquee simply stops and
 * the text wraps normally instead of scrolling off-screen.
 */
@media (prefers-reduced-motion: reduce) {
	.mwc-bar__track {
		animation: none !important;
		width: auto;
	}
	.mwc-bar__track > .mwc-bar__run ~ .mwc-bar__run { display: none; }
	.mwc-bar__run { white-space: normal; flex-wrap: wrap; justify-content: center; }
	.mwc-bar--rotate .mwc-bar__msg { transition: none; }
}