/* UB Kit's ub/marquee in the theme's "Band" style (styles/blocks/marquee-band.json): the tilted green
   band under the home hero (patterns/home-band.php). Loaded with ub/marquee (functions.php).
   The band is 6rem wider than its box and turned by 2°; its group (.ub-band) clips it sideways, so
   the page never scrolls horizontally. The loop and its pause button are UB Kit's; still (reduced
   motion, animations off) it is one wrapped, centred row. */

.ub-band { overflow-x: clip; padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.ub-band > * { margin-block: 0; }

.wp-block-ub-marquee.is-style-band {
	--wp--style--block-gap: clamp(1.75rem, 3vw, 3rem);
	--ub-focus: #fff;
	--ub-band-bleed: 3rem;
	inline-size: calc(100% + 2 * var(--ub-band-bleed));
	max-inline-size: none;
	margin-inline: calc(-1 * var(--ub-band-bleed));
	padding-block: clamp(0.875rem, 1.6vw, 1.375rem);
	border-block-start: 3px solid var(--wp--preset--color--accent);
	background: linear-gradient(100deg, #0C3C1E 0%, #177030 55%, #1F8A3B 100%);
	box-shadow: 0 22px 40px -26px rgb(12 60 30 / 0.6);
	color: var(--wp--preset--color--on-primary);
	font-size: clamp(1.375rem, 0.85rem + 1.6vw, 2.25rem);
	letter-spacing: -0.02em;
	transform: rotate(-2deg);
}
.is-style-band .ub-ic { align-items: center; gap: 0.45em; white-space: nowrap; }
.is-style-band .ub-ic::before { inline-size: 1.15em; block-size: 1.15em; margin: 0; background-color: var(--wp--preset--color--accent); }
.is-style-band .ub-ic::after { /* a four-point star between the categories */
	content: "";
	flex: none;
	inline-size: 0.5em;
	block-size: 0.5em;
	margin-inline-start: var(--wp--style--block-gap);
	background: rgb(255 255 255 / 0.55);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.is-style-band a { color: inherit; text-decoration: none; }
.is-style-band a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }
.is-style-band a:focus-visible { outline-offset: 4px !important; border-radius: 4px; }

/* UB Kit 1.1.0–1.4.0 bug, fixed here for every marquee on the site: its running rule
   (html:not([data-ub-motion="off"]) .is-live .ub-marquee__track { animation: … }, specificity 0,3,1)
   beats its paused rule (.is-live.is-paused .ub-marquee__track, 0,3,0), so the pause button never
   paused. Logged for shared-tools (log/hits.md). */
html .wp-block-ub-marquee.is-live.is-paused .ub-marquee__track { animation-play-state: paused; }

/* UB Kit's pause button, inside the visible part of the band, dark on the green */
.is-style-band .ub-marquee__pause {
	inset-inline-end: calc(var(--ub-band-bleed) + var(--wp--style--root--padding-right, 1rem));
	border-color: rgb(255 255 255 / 0.7);
	background-color: #0C3C1E;
	color: #fff;
	box-shadow: 0 0 0 6px rgb(12 60 30 / 0.55);
}

/* Still: one centred, wrapped row inside the visible part of the band */
@media (prefers-reduced-motion: reduce) {
	.is-style-band.is-live .ub-marquee__track { inline-size: 100%; padding-inline: calc(var(--ub-band-bleed) + var(--wp--style--root--padding-left, 1rem)); }
	.is-style-band.is-live .ub-marquee__group { justify-content: center; row-gap: 0.5rem; padding-inline-end: 0; }
	.is-style-band .ub-marquee__group > :last-child::after { display: none; }
}
html[data-ub-motion="off"] .is-style-band.is-live .ub-marquee__track { inline-size: 100%; padding-inline: calc(var(--ub-band-bleed) + var(--wp--style--root--padding-left, 1rem)); }
html[data-ub-motion="off"] .is-style-band.is-live .ub-marquee__group { justify-content: center; row-gap: 0.5rem; padding-inline-end: 0; }
html[data-ub-motion="off"] .is-style-band .ub-marquee__group > :last-child::after { display: none; }

@media (max-width: 599px) {
	.wp-block-ub-marquee.is-style-band { --ub-band-bleed: 1.5rem; transform: rotate(-3deg); }
}