/**
 * Scrolling word strip, as a portable block.
 *
 * The reference renders one component on both the homepage and the About page
 * (SiteMarquee), so the strip is meant to be dropped on any page. Its look was
 * only written for the homepage though, hung off the section attribute
 * data-testid="editorial-marquee", so pasting the markup anywhere else gave
 * unstyled words and full size leaf drawings.
 *
 * Everything below keys off .marquee-track, which is the outermost element of
 * the markup that actually gets pasted, so a page needs the markup and nothing
 * else. The motion itself already comes from assets/animations.css site-wide.
 *
 * Values are the same ones the homepage already uses, so where both apply they
 * agree and the strip reads identically on every page.
 */

/* ---- The strip's own box: 24px of air above and below, a hairline top and
   bottom, and the clipping that keeps the oversized track from widening the
   page. This lands on the Elementor HTML widget holding the track, since that
   is the only wrapper the pasted markup is guaranteed to have.

   Pages that already wrap the strip in a styled editorial-marquee section
   carry these on the section, so they are skipped here rather than applied a
   second time. Browsers without :has() simply keep the section-level styling
   they already had, and a pasted strip loses the rules and the padding but
   still reads and still moves. ---- */
.elementor-widget-html:has(.marquee-track):not([data-testid="editorial-marquee"] *) {
	padding: 24px 0;
	border-top: 1px solid rgba(44, 59, 46, .1);
	border-bottom: 1px solid rgba(44, 59, 46, .1);
	overflow: hidden;
}

/* ---- The reference stops the strip while the pointer is over it. ---- */
.elementor-widget-html:has(.marquee-track):hover .marquee-track {
	animation-play-state: paused;
}

/* ---- One word plus its leaf. The word carries the spacing, 32px each side,
   which is what sets the rhythm between entries. ---- */
.marquee-track .marquee-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 32px;
}

/* ---- 30px rising to 36px from the tablet width up, italic in the serif face
   at 80% forest. The line box is pinned to the same 36/40 the reference gets
   from its type scale, which is what gives the strip its height without any
   fixed height being set on it. ---- */
.marquee-track .marquee-item__text {
	font-family: var(--font-serif), Georgia, serif;
	font-style: italic;
	font-size: 30px;
	line-height: 36px;
	color: rgba(44, 59, 46, .8);
}

@media (min-width: 768px) {
	.marquee-track .marquee-item__text {
		font-size: 36px;
		line-height: 40px;
	}
}

/* ---- The leaf is drawn inline, so with no width of its own it takes the
   viewBox and comes out around 48px. The reference draws it at 16. ---- */
.marquee-track .marquee-item svg {
	width: 16px;
	height: 16px;
	color: var(--color-sage, #8B9A84);
	flex-shrink: 0;
	margin-left: 32px;
}

/* ---- Both rows sit on one line and neither may shrink, otherwise the loop
   has a visible seam where the copy starts. ---- */
.marquee-track {
	width: max-content;
}
.marquee-track .marquee-row {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}