/**
 * Page Sections: Marquee text.
 *
 * Full-bleed horizontal scrolling text band. Pure CSS — no JS required.
 * Uses brand tokens defined in theme.css.
 */

.ps-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: clamp(24px, 3vw, 44px);
	/* Break out of any parent constraints / be full bleed even if nested. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---- Viewport (clips the wide track) ---- */
.ps-marquee__viewport {
	overflow: hidden;
	width: 100%;
}

/* ---- Track (the wide, animated row of repeated phrases) ---- */
.ps-marquee__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	width: max-content;
	will-change: transform;
	animation-name: ps-marquee-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 35s; /* normal — overridden by modifier */
}

/* ---- Items + separators ---- */
.ps-marquee__item,
.ps-marquee__sep {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	display: inline-block;
}
.ps-marquee__item {
	font-size: clamp(1.2rem, 2.2vw, 2rem);
	padding-inline: clamp(14px, 1.6vw, 26px);
}
.ps-marquee__sep {
	font-size: clamp(1rem, 1.4vw, 1.4rem);
	opacity: .55;
	padding-inline: clamp(8px, 1vw, 14px);
	transform: translateY(-0.12em);
}

/* ==========================================================================
   Colour variants (background)
   ========================================================================== */
.ps-marquee--teal  { background: var(--teal); }
.ps-marquee--plum  { background: var(--plum); }
.ps-marquee--cream { background: var(--cream); }
.ps-marquee--sand  { background: var(--sand); }

/* ==========================================================================
   Style: Solid — filled bg, contrasting text colour
   ========================================================================== */
.ps-marquee--solid.ps-marquee--teal  .ps-marquee__item,
.ps-marquee--solid.ps-marquee--teal  .ps-marquee__sep,
.ps-marquee--solid.ps-marquee--plum  .ps-marquee__item,
.ps-marquee--solid.ps-marquee--plum  .ps-marquee__sep {
	color: var(--cream);
}
.ps-marquee--solid.ps-marquee--cream .ps-marquee__item,
.ps-marquee--solid.ps-marquee--cream .ps-marquee__sep,
.ps-marquee--solid.ps-marquee--sand  .ps-marquee__item,
.ps-marquee--solid.ps-marquee--sand  .ps-marquee__sep {
	color: var(--teal);
}

/* ==========================================================================
   Style: Outline — transparent text with brand-coloured stroke,
   sitting on a contrasting background.
   ========================================================================== */
.ps-marquee--outline .ps-marquee__item {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--teal);
}
.ps-marquee--outline .ps-marquee__sep {
	color: var(--teal);
	opacity: .7;
}
/* On dark backgrounds switch the stroke to cream so it's readable. */
.ps-marquee--outline.ps-marquee--teal .ps-marquee__item,
.ps-marquee--outline.ps-marquee--plum .ps-marquee__item {
	-webkit-text-stroke-color: var(--cream);
}
.ps-marquee--outline.ps-marquee--teal .ps-marquee__sep,
.ps-marquee--outline.ps-marquee--plum .ps-marquee__sep {
	color: var(--cream);
}

/* ==========================================================================
   Direction
   ========================================================================== */
.ps-marquee--dir-left  .ps-marquee__track { animation-direction: normal; }
.ps-marquee--dir-right .ps-marquee__track { animation-direction: reverse; }

/* ==========================================================================
   Speed
   ========================================================================== */
.ps-marquee--speed-slow   .ps-marquee__track { animation-duration: 60s; }
.ps-marquee--speed-normal .ps-marquee__track { animation-duration: 35s; }
.ps-marquee--speed-fast   .ps-marquee__track { animation-duration: 18s; }

/* ==========================================================================
   Keyframes — translate by 50% of the (duplicated-feeling) track width.
   Because we repeat the phrase 8 times server-side, scrolling by 50%
   loops back to a visually identical position.
   ========================================================================== */
@keyframes ps-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 767px) {
	.ps-marquee { padding-block: clamp(28px, 7vw, 56px); }
	.ps-marquee--outline .ps-marquee__item { -webkit-text-stroke-width: 1.25px; }
}
@media (max-width: 479px) {
	.ps-marquee__item { padding-inline: clamp(12px, 3vw, 22px); }
}

/* ==========================================================================
   Desktop — a touch more breathing room, but no aggressive font-size bump
   (a marquee at 80+px at 1366 is overwhelming — keep base clamp's ceiling).
   ========================================================================== */
@media (min-width: 1024px) {
	.ps-marquee { padding-block: clamp(24px, 2.4vw, 38px); }
	.ps-marquee__item {
		font-size: clamp(1.3rem, 1.8vw, 1.8rem);
		padding-inline: clamp(20px, 1.8vw, 32px);
	}
	.ps-marquee__sep {
		font-size: clamp(1rem, 1.2vw, 1.3rem);
		padding-inline: clamp(12px, 1.2vw, 18px);
	}
}

@media (min-width: 1600px) {
	.ps-marquee__item { font-size: clamp(1.6rem, 1.8vw, 2.2rem); }
}

/* ==========================================================================
   Reduced motion — freeze the track but keep the design legible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ps-marquee__track { animation: none; }
	.ps-marquee__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}