/**
 * MRMVR Elements — Marquee.
 *
 * A band of items — logos, words, marks — running past at a constant speed.
 *
 * The loop is seamless because the track holds identical copies of one group
 * and travels exactly the distance from one copy to the next before repeating.
 *
 * On any page where the script runs, that animation is built in JavaScript,
 * from a measured number of pixels — see `assets/js/marquee.js`, which
 * explains why a CSS animation cannot be made to do this reliably. The rule
 * below is the fallback for a page the script never reached: `50%` of the two
 * copies the server renders is exactly one group. The script switches it off
 * when it takes over, so the two never run at once.
 *
 * Speed is a distance over time, not a duration: the script divides the group's
 * measured width by the pixels-per-second the control asks for. Adding an item
 * therefore lengthens the loop instead of speeding the band up, which is the
 * one thing a duration-based marquee cannot do.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.40.0
 */

.mrx-mq-wrap {
	container-type: inline-size;
	container-name: mrxmq;
	min-height: 0;
}

.mrx-mq {
	/* Band */
	--mrx-mq-bg: transparent;
	--mrx-mq-radius: 0px;
	--mrx-mq-pad-y: 14px;
	--mrx-mq-pad-x: 0px;
	--mrx-mq-height: 96px;
	--mrx-mq-rule: transparent;
	--mrx-mq-rule-width: 0px;

	/* Track */
	--mrx-mq-gap: clamp(28px, 4cqi, 64px);
	--mrx-mq-item-gap: 14px;
	--mrx-mq-fade: 90px;

	/*
	 * Overridden by the script with the real measurement. This pair is what
	 * runs the band when the script does not: a shift of half the two copies
	 * the server renders, which is one group, and a duration derived from the
	 * speed against a typical track width.
	 */
	--mrx-mq-duration: 30s;
	--mrx-mq-shift: 50%;

	/* Colour */
	--mrx-mq-text: var(--mrmvr-navy, #1a2142);
	--mrx-mq-accent: var(--mrmvr-amber, #f57528);
	--mrx-mq-icon: var(--mrmvr-amber, #f57528);
	--mrx-mq-sep: rgba(207, 161, 144, 0.75);
	--mrx-mq-sep-size: 18px;

	/* Media */
	--mrx-mq-img-h: 44px;

	/*
	 * How much of the band height one logo takes when Logo Size is set to a
	 * share of it. A multiplier rather than a percentage, because a percentage
	 * here would resolve against the image's own box instead of the band's.
	 */
	--mrx-mq-img-fill: 0.46;
	--mrx-mq-img-w: auto;
	--mrx-mq-img-fit: contain;
	--mrx-mq-img-radius: 0px;
	--mrx-mq-icon-size: 20px;

	/* Item surface */
	--mrx-mq-chip-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-mq-chip-border: rgba(207, 161, 144, 0.55);
	--mrx-mq-chip-radius: 999px;
	--mrx-mq-chip-pad-y: 12px;
	--mrx-mq-chip-pad-x: 24px;

	position: relative;
	padding: var(--mrx-mq-pad-y) var(--mrx-mq-pad-x);
	background-color: var(--mrx-mq-bg);
	border-radius: var(--mrx-mq-radius);
	border-top: var(--mrx-mq-rule-width) solid var(--mrx-mq-rule);
	border-bottom: var(--mrx-mq-rule-width) solid var(--mrx-mq-rule);
	font-family: var(--mrmvr-font-body);
	color: var(--mrx-mq-text);

	/*
	 * A rounded band has to clip, or the track runs out past the corner it is
	 * supposed to turn. `clip` rather than `hidden` so the band never becomes
	 * a scroll container of its own — a `hidden` ancestor is scrollable by
	 * script and by anchor focus, and a marquee jumped to the middle of its
	 * own track stays there.
	 */
	overflow: hidden;
	overflow: clip;
}

/* -------------------------------------------------------------------------
 * Viewport and track
 * ---------------------------------------------------------------------- */

.mrx-mq__viewport {
	display: flex;
	align-items: center;
	/* A taller item grows the band rather than being cut off by it. */
	min-height: var(--mrx-mq-height);
	overflow: hidden;
}

/*
 * Clipped sideways, open top and bottom. Sideways is the whole point — it is
 * what makes the track disappear at the edges. Vertically there is nothing to
 * clip, and clipping anyway would cut the keyboard focus ring and the hover
 * lift off an item as tall as the band. The band's own padding is what they
 * bleed into, and the band clips beyond that.
 *
 * Behind @supports because `overflow-x: clip` with `overflow-y: visible` is
 * the one mixed pair CSS allows; where `clip` is not understood, the pair
 * would be coerced back to a scroll container, so those browsers keep the
 * plain `hidden` above instead.
 */
@supports (overflow: clip) {
	.mrx-mq__viewport {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/*
 * Capped against the band's own width as well as set in pixels: a 90px fade
 * either side of a 360px phone is half the band, and the items would spend
 * more of the loop faded than legible.
 */
.mrx-mq-fade-yes .mrx-mq__viewport {
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 min(var(--mrx-mq-fade), 15%),
		#000 calc(100% - min(var(--mrx-mq-fade), 15%)),
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 min(var(--mrx-mq-fade), 15%),
		#000 calc(100% - min(var(--mrx-mq-fade), 15%)),
		transparent 100%
	);
}

.mrx-mq__track {
	display: flex;
	align-items: stretch;
	/*
	 * The copies sit end to end with nothing between them, because the seam
	 * between two of them is the moment the loop repeats. Anything that puts
	 * space there — a theme setting `gap` on every flex container is the usual
	 * one — makes the repeat land short by exactly that much, every time.
	 * Stated here rather than relied upon.
	 */
	gap: 0;
	/*
	 * Sized by its content, and never squeezed to fit the band it overflows.
	 * As a flex item the track would otherwise be a shrink candidate the
	 * moment its content is wider than the viewport, which for a marquee is
	 * always. Covering a band wider than one group is the copy count's job,
	 * not this element's.
	 */
	flex: 0 0 auto;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 0;
	animation: mrx-mq-run var(--mrx-mq-duration) linear infinite;
	will-change: transform;
}

.mrx-mqdir-right .mrx-mq__track {
	animation-direction: reverse;
}

/* Off screen, or pointed at with pause switched on: stop burning frames. */
.mrx-mq[data-mrx-mq-state="paused"] .mrx-mq__track,
.mrx-mq-pause-yes:hover .mrx-mq__track,
.mrx-mq-pause-yes:focus-within .mrx-mq__track {
	animation-play-state: paused;
}

@keyframes mrx-mq-run {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		/*
		 * Exactly one group along. A distance, not a fraction of the track,
		 * so the copy count can change without the loop landing on a seam.
		 */
		transform: translate3d(calc(-1 * var(--mrx-mq-shift)), 0, 0);
	}
}

/*
 * Logo Size → a share of the band height.
 *
 * The band height is already a per-device control, so deriving the logo from
 * it means one number governs both: set the band shorter on a phone and the
 * logos come down with it, in proportion, without a second set of numbers to
 * keep in step.
 *
 * Two classes deep so it beats the `.mrx-mq` default, and it is a variable
 * rather than a height on the image so a single item's own Logo Height still
 * wins — that override is set on the item, which is nearer the image than
 * this is.
 */
.mrx-mqimg-fit .mrx-mq {
	--mrx-mq-img-h: calc(var(--mrx-mq-height) * var(--mrx-mq-img-fill));
}

.mrx-mq__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	/* The spacing is the items' own trailing margin; see below. */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * Items
 *
 * The space between items is a trailing margin rather than a flex `gap`,
 * including on the last item of a group. A group's width then already
 * contains the space that follows it, so consecutive copies butt together at
 * exactly the same rhythm as the items inside one — which a `gap` on the
 * track cannot do, because the shift would have to account for it separately.
 * ---------------------------------------------------------------------- */

.mrx-mq__cell,
.mrx-mq__sep {
	flex: 0 0 auto;
	margin-inline-end: var(--mrx-mq-gap);
}

/*
 * The cell carries the spacing; the item inside it carries the surface and the
 * hover. Keeping those on separate elements is what lets an item lift on hover
 * without the lift being measured as part of the track.
 */
.mrx-mq__cell {
	display: flex;
	align-items: center;
	min-width: 0;
}

.mrx-mq__item {
	display: inline-flex;
	align-items: center;
	gap: var(--mrx-mq-item-gap);
	min-width: 0;
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		border-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		background-color var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		box-shadow var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.mrx-mq__item--mark {
	color: var(--mrx-mq-accent);
}

.mrx-mqmedia-after .mrx-mq__item {
	flex-direction: row-reverse;
}

.mrx-mqmedia-above .mrx-mq__item {
	flex-direction: column;
	gap: calc(var(--mrx-mq-item-gap) * 0.6);
	text-align: center;
}

.mrx-mq__text {
	white-space: nowrap;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1.2;
	text-transform: uppercase;
}

.mrx-mq__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.mrx-mq__img {
	display: block;
	width: var(--mrx-mq-img-w);
	height: var(--mrx-mq-img-h);
	/*
	 * Themes routinely set `img { max-width: 100% }`. Inside a track sized by
	 * its content that resolves against nothing useful and squashes a logo
	 * that was asked for a fixed height and an automatic width.
	 */
	max-width: none;
	object-fit: var(--mrx-mq-img-fit);
	border-radius: var(--mrx-mq-img-radius);
	transition:
		filter var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
		opacity var(--mrmvr-duration, 400ms) var(--mrmvr-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.mrx-mq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: var(--mrx-mq-icon-size);
	line-height: 1;
	color: var(--mrx-mq-icon);
}

.mrx-mq__icon svg,
.mrx-mq__icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Separators
 * ---------------------------------------------------------------------- */

.mrx-mq__sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--mrx-mq-sep-size);
	line-height: 1;
	color: var(--mrx-mq-sep);
	/* A separator is decoration between two items, never a word in the line. */
	-webkit-user-select: none;
	user-select: none;
}

.mrx-mq__sep--bar {
	width: 1px;
	height: var(--mrx-mq-sep-size);
	background-color: currentColor;
}

.mrx-mq__sep svg,
.mrx-mq__sep i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Item surface
 * ---------------------------------------------------------------------- */

.mrx-mqstyle-outline .mrx-mq__item,
.mrx-mqstyle-soft .mrx-mq__item,
.mrx-mqstyle-card .mrx-mq__item {
	padding: var(--mrx-mq-chip-pad-y) var(--mrx-mq-chip-pad-x);
	border-radius: var(--mrx-mq-chip-radius);
}

.mrx-mqstyle-outline .mrx-mq__item {
	border: 1px solid var(--mrx-mq-chip-border);
}

.mrx-mqstyle-soft .mrx-mq__item {
	background-color: var(--mrx-mq-chip-bg);
}

.mrx-mqstyle-card .mrx-mq__item {
	background-color: var(--mrx-mq-chip-bg);
	border: 1px solid var(--mrx-mq-chip-border);
	box-shadow: var(--mrmvr-shadow-sm, 0 2px 8px rgba(26, 33, 66, 0.06));
}

/* -------------------------------------------------------------------------
 * Image treatment
 *
 * The hover variants are held behind `hover: hover` — on a touch screen there
 * is no pointer to rest, so a logo set to take its colour on hover would
 * simply never take it, and would sit greyed out for good.
 * ---------------------------------------------------------------------- */

.mrx-mqimg-gray .mrx-mq__img {
	filter: grayscale(1);
}

.mrx-mqimg-dim .mrx-mq__img {
	opacity: 0.55;
}

@media (hover: hover) {
	.mrx-mqimg-grayhover .mrx-mq__img {
		filter: grayscale(1);
		opacity: 0.72;
	}

	.mrx-mqimg-grayhover .mrx-mq__item:hover .mrx-mq__img {
		filter: grayscale(0);
		opacity: 1;
	}

	.mrx-mqimg-dimhover .mrx-mq__img {
		opacity: 0.55;
	}

	.mrx-mqimg-dimhover .mrx-mq__item:hover .mrx-mq__img {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
 * Hover
 *
 * Scoped to linked items: an item that does nothing when it is clicked should
 * not offer to be clicked.
 * ---------------------------------------------------------------------- */

@media (hover: hover) {
	.mrx-mqhov-lift .mrx-mq__item--link:hover {
		transform: translateY(-3px);
	}

	.mrx-mqhov-accent .mrx-mq__item--link:hover {
		color: var(--mrx-mq-accent);
	}

	.mrx-mqhov-accent.mrx-mqstyle-outline .mrx-mq__item--link:hover,
	.mrx-mqhov-accent.mrx-mqstyle-card .mrx-mq__item--link:hover {
		border-color: currentColor;
	}

	.mrx-mqhov-glow .mrx-mq__item--link:hover {
		transform: translateY(-3px);
		color: var(--mrx-mq-accent);
		box-shadow: var(--mrmvr-shadow-md, 0 18px 40px -22px rgba(26, 33, 66, 0.35));
	}
}

.mrx-mq__item--link:focus-visible {
	outline: 2px solid var(--mrx-mq-accent);
	outline-offset: 4px;
	border-radius: var(--mrx-mq-chip-radius);
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These set properties rather than the custom properties the Elementor
 * controls write to, so they stay authoritative without an !important. The
 * spacing is capped rather than replaced, so a value already below the cap is
 * still the value that is used.
 * ---------------------------------------------------------------------- */

@container mrxmq (max-width: 560px) {
	.mrx-mq-wrap .mrx-mq__cell,
	.mrx-mq-wrap .mrx-mq__sep {
		margin-inline-end: min(var(--mrx-mq-gap), 30px);
	}

	.mrx-mq-wrap .mrx-mq__item {
		gap: min(var(--mrx-mq-item-gap), 10px);
	}

	.mrx-mqstyle-outline .mrx-mq__item,
	.mrx-mqstyle-soft .mrx-mq__item,
	.mrx-mqstyle-card .mrx-mq__item {
		padding: min(var(--mrx-mq-chip-pad-y), 10px) min(var(--mrx-mq-chip-pad-x), 18px);
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 *
 * Nothing moves on its own. The duplicate copies have no purpose once the
 * loop is gone, so they are dropped and the single real group is left as a
 * strip the reader scrolls themselves.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mrx-mq__track {
		animation: none;
	}

	.mrx-mq__group[aria-hidden="true"] {
		display: none;
	}

	/*
	 * Both axes named: `overflow-x: auto` on its own against the `clip` above
	 * is a combination that does not exist, and the y axis is resolved back to
	 * `auto` with it, which puts a vertical scrollbar on the band.
	 */
	.mrx-mq__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
	}

	.mrx-mq__item {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.mrx-mq__track {
		animation: none;
		transform: none;
	}

	.mrx-mq__group[aria-hidden="true"] {
		display: none;
	}

	.mrx-mq-fade-yes .mrx-mq__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}
}