/* ==========================================================================
   Nedclan Marquees — [nedclan_marquee_text] / [nedclan_marquee_colors]
   Values come from CSS custom properties written inline by PHP
   (unitless numbers → px with calc(var * 1px)).
   ========================================================================== */
@font-face { font-family: 'Nedclan MQ Playfair'; src: url('../../assets/fonts/PlayfairDisplay-Variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Nedclan MQ Inter'; src: url('../../assets/fonts/Inter-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

.nedclan-marquee {
	--pad-y: var(--nmq-pad-y-d, 30); --pad-x: var(--nmq-pad-x-d, 0); --size: var(--nmq-size-d, 22); --gap: var(--nmq-gap-d, 44);
	--sep: var(--nmq-sep-d, 30);
	--box: var(--nmq-box-d, 40); --rect-w: var(--nmq-rect-w-d, 72); --box-gap: var(--nmq-box-gap-d, 14);
	--title: var(--nmq-title-d, 10); --title-mt: var(--nmq-title-mt-d, 5);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	margin: calc(var(--nmq-mt, 0) * 1px) 0 calc(var(--nmq-mb, 0) * 1px);
	padding: calc(var(--pad-y) * 1px) calc(var(--pad-x) * 1px);
	background: var(--nmq-bg, #FDF7F4);
	border: calc(var(--nmq-bw, 0) * 1px) solid var(--nmq-bc, transparent);
	border-left-width: 0; border-right-width: 0;
	border-radius: calc(var(--nmq-radius, 0) * 1px);
	font-family: var(--nmq-font, inherit);
	font-size: calc(var(--size) * 1px);
	font-weight: var(--nmq-weight, 400);
	color: var(--nmq-color, #444);
	text-transform: var(--nmq-case, uppercase);
	letter-spacing: calc(var(--nmq-ls, 0) * 1px);
	line-height: 1.2;
}
.nedclan-marquee *, .nedclan-marquee *::before, .nedclan-marquee *::after { box-sizing: border-box; }
@media (max-width: 1024px) {
	.nedclan-marquee {
		--pad-y: var(--nmq-pad-y-t); --pad-x: var(--nmq-pad-x-t); --size: var(--nmq-size-t); --gap: var(--nmq-gap-t); --sep: var(--nmq-sep-t, 26);
		--box: var(--nmq-box-t, 36); --rect-w: var(--nmq-rect-w-t, 64); --box-gap: var(--nmq-box-gap-t, 12); --title: var(--nmq-title-t, 9); --title-mt: var(--nmq-title-mt-t, 4);
	}
}
@media (max-width: 767px) {
	.nedclan-marquee {
		--pad-y: var(--nmq-pad-y-m); --pad-x: var(--nmq-pad-x-m); --size: var(--nmq-size-m); --gap: var(--nmq-gap-m); --sep: var(--nmq-sep-m, 20);
		--box: var(--nmq-box-m, 30); --rect-w: var(--nmq-rect-w-m, 54); --box-gap: var(--nmq-box-gap-m, 10); --title: var(--nmq-title-m, 8); --title-mt: var(--nmq-title-mt-m, 3);
	}
}
/* Admin preview device switch */
.nedclan-marquee.nmq-force-desktop { --pad-y: var(--nmq-pad-y-d); --pad-x: var(--nmq-pad-x-d); --size: var(--nmq-size-d); --gap: var(--nmq-gap-d); --sep: var(--nmq-sep-d, 30); --box: var(--nmq-box-d, 40); --rect-w: var(--nmq-rect-w-d, 72); --box-gap: var(--nmq-box-gap-d, 14); --title: var(--nmq-title-d, 10); --title-mt: var(--nmq-title-mt-d, 5); }
.nedclan-marquee.nmq-force-tablet  { --pad-y: var(--nmq-pad-y-t); --pad-x: var(--nmq-pad-x-t); --size: var(--nmq-size-t); --gap: var(--nmq-gap-t); --sep: var(--nmq-sep-t, 26); --box: var(--nmq-box-t, 36); --rect-w: var(--nmq-rect-w-t, 64); --box-gap: var(--nmq-box-gap-t, 12); --title: var(--nmq-title-t, 9); --title-mt: var(--nmq-title-mt-t, 4); }
.nedclan-marquee.nmq-force-mobile  { --pad-y: var(--nmq-pad-y-m); --pad-x: var(--nmq-pad-x-m); --size: var(--nmq-size-m); --gap: var(--nmq-gap-m); --sep: var(--nmq-sep-m, 20); --box: var(--nmq-box-m, 30); --rect-w: var(--nmq-rect-w-m, 54); --box-gap: var(--nmq-box-gap-m, 10); --title: var(--nmq-title-m, 8); --title-mt: var(--nmq-title-mt-m, 3); }

/* Break out of the theme's content column to span the whole screen */
.nedclan-marquee.nmq-full { width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
/* Soft fade at the left/right edges */
.nedclan-marquee.nmq-fade .nmq-viewport {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.nedclan-marquee .nmq-viewport { overflow: hidden; width: 100%; contain: inline-size; } /* the long scrolling track must not make parents wider */
/* Invisible sizer: in a content-sized parent (Elementor flex rows, centred columns…) the strip
   still fills the available width instead of collapsing or running off the screen. */
.nedclan-marquee > .nmq-sizer { display: block; height: 0; margin: 0; padding: 0; border: 0; visibility: hidden; width: 2400px; max-width: 100%; }
.nedclan-marquee .nmq-track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; }
.nedclan-marquee .nmq-seq { display: flex; flex: none; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; }
/* Every item carries the same right-hand gap, so the seam between copies is identical to every other gap */
.nedclan-marquee .nmq-item { flex: none; margin: 0 calc(var(--gap) * 1px) 0 0; white-space: nowrap; }

/* ---------- Text marquee ---------- */
.nedclan-marquee .nmq-sep { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.nedclan-marquee .nmq-sep-heart .nmq-heart { width: calc(var(--sep) * 1px); height: calc(var(--sep) * 1px); fill: var(--nmq-sep-color, #E53935); display: block; }
.nedclan-marquee .nmq-sep-symbol { font-size: calc(var(--sep) * 1px); color: var(--nmq-sep-color, #E53935); }
.nedclan-marquee .nmq-sep-image img { display: block; width: auto; height: calc(var(--sep) * 1px); max-width: none; }

/* ---------- Colour marquee ---------- */
.nedclan-marquee .nmq-swatches { display: inline-flex; align-items: flex-start; gap: calc(var(--box-gap) * 1px); }
.nedclan-marquee .nmq-swatch-wrap { display: inline-flex; flex-direction: column; align-items: center; }
.nedclan-marquee .nmq-swatch {
	display: block;
	width: calc(var(--box) * 1px);
	height: calc(var(--box) * 1px);
	border-radius: calc(var(--nmq-box-radius, 8) * 1px);
	border: calc(var(--nmq-box-bw, 0) * 1px) solid var(--nmq-box-bc, #fff);
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.nedclan-marquee.nmq-shape-circle .nmq-swatch { border-radius: 50%; }
.nedclan-marquee.nmq-shape-rectangle .nmq-swatch { width: calc(var(--rect-w) * 1px); }
.nedclan-marquee.nmq-box-shadow .nmq-swatch { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.nedclan-marquee .nmq-swatch-title {
	display: block;
	margin-top: calc(var(--title-mt) * 1px);
	font-family: var(--nmq-title-font, inherit);
	font-size: calc(var(--title) * 1px);
	font-weight: var(--nmq-title-weight, 400);
	color: var(--nmq-title-color, #333);
	text-transform: var(--nmq-title-case, none);
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
}

/* Guests who prefer reduced motion: no auto-scroll; the row can be swiped instead */
@media (prefers-reduced-motion: reduce) {
	.nedclan-marquee .nmq-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.nedclan-marquee .nmq-viewport::-webkit-scrollbar { display: none; }
}
