/* NMH - Immersive Hero
 *
 * A full-screen horizontal slider. The stage carries the interpolating gradient;
 * each slide stacks its layers (background word, product image, floating
 * ingredients, copy) absolutely so the runtime can slide and rotate them past
 * one another. The gradient is an animated registered custom property, declared
 * once below, so it interpolates through a normal CSS transition rather than a
 * JavaScript colour tween.
 *
 * Colour of the word, title, description and arrows is never painted here: those
 * are Elementor controls carrying their own defaults, so they stay clearable.
 */

@property --ndw-hero-in {
	syntax: '<color>';
	inherits: true;
	initial-value: #8b0024;
}

@property --ndw-hero-out {
	syntax: '<color>';
	inherits: true;
	initial-value: #c90035;
}

.ndw-immersive-hero {
	position: relative;
	width: 100%;
	max-width: 100%;
	/* Slides are absolute: reserve intrinsic width on their in-flow parent.
	   The frame remains the query container for the existing cqw artwork. */
	contain: inline-size;
	contain-intrinsic-inline-size: 1140px;
	color: #fff;
}

.ndw-immersive-hero *,
.ndw-immersive-hero *::before,
.ndw-immersive-hero *::after {
	box-sizing: border-box;
}

.ndw-immersive-hero__stage {
	position: relative;
	display: block;
	width: 100%;
	min-height: var(--ndw-hero-min-height, 100dvh);
	overflow: hidden;
	/* Vertical swipes scroll the page and pinch still zooms; horizontal swipes
	   are left to the slider (see onTouchEnd). */
	touch-action: pan-y pinch-zoom;
	/* First paint and the no-JavaScript fallback read the two custom properties
	   the widget prints inline. Once mounted, the runtime paints `background-image`
	   directly and interpolates it frame by frame, because a CSS transition on a
	   registered custom property sticks at its start value in Chromium when an
	   ancestor also declares the property. */
	background: linear-gradient(270deg, var(--ndw-hero-in) 0%, var(--ndw-hero-out) 100%);
}

/* `100dvh` is not universal; give engines without it a static fallback. */
@supports not (height: 100dvh) {
	.ndw-immersive-hero__stage {
		min-height: var(--ndw-hero-min-height, 100vh);
	}
}

.ndw-immersive-hero__frame {
	position: absolute;
	inset: 0;
	container-type: inline-size;
}

.ndw-immersive-hero__slide {
	position: absolute;
	inset: 0;
}

/* Without the runtime, only the active slide is shown, so the no-JavaScript
   document is a single readable hero rather than every slide stacked. */
.ndw-immersive-hero:not(.is-enhanced) .ndw-immersive-hero__slide:not(.is-active) {
	display: none;
}

/* ---- Background word ------------------------------------------------- */

.ndw-immersive-hero__word {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: var(--ndw-hero-word-size, 18cqw);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	transform-origin: center center;
	will-change: transform, opacity;
	z-index: 1;
}

/* ---- Product image --------------------------------------------------- */

.ndw-immersive-hero__bowl {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center center;
	will-change: transform;
	z-index: 3;
}

/* Repeated class (0,2,0) so the sizing survives Elementor's `.elementor img`
   (0,1,1), which would otherwise impose its own `max-width: 100%`.
   The author's Size is authoritative. A fixed `max-width: 90%` used to cap it
   silently (about 275px on a phone, up to 1.0.3), so the cap is now an optional
   responsive control that is unset by default; the stage clips any overflow. */
.ndw-immersive-hero__bowl-img.ndw-immersive-hero__bowl-img {
	position: absolute;
	inset-inline-start: var(--ndw-hero-bowl-x, 50%);
	inset-block-start: var(--ndw-hero-bowl-y, 50%);
	width: var(--ndw-hero-bowl-size, 55cqw);
	max-width: var(--ndw-hero-bowl-max, none);
	height: auto;
	transform: translate(-50%, -50%);
}

.ndw-immersive-hero--shadow-yes .ndw-immersive-hero__bowl-img {
	filter: drop-shadow(0 3.2cqw 3.6cqw rgb(0 0 0 / 45%));
}

/* ---- Floating ingredients ------------------------------------------- */

.ndw-immersive-hero__ings {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
}

.ndw-immersive-hero__ing {
	position: absolute;
	display: block;
	/* Each slot's own size wins; the default size is the fallback. */
	width: var(--ndw-hero-ing-size, 14cqw);
	transform-origin: center center;
	will-change: transform, opacity;
}

/* Two class tokens so this beats Elementor's `.elementor img` (0,1,1) instead of
   tying with it. The weight is added by repeating the ingredient's own class, not
   by chaining a container, per AGENTS.md. */
.ndw-immersive-hero__ing.ndw-immersive-hero__ing img {
	display: block;
	width: 100%;
	height: auto;
}

/* A designed scatter around the product, cycled by index so a gallery of any
   length lands in sensible places. Slots 1-4 read the responsive placement
   controls (%, px or vh), with the built-in scatter as the fallback; slots 5-6
   are fixed extras for galleries with more than four images. */
.ndw-immersive-hero__ing--1 { left: var(--ndw-hero-ing1-x, 12%); top: var(--ndw-hero-ing1-y, 16%); width: var(--ndw-hero-ing1-size, var(--ndw-hero-ing-size, 14cqw)); }
.ndw-immersive-hero__ing--2 { left: var(--ndw-hero-ing2-x, 74%); top: var(--ndw-hero-ing2-y, 24%); width: var(--ndw-hero-ing2-size, var(--ndw-hero-ing-size, 14cqw)); }
.ndw-immersive-hero__ing--3 { left: var(--ndw-hero-ing3-x, 18%); top: var(--ndw-hero-ing3-y, 60%); width: var(--ndw-hero-ing3-size, var(--ndw-hero-ing-size, 14cqw)); }
.ndw-immersive-hero__ing--4 { left: var(--ndw-hero-ing4-x, 72%); top: var(--ndw-hero-ing4-y, 68%); width: var(--ndw-hero-ing4-size, var(--ndw-hero-ing-size, 14cqw)); }
.ndw-immersive-hero__ing--5 { left: var(--ndw-hero-ing5-x, 6%); top: var(--ndw-hero-ing5-y, 46%); width: var(--ndw-hero-ing5-size, var(--ndw-hero-ing-size, 14cqw)); }
.ndw-immersive-hero__ing--6 { top: 40%; right: 6%; }

/* ---- Copy ------------------------------------------------------------ */

/* The copy sits in a full-width band pinned to both sides, so the Text position
   control can push it left, centre or right per breakpoint purely by toggling the
   two inline margins (see the widget's `copy_position` dictionary). */
.ndw-immersive-hero__copy {
	position: absolute;
	inset-inline: clamp(20px, 4cqw, 64px);
	inset-block-end: clamp(28px, 8cqw, 96px);
	max-width: min(90%, 420px);
	margin-inline-end: auto;
	transform-origin: left bottom;
	z-index: 5;
}

.ndw-immersive-hero__title {
	margin: 0 0 10px;
	font-size: clamp(24px, 3cqw, 40px);
	font-weight: 700;
	line-height: 1.1;
	will-change: transform, opacity;
}

.ndw-immersive-hero__desc {
	margin: 0;
	font-size: clamp(15px, 1.4cqw, 18px);
	font-weight: 300;
	line-height: 1.65;
	will-change: transform, opacity;
}

/* ---- Call to action -------------------------------------------------- */

/* Two classes so a real anchor/button beats the kit's `.elementor-kit-N a`.
   Colour, background and border are Elementor controls with defaults, painted
   nowhere here so they stay clearable. The button lives inside the copy band, so
   it rides the copy's enter/leave animation with no work of its own. */
.ndw-immersive-hero .ndw-immersive-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--ndw-hero-cta-gap, 8px);
	max-width: 100%;
	box-shadow: none;
	line-height: 1.15;
	text-decoration: none;
	cursor: pointer;
	transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.ndw-immersive-hero .ndw-immersive-hero__cta:hover {
	transform: translateY(-1px);
}

.ndw-immersive-hero .ndw-immersive-hero__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Icon sits after the label by default; the "before" modifier swaps the order.
   A shared gap owns the spacing so the label never crowds the glyph. */
.ndw-immersive-hero--cta-icon-before .ndw-immersive-hero__cta-icon {
	order: -1;
}

.ndw-immersive-hero__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 0;
}

.ndw-immersive-hero__cta-icon i,
.ndw-immersive-hero__cta-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	fill: currentColor;
}

/* ---- Navigation arrows ---------------------------------------------- */

/* Placement comes from the "Horizontal/Vertical position" and distance controls,
   which write the insets below per device. These are the same values the
   controls default to. In the "On both sides" layout the group spans the hero,
   so it lets clicks through between the two buttons. */
.ndw-immersive-hero__nav-group {
	position: absolute;
	inset-block-end: var(--ndw-hero-arrows-y, clamp(20px, 4cqw, 40px));
	inset-inline-end: var(--ndw-hero-arrows-x, clamp(20px, 4cqw, 40px));
	display: flex;
	gap: var(--ndw-hero-arrow-gap, 12px);
	z-index: 20;
	pointer-events: none;
}

.ndw-immersive-hero__nav-group > * {
	pointer-events: auto;
}

/* Two classes: real buttons must beat Elementor's `.elementor-kit-N button`.
   Colour and background are Elementor controls with defaults, painted nowhere
   here so they stay clearable. Everything the kit would otherwise impose —
   shadow, letter spacing, text transform — is pinned explicitly. */
.ndw-immersive-hero .ndw-immersive-hero__nav {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: var(--ndw-hero-arrow-size, 48px);
	height: var(--ndw-hero-arrow-size, 48px);
	padding: 0;
	border: 0;
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	line-height: 0;
	cursor: pointer;
	transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, opacity 220ms ease, transform 220ms ease;
	backdrop-filter: blur(4px);
}

/* A fixed square icon box removes font side-bearing drift. Elementor may render
   an i element or an SVG, and both use the same 1em geometry. */
.ndw-immersive-hero .ndw-immersive-hero__nav-icon {
	display: inline-grid;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	place-items: center;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	font-size: var(--ndw-hero-arrow-icon-size, 16px);
	line-height: 0;
	transform: translate(calc(-50% + var(--ndw-hero-arrow-icon-offset-x, 0px)), calc(-50% + var(--ndw-hero-arrow-icon-offset-y, 0px)));
}

.ndw-immersive-hero .ndw-immersive-hero__nav-icon > i,
.ndw-immersive-hero .ndw-immersive-hero__nav-icon > svg {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 0;
}

.ndw-immersive-hero .ndw-immersive-hero__nav-icon > i::before {
	display: block;
	line-height: 1em;
}
/* Elementor icon libraries may paint a colour directly on the generated i or
   SVG. Keep the published button colour controls authoritative for both icon
   formats while preserving outline SVGs that explicitly disable fill. */
.ndw-immersive-hero .ndw-immersive-hero__nav-icon,
.ndw-immersive-hero .ndw-immersive-hero__nav-icon > i,
.ndw-immersive-hero .ndw-immersive-hero__nav-icon > svg {
	color: inherit !important;
}

.ndw-immersive-hero .ndw-immersive-hero__nav-icon > svg:not([fill="none"]) path:not([fill="none"]),
.ndw-immersive-hero .ndw-immersive-hero__nav-icon > svg [fill]:not([fill="none"]) {
	fill: currentColor !important;
}

.ndw-immersive-hero .ndw-immersive-hero__nav-icon > svg [stroke]:not([stroke="none"]) {
	stroke: currentColor !important;
}

.ndw-immersive-hero .ndw-immersive-hero__nav.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.ndw-immersive-hero .ndw-immersive-hero__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- Live region and editor ----------------------------------------- */

.ndw-immersive-hero__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ndw-immersive-hero__empty {
	padding: 40px;
	border: 1px dashed rgb(20 28 38 / 25%);
	border-radius: 8px;
	color: #6b7280;
	text-align: center;
}

/* In the editor the slider runs one slide at a time with working arrows, exactly
   like the front end, so each card is navigable and shown assembled. The stage
   keeps the SAME height as the front end — no editor-only cap. Ingredient
   placement is measured against the stage box, so a shorter editor stage moved
   every position (px, vh, and %) to a different spot than the published page.
   Matching the height makes the editor a faithful preview: what you place is what
   renders. The wheel is never captured and the page is never locked (both handled
   in the runtime). */
.ndw-immersive-hero[data-editor] .ndw-immersive-hero__stage {
	min-height: var(--ndw-hero-min-height, 100dvh);
}

@media (prefers-reduced-motion: reduce) {
	.ndw-immersive-hero__stage {
		transition-duration: 0.01ms;
	}

	.ndw-immersive-hero__word,
	.ndw-immersive-hero__bowl,
	.ndw-immersive-hero__ing,
	.ndw-immersive-hero__title,
	.ndw-immersive-hero__desc {
		will-change: auto;
	}
}