/**
 * JMeks Step Scroller.
 *
 * A native horizontal scroll area (the viewport) around one long row of steps
 * (the track). Nothing snaps and nothing moves on its own; trackpads and touch
 * screens scroll it with their own momentum, and jmeks-step-scroller.js adds
 * mouse drag and the wheel. The scrollbar is hidden: the row running off the
 * edge is the cue.
 *
 * Knobs (the panel controls set them per widget):
 *   --jmeks-ssc-width / -spacing     step width (300px, 270px on phones) and spacing
 *   --jmeks-ssc-content              boxed content width the row starts on (1560px)
 *   --jmeks-ssc-reach                boxed: how far past the content edge (the gutter)
 *   --jmeks-ssc-fade                 edge fade ramp (72px); on phones only the
 *                                    right edge fades, over the peek
 *   --jmeks-ssc-label-color, -bullet-size / -gap, -label-gap
 *   --jmeks-ssc-rule-color / -width / -gap
 *   --jmeks-ssc-title-color / -title-gap
 *   --jmeks-ssc-text-color / -text-max
 */

.elementor-widget-jmeks_step_scroller {
	width: 100%;
}

.jmeks-ssc {
	position: relative;
	width: 100%;
}

.jmeks-ssc__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

/* Only when there is somewhere to go (set by the script as the size changes). */
.jmeks-ssc.is-scrollable .jmeks-ssc__viewport {
	cursor: grab;
}

/*
 * Edge fades, as Advisory Network: a short ramp to nothing at each edge that
 * has more behind it. Only a row that overflows is masked, and a side at its
 * end loses its fade.
 */
.jmeks-ssc--fade.is-scrollable .jmeks-ssc__viewport {
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --jmeks-ssc-fade-lead, var( --jmeks-ssc-fade, 72px ) ), #000 calc( 100% - var( --jmeks-ssc-fade-trail, var( --jmeks-ssc-fade, 72px ) ) ), transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 var( --jmeks-ssc-fade-lead, var( --jmeks-ssc-fade, 72px ) ), #000 calc( 100% - var( --jmeks-ssc-fade-trail, var( --jmeks-ssc-fade, 72px ) ) ), transparent 100% );
}

.jmeks-ssc--fade.is-scrollable.is-at-start .jmeks-ssc__viewport {
	-webkit-mask-image: linear-gradient( to right, #000 0, #000 calc( 100% - var( --jmeks-ssc-fade-trail, var( --jmeks-ssc-fade, 72px ) ) ), transparent 100% );
	mask-image: linear-gradient( to right, #000 0, #000 calc( 100% - var( --jmeks-ssc-fade-trail, var( --jmeks-ssc-fade, 72px ) ) ), transparent 100% );
}

.jmeks-ssc--fade.is-scrollable.is-at-end .jmeks-ssc__viewport {
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --jmeks-ssc-fade-lead, var( --jmeks-ssc-fade, 72px ) ), #000 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 var( --jmeks-ssc-fade-lead, var( --jmeks-ssc-fade, 72px ) ), #000 100% );
}

.jmeks-ssc__viewport::-webkit-scrollbar {
	display: none;
}

.jmeks-ssc__viewport:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Pressed: the closed hand. Pulling: no text selection either. */
.jmeks-ssc.is-scrollable.is-grabbing .jmeks-ssc__viewport {
	cursor: grabbing;
}

.jmeks-ssc.is-dragging .jmeks-ssc__viewport {
	cursor: grabbing;
	user-select: none;
}

.jmeks-ssc__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
}

/*
 * Boxed section: bleed past the content edge into the page margin, as Advisory
 * Network does. The negative margin widens the scroll area on the right; the
 * matching padding at the end of the row means that scrolled all the way, the
 * last step still stops on the content edge. Step 1 stays on the content line.
 */
.jmeks-ssc--boxed .jmeks-ssc__viewport {
	margin-inline-end: calc( -1 * var( --jmeks-ssc-reach, var( --jmeks-gutter, 80px ) ) );
}

.jmeks-ssc--boxed .jmeks-ssc__track {
	padding-inline-end: var( --jmeks-ssc-reach, var( --jmeks-gutter, 80px ) );
}

/*
 * Full-width section: start and end on the content line: the first step
 * sits where the boxed content starts, and scrolled to the end the last one
 * stops where it ends. The percentage resolves against the viewport, the
 * track's containing block, so it is the screen's width, not the long row's.
 */
.jmeks-ssc--align .jmeks-ssc__track {
	padding-inline: max( var( --jmeks-gutter, 80px ), calc( ( 100% - var( --jmeks-ssc-content, 1560px ) ) / 2 ) );
}

/* Where Step 1 starts inside the scroll area, for the phone fade below. */
.jmeks-ssc--align {
	--jmeks-ssc-start: var( --jmeks-gutter, 20px );
}

.jmeks-ssc__step {
	box-sizing: border-box;
	flex: 0 0 var( --jmeks-ssc-width, 300px );
	width: var( --jmeks-ssc-width, 300px );
	margin-inline-end: var( --jmeks-ssc-spacing, 24px );
}

.jmeks-ssc__step:last-child {
	margin-inline-end: 0;
}

/* Label, with its square, over a line. */
.jmeks-ssc .jmeks-ssc__label {
	display: flex;
	align-items: center;
	gap: var( --jmeks-ssc-bullet-gap, 10px );
	margin: 0 0 var( --jmeks-ssc-rule-gap, 20px );
	color: var( --jmeks-ssc-label-color, var( --e-global-color-primary, #05001c ) );
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.jmeks-ssc--bullets .jmeks-ssc__label::before {
	content: "";
	flex: none;
	width: var( --jmeks-ssc-bullet-size, 8px );
	height: var( --jmeks-ssc-bullet-size, 8px );
	background: currentColor;
}

.jmeks-ssc--rule .jmeks-ssc__label {
	padding-bottom: var( --jmeks-ssc-label-gap, 8px );
	border-bottom:
		var( --jmeks-ssc-rule-width, 1px )
		solid
		var( --jmeks-ssc-rule-color, color-mix( in srgb, var( --jmeks-ssc-title-color, var( --e-global-color-primary, #05001c ) ) 25%, transparent ) );
}

/* Two classes, so the kit's `.elementor-kit-N h3` does not restyle it. */
.jmeks-ssc .jmeks-ssc__title {
	margin: 0 0 var( --jmeks-ssc-title-gap, 12px );
	color: var( --jmeks-ssc-title-color, var( --e-global-color-primary, #05001c ) );
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.jmeks-ssc__text {
	max-width: var( --jmeks-ssc-text-max, 580px );
	color: var( --jmeks-ssc-text-color, var( --e-global-color-primary, #05001c ) );
}

.jmeks-ssc__text > :first-child {
	margin-top: 0;
}

.jmeks-ssc__text > :last-child {
	margin-bottom: 0;
}

/* Phone sizes, matching the controls' mobile defaults. */
@media ( max-width: 767px ) {
	/*
	 * As Advisory Network on a phone: no leading fade, since a ramp there dims
	 * the start of a step that is entirely on screen; and the trailing ramp
	 * starts where Step 1 ends, so it ghosts only the peeking next step and
	 * never the words being read.
	 */
	.jmeks-ssc {
		--jmeks-ssc-fade-lead: 0px;
		--jmeks-ssc-fade-trail: calc( 100% - var( --jmeks-ssc-start, 0px ) - var( --jmeks-ssc-width, 270px ) );
	}

	.jmeks-ssc__step {
		flex-basis: var( --jmeks-ssc-width, 270px );
		width: var( --jmeks-ssc-width, 270px );
		margin-inline-end: var( --jmeks-ssc-spacing, 16px );
	}

	.jmeks-ssc .jmeks-ssc__title {
		font-size: 20px;
	}
}