/**
 * JMeks Step List.
 *
 * Each step is a two-column grid: a narrow rail (the square bullet on the label
 * row, the thin line beside the title and text) and the content (label, title,
 * text). The line spans the title and panel rows, so it grows with the text and
 * shrinks to the title when a step is collapsed.
 *
 * Desktop (a mouse, wider than 1024px): every step open, nothing to click.
 * Touch screens (iPad at any width), tablets and phones: a tap accordion with
 * a +/-, driven by the shared jmeks-toggle-list.js; .is-open opens a step. The panel animates its grid row
 * from 0fr to 1fr, like the other JMeks accordions.
 *
 * Knobs (the panel controls set them per widget):
 *   --jmeks-steps-gap            space between steps (48px, 28px on phones)
 *   --jmeks-steps-duration       open / close time (300ms)
 *   --jmeks-steps-label-color / -label-gap
 *   --jmeks-steps-bullet-size    the square (8px); also the rail's width
 *   --jmeks-steps-indent         rail to words (10px)
 *   --jmeks-steps-line-color / -line-width
 *   --jmeks-steps-title-color / -title-gap
 *   --jmeks-steps-text-color / -text-max
 *   --jmeks-steps-text-bottom    below the text, so the line runs on (40px, 24px)
 *   --jmeks-steps-icon-size / -thickness / -color
 */

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

.jmeks-steps {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	row-gap: var( --jmeks-steps-gap, 48px );
}

.jmeks-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: var( --jmeks-steps-bullet-size, 8px ) minmax( 0, 1fr );
	grid-template-rows: auto auto auto;
	column-gap: var( --jmeks-steps-indent, 10px );
}

/* Neither bullet nor line: no rail, no indent. */
.jmeks-steps:not( .jmeks-steps--bullets ):not( .jmeks-steps--line ) .jmeks-steps__item {
	grid-template-columns: 0 minmax( 0, 1fr );
	column-gap: 0;
}

.jmeks-steps__bullet,
.jmeks-steps__line {
	display: none;
}

.jmeks-steps--bullets .jmeks-steps__bullet {
	display: block;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	width: var( --jmeks-steps-bullet-size, 8px );
	height: var( --jmeks-steps-bullet-size, 8px );
	margin-bottom: var( --jmeks-steps-label-gap, 12px );
	background: var( --jmeks-steps-label-color, var( --e-global-color-primary, #05001c ) );
}

.jmeks-steps .jmeks-steps__label {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 var( --jmeks-steps-label-gap, 12px );
	color: var( --jmeks-steps-label-color, var( --e-global-color-primary, #05001c ) );
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.jmeks-steps--line .jmeks-steps__line {
	display: block;
	grid-column: 1;
	grid-row: 2 / 4;
	justify-self: center;
	width: var( --jmeks-steps-line-width, 1px );
	background: var( --jmeks-steps-line-color, color-mix( in srgb, var( --jmeks-steps-title-color, var( --e-global-color-primary, #05001c ) ) 25%, transparent ) );
}

.jmeks-steps .jmeks-steps__heading {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/*
 * A real button, for the keyboard and screen readers. Hello Elementor styles
 * every button pink with padding and a border, so all of that is taken back;
 * two classes, and :hover / :focus too, outrank Hello's `button:hover`.
 */
.jmeks-steps .jmeks-steps__trigger,
.jmeks-steps .jmeks-steps__trigger:hover,
.jmeks-steps .jmeks-steps__trigger:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --jmeks-steps-title-color, var( --e-global-color-primary, #05001c ) );
	text-align: start;
	white-space: normal;
	cursor: pointer;
}

.jmeks-steps .jmeks-steps__trigger {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
}

/* On tablets and phones the whole step is the target, label included. */
.jmeks-steps__trigger::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

/* +/-: two bars; the upright one folds flat when the step opens. */
.jmeks-steps__icon {
	position: relative;
	flex: none;
	width: var( --jmeks-steps-icon-size, 14px );
	height: var( --jmeks-steps-icon-size, 14px );
	color: var( --jmeks-steps-icon-color, currentColor );
}

.jmeks-steps__icon::before,
.jmeks-steps__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var( --jmeks-steps-icon-thickness, 1px );
	background: currentColor;
	transform: translateY( -50% );
}

.jmeks-steps__icon::after {
	transform: translateY( -50% ) rotate( 90deg );
	transition: transform var( --jmeks-steps-duration, 300ms ) ease;
}

.jmeks-steps__item.is-open .jmeks-steps__icon::after {
	transform: translateY( -50% ) rotate( 90deg ) scaleX( 0 );
}

/* The panel: closed is a zero-height row, open is the text's own height. */
.jmeks-steps__panel {
	grid-column: 2;
	grid-row: 3;
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var( --jmeks-steps-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s linear var( --jmeks-steps-duration, 300ms );
}

.jmeks-steps__item.is-open .jmeks-steps__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var( --jmeks-steps-duration, 300ms ) cubic-bezier( 0.4, 0, 0.2, 1 ),
		visibility 0s;
}

.jmeks-steps__clip {
	min-height: 0;
	overflow: hidden;
}

.jmeks-steps__text {
	max-width: var( --jmeks-steps-text-max, 580px );
	padding-top: var( --jmeks-steps-title-gap, 12px );
	padding-bottom: var( --jmeks-steps-text-bottom, 40px );
	color: var( --jmeks-steps-text-color, var( --e-global-color-primary, #05001c ) );
}

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

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

/* Desktop: every step open, nothing to tap. Touch screens stay tappable. */
@media ( hover: hover ) and ( min-width: 1025px ) {
	.jmeks-steps__item .jmeks-steps__panel {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: none;
	}

	.jmeks-steps__icon,
	.jmeks-steps__trigger::after {
		display: none;
	}

	.jmeks-steps .jmeks-steps__trigger,
	.jmeks-steps .jmeks-steps__trigger:hover {
		cursor: default;
	}
}

/* Phone sizes, matching the controls' mobile defaults. */
@media ( max-width: 767px ) {
	.jmeks-steps {
		row-gap: var( --jmeks-steps-gap, 28px );
	}

	.jmeks-steps .jmeks-steps__trigger {
		font-size: 22px;
	}

	.jmeks-steps__text {
		padding-bottom: var( --jmeks-steps-text-bottom, 24px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.jmeks-steps__panel,
	.jmeks-steps__item.is-open .jmeks-steps__panel,
	.jmeks-steps__icon::after {
		transition: none;
	}
}