/* Steps Progress
---------------------------------------- */

.nou-steps-progress-section {
	position: relative;
}

.nou-steps-progress {
	--nou-progress-active: #305cff;
	--nou-progress-fill: 0%;
	--nou-progress-line: #dfe6f6;
	--nou-progress-muted: #aeb6c9;
	--nou-progress-text: #0f1648;
	--nou-progress-copy: #3f4b7a;
	--nou-progress-gap: 40px;
	padding-bottom: var(--nou-progress-gap);
	position: relative;
}

.nou-steps-progress-section > .nou-steps-progress {
	position: relative;
}

/* Progress bar: track + fill */
.nou-steps-progress::before,
.nou-steps-progress::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	border-radius: 999px;
}

.nou-steps-progress::before {
	right: 0;
	background: var(--nou-progress-line);
}

.nou-steps-progress::after {
	background: var(--nou-progress-active);
	width: var(--nou-progress-fill);
}

/* Step item */
.nou-steps-progress .nou-step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
}

/* Vertical divider */
.nou-steps-progress .wp-block-column:not(:first-child) .nou-step::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: calc(var(--nou-progress-gap) * -1);
	left: -28px;
	width: 1px;
	background: var(--nou-progress-line);
}

/* Dot */
.nou-steps-progress .nou-step::after {
	content: "";
	position: absolute;
	bottom: calc((var(--nou-progress-gap) * -1) - 5px);
	left: -28px;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--nou-progress-line);
	z-index: 2;
}

.nou-steps-progress .wp-block-column:first-child .nou-step::after {
	left: 0;
}

/* Default: all text muted */
.nou-steps-progress .nou-step-number,
.nou-steps-progress .nou-step-title {
	color: var(--nou-progress-muted);
	transition: color 0.2s;
}

.nou-steps-progress .nou-step-copy {
	color: var(--nou-progress-muted);
	transition: color 0.2s;
}

/* Step 1 active: only first column highlighted */
.nou-steps-progress.is-step-1 .wp-block-column:first-child .nou-step-number,
.nou-steps-progress.is-step-1 .wp-block-column:first-child .nou-step-title {
	color: var(--nou-progress-text);
}

.nou-steps-progress.is-step-1 .wp-block-column:first-child .nou-step-copy {
	color: var(--nou-progress-copy);
}

.nou-steps-progress.is-step-1 .wp-block-column:first-child .nou-step::after {
	background: var(--nou-progress-active);
}

/* Step 2 active: first + second column highlighted */
.nou-steps-progress.is-step-2 .wp-block-column:nth-child(-n+2) .nou-step-number,
.nou-steps-progress.is-step-2 .wp-block-column:nth-child(-n+2) .nou-step-title {
	color: var(--nou-progress-text);
}

.nou-steps-progress.is-step-2 .wp-block-column:nth-child(-n+2) .nou-step-copy {
	color: var(--nou-progress-copy);
}

.nou-steps-progress.is-step-2 .wp-block-column:nth-child(-n+2) .nou-step::after {
	background: var(--nou-progress-active);
}

/* Step 3 active: all columns highlighted */
.nou-steps-progress.is-step-3 .nou-step-number,
.nou-steps-progress.is-step-3 .nou-step-title {
	color: var(--nou-progress-text);
}

.nou-steps-progress.is-step-3 .nou-step-copy {
	color: var(--nou-progress-copy);
}

.nou-steps-progress.is-step-3 .nou-step::after {
	background: var(--nou-progress-active);
}

/* Mobile */
@media (max-width: 781px) {
	.nou-steps-progress-section {
		min-height: auto;
	}

	.nou-steps-progress-section > .nou-steps-progress {
		position: relative;
		top: auto;
	}

	.nou-steps-progress {
		--nou-progress-gap: 0;
		padding: 0;
	}

	.nou-steps-progress::before,
	.nou-steps-progress::after,
	.nou-steps-progress .nou-step::before,
	.nou-steps-progress .nou-step::after {
		display: none;
	}

	.nou-steps-progress .wp-block-columns {
		gap: 56px;
	}

	.nou-steps-progress .nou-step {
		gap: 0;
		min-height: auto;
		padding-bottom: 0;
	}

	.nou-steps-progress .nou-step > * + * {
		margin-block-start: 28px;
	}

	.nou-steps-progress .nou-step > .wp-block-group > * + * {
		margin-block-start: 18px;
	}

	.nou-steps-progress .nou-step-number,
	.nou-steps-progress .nou-step-title {
		color: var(--nou-progress-text);
	}

	.nou-steps-progress .nou-step-copy {
		color: var(--nou-progress-copy);
	}
}