/**
 * Process Steps - Common base CSS ( loads for every style ).
 *
 * Owns the shared skeleton: the ordered list reset, step item layout, the
 * round marker ( number / icon ) and the text body. Per-style files arrange
 * the flow ( horizontal, timeline, cards, zigzag, arrows ) and paint the
 * connectors. CSS variables drive theme and sizing:
 *   --captwiki-ps-accent        → marker / highlight colour
 *   --captwiki-ps-line          → connector line colour
 *   --captwiki-ps-gap           → gap between steps
 *   --captwiki-ps-marker        → marker diameter
 *   --captwiki-ps-marker-color  → marker text / icon colour
 *   --captwiki-ps-marker-bg     → marker background colour
 *   --captwiki-ps-card-bg       → card background ( card styles )
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-steps {
	--captwiki-ps-accent: #6d5efc;
	--captwiki-ps-line: #e2e5f0;
	--captwiki-ps-gap: 32px;
	--captwiki-ps-marker: 52px;
	--captwiki-ps-marker-color: #ffffff;
	--captwiki-ps-marker-bg: var( --captwiki-ps-accent );
	--captwiki-ps-card-bg: #ffffff;
	display: flex;
	flex-direction: column;
	gap: var( --captwiki-ps-gap );
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: captwiki-step;
	box-sizing: border-box;
}

.captwiki-steps *,
.captwiki-steps *::before,
.captwiki-steps *::after {
	box-sizing: border-box;
}

/* ── Item ──────────────────────────────────────────────── */
.captwiki-steps__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

/* ── Marker ────────────────────────────────────────────── */
.captwiki-steps__marker {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var( --captwiki-ps-marker );
	height: var( --captwiki-ps-marker );
	background: var( --captwiki-ps-marker-bg );
	border-radius: 50%;
	color: var( --captwiki-ps-marker-color );
	font-size: calc( var( --captwiki-ps-marker ) * 0.38 );
	font-weight: 700;
	line-height: 1;
}

.captwiki-steps__marker-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: inherit;
	line-height: 1;
}

.captwiki-steps__marker-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-steps__marker-icon i {
	font-style: normal;
}

/* ── Body ──────────────────────────────────────────────── */
.captwiki-steps__body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.captwiki-steps__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: #1f2937;
}

.captwiki-steps__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #6b7280;
}

/* Ghost number is a per-style decoration - hidden by default. */
.captwiki-steps__ghost-number {
	display: none;
}