/**
 * Steps widget (WPFlexStudio suite).
 *
 * All Style-tab controls write CSS custom properties on the
 * .wpflexstudio-steps wrapper (see widgets/wpflexstudio-steps-widget.php);
 * this file only reads them, with a fallback matching the client's
 * original reference values (11px dot, 1px line, 34px step gap, 22px
 * dot-to-text gap, 5px dot top offset) so the widget renders correctly
 * even if a control somehow fails to enqueue its inline style.
 *
 * Connecting-line formula (::before): the reference CSS hardcoded
 * left:5px / top:6px / bottom:6px for a fixed 11px dot + 1px line. Those
 * are not arbitrary — they're a function of dot size and line width:
 *   - left  = (dot-size - line-width) / 2   → centers the line under the
 *             dot horizontally.               (11-1)/2 = 5  ✓
 *   - top/bottom = dot-size / 2 + 0.5px     → insets the line to the
 *             dot's own vertical half, rounded to the nearest pixel so
 *             odd dot sizes don't produce a sub-pixel wobble.
 *                                              11/2 + 0.5 = 6  ✓
 * Both reproduce the reference values exactly at the reference defaults,
 * and stay correct at any dot size / line width the Style tab is set to
 * — that's the point of driving them off calc() instead of literals.
 */

.wpflexstudio-steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wpflexstudio-steps-gap, 34px);
	max-width: 560px;
	margin: 0 auto;
}

.wpflexstudio-steps::before {
	content: '';
	position: absolute;
	left: calc(
		(var(--wpflexstudio-steps-dot-size, 11px) - var(--wpflexstudio-steps-line-width, 1px)) / 2
	);
	top: calc(var(--wpflexstudio-steps-dot-size, 11px) / 2 + 0.5px);
	bottom: calc(var(--wpflexstudio-steps-dot-size, 11px) / 2 + 0.5px);
	width: var(--wpflexstudio-steps-line-width, 1px);
	background: var(--wpflexstudio-steps-line-color, var(--beige, #e1dbd0));
}

.wpflexstudio-steps__item {
	position: relative;
	display: flex;
	gap: var(--wpflexstudio-steps-content-gap, 22px);
	align-items: flex-start;
}

.wpflexstudio-steps__dot {
	flex-shrink: 0;
	width: var(--wpflexstudio-steps-dot-size, 11px);
	height: var(--wpflexstudio-steps-dot-size, 11px);
	margin-top: var(--wpflexstudio-steps-dot-margin-top, 5px);
	border-radius: 50%;
	background: var(--wpflexstudio-steps-dot-color, var(--noir, #111110));
	position: relative;
	z-index: 1;
}

.wpflexstudio-steps__content {
	min-width: 0;
}

.wpflexstudio-steps__title {
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	letter-spacing: 0.04em;
	font-weight: 500;
	margin-bottom: 6px;
}

.wpflexstudio-steps__text {
	font-size: 14px;
	line-height: 1.6;
	font-weight: 300;
	opacity: 0.72;
}

.wpflexstudio-steps__editor-notice {
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: 0.6;
	font-size: 13px;
}