/*
 * The order's three steps, under the page title (inc/steps.php).
 *
 * A line of three numbered labels joined by a stitched seam, not a progress
 * bar: the shop's lines are seams everywhere else. Done steps in ink, the
 * current one in thread red, the ones to come in grey — the number carries
 * the state too, as a filled disc for done and current, an outline for later,
 * so colour is never the only signal.
 *
 * The nav is rendered after Blocksy's hero, inside the article, so it takes
 * the block's wide width the way the title does on these pages (checkout.css)
 * — one left edge for the title, the steps and the content.
 *
 * `haft-etap`, not `haft-krok`: the home page's "Jak pracujemy" columns are
 * `.haft-kroki` already (home.css), and a second meaning for that name broke
 * them.
 */

/* The order-received title is a normal-width block; the steps match it. */
.haft-etapy {
	width: var( --theme-block-width, var( --theme-container-width ) );
	max-width: var( --theme-block-max-width, var( --theme-block-wide-max-width ) );
	margin: 0 auto 40px;
}

/* On the cart and checkout the title is capped with the block (checkout.css); the steps follow. */
article:has( > .entry-content > :is( .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout ).alignwide ) > .haft-etapy {
	max-width: min( var( --theme-block-wide-max-width ), var( --haft-zamowienie-max ) );
}

/* Blocksy pads the hero below the title; the steps are what follows it now. */
.hero-section + .haft-etapy {
	margin-top: -8px;
}

.haft-etapy ol {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.haft-etap {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var( --haft-font-display );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	color: #8a919e;
	white-space: nowrap;
}

/* The seam between two steps grows to take whatever room is left. */
.haft-etap:not( :last-child ) {
	flex: 1 1 auto;
}

.haft-etap:not( :last-child )::after {
	content: "";
	flex: 1 1 32px;
	min-width: 24px;
	margin: 0 20px;
	border-top: 1px dashed var( --haft-szew );
}

.haft-etap a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.haft-etap a:hover .haft-etap__nazwa {
	color: var( --haft-mulina );
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 3px;
}

.haft-etap__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-family: var( --haft-font-kod );
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
}

.haft-etap--done {
	color: var( --haft-atrament );
}

.haft-etap--done .haft-etap__nr {
	background: var( --haft-atrament );
	border-color: var( --haft-atrament );
	color: var( --haft-kreda );
}

.haft-etap--current {
	color: var( --haft-mulina );
}

.haft-etap--current .haft-etap__nr {
	background: var( --haft-mulina );
	border-color: var( --haft-mulina );
	color: var( --haft-kreda );
}

/* Under 600px only the current step keeps its name; the others are their numbers. */
@media ( max-width: 599px ) {
	.haft-etapy {
		margin-bottom: 28px;
	}

	.haft-etap {
		font-size: 1rem;
	}

	.haft-etap__nr {
		width: 30px;
		height: 30px;
		font-size: 0.82rem;
	}

	.haft-etap:not( .haft-etap--current ) .haft-etap__nazwa {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}

	.haft-etap:not( :last-child )::after {
		margin: 0 10px;
	}
}