/**
 * How-to guides: numbered steps.
 *
 * A green numbered circle per step, joined by a line, then the step: title (an
 * article heading, styled by headings.css), text, sub-bullets, screenshot.
 *
 * Design: docs/18-howto.md
 */

.arm-howto {
	--arm-howto-green: var(--arm-hd-green, #148c38);
	--arm-howto-line: color-mix(in srgb, var(--arm-howto-green) 25%, transparent);
	--arm-howto-size: 2.6rem;
	margin: 1.5rem 0 2rem;
}

.arm-howto__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.arm-howto__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--arm-howto-size) minmax(0, 1fr);
	gap: 0 1rem;
	margin: 0;
	padding: 0 0 1.75rem;
}

/* The line from one circle to the next. */
.arm-howto__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: var(--arm-howto-size);
	bottom: 0;
	left: calc(var(--arm-howto-size) / 2 - 1px);
	width: 2px;
	background: var(--arm-howto-line);
}

.arm-howto__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arm-howto-size);
	height: var(--arm-howto-size);
	border-radius: 50%;
	background: var(--arm-howto-green);
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
}

.arm-howto__body {
	min-width: 0;
}

/*
 * Step titles keep the article heading look but sit level with their circle.
 * Four classes, to outrank headings.css's margins.
 */
.wp-block-post-content .arm-howto :is(h2, h3, h4).arm-howto__title.wp-block-heading,
.arm-howto p.arm-howto__title {
	margin-top: 0.3rem;
	margin-bottom: 0.75rem;
}

.arm-howto p.arm-howto__title {
	font-weight: 700;
	font-size: 1.15rem;
}

.arm-howto__text > :first-child {
	margin-top: 0;
}

.arm-howto__text > :last-child {
	margin-bottom: 0;
}

.arm-howto__text p {
	margin: 0 0 0.75rem;
}

/* Explicit disc: inside the steps' list, browsers would draw nested-list circles. */
.arm-howto__bullets {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.arm-howto__bullets li {
	margin: 0.2rem 0;
}

.arm-howto__bullets li::marker {
	color: var(--arm-howto-green);
}

.arm-howto__image {
	margin: 1rem 0 0;
}

.arm-howto__image img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--subtle, #e5e7eb);
	border-radius: 8px;
}

@media (max-width: 600px) {
	.arm-howto {
		--arm-howto-size: 2.1rem;
	}

	.arm-howto__step {
		gap: 0 0.75rem;
	}

	.arm-howto__number {
		font-size: 1rem;
	}
}