/*
 * am-checklist — a "what you get" list: concrete items marked with a check.
 * Matches the workshop promise ("en konkret lista på saker du kan lösa här och nu").
 * Pure-CSS check in the accent colour — no icon font, no inline SVG per item.
 *
 * Use on a <ul class="am-checklist"> (each <li> is an item). In Elementor: an
 * HTML widget, or the Icon List widget with am-checklist on its <ul>.
 */

.am-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.am-checklist > li,
.am-checklist__item {
	position: relative;
	padding-inline-start: var(--am-space-600);
	margin-block-end: var(--am-space-300);
}

.am-checklist > li + li {
	margin-block-start: 0; /* reset base.css list rhythm */
}

/* CSS checkmark. */
.am-checklist > li::before,
.am-checklist__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	width: 0.5em;
	height: 0.85em;
	border: solid var(--am-color-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}