/* Three section stylesheets (patient-support.css, solutions-patient-support.css,
 * solutions-direct-to-patient.css) still hand-draw this same style scoped under
 * `.infinitus-section--<slug>` at higher specificity. Every declaration here is
 * written to LOSE to them — keep selectors at bare-class specificity so those
 * published pages do not repaint. The mask below must stay byte-identical to the
 * check-in-circle in those three files. */

.is-style-check-list {
	--check-list-icon-size: 20px;
	--check-list-gutter: var(--wp--preset--spacing--sp-5);

	/* The article overrides this to its own 30px body rhythm; see article.css. */
	--check-list-row-gap: var(--wp--preset--spacing--sp-4);

	/* Flex column rather than `li + li { margin-block-start }` on purpose: the
	   three sections that already draw this style declare `gap` on the list, and
	   a margin would ADD to their gap rather than be overridden by it — 32px
	   rows on the homepage would silently become 48. Same layout model, so
	   their `gap` simply wins. */
	display: flex;
	flex-direction: column;
	row-gap: var(--check-list-row-gap);

	list-style: none;

	margin-inline: 0;
	padding-inline-start: 0;
}

.is-style-check-list > li {
	font-size: var(--fs-body);
	line-height: var(--lh-body);

	padding-inline-start: calc(var(--check-list-icon-size) + var(--check-list-gutter));
	position: relative;
}

.is-style-check-list > li::before {
	/* Decorative pseudo-element, never in the accessibility tree. The list keeps
	   its own semantics: functions/block-styles.php adds role="list" to survive
	   the `list-style: none` above in Safari/VoiceOver. */
	background-color: currentColor;
	content: "";
	height: var(--check-list-icon-size);
	width: var(--check-list-icon-size);

	/* Centred on the FIRST line box, not on the item, so a wrapping two-line row
	   keeps its check beside line one. */
	inset-block-start: calc((var(--lh-body) - var(--check-list-icon-size)) / 2);
	inset-inline-start: 0;
	position: absolute;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M6.5 11 9.5 14 15.5 8M21 11c0 5.523-4.477 10-10 10S1 16.523 1 11 5.477 1 11 1s10 4.477 10 10Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M6.5 11 9.5 14 15.5 8M21 11c0 5.523-4.477 10-10 10S1 16.523 1 11 5.477 1 11 1s10 4.477 10 10Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Restores the marker and indent that Tailwind's preflight zeroes globally.
   The `:not()` matters: a check list inside a check list is reachable from the
   Styles panel, and without the guard the inner one would draw a disc marker
   AND a check, because `list-style-type` on a descendant selector (0,1,1)
   beats the `list-style: none` above (0,1,0). */
.is-style-check-list ul:not(.is-style-check-list),
.is-style-check-list ol:not(.is-style-check-list) {
	margin-block-start: var(--check-list-row-gap);
	padding-inline-start: var(--wp--preset--spacing--sp-5);
}

.is-style-check-list ul:not(.is-style-check-list) {
	list-style-type: disc;
}

.is-style-check-list ol:not(.is-style-check-list) {
	list-style-type: decimal;
}