/* =====================================================================
   List — Circle Numbers (is-style-circle-numbers)
   Ordered lists only; nested lists keep default numbering.
   ===================================================================== */

/* ---------- Circle colors per parent background ---------- */

/* Light (White, Card gray / Style 7, Ice / Style 8, Pale gray / Style 9) → deep teal circle, white number */
.has-base-background-color ol.wp-block-list.is-style-circle-numbers,
.has-accent-6-background-color ol.wp-block-list.is-style-circle-numbers,
.has-custom-fond-section-background-color ol.wp-block-list.is-style-circle-numbers,
.has-custom-fond-alternatif-background-color ol.wp-block-list.is-style-circle-numbers,
.is-style-section-7 ol.wp-block-list.is-style-circle-numbers,
.is-style-section-8 ol.wp-block-list.is-style-circle-numbers,
.is-style-section-9 ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--preset--color--accent-1, #265452);
	--dm-circle-color: var(--wp--preset--color--base, #FFFFFF);
}

/* Deep teal (Style 1) → emerald circle, deep teal number (matches the "Good to know" card) */
.has-accent-1-background-color ol.wp-block-list.is-style-circle-numbers,
.is-style-section-1 ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--preset--color--accent-3, #06d6a0);
	--dm-circle-color: var(--wp--preset--color--accent-1, #265452);
}

/* Abyssal marine (Style 2) → emerald circle, navy number */
.has-accent-2-background-color ol.wp-block-list.is-style-circle-numbers,
.is-style-section-2 ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--preset--color--accent-3, #06d6a0);
	--dm-circle-color: var(--wp--preset--color--accent-2, #163846);
}

/* Emerald (Style 3) / Turquoise (Style 4) → navy circle, white number */
.has-accent-3-background-color ol.wp-block-list.is-style-circle-numbers,
.has-accent-4-background-color ol.wp-block-list.is-style-circle-numbers,
.is-style-section-3 ol.wp-block-list.is-style-circle-numbers,
.is-style-section-4 ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--preset--color--accent-2, #163846);
	--dm-circle-color: var(--wp--preset--color--base, #FFFFFF);
}

/* Raspberry (Style 5) → white circle, raspberry number */
.has-accent-5-background-color ol.wp-block-list.is-style-circle-numbers,
.is-style-section-5 ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--preset--color--base, #FFFFFF);
	--dm-circle-color: var(--wp--preset--color--accent-5, #ef476f);
}

/* Anthracite (Style 6) → emerald circle, anthracite number */
.has-contrast-background-color ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--preset--color--accent-3, #06d6a0);
	--dm-circle-color: var(--wp--preset--color--contrast, #3c3c3c);
}

.is-style-section-6 ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-bg: var(--wp--custom--gray--500, #8a8a8a);
	--dm-circle-color: var(--wp--preset--color--base, #FFFFFF);
}


ol.wp-block-list.is-style-circle-numbers {
	--dm-circle-size: 1.75em;
	--dm-circle-bg: var(--wp--preset--color--accent-1, #1e3a8a);
	--dm-circle-color: #fff;

	list-style: none;
	counter-reset: dm-circle;
	padding-left: 0;
}

ol.is-style-circle-numbers > li {
	counter-increment: dm-circle;
	position: relative;
	padding-left: calc(var(--dm-circle-size) + 0.75em);
	min-height: var(--dm-circle-size);
	margin-bottom: 0.75em;
	line-height: var(--dm-circle-size);
}

ol.is-style-circle-numbers > li::before {
	content: counter(dm-circle);
	display: inline-flex;
    justify-content: center;
    align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--dm-circle-size);
	height: var(--dm-circle-size);
	border-radius: 50%;
	background: var(--dm-circle-bg);
	color: var(--dm-circle-color);
	font-weight: 600;
	line-height: var(--dm-circle-size);
	text-align: center;
}

ol.is-style-circle-numbers > li > ol {
	margin-top: 0.5em;
	line-height: normal;
}