/**
 * core/list — styles Kraalio.
 *
 * Les puces sont des SVG encodés en data-URI : aucune requête réseau,
 * aucune police d'icônes.
 */

/* --- Liste cochée --------------------------------------------------------- */

.wp-block-list.is-style-kraalio-checked,
.wp-block-list.is-style-kraalio-checked-light,
.wp-block-list.is-style-kraalio-excluded {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wp-block-list.is-style-kraalio-checked > li,
.wp-block-list.is-style-kraalio-checked-light > li,
.wp-block-list.is-style-kraalio-excluded > li {
	position: relative;
	padding-inline-start: 1.7rem;
	line-height: 1.55;
}

.wp-block-list.is-style-kraalio-checked > li::before,
.wp-block-list.is-style-kraalio-checked-light > li::before,
.wp-block-list.is-style-kraalio-excluded > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	inline-size: 1rem;
	block-size: 1rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

/* Coche verte — fond clair. Le %232F5D3A (preset `primary`) est encodé dans le
   data-URI : `var()` n'y est pas interprété, à ré-encoder si la palette bouge. */
.wp-block-list.is-style-kraalio-checked > li::before {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232F5D3A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
}

/* Coche menthe — fond sombre. Même contrainte : le %238FD59B (preset `mint`)
   est figé dans le data-URI, à ré-encoder à la main si la palette change. */
.wp-block-list.is-style-kraalio-checked-light > li::before {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238FD59B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>');
}

/* Croix grise — élément non inclus dans la formule. */
.wp-block-list.is-style-kraalio-excluded > li {
	color: var(--wp--preset--color--contrast-3);
}

/* Le %239A9E93 est encodé dans le data-URI : à ré-encoder à la main s'il doit
   suivre une évolution de la palette. */
.wp-block-list.is-style-kraalio-excluded > li::before {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%239A9E93" stroke-width="3" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>');
}

/* --- Liste en ligne (mentions sous un héros) ------------------------------ */

.wp-block-list.is-style-kraalio-inline {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-list.is-style-kraalio-inline > li {
	margin: 0;
}

/* Variante empilée (colonnes de liens du pied de page). */
.wp-block-list.is-style-kraalio-inline.kraalio-stack {
	flex-direction: column;
	gap: 0.65rem;
	font-size: inherit;
}

.wp-block-list.kraalio-stack a {
	text-decoration: none;
}

.wp-block-list.kraalio-stack a:hover {
	text-decoration: underline;
}

/* --- Étapes numérotées (documentation) ------------------------------------ */

/**
 * Une liste ordonnée devient une suite de cartes numérotées. Le numéro vient
 * d'un compteur CSS : rien à saisir, la renumérotation est automatique quand
 * on insère ou déplace une étape.
 *
 * Mettez le titre de l'étape en gras au début de l'élément :
 *   <strong>Ouvrir le module Lieux</strong> Depuis le menu Élevage.
 */
.wp-block-list.is-style-kraalio-steps {
	list-style: none;
	counter-reset: kraalio-step;
	padding-inline-start: 0;
	margin-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wp-block-list.is-style-kraalio-steps > li {
	counter-increment: kraalio-step;
	position: relative;
	display: block;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 14px 16px 14px 53px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

.wp-block-list.is-style-kraalio-steps > li::before {
	content: counter(kraalio-step);
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: 14px;
	inline-size: 24px;
	block-size: 24px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 24px;
	text-align: center;
}

/* Le titre de l'étape, en gras, passe sur sa propre ligne. */
.wp-block-list.is-style-kraalio-steps > li > strong:first-child,
.wp-block-list.is-style-kraalio-steps > li > b:first-child {
	display: block;
	margin-block-end: 3px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}