/*
 * ---------------------------------------------------------------------------
 * Pictogrammes du menu : favoris et compte
 * ---------------------------------------------------------------------------
 *
 * Ces deux entrées sont des entrées de menu WordPress ordinaires : elles se
 * retrouvent donc dans le menu du thème, dans le widget de navigation
 * d'Elementor ou dans le bloc Navigation, sans qu'aucun de ces trois n'ait été
 * modifié. Le plugin ne peut pas savoir comment ils habillent un lien : les
 * règles ci-dessous ne touchent qu'au contenu de l'entrée — le pictogramme et
 * la pastille — et laissent au thème l'espacement et la couleur du lien.
 */
.kazanimal-menu-icon > a {
	align-items: center;
	display: inline-flex;
	gap: 0.35rem;
	position: relative;
}

.kazanimal-menu-icon__glyph {
	align-items: center;
	display: inline-flex;
	line-height: 1;
	/* La pastille s'y accroche : c'est le pictogramme qu'elle doit toucher. */
	position: relative;
}

.kazanimal-menu-icon--favorites .kazanimal-menu-icon__glyph {
	color: var(--kazanimal-primary, #f97902);
}

.kazanimal-menu-icon--account .kazanimal-menu-icon__glyph {
	color: var(--kazanimal-accent, #0f6b7b);
}

/*
 * La pastille se pose sur l'angle du cœur. Elle n'est écrite que s'il y a des
 * favoris : un zéro permanent n'apprendrait rien et attirerait l'œil pour rien.
 */
.kazanimal-menu-icon__badge {
	align-items: center;
	background: var(--kazanimal-primary, #f97902);
	border-radius: 999px;
	color: var(--kazanimal-primary-contrast, #ffffff);
	display: inline-flex;
	font-size: 0.7rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	/* Deux chiffres tiennent dans le cercle ; au-delà la pastille s'allonge. */
	min-width: 1.15rem;
	padding: 0.15rem 0.3rem;
	position: absolute;
	right: -0.9rem;
	top: -0.8rem;
}

/*
 * Le libellé reste dans le balisage pour les lecteurs d'écran. La règle est
 * celle de WordPress, redonnée ici : le plugin ne peut pas compter sur la
 * présence de la feuille du cœur sur toutes les pages d'un thème.
 */
.kazanimal-menu-icon .screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}