/* WP Andolsheim — module Heading. Titre HN avec bandeau coloré et icône Dashicons.
   Les couleurs sont injectées en inline par PHP depuis les réglages globaux
   (variables --wpa-heading-accent et --wpa-heading-accent-fg).
   Valeurs de repli ici si jamais l'inline-style n'est pas chargé.

   Note : les styles du picker d'icônes (panneau Inspector) sont désormais dans
   assets/css/icon-picker.css (handle partagé wpa-icon-picker). */

.wpa-heading {
	--wpa-heading-accent: #799e1d;
	--wpa-heading-accent-shadow: rgba(0, 0, 0, 0.18);
	--wpa-heading-accent-fg: #ffffff;

	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 0.6em;
	padding: 0.85em 1.1em;
	background: var(--wpa-heading-accent);
	color: var(--wpa-heading-accent-fg) !important;

	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wpa-heading__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	line-height: 1;
	color: inherit;
}

/* Dashicons sizing override : par défaut elles font 20px fixes, on les passe en em
   pour qu'elles suivent la taille du titre. */
.wpa-heading__icon.dashicons {
	width: 1em;
	height: 1em;
	font-size: 1.4em;
}

/* Font Awesome (rendu via <i class="wpa-heading__icon fa-...">) : la taille est déjà
   en em par défaut, on s'assure juste que la couleur suit le texte. */
i.wpa-heading__icon {
	color: inherit;
}

.wpa-heading__text {
	flex: 1 1 auto;
	color: inherit;
}

/* Aperçu dans l'éditeur Gutenberg — le RichText doit rester éditable et lisible. */
.editor-styles-wrapper .wpa-heading {
	cursor: text;
}

.editor-styles-wrapper .wpa-heading__text {
	outline: none;
	min-width: 1em;
}