/* WP Andolsheim — module Button. Bouton stylisé avec variants + largeur + icône.
   Les couleurs sont injectées en inline par PHP depuis les réglages globaux
   (variables --wpa-button-accent et --wpa-button-accent-fg, qui reprennent en
   réalité heading_accent / heading_accent_fg côté PHP).
   Valeurs de repli ici si jamais l'inline-style n'est pas chargé. */

.wpa-button {
	--wpa-button-accent: #799e1d;
	--wpa-button-accent-fg: #ffffff;

	/* Bloc-niveau + largeur du contenu seulement → chaque bouton prend sa propre
	   ligne (Gutenberg le place correctement dans la colonne) sans étirer la div
	   sur toute la largeur. Pour mettre 2 boutons côte à côte : Group horizontal. */
	display: flex;
	width: fit-content;

	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.4em;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	border-radius: 0;
	border: 2px solid var(--wpa-button-accent);
	transition: all 0.15s ease;
	cursor: pointer;
	margin: 20px 0;
}

/* ---- Variants ---- */

.wpa-button--primary {
	background: var(--wpa-button-accent);
	color: var(--wpa-button-accent-fg) !important;
}

.wpa-button--primary:hover,
.wpa-button--primary:focus {
	background: var(--wpa-button-accent-fg);
	color: var(--wpa-button-accent) !important;
}

.wpa-button--secondary {
	background: transparent;
	color: var(--wpa-button-accent) !important;
}

.wpa-button--secondary:hover,
.wpa-button--secondary:focus {
	background: var(--wpa-button-accent);
	color: var(--wpa-button-accent-fg) !important;
}

.wpa-button--link {
	background: transparent;
	border-color: transparent;
	color: var(--wpa-button-accent) !important;
	padding: 0.2em 0;
	text-decoration: underline;
	text-transform: none;
	font-weight: 600;
	letter-spacing: 0;
}

.wpa-button--link:hover,
.wpa-button--link:focus {
	background: transparent;
	color: var(--wpa-button-accent) !important;
	text-decoration: none;
}

/* ---- Largeurs ---- */

/* Auto = comportement par défaut (.wpa-button utilise déjà width: fit-content). */
.wpa-button--auto {
	width: fit-content;
}

/* Wide = au moins 240px (fit-content peut s'étendre via min-width). */
.wpa-button--wide {
	min-width: 240px;
}

/* Full = pleine largeur du conteneur. */
.wpa-button--full {
	width: 100%;
}

/* ---- Position icône (flex-direction) ---- */

.wpa-button--icon-right {
	flex-direction: row-reverse;
}

/* ---- Icône (Dashicon OU Font Awesome) ---- */

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

/* Dashicons : par défaut 20px fixes, on les passe en em pour adaptation. */
.wpa-button__icon.dashicons {
	width: 1em;
	height: 1em;
	font-size: 1.2em;
}

/* Font Awesome : taille déjà en em, on s'assure de la couleur. */
i.wpa-button__icon {
	color: inherit;
}

/* Texte */
.wpa-button__text {
	color: inherit;
}

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

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