/*
 * Formulaire — Souffle du Népal
 * ---------------------------------------------------------------------------
 * Habillage de Fluent Forms par les jetons du thème.
 *
 * POURQUOI ICI ET PAS DANS L'EXTENSION : les réglages visuels de Fluent Forms
 * écrivent des couleurs en dur dans la base. Le jour où un jeton de theme.json
 * change, le formulaire ne suivrait pas. Tout passe donc par cette feuille,
 * qui ne contient que des --wp--preset--* et des --wp--custom--*.
 *
 * SPÉCIFICITÉ : Fluent Forms pose ses propres règles sur `.ff-el-form-control`
 * et consorts. Chaque sélecteur ci-dessous est donc préfixé par `.fluentform`
 * pour passer devant, sans jamais recourir à !important.
 *
 * Deux valeurs ne tombent pas sur un jeton existant ; elles sont DÉRIVÉES :
 *   - hauteur de frappe des champs → padding 16px (spacing--20) vertical
 *   - taille des libellés, 16 px    → jeton `custom.form.labelSize`, ajouté car
 *     l'échelle typographique saute de 15 px (caption) à 17 px (body)
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. Les variables de Fluent Forms, branchées sur les jetons du thème

   Fluent Forms déclare six propriétés personnalisées sur :root et s'en sert
   dans TOUTES ses règles. Les redéfinir sur le conteneur du formulaire est
   plus solide que de courir après chaque sélecteur : les règles de
   l'extension que ce fichier n'a pas prévues suivent le thème d'elles-mêmes.

   C'est notamment ce qui ramène le rayon de 7px (valeur par défaut de
   l'extension) aux 2px du brief, et le rouge #F56C6C — 3.0:1 sur papier,
   sous le seuil AA — sur `brass-deep`, à 5.39:1.

   Portée volontairement limitée à `.fluentform` : rien ne fuit dans le reste
   de la page.
   =========================================================================== */

.fluentform {
	--fluentform-primary: var(--wp--preset--color--ink);
	--fluentform-secondary: var(--wp--preset--color--brass-deep);
	--fluentform-danger: var(--wp--preset--color--brass-deep);
	--fluentform-border-color: var(--wp--preset--color--line);
	--fluentform-border-radius: var(--wp--custom--radius--sm);
}

/* ===========================================================================
   2. Rythme vertical — 24 px entre deux champs
   =========================================================================== */

.fluentform .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--30);
}

.fluentform .ff-el-group:last-of-type {
	margin-bottom: 0;
}

/* ===========================================================================
   3. Libellés — Karla 16px ink
   =========================================================================== */

.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label,
.fluentform legend {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--custom--form--label-size);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--10);
}

/*
 * Astérisque du champ obligatoire.
 *
 * Fluent Forms le peint avec `--fluentform-danger` (#F56C6C), soit 3.0:1 sur
 * papier : sous le seuil AA de 4.5:1 pour du petit texte, et hors palette.
 * Il repasse donc en `ink` (13.75:1).
 *
 * La liste de classes est calquée SUR CELLE DE L'EXTENSION, à la classe près.
 * Sa règle pèse quatre classes ; une version plus courte est écrasée en
 * silence et l'astérisque reste rouge.
 */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
	color: var(--wp--preset--color--ink);
}

/* Texte d'aide sous le libellé. */
.fluentform .ff-el-help-message {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
	margin-top: var(--wp--preset--spacing--10);
}

/* ===========================================================================
   4. Champs — fond paper, bordure 1px line, rayon 2px
   =========================================================================== */

.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform textarea.ff-el-form-control {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--snug);
	/*
	 * width:100% + box-sizing : sans cela, le padding s'ajoute à la largeur et
	 * les champs débordent la colonne à 320 px.
	 */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color 150ms ease;
}

.fluentform textarea.ff-el-form-control {
	min-height: calc(var(--wp--preset--spacing--50) * 2);
	resize: vertical;
}

.fluentform .ff-el-form-control:hover {
	border-color: var(--wp--preset--color--brass);
}

/*
 * Focus : contour 2px brass-deep sur papier (5.39:1, WCAG 1.4.11 exige 3:1).
 * La bordure passe elle aussi en brass-deep — `line` sur `paper` ne fait que
 * 1.23:1 et ne peut donc pas, à elle seule, signaler l'état actif.
 */
.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
	border-color: var(--wp--preset--color--brass-deep);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--ink);
	opacity: 0.55;
}

/* ===========================================================================
   5. Cases à cocher et boutons radio
   =========================================================================== */

.fluentform .ff-el-form-check {
	margin-bottom: var(--wp--preset--spacing--10);
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check label {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
	/* Le libellé se replie sous lui-même au lieu de pousser la case. */
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
}

/*
 * La case elle-même est agrandie à 1.25em. La liste de classes reprend celle
 * de l'extension : une version plus courte est écrasée et la case retombe à
 * ses ~16px d'origine. La cible cliquable, elle, reste le libellé entier.
 */
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"],
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	accent-color: var(--wp--preset--color--ink);
}

.fluentform input[type="checkbox"]:focus-visible,
.fluentform input[type="radio"]:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Bloc de consentement : le lien doit rester repérable dans une phrase. */
.fluentform .ff_t_c a,
.fluentform .ff-el-form-check-label a {
	color: var(--wp--preset--color--brass-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fluentform .ff_t_c {
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink);
}

/* ===========================================================================
   6. Messages d'erreur — sous le champ concerné, jamais en tête de page
   =========================================================================== */

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .error {
	display: block;
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--snug);
	/*
	 * `brass-deep` sur `paper` = 5.39:1. C'est la seule couleur d'accent du
	 * thème qui passe AA en petit texte — un rouge serait hors palette.
	 * La couleur ne porte pas l'information seule : le message est explicite
	 * et le champ prend une bordure marquée (WCAG 1.4.1).
	 */
	color: var(--wp--preset--color--brass-deep);
	margin-top: var(--wp--preset--spacing--10);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--brass-deep);
	border-width: var(--wp--custom--focus--width);
}

/* ===========================================================================
   7. Bouton d'envoi — strictement le bouton primaire du thème
   =========================================================================== */

.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit,
.fluentform button.ff-btn-submit {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--20) * 2);
	font-family: var(--wp--preset--font-family--karla);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
	text-decoration: none;
	/* Libellé français long : le bouton grandit vers le bas, jamais tronqué. */
	width: auto;
	max-width: 100%;
	height: auto;
	white-space: normal;
	text-wrap: balance;
	transition: background-color 150ms ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:active {
	background-color: var(--wp--preset--color--brass-deep);
	color: var(--wp--preset--color--white);
}

/*
 * Même règle que le bouton primaire du thème : au clavier le fond RESTE ink,
 * sinon l'anneau brass-deep sur un fond brass-deep donnerait 1.00:1.
 */
.fluentform .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brass-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ===========================================================================
   8. Colonnes internes de Fluent Forms
   L'extension met ses rangées en flex ; à 320 px elles doivent s'empiler.
   =========================================================================== */

.fluentform .ff-t-container {
	flex-wrap: wrap;
	gap: 0;
}

.fluentform .ff-t-cell {
	min-width: 0;
}

/* ===========================================================================
   9. Préférences système
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-el-form-control,
	.fluentform .ff-btn-submit {
		transition: none;
	}
}

@media (forced-colors: active) {
	.fluentform .ff-btn-submit {
		border: var(--wp--custom--rule--width) solid ButtonBorder;
	}

	.fluentform .ff-el-form-control {
		border: var(--wp--custom--rule--width) solid ButtonBorder;
	}
}