/**
 * Veste dei moduli — Fluent Forms portato al disegno del riferimento.
 *
 * Nel riferimento i campi sono un componente condiviso: `.candidatura-form`,
 * `.form-row`, `.form-field`, `.form-label`, `.form-input` valgono uguali sulla
 * pagina Contatti, su Lavora con noi e sul Franchising. Qui vale lo stesso, ed
 * è la ragione della classe neutra: chi incorpora un modulo aggiunge
 * `form-skin` al contenitore e lo eredita tutto.
 *
 * Le regole restano dentro a quella classe e non sciolte sul plugin: Fluent
 * Forms deve poter comparire altrove — in un widget, in una pagina di
 * servizio — con il suo aspetto di serie.
 *
 * Comprende anche il riquadro di caricamento dei file, in fondo: è un tipo di
 * campo, quindi è veste come gli altri, e il giorno che un secondo modulo
 * chiederà un allegato lo trova già fatto.
 */

/* L'altezza dei menu a tendina il plugin la prende da questa sua variabile, e
   la regola che la usa — `select.ff-el-form-control:not([size]):not([multiple])`
   — pesa più di qualunque selettore a due classi. Riempirla è il modo che il
   plugin stesso prevede, invece di rincorrerlo con `!important`. */
.form-skin .frm-fluent-form {
	--fluentform-input-select-height: 52px;
}

/* Il passo fra un campo e l'altro va sul `fieldset` e non sul `form`: Fluent
   Forms raccoglie tutti i campi lì dentro, quindi il form ha un figlio solo e
   una spaziatura messa su di lui non separerebbe niente. */
.form-skin .frm-fluent-form > fieldset {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-skin .ff-el-group {
	margin-bottom: 0;
}

/* --- Le righe a due campi ----------------------------------------------- */

/* Le colonne del plugin usano un `flex-basis` in linea al 50%: qui diventano
   una griglia, per avere il gutter del riferimento senza dover battere quegli
   stili in linea. */
.form-skin .ff-t-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 20px, 3vw, 40px );
}

.form-skin .ff-t-cell {
	flex-basis: auto !important;
	padding: 0;
}

/* --- Etichette ---------------------------------------------------------- */

/* Il contenitore dell'etichetta il plugin lo tiene `inline-block`, e un
   elemento in linea porta con sé la riga che lo contiene: sotto restavano tre
   pixel di interlinea che alzavano ogni campo. A blocco la riga non c'è.
   Il plugin lascia anche 5px di margine: si azzerano e lo stacco lo dà
   l'etichetta stessa, così è uno solo e si legge dove è scritto. */
.form-skin .ff-el-input--label {
	display: block;
	margin-bottom: 0;
}

.form-skin .ff-el-input--label label {
	display: block;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

/* L'asterisco dei campi obbligatori, rosso come nel riferimento. */
.form-skin .ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--rosso);
}

/* --- Campi -------------------------------------------------------------- */

.form-skin .ff-el-form-control {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-skin .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--muted);
}

.form-skin .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--rosso);
	box-shadow: 0 0 0 3px
		color-mix( in srgb, var(--wp--preset--color--rosso) 15%, transparent );
}

.form-skin textarea.ff-el-form-control {
	height: auto;
	min-height: 200px;
	padding: 12px 16px;
	line-height: 1.7;
	resize: vertical;
}

/* Via la freccia di sistema: non si può portare al colore e alla misura del
   resto. Quella del riferimento la disegna la regola qui sotto. */
.form-skin select.ff-el-form-control {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	cursor: pointer;
}

/* La freccia è uno pseudo-elemento del contenitore e non lo sfondo del
   `select`, e non è un vezzo: `chevron-down.svg` è bianco — serve così
   nell'header, che ce l'ha su fondo scuro — quindi come immagine di sfondo qui
   spariva sul bianco del campo. Da maschera il disegno del file conta e il suo
   colore no: si tinge di `currentColor` e segue il testo ovunque lo si metta.
 *
 * Il contenitore avvolge ogni tipo di campo, quindi si sceglie quello che
 * contiene davvero un `select`. `pointer-events: none` perché il clic sulla
 * freccia deve aprire il menu, non fermarsi su di lei. */
.form-skin .ff-el-input--content:has( > select ) {
	position: relative;
}

.form-skin .ff-el-input--content:has( > select )::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 14px;
	height: 8px;
	transform: translateY( -50% );
	pointer-events: none;
	background-color: currentColor;
	-webkit-mask-image: var(--cn-media-chevron-down);
	mask-image: var(--cn-media-chevron-down);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.form-skin .ff-el-help-message {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* --- Il bottone di invio ------------------------------------------------ */

.form-skin .ff-el-group.ff-text-left {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

/* È la pastiglia principale del sito, e i valori sono quelli che theme.json
   dichiara in `styles.elements.button`: fondo rosso, pastiglia, 14/28 di
   padding, peso 600 e spaziatura 0.01em. Si riscrivono qui perché il bottone di
   Fluent Forms è un `<button>` del plugin e non porta `wp-element-button`,
   quindi quella regola non lo raggiunge.
   Il maiuscoletto spaziato che c'era prima è il trattamento di `story-split`,
   che è suo e di nessun altro: le pastiglie del resto del sito — la striscia
   contatti, il piè di pagina, gli inviti di sezione — sono tutte in tondo.

   Fondo e testo li decide in realtà il plugin, non questa regola: le impostazioni
   del bottone finiscono in uno `<style>` in linea accanto al modulo
   (`form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style)`), che pesa più di
   due classi e arriva dopo. Restano dichiarate qui — con gli stessi valori — per
   i moduli che quelle impostazioni non le hanno; cambiare la tinta di un modulo
   si fa dalla sua scheda in bacheca, non da qui.

   Le due misure che facevano la differenza a occhio: il bordo va via — le
   pastiglie di `core/button` non ne hanno, e quello trasparente che c'era prima
   contava comunque due pixel in altezza e due in larghezza — e l'interlinea
   torna quella del corpo del testo, che il plugin porta a 1 su tutti i suoi
   bottoni. Fra le due, il bottone stava sotto le altre pastiglie del sito di
   otto pixel.

   Le altre pastiglie del sito scendono a `line-height: 1` sotto i 900px; questa
   no, ed è voluto. È l'unico bottone di invio del sito e sul telefono è il
   bersaglio da premere in fondo a un modulo lungo: gli otto pixel che quella
   regola gli toglierebbe li tiene, e resta della misura che ha sul desktop. */
.form-skin .ff-btn-submit {
	padding: 14px 28px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: inherit;
	color: var(--wp--preset--color--floral);
	background-color: var(--wp--preset--color--rosso);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* Il selettore passa anche per `.frm-fluent-form` — la classe del `<form>` —
   perché con due sole classi il passaggio non si vedeva affatto: lo `<style>`
   in linea del plugin dichiara il fondo su tre classi e un elemento, e vinceva
   anche sopra al `:hover`. Con tre classi più la pseudo-classe si passa avanti
   senza `!important`, che qui non servirebbe a nulla se non a nasconderlo. */
.form-skin .frm-fluent-form .ff-btn-submit:hover,
.form-skin .frm-fluent-form .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--rosso-dark);
}

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

/* --- Sotto i 900px ------------------------------------------------------ */

@media ( max-width: 900px ) {
	/* I campi appaiati si mettono in fila. */
	.form-skin .ff-t-container {
		grid-template-columns: 1fr;
	}

}

/* --- Il riquadro del curriculum ---------------------------------------- */

/* L'area tratteggiata su cui trascinare il file è quella del plugin — si
   attiva con `upload_bttn_ui: dropzone` nel campo, che aggiunge `ff-dropzone`
   al gruppo e accende il trascinamento vero. Qui si porta solo al disegno del
   riferimento: il riquadro è l'etichetta che avvolge bottone e input. */
.form-skin .ff-dropzone .ff_file_upload_holder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: clamp( 32px, 5vw, 56px ) 24px;
	text-align: center;
	border: 1.5px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-skin .ff-dropzone .ff_file_upload_holder:hover,
.form-skin .ff-dropzone .ff_file_upload_holder:focus-within {
	border-color: var(--wp--preset--color--rosso);
	background-color: var(--wp--preset--color--cream-light);
}

/* L'input del file è nascosto agli occhi ma non alla tastiera: lo raggiunge
   il tab e apre il selettore, ed è per questo che il riquadro reagisce anche
   a `focus-within`. La classe che lo nasconde la mette il plugin. */
.form-skin .ff-dropzone .ff-el-form-control {
	height: auto;
	padding: 0;
	border: 0;
}

/* Il testo d'invito lo inserisce un filtro del plugin — vedi
   `add_dropzone_hint()` in functions.php — perché nel markup non c'è. */
.form-skin .ff_upload_hint {
	font-size: 18px;
	color: var(--wp--preset__color--ink, var(--wp--preset--color--ink));
}

/* In modalità dropzone il plugin trasforma il bottone in un'altra area
   tratteggiata, che sommata alla nostra ne mostrava due, una dentro l'altra.
   Qui il bottone torna a essere il bottoncino del riferimento: la cornice
   tratteggiata resta una sola, quella esterna. Serve la classe `.fluentform`
   perché è con quella che il plugin dichiara la sua. */
.fluentform .form-skin .ff-dropzone .ff_upload_btn.ff-btn,
.form-skin .ff-dropzone .ff_upload_btn.ff-btn {
	display: inline-block;
	width: auto;
	padding: 4px 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--sm);
}

.form-skin .ff-el-help-message {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* --- Scelte a risposta unica e accettazioni --------------------------------
   Il primo modulo che ne ha bisogno è quello del Franchising; stanno qui e non
   nel suo foglio perché sono un tipo di campo, come il caricamento dei file
   qui sopra, e il prossimo modulo che chiederà una scelta li trova già fatti.

   Il plugin mette ogni scelta in un `.ff-el-form-check`; la distanza va fra
   l'una e l'altra e non attorno, o si sommerebbe al passo fra i campi. */

.form-skin .ff-el-form-check + .ff-el-form-check {
	margin-top: 12px;
}

/* Il pallino si allinea alla prima riga e non al centro della voce: su schermo
   stretto le scelte lunghe — «Sì, dispongo della liquidità minima di 40.000€» —
   vanno a capo, e centrato il pallino finiva a mezz'aria fra le due righe.
   È lo stesso allineamento che l'accettazione della privacy usa più sotto. */
.form-skin .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* Il selettore nomina l'elemento e passa per l'etichetta perché il pallino il
   plugin se lo prende due volte: `.fluentform input[type="radio"]` gli azzera i
   margini e `.fluentform .ff-el-form-check-label .ff-el-form-check-input` lo
   alza di due pixel con `position: relative`. Entrambe pesano più di due
   classi, e senza arrivare al loro peso queste righe non entravano.

   Quei due pixel il plugin li dà per l'impaginazione in linea che aveva prima —
   `vertical-align: middle` su una riga di testo. Qui l'etichetta è un flex e il
   pallino un suo figlio, quindi `vertical-align` non conta più e resta solo lo
   spostamento, che ora è di troppo: si azzera e la misura la dà il margine.
   Un pixel centra il pallino di 20px nella riga di testo, che a 16px
   d'interlinea 1.4 ne misura 22.4. */
.form-skin .ff-el-form-check-label input.ff-el-form-check-input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	top: 0;
	accent-color: var(--wp--preset--color--rosso);
	cursor: pointer;
}

/* L'etichetta di un gruppo di scelte sta più vicina alle sue voci di quanto
   un'etichetta stia al suo campo: sono una cosa sola, non due. Vale finché la
   domanda sta su una riga — sotto i 900px va a capo e lo stacco cresce, vedi
   il blocco a quella soglia. */
.form-skin .ff-el-group:has( .ff-el-form-check ) .ff-el-input--label label {
	margin-bottom: 4px;
}

/* La media query sta qui e non nel blocco dei 900px più sopra perché i due
   selettori sono identici: a parità di specificità vince l'ultimo scritto, e
   una `@media` non ne aggiunge. Da lassù non entrerebbe affatto.

   I quattro pixel qui sopra reggono finché la domanda sta su una riga. Su
   schermo stretto va a capo — «Disponi della liquidità minima per aprire un
   Caffè Napoli?» sta su due righe — e la sua seconda riga finisce più vicina
   alla prima scelta di quanto le scelte non stiano fra loro: le si legge tutte
   come una lista sola, domanda compresa. Lo stacco torna quello fra una scelta
   e l'altra, e la gerarchia si rimette in ordine: dodici dentro al gruppo,
   ventiquattro fra un gruppo e il seguente. */
@media ( max-width: 900px ) {
	.form-skin .ff-el-group:has( .ff-el-form-check ) .ff-el-input--label label {
		margin-bottom: 12px;
	}
}

/* --- L'accettazione della privacy --------------------------------------
   Il plugin la marca `ff-el-tc` e le dà una forma sua: la casella in uno
   `<span>` e il testo in un `<div>`, quindi la riga va ricomposta. Il testo è
   più tenue delle scelte: è una postilla, non una domanda. */

/* Il selettore ripete l'elemento — `label.ff_tc_label` — perché il plugin
   dichiara la sua riga così: a parità di classi vince chi ha in più il nome
   dell'elemento, e senza quello queste regole non entravano affatto. */
.form-skin .ff-el-tc label.ff_tc_label {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	color: var(--wp--preset--color--ink-soft);
}

/* Il plugin impagina la riga come una tabella: casella e testo sono due celle.
   Qui tornano due elementi in fila, e la casella perde la larghezza fissa e lo
   spazio sopra che le servivano da cella. */
.form-skin .ff-el-tc label.ff_tc_label > span,
.form-skin .ff-el-tc label.ff_tc_label > div {
	display: block;
}

.form-skin .ff-el-tc label.ff_tc_label > span.ff_tc_checkbox {
	flex: 0 0 auto;
	width: auto;
	padding-top: 0 !important;
}

.form-skin .ff-el-tc .ff_t_c {
	padding: 0;
	line-height: 1.4;
}

.form-skin .ff-el-tc a {
	color: var(--wp--preset--color--rosso);
	text-decoration: underline;
}