/**
 * weWP - aspetto "Gravity Forms" per i form Fluent Forms
 * ---------------------------------------------------------------
 *
 * DA DOVE ARRIVANO QUESTI NUMERI
 *
 * L'aspetto dei vecchi form non veniva solo dal CSS legacy di Gravity
 * Forms e dai bottoni di OceanWP: la parte che si vede di piu' - titolo
 * azzurro con la striscia, etichette 18px, campi con lo sfondo grigino,
 * bottone corallo - stava nel **Custom CSS del widget Elementor della
 * pagina 3312**, e finiva in
 * `wp-content/uploads/elementor/css/post-3312.css`. Essendo legato a
 * quella pagina, sulla pagina 9914 del form Fluent Forms non arriva.
 *
 * Qui sotto quelle regole sono rifatte sul markup di Fluent Forms. I
 * valori sono misurati sul markup di Gravity Forms renderizzato con lo
 * stesso CSS, non stimati a occhio.
 *
 * Quando spegnerai le vecchie pagine Gravity Forms, il Custom CSS del
 * widget della 3312 se ne andra' con loro: da quel momento questo file
 * e' l'unico posto dove l'aspetto dei form e' scritto.
 *
 * Le regole partono da `div.fluentform` (elemento + classe) per stare
 * una tacca sopra quelle di Fluent Forms senza !important. Per limitare
 * tutto a un solo form, sostituisci `div.fluentform` con
 * `.fluentform_wrapper_9`.
 */

/* ---------------------------------------------------------------
   Contenitore e spaziatura dei campi
   GF: wrapper margin 16px 0; ogni campo margin-top 25px e nessun
   padding laterale (il padding-right di GF era azzerato dal Custom
   CSS della pagina).
   --------------------------------------------------------------- */
div.fluentform {
	margin: 16px 0;
}

div.fluentform .ff-el-group {
	margin: 25px 0 0;
	padding: 0;
}

/* Le due colonne: 50% ciascuna, con gli 8px di stacco sulla destra */
div.fluentform .ff-el-group.gf_left_half,
div.fluentform .ff-el-group.gf_right_half {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}

div.fluentform .ff-el-group.gf_right_half {
	padding-left: 8px;
}

div.fluentform .ff-el-group.gf_first_third,
div.fluentform .ff-el-group.gf_middle_third,
div.fluentform .ff-el-group.gf_last_third {
	display: inline-block;
	vertical-align: top;
	width: 33.3%;
}

/* ---------------------------------------------------------------
   Etichette
   GF: SegoeUI 18px/700 #626d76, 3px di stacco dal campo.
   Asterisco #ff8970.
   --------------------------------------------------------------- */
div.fluentform .ff-el-input--label {
	margin: 0 0 3px;
	padding: 0;
}

div.fluentform .ff-el-input--label label {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: SegoeUI, Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #626d76;
}

div.fluentform .ff-el-is-required.asterisk-right label:after {
	margin-left: 4px;
	font-weight: 700;
	color: #ff8970;
}

/* ---------------------------------------------------------------
   Campi
   GF: sfondo rgba(0,0,0,.02), bordo 1px #ddd, raggio 3px, testo #333
   nel font del tema. Al fuoco lo sfondo diventa bianco.
   Fluent Forms forza -apple-system e un raggio da 7px: qui torna
   tutto ai valori di prima.
   --------------------------------------------------------------- */
div.fluentform .ff-el-form-control {
	width: 100%;
	height: auto;
	padding: 5px 4px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.8; /* 25.2px, come GF */
	color: #333;
	background-color: rgba(0, 0, 0, .02);
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: none;
}

div.fluentform .ff-el-form-control:focus {
	background-color: #fff;
	border-color: #eaeaea;
	outline: 0;
	box-shadow: none;
}

div.fluentform select.ff-el-form-control {
	height: 40px;
	padding: 0 0 0 3px;
	line-height: normal;
}

div.fluentform textarea.ff-el-form-control {
	min-height: 150px;
	padding: 6px 8px;
	line-height: 21px;
}

/* La textarea "Dettagli richiesta" su GF era alta 320px (textarea.large) */
div.fluentform #ff_9_dettagli_richiesta_10 {
	height: 320px;
}

/* ---------------------------------------------------------------
   Testo di aiuto (era .gfield_description)
   GF: 0.813em, interlinea 1.2, 10px di stacco sopra.
   Compare qui sotto solo se in Impostazioni > Form Layout la
   posizione del messaggio di aiuto e' "Below Input Fields";
   se resta "Beside Label" Fluent Forms lo mostra come tooltip.
   --------------------------------------------------------------- */
div.fluentform .ff-el-help-message {
	margin: 0;
	padding: 10px 16px 0 0;
	font-size: .813em;
	font-style: normal;
	line-height: 1.2;
	color: inherit;
}

/* ---------------------------------------------------------------
   Titolo di sezione (era li.gsection + h2.gsection_title)
   Il ::after e' la striscia grigia che copre la meta' inferiore del
   titolo: un bordo alto 18px tirato su di 22px.
   --------------------------------------------------------------- */
div.fluentform .ff-el-section-break {
	margin: 25px 0 28px;
	padding: 0 0 8px;
	border-bottom: 1px solid #ccc;
	background: none;
}

div.fluentform .ff-el-section-break hr {
	display: none;
}

div.fluentform .ff-el-section-title {
	/*
	 * width: fit-content restringe il titolo alla sua scritta, cosi'
	 * la striscia del ::after - che e' larga quanto il titolo - si
	 * ferma dove finisce il testo invece di attraversare la riga.
	 * Togli questa riga per riavere la striscia a tutta larghezza,
	 * come su Gravity Forms.
	 */
	width: fit-content;
	max-width: 100%;
	margin: 75px 0 0;
	padding: 0;
	font-family: inherit;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: #6ec1e4;
}

div.fluentform .ff-el-section-title:after {
	display: block;
	content: "";
	border-top: 18px solid rgba(0, 0, 0, .02);
	border-radius: 4px;
	margin-top: -22px;
	margin-left: -15px;
	margin-right: -6px;
	box-sizing: inherit;
}

div.fluentform .ff-section_break_desk {
	margin: 5px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: inherit;
}

/* ---------------------------------------------------------------
   Bottoni
   Invio: corallo #ff8970, Roboto 500 maiuscolo, senza raggio - e
   senza cambio di colore al passaggio del mouse, come su GF (la
   regola del tema perdeva per specificita' anche in hover).
   Allegati: il bottone azzurro del tema, che invece l'hover ce l'ha.

   Fluent Forms colora il bottone d'invio con una regola sua
   (`form.fluent_form_9 .ff-btn-submit`) piu' specifica di
   `div.fluentform .ff-btn-submit`: da qui il `form` in mezzo al
   selettore, che serve solo a stare una tacca sopra.
   --------------------------------------------------------------- */
div.fluentform .ff_submit_btn_wrapper {
	margin: 16px 0 0;
	padding: 16px 0 10px;
}

div.fluentform form .ff-btn-submit:not(.ff_btn_no_style),
div.fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
div.fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus {
	padding: 15px 30px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	text-transform: uppercase;
	color: #fff;
	background-color: #ff8970;
	border: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
}

div.fluentform form .ff-btn.ff_upload_btn {
	padding: 14px 20px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
	text-transform: uppercase;
	color: #fff;
	background-color: #6ec1e4;
	border: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
}

div.fluentform form .ff-btn.ff_upload_btn:hover,
div.fluentform form .ff-btn.ff_upload_btn:focus {
	color: #fff;
	background-color: #0b7cac;
}

/* ---------------------------------------------------------------
   Allegati
   GF mostrava un riquadro tratteggiato con dentro il bottone.
   Fluent Forms non ha il drag&drop di Gravity Forms: il riquadro
   e' cliccabile e apre il selettore file, ma trascinarci sopra un
   file potrebbe non funzionare. Se preferisci una scritta piu'
   onesta cambia solo la variabile qui sotto.
   --------------------------------------------------------------- */
div.fluentform {
	--wewp-ff-upload-text: "Trascina i file qui oppure";
}

div.fluentform .ff_file_upload_holder {
	display: block;
	margin: 0 0 16px;
	padding: 24px;
	text-align: center;
	color: #aaa;
	background: rgba(0, 0, 0, .02);
	border: 1px dashed #ccc;
	border-radius: 4px;
}

div.fluentform .ff_file_upload_holder:before {
	content: var(--wewp-ff-upload-text);
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.8;
	color: #aaa;
}

/* ---------------------------------------------------------------
   Sotto i 641px Gravity Forms mandava tutto a larghezza piena.
   --------------------------------------------------------------- */
@media only screen and (max-width: 641px) {
	div.fluentform .ff-el-group,
	div.fluentform .ff-el-group.gf_left_half,
	div.fluentform .ff-el-group.gf_right_half,
	div.fluentform .ff-el-group.gf_first_third,
	div.fluentform .ff-el-group.gf_middle_third,
	div.fluentform .ff-el-group.gf_last_third {
		display: block;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	div.fluentform .ff-el-section-title {
		font-size: 26px;
	}
}

/* ---------------------------------------------------------------
   Cloud Storage Manager (upload diretto su Dropbox)
   ---------------------------------------------------------------
   Il plugin ridisegna il campo allegati con un foglio suo in cui
   OGNI dichiarazione e' !important e i selettori partono da
   `.ff-el-group.fwcsm_upload_container`. Combatterlo regola per
   regola sarebbe una guerra persa, ma il plugin ha la cortesia di
   passare per delle variabili CSS: ridefinite quelle, cambia tutto
   da solo - riquadro, bordi, stati, schede dei file caricati.
   Restano da forzare a mano le poche cose che il plugin scrive
   fisse invece di prenderle da una variabile (il bordo del
   bottone, il raggio, il testo del riquadro).

   NOTA: `--fwcsm-text` colora l'etichetta del campo, non la
   scritta dentro il riquadro. Per quello c'e' la regola sul
   :before piu' sotto.
   --------------------------------------------------------------- */
div.fluentform .ff-el-group.fwcsm_upload_container {
	--fwcsm-primary: #6ec1e4;
	--fwcsm-border: #ccc;
	--fwcsm-border-style: dashed;
	--fwcsm-border-width: 1px;
	--fwcsm-bg: rgba(0, 0, 0, .02);
	--fwcsm-hover-bg: rgba(0, 0, 0, .02);
	--fwcsm-radius: 4px;
	--fwcsm-text: #626d76;
	--fwcsm-btn-text: #fff;
	--fwcsm-shadow: none;
}

/* L'etichetta resta quella degli altri campi */
div.fluentform .ff-el-group.fwcsm_upload_container .ff-el-input--label {
	margin-bottom: 3px !important;
}

div.fluentform .ff-el-group.fwcsm_upload_container .ff-el-input--label label {
	font-family: SegoeUI, Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	color: #626d76 !important;
}

/* Il riquadro tratteggiato */
div.fluentform .ff-el-group.fwcsm_upload_container .ff_file_upload_holder,
div.fluentform .ff-el-group.fwcsm_upload_container .ff-dropzone {
	margin: 0 0 16px !important;
	padding: 24px !important;
	box-shadow: none !important;
}

/* La scritta sopra il bottone */
div.fluentform .ff-el-group.fwcsm_upload_container .ff_file_upload_holder:before,
div.fluentform .ff-el-group.fwcsm_upload_container .ff-dropzone .ff-dropzone-text {
	content: var(--wewp-ff-upload-text) !important;
	display: block !important;
	margin: 0 0 8px !important;
	font-size: 14px !important;
	line-height: 1.8 !important;
	color: #aaa !important;
}

/* Il bottone: quello del tema, come su Gravity Forms */
div.fluentform .ff-el-group.fwcsm_upload_container .ff_file_upload_holder .ff_upload_btn.ff-btn,
div.fluentform .ff-el-group.fwcsm_upload_container .ff_file_upload_holder .ff-btn,
div.fluentform .ff-el-group.fwcsm_upload_container .ff-dropzone .ff-browse-btn {
	padding: 14px 20px !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 12px !important;
	text-transform: uppercase !important;
	color: #fff !important;
	background-color: #6ec1e4 !important;
	border: 1px solid #fff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

div.fluentform .ff-el-group.fwcsm_upload_container .ff_file_upload_holder .ff_upload_btn.ff-btn:hover,
div.fluentform .ff-el-group.fwcsm_upload_container .ff_file_upload_holder .ff-btn:hover,
div.fluentform .ff-el-group.fwcsm_upload_container .ff-dropzone .ff-browse-btn:hover {
	color: #fff !important;
	background-color: #0b7cac !important;
	box-shadow: none !important;
	transform: none !important;
}

/* ---------------------------------------------------------------
   Le voci spuntate si colorano
   ---------------------------------------------------------------
   Su Gravity Forms la regola era `input:checked + label`. Fluent
   Forms mette l'input DENTRO la label, seguito da uno <span>:
   l'etichetta da colorare e' quello.
   --------------------------------------------------------------- */
div.fluentform .ff-el-form-check-input:checked + span,
div.fluentform input[type="checkbox"]:checked + span,
div.fluentform input[type="radio"]:checked + span,
div.fluentform input[type="checkbox"]:checked + label,
div.fluentform input[type="radio"]:checked + label {
	color: #6ec1e4;
	font-weight: bold;
}

/* ---------------------------------------------------------------
   Sticky header: il segnaposto non puo' essere piu' alto dell'header
   ---------------------------------------------------------------
   Quando l'header NON e' fisso sta dentro il segnaposto nel flusso
   normale, quindi l'altezza giusta e' quella naturale: `auto` non
   puo' sbagliare. E' la rete di sicurezza sotto allo script in
   functions.php, che invece serve per lo stato "fisso", dove
   l'header esce dal flusso e un'altezza esplicita ci vuole.
   --------------------------------------------------------------- */
#site-header-sticky-wrapper:not(.is-sticky) {
	height: auto !important;
}

/* ---------------------------------------------------------------
   L'header alto quanto la finestra
   ---------------------------------------------------------------
   Sintomo: in cima alla pagina l'header e il blocco del logo sono
   alti quanto il viewport (792px sul mio schermo, 930 su quello di
   Manuel) e spingono giu' tutta la pagina. Appena lo sticky si
   aggancia tornano a 75px.

   Causa, nel CSS di OceanWP:

     #site-header-inner            { height: 100%; }
     #site-logo                    { float: left; height: 100%; display: table; }
     #site-logo #site-logo-inner   { display: table-cell; height: 74px; }

   `#site-logo` e' una TABELLA con `height:100%`. Un'altezza in
   percentuale ha bisogno di un antenato con un'altezza definita, e
   qui non ce l'ha nessuno: quella dell'header dipende dal suo
   contenuto, cioe' dalla tabella stessa. In quel caso un blocco
   normale tratta la percentuale come `auto`; una tabella, in Blink,
   risale la catena e - non trovando niente - risolve contro il
   VIEWPORT. Da qui il numero: e' esattamente l'altezza della finestra.

   Poi il circolo vizioso: `ocean-sticky-header` al `load` misura
   l'header (gia' sbagliato) e scrive quel numero nel segnaposto. Da
   quel momento un'altezza definita c'e' - quella sbagliata - e la
   catena ci si aggrappa. Il `930px` che si vedeva nel segnaposto era
   la fotografia del delitto, non il colpevole.

   Il rimedio toglie l'appiglio: senza `height:100%` la tabella si
   siede sull'altezza della sua cella, che i 74px ce li ha gia'.
   `#site-logo-inner` NON va toccato, e' proprio quella cella.
   Verificato in console: 793 -> 75, con lo sticky sia libero che
   agganciato.
   --------------------------------------------------------------- */
#site-header,
#site-header-inner,
#site-logo {
	height: auto !important;
}