/* ============================================================================
 * Gravity Forms — Stile "Richiesta informazioni" (Orbital theme)
 *
 * Strategia (CSS API-driven):
 *   1) Override delle CSS Custom Properties (--gf-*) per allineare il form al
 *      brand Radavelli (teal #278498) e al look del vecchio embed Brevo.
 *   2) Pochi selettori specifici per rifiniture non esposte come variabili
 *      (placeholder color, character counter, validation, ecc.).
 *
 * Scope:
 *   - Tutti i form Orbital con CSS class custom "mr-form-contatti" (impostata
 *     in Form Settings → Appearance → CSS Class Name) — preferito.
 *   - Fallback: il form ID 1 (l'unico attivo al momento) viene preso anche
 *     senza la class, così funziona out-of-the-box su staging.
 *
 * Specificity:
 *   Lo scope ha 1 ID + 3 classi (oppure 4 classi) = 0,1,3,0 / 0,0,4,0.
 *   Batte il selettore default di GF (0,1,2,0) e vince anche sull'inline
 *   <style> che il framework inietta nel wrapper.
 *
 * Doc:
 *   https://docs.gravityforms.com/css-visual-guide/
 *   https://docs.gravityforms.com/guide-to-gravity-forms-2-5-for-theme-developers/
 * ========================================================================= */


/* ============================================================================
 * 1. OVERRIDE CSS API VARIABLES (the heavy lifting)
 * ========================================================================= */

#gform_wrapper_1.gform-theme.gform-theme--framework.gform-theme--orbital,
.mr-form-contatti.gform-theme.gform-theme--framework.gform-theme--orbital {

	/* --- Brand colors -------------------------------------------------- */
	--gf-color-primary:                  #278498;
	--gf-color-primary-rgb:              39, 132, 152;
	--gf-color-primary-contrast:         #ffffff;
	--gf-color-primary-contrast-rgb:     255, 255, 255;
	--gf-color-primary-darker:           #1f6d7e;
	--gf-color-primary-lighter:          #3aa0b6;

	/* In-control primary variant (used for focus rings, checkboxes, ecc.) */
	--gf-color-in-ctrl-primary:          #278498;
	--gf-color-in-ctrl-primary-rgb:      39, 132, 152;
	--gf-color-in-ctrl-primary-contrast: #ffffff;
	--gf-color-in-ctrl-primary-darker:   #1f6d7e;
	--gf-color-in-ctrl-primary-lighter:  #3aa0b6;

	/* --- Control appearance (input, select, textarea) ------------------ */
	--gf-radius: 3px;
	--gf-ctrl-border-color: #c0ccda;
	--gf-ctrl-border-color-hover: #a0b0c8;
	--gf-ctrl-bg-color: #ffffff;

	/* --- Labels / descriptions ---------------------------------------- */
	--gf-ctrl-label-color-primary:   #3c4858;
	--gf-ctrl-label-color-secondary: #3c4858;
	--gf-ctrl-desc-color: #7e8a9a;

	/* --- Typography --------------------------------------------------- */
	--gf-font-size-secondary: 14px;
	--gf-font-size-tertiary:  13px;

	/* --- Spacing (compatto, in linea con il vecchio Brevo) ------------ */
	--gf-form-gap-x: 12px;
	--gf-form-gap-y: 14px;

	/* --- Submit button ------------------------------------------------ */
	--gf-ctrl-btn-bg-color-primary:           #278498;
	--gf-ctrl-btn-bg-color-primary-hover:     #1f6d7e;
	--gf-ctrl-btn-color-primary:              #ffffff;
	--gf-ctrl-btn-border-color-primary:       #278498;
	--gf-ctrl-btn-border-color-primary-hover: #1f6d7e;

	/* Font family: ereditato dal tema sito (Helvetica), niente override */

	/* --- Padding interno wrapper -------------------------------------- */
	/* Stacca il contenuto del form dai bordi del contenitore parent
	   (es. il box teal in cui il form e' inserito sulla pagina contatti). */
	padding: 20px;

	/* --- Container query context -------------------------------------- */
	/* Permette ai child di reagire alla larghezza del *container*,
	   non del viewport. Cruciale per gestire correttamente i contesti
	   ristretti come sidebar o widget. */
	container-type: inline-size;
	container-name: mr-form;
}


/* ============================================================================
 * 2. RIFINITURE NON COPERTE DALLA CSS API
 *    Selettori scoped al form ID 1 (modificare se l'ID cambia).
 * ========================================================================= */

/* --- Required indicator "(Obbligatorio)" --------------------------------- */
#gform_wrapper_1 .gfield_required,
.mr-form-contatti .gfield_required {
	color: #c0392b;
	font-weight: 400;
	font-size: 0.95em;
}

/* --- Placeholder uniforme su tutti gli input ----------------------------- */
#gform_wrapper_1 input::placeholder,
#gform_wrapper_1 textarea::placeholder,
.mr-form-contatti input::placeholder,
.mr-form-contatti textarea::placeholder {
	color: #c0ccda;
	opacity: 1;
}

/* --- Character counter sotto textarea (es. "0 di 500 caratteri") -------- */
#gform_wrapper_1 .ginput_counter,
#gform_wrapper_1 .charleft,
.mr-form-contatti .ginput_counter,
.mr-form-contatti .charleft {
	color: #7e8a9a;
	font-size: 12px;
	margin-top: 4px;
}

/* --- Submit button: width auto, non full-width come default GF ---------- */
#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_1 .gform_footer .gform_button,
.mr-form-contatti .gform_footer input[type="submit"],
.mr-form-contatti .gform_footer .gform_button {
	width: auto;
	min-width: 120px;
}

/* --- Hidden field: nessun gap residuo dal CSS Grid ---------------------- */
#gform_wrapper_1 .gfield--type-hidden,
.mr-form-contatti .gfield--type-hidden {
	display: none !important;
}

/* --- Validation error ---------------------------------------------------- */
#gform_wrapper_1 .gfield_error input,
#gform_wrapper_1 .gfield_error textarea,
#gform_wrapper_1 .gfield_error select,
.mr-form-contatti .gfield_error input,
.mr-form-contatti .gfield_error textarea,
.mr-form-contatti .gfield_error select {
	border-color: #c0392b;
	background-color: #fff8f8;
}

#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message,
.mr-form-contatti .gfield_validation_message,
.mr-form-contatti .validation_message {
	color: #661d1d;
	background: #ffeded;
	border: 1px solid #c0392b;
	border-radius: 3px;
	padding: 6px 10px;
	font-size: 13px;
	margin-top: 6px;
}

/* --- Confirmation message (thank you page inline) ----------------------- */
#gform_wrapper_1 .gform_confirmation_message,
.mr-form-contatti .gform_confirmation_message {
	color: #085229;
	background: #e7faf0;
	border: 1px solid #13ce66;
	border-radius: 3px;
	padding: 12px 16px;
	font-size: 14px;
}

/* --- Consent checkbox / Newsletter checkbox: testo leggibile ----------- */
#gform_wrapper_1 .gfield_consent_label,
#gform_wrapper_1 .gchoice label,
.mr-form-contatti .gfield_consent_label,
.mr-form-contatti .gchoice label {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* --- Link interni al form (Privacy Policy) ------------------------------ */
#gform_wrapper_1 a,
.mr-form-contatti a {
	color: #278498;
	text-decoration: underline;
}

#gform_wrapper_1 a:hover,
.mr-form-contatti a:hover {
	color: #1f6d7e;
}


/* ============================================================================
 * 3. RESPONSIVE COLLAPSE — CONTAINER QUERY
 *
 * GF colloca i field side-by-side basandosi sulla classe gfield--width-half
 * (Email/Telefono) e sul layout grid del composite Name (Nome/Cognome).
 * Queste regole si basano sul viewport tramite la basic.css di GF, ma il
 * problema e' che in contesti ristretti (es. sidebar 380px in un viewport
 * 1400px) i field restano forzati a 2 colonne anche se non c'e' spazio.
 *
 * Soluzione: container query. Il wrapper e' marcato come container
 * (vedi blocco principale qui sopra: `container-type: inline-size`), e
 * sotto i 600px di larghezza *del wrapper stesso* — non del viewport —
 * forziamo lo stack verticale di tutti i field a layout multi-colonna.
 *
 * Soglia 600px scelta come compromesso: copre la maggior parte dei widget
 * sidebar e box ristretti, e lascia attiva la doppia colonna solo dove
 * c'e' davvero spazio (main content area larga, modali full-width, ecc.).
 * ========================================================================= */

@container mr-form (max-width: 600px) {

	/* Field con classe gfield--width-half (Email, Telefono): full width */
	.gfield--width-half,
	.gfield--width-third,
	.gfield--width-two-thirds,
	.gfield--width-quarter,
	.gfield--width-three-quarters {
		grid-column: 1 / -1;
	}

	/* Composite Name field: Nome e Cognome impilati invece di affiancati */
	.ginput_complex.ginput_container--name.gform-grid-row,
	.ginput_complex.ginput_container_name.gform-grid-row {
		grid-template-columns: 1fr;
	}

	/* Composite Address field (se usato in futuro): stacca anche city/state/zip */
	.ginput_complex.ginput_container_address .gform-grid-row {
		grid-template-columns: 1fr;
	}

	/* Padding leggermente ridotto in contesti ristretti (sidebar/widget) */
	.gform_wrapper {
		padding: 16px;
	}
}