/*
 * Pagina contatti: scheda + mappa — dall'originale index.html r.773–812
 * (CSS: styles.css r.782–818).
 *
 * In questo file: tutto l'aspetto.
 * Markup in templates/contact.php, controlli in includes/widgets/class-contact.php.
 * Nessun .js: il modulo è un <form> vero (vedi la nota nel template).
 *
 * ⚠️ Pesi e spaziature delle intestazioni vengono dalle regole delle pagine
 * interne, non dalle dichiarazioni locali (styles.css r.690–692):
 *   · `.adea-contact-brand h2` → 400 e -.03em (locale e regola coincidono);
 *   · `.adea-contact-formside h3` dichiara 400, ma vale **500** e **-.01em**.
 * Misurato, non dedotto.
 *
 * Cascata MISURATA sull'originale (1440/1024/900/860/700/560/375):
 *
 *                >860            561–860        ≤560
 *  scheda        .82fr 1.18fr    1 colonna      1 colonna
 *  lato blu      pad 54/46       pad 40/28      pad 40/28
 *  h2            46px            34px           34px
 *  lato modulo   pad 52          pad 38/26      pad 38/26
 *  mappa         360px           300px          280px
 *  targhetta     a sinistra      a sinistra     larga, va a capo
 *
 * ⚠️ La riga a due campi (`.cf-row`) NON collassa mai: resta a due colonne
 * anche a 375px, dove i campi sono larghi 131px. Nell'originale è uno stile
 * inline senza media query. Verificato a 375.
 *
 * Indice: sezione · scheda · lato blu · informazioni · lato modulo · campi ·
 *         bottone · mappa · targhetta · breakpoint · reduced-motion
 */

/* ---------- sezione ---------- */
.adea-contact-section{
	position:relative;overflow:hidden;
	background:var(--adea-contact-bg,var(--adea-crema,#f6f3ec));
	font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);
	line-height:normal; /* il Kit impone 1.5; l'originale eredita normal dal body */
}
.adea-contact-shell{
	position:relative;z-index:1;max-width:var(--adea-contact-maxw,1240px);margin:0 auto;
	padding:var(--adea-contact-pad,64px 40px 72px);
}

/* ---------- scheda ---------- */
.adea-contact-card{
	display:grid;grid-template-columns:var(--adea-contact-cols,.82fr 1.18fr);
	border-radius:24px;overflow:hidden;border:1px solid #e8edf2;
	box-shadow:0 34px 70px -42px rgba(10,37,64,.45);
}

/* ---------- lato blu ---------- */
.adea-contact-brand{
	background:linear-gradient(155deg,#0a63c4 0%,#004F9E 100%);color:#fff;
	padding:var(--adea-contact-brand-pad,54px 46px);
	display:flex;flex-direction:column;position:relative;overflow:hidden;
}
/* alone verde in basso a destra */
.adea-contact-brand::after{
	content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;
	border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,rgba(143,214,161,.22),transparent 70%);
}
.adea-contact-kicker{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;
	font-size:12px;letter-spacing:.12em;text-transform:uppercase;
	color:var(--adea-verde-chiaro,#8fd6a1);margin-bottom:16px;
}
.adea-contact-brand h2{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:400;
	font-size:var(--adea-contact-h2,46px);line-height:1.05;letter-spacing:-.03em;
	color:#fff;margin:0 0 18px;
}
.adea-contact-brand-lead{font-size:16px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 34px;max-width:340px}

/* ---------- informazioni ----------
   `margin-top:auto` le spinge in fondo alla colonna blu: restano allineate al
   fondo del modulo anche quando il testo sopra è corto. */
.adea-contact-info{display:flex;flex-direction:column;gap:20px;margin-top:auto;position:relative;z-index:1}
.adea-contact-info-row{display:flex;gap:14px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.adea-contact-info-row strong{display:block;font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;color:#fff;margin-bottom:2px}
.adea-contact-info-row svg{flex:none;margin-top:2px}

/* ---------- lato modulo ---------- */
.adea-contact-formside{background:#fff;padding:var(--adea-contact-form-pad,52px)}
.adea-contact-formside h3{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:500; /* 500, non i 400 dichiarati: vedi la nota in testa */
	font-size:28px;letter-spacing:-.01em;color:var(--adea-blu,#004F9E);margin:0 0 8px;
	line-height:normal; /* il Kit dà 1.2 alle intestazioni */
}
.adea-contact-sub{font-size:15px;color:#5b6b78;margin:0 0 28px}
.adea-contact-form{display:flex;flex-direction:column;gap:18px}
/* ⚠️ due colonne a ogni larghezza: nell'originale non c'è media query */
.adea-contact-cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.adea-contact-field{
	display:flex;flex-direction:column;gap:7px;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:500;
	font-size:13.5px;color:var(--adea-blu,#004F9E);
	/* ⚠️ va dichiarato QUI e non basta averlo sulla sezione: l'etichetta
	   risultava con line-height 13.5px (cioè 1) invece di `normal`, e la riga
	   di campi veniva 6px più bassa. */
	line-height:normal;
}
.adea-contact-formside input,.adea-contact-formside textarea{
	/* ⚠️ NON il token `--adea-font-testo`: quello include `system-ui`, la regola
	   dell'originale (r.795) dichiara solo `'Source Sans 3',sans-serif`.
	   Stessa resa, ma font-family calcolato diverso. */
	font-family:'Source Sans 3',sans-serif;font-weight:400;font-size:15px;
	padding:13px 15px;border:1.5px solid #dbe3ea;border-radius:9px;outline:none;width:100%;
	line-height:normal; /* i controlli di modulo non ereditano il line-height */
	transition:border-color .2s ease,box-shadow .2s ease;
}
.adea-contact-formside textarea{resize:vertical}
.adea-contact-formside input:focus,.adea-contact-formside textarea:focus{
	border-color:var(--adea-blu,#004F9E);box-shadow:0 0 0 3px rgba(0,79,158,.12);
}
/* riga della privacy: la casella non deve stringersi */
.adea-contact-privacy{
	display:flex;align-items:flex-start;gap:10px;
	font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);font-weight:400;
	font-size:13.5px;color:#5b6b78;line-height:1.5;
}
.adea-contact-privacy input[type=checkbox]{
	flex:none;width:16px;height:16px;accent-color:var(--adea-blu,#004F9E);
	/* ⚠️ margini per esteso. Nell'originale lo stile inline imposta solo
	   `margin-top:3px` e gli altri tre restano quelli PREDEFINITI del browser
	   (Chrome: 3px 3px 3px 4px); WordPress invece azzera i margini dei campi,
	   quindi la riga veniva 20.25px invece di 22px. Valori letti da Chrome
	   sull'originale, non supposti. */
	margin:3px 3px 3px 4px;
}
.adea-contact-privacy a{color:var(--adea-blu,#004F9E)}
/* ⚠️ Due classi, non una: `hello-elementor/reset.css` dichiara
   `button:hover,button:focus{background-color:#c36;color:#fff}` con
   specificità (0,1,1) e batterebbe una classe sola. La rete di sicurezza in
   adea-tokens.css §9 toglie il rosa, ma il fondo e il colore di RIPOSO li deve
   riaffermare la sezione: altrimenti al clic (`:focus` senza `:focus-visible`)
   il bottone resterebbe senza fondo. Segnalato dall'utente il 2026-08-04. */
.adea-contact-section .adea-contact-submit{
	align-self:flex-start;background:var(--adea-verde,#42AD59);color:#fff;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;font-size:15px;
	padding:15px 32px;border:none;border-radius:9px;cursor:pointer;line-height:normal;
	transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .22s ease,background .2s ease;
}
.adea-contact-submit:hover,.adea-contact-submit:focus-visible{
	background:var(--adea-verde-scuro,#379a4c);transform:translateY(-2px);
	box-shadow:0 12px 26px -10px rgba(66,173,89,.55);
}
.adea-contact-submit:active{transform:translateY(0) scale(.96)}

/* ---------- mappa ---------- */
.adea-contact-map{
	position:relative;margin-top:22px;border-radius:22px;overflow:hidden;
	border:1px solid #e2e8ef;height:var(--adea-contact-map-h,360px);
	box-shadow:0 26px 54px -34px rgba(10,37,64,.42);
}
.adea-contact-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92) contrast(1.02)}
.adea-contact-map-card{
	position:absolute;left:var(--adea-contact-mc-x,16px);bottom:var(--adea-contact-mc-y,16px);
	right:var(--adea-contact-mc-right,auto);
	display:inline-flex;align-items:center;gap:var(--adea-contact-mc-gap,14px);
	max-width:calc(100% - 32px);flex-wrap:var(--adea-contact-mc-wrap,nowrap);
	background:rgba(255,255,255,.94);backdrop-filter:blur(12px) saturate(1.2);
	border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:12px 14px;
	box-shadow:0 20px 44px -22px rgba(10,37,64,.5);
}
.adea-contact-map-pin{
	flex:none;width:42px;height:42px;border-radius:12px;background:var(--adea-blu,#004F9E);
	display:flex;align-items:center;justify-content:center;color:#fff;
}
.adea-contact-map-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.adea-contact-map-txt strong{font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;font-size:14.5px;color:var(--adea-blu,#004F9E)}
.adea-contact-map-txt span{font-size:13px;color:#5b6b78;white-space:var(--adea-contact-mc-nowrap,nowrap);overflow:hidden;text-overflow:ellipsis}
/* ⚠️ selettore a DUE classi: il Kit di Elementor colora i link con
   `.elementor-kit-N a`, che è (0,2,0) e batterebbe una classe sola. Il bottone
   diventava blu su blu — testo e freccia invisibili. */
.adea-contact-map .adea-contact-map-btn{
	flex:none;display:inline-flex;align-items:center;gap:8px;
	margin-left:var(--adea-contact-mb-ml,6px);width:var(--adea-contact-mb-w,auto);
	justify-content:var(--adea-contact-mb-jc,normal);
	background:var(--adea-blu,#004F9E);color:#fff;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;font-size:13.5px;
	padding:11px 18px;border-radius:999px;text-decoration:none;
	transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.adea-contact-map .adea-contact-map-btn:hover,.adea-contact-map .adea-contact-map-btn:focus-visible{
	background:var(--adea-blu-scuro,#003a75);transform:translateY(-1px);
	box-shadow:0 14px 26px -12px rgba(0,79,158,.6);
}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:960px){
	/* `.sect` dell'originale: sotto 960 il margine laterale è 20px */
	.adea-contact-shell{--adea-contact-pad:64px 20px 72px}
}
@media(max-width:860px){
	.adea-contact-card{--adea-contact-cols:1fr}
	.adea-contact-brand{--adea-contact-brand-pad:40px 28px}
	.adea-contact-brand h2{--adea-contact-h2:34px}
	.adea-contact-formside{--adea-contact-form-pad:38px 26px}
	.adea-contact-map{--adea-contact-map-h:300px}
}
@media(max-width:560px){
	.adea-contact-map{--adea-contact-map-h:280px}
	.adea-contact-map-card{
		--adea-contact-mc-x:12px;--adea-contact-mc-y:12px;--adea-contact-mc-right:12px;
		--adea-contact-mc-gap:12px;--adea-contact-mc-wrap:wrap;
	}
	.adea-contact-map-txt span{--adea-contact-mc-nowrap:normal}
	.adea-contact-map .adea-contact-map-btn{--adea-contact-mb-ml:0px;--adea-contact-mb-w:100%;--adea-contact-mb-jc:center}
}

/* ---------- reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
	.adea-contact-submit:hover,.adea-contact-submit:focus-visible,
	.adea-contact-submit:active,
	.adea-contact-map .adea-contact-map-btn:hover,.adea-contact-map .adea-contact-map-btn:focus-visible{transform:none!important}
}