/**
 * Stili per il pattern "Contatti" (patterns/contatti.php).
 *
 * Fasce (bande) a piena larghezza con contenuto centrato, card, form e
 * animazioni fade-in. I token di radius/ombra del design system (vedi
 * CLAUDE.md: --radius-md 8px, --shadow-card, hover lift 2px) non sono
 * ancora presenti in theme.json, quindi qui sono scritti come valori fissi
 * commentati con il nome del token di riferimento.
 */

/* Fasce full-width: stesso margine laterale dell'header
   (assets/css/header.css, .site-header__inner), nessuna media query così
   il margine resta identico su mobile e desktop. */
.contatti__band {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.contatti__band-inner {
	max-width: 1200px; /* --container-max */
	margin-left: auto;
	margin-right: auto;
}

.contatti__col {
	display: flex;
	flex-direction: column;
}

/* Ogni elemento diverso dal placeholder immagine (form, card, mappa) ha un
   margine più ampio rispetto all'immagine, sia su mobile che desktop. */
.contatti__form-wrapper,
.contatti__card,
.contatti__band--map .contatti__band-inner {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Placeholder mappa: nessuno stile decorativo (né sfondo né bordo, vedi
   anche CLAUDE.md sul non inventare uno stile per contenuti non ancora
   forniti) — solo lo spazio riservato, sostituito in seguito da una mappa
   reale. */
.contatti__map-placeholder {
	min-height: 320px;
}

/* Wrapper del blocco fl/form-contatti: solo il form, nessuna immagine. */
.contatti__form-wrapper {
	display: flex;
	flex-direction: column;
}

/* Riga della fascia 2 con le card Comune/Seguici/Officine, tutte alla stessa
   altezza (quella della card più alta): align-items:stretch sulla riga +
   colonne/card flessibili che riempiono lo spazio verticale disponibile. */
.contatti__row--cards {
	align-items: stretch;
}

/* Card "Seguici", sfondo navy come le altre fasce scure del tema. */
.contatti__card--social .wp-block-social-link a {
	background-color: transparent;
}

/* Icone social più grandi e più distanziate. */
.contatti__social-links {
	gap: var(--wp--preset--spacing--40) !important;
}

/* Il core (wp-includes/blocks/social-links/style.css) rende ".wp-social-link"
   un elemento block e lascia che il suo <a> interno si dimensioni sul
   contenuto (l'icona 32px): impostare solo width/height sul contenitore da
   64px non centra l'icona, perché l'<a> resta ancorato in alto a sinistra.
   Servono display:flex + centratura sul contenitore stesso. */
.contatti__social-links .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

/* Il link dentro ogni riquadro da 64px era allineato in alto a sinistra
   (largo 64 ma alto 32, icona a inizio riga): icona spostata di 16px a
   sinistra e attaccata in alto. Il link riempie il riquadro e centra
   l'icona in entrambe le direzioni. */
.contatti__social-links .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.contatti__social-links .wp-social-link svg {
	width: 32px;
	height: 32px;
}

/* Card "Comune"/"Officine"/"Seguici" — tutte alla stessa altezza (colonna
   flex che riempie .contatti__col), contenuto centrato sia in orizzontale
   che in verticale. Padding esplicito qui (non solo inline dal blocco) così
   il margine interno resta garantito anche se il markup del pattern cambia. */
.contatti__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	text-align: center;
	padding: var(--wp--preset--spacing--50) !important;
	background-color: var(--wp--preset--color--base);
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 1px 3px rgba(33, 42, 84, 0.08), 0 8px 24px rgba(33, 42, 84, 0.08); /* --shadow-card */
	transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}

.contatti__card:hover {
	box-shadow: 0 4px 12px rgba(33, 42, 84, 0.14); /* --shadow-raised */
	transform: translateY(-2px);
}

/* Intestazioni ridotte (card, fasce social/mappa). */
.contatti__card-title {
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Righe icona + testo (email/telefono/indirizzo): icona dashicon nativa +
   vero blocco core wp:paragraph, centrate e distribuite nella card. */
.contatti__info-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 var(--wp--preset--spacing--10);
}

.contatti__info-row p {
	margin: 0;
}

/* Spazio riservato al logo (nessuno stile decorativo, coerente con gli altri
   placeholder di questo pattern) — parte del flusso centrato verticalmente
   di .contatti__card insieme al resto del contenuto (nessun margin-top:auto,
   altrimenti si "stacca" dal blocco e la card non appare centrata). */
.contatti__logo-placeholder {
	width: 100%;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contatti__logo-placeholder-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--input-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em; /* --ls-label */
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Dashicon (font icon core di WordPress) davanti al testo della riga. */
.contatti__info-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
	vertical-align: text-bottom;
}

/* Form di contatto: padding generoso e contenuto centrato in orizzontale
   (titolo, bottone) — gli input restano allineati a sinistra al loro
   interno (.contatti__field input/textarea sotto) per restare leggibili
   mentre si scrive. */
.contatti__form {
	background-color: var(--wp--preset--color--base);
	border-radius: 8px; /* --radius-md */
	box-shadow: 0 1px 3px rgba(33, 42, 84, 0.08), 0 8px 24px rgba(33, 42, 84, 0.08); /* --shadow-card */
	padding: var(--wp--preset--spacing--50) !important;
	text-align: left;
}

/* Titolo e pulsante "Invia" allineati a sinistra (a differenza delle card
   Comune/Seguici/Officine, che restano centrate: .contatti__card-title di
   base è centrato, qui il modificatore lo sovrascrive solo per il form). */
.contatti__form-title {
	text-align: left;
}

.contatti__submit {
	display: inline-block;
}

.contatti__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--30);
	text-align: left;
}

/* Riga email + oggetto affiancati (v. src/blocks/form-contatti/render.php).
   flex-wrap (non una media query) fa scendere "Oggetto" sotto "La tua
   email" non appena la riga è troppo stretta per stare su due colonne da
   almeno 200px: si adatta così alla larghezza reale della colonna form, che
   si restringe anche a viewport larghi (perché affiancata al placeholder
   immagine), non solo sotto il breakpoint di stack a 781px. */
.contatti__field-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.contatti__field-row .contatti__field {
	flex: 1 1 200px;
}

.contatti__field label {
	font-family: var(--wp--preset--font-family--input-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em; /* --ls-label */
	text-transform: uppercase;
}

.contatti__field input,
.contatti__field textarea {
	font-family: var(--wp--preset--font-family--inria-serif);
	font-size: var(--wp--preset--font-size--medium);
	border: 1px solid var(--wp--preset--color--border, #212a54);
	border-radius: 4px; /* --radius-sm */
	padding: var(--wp--preset--spacing--30);
	transition: box-shadow 160ms ease-out, border-color 160ms ease-out;
}

.contatti__field input:focus,
.contatti__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(32, 54, 104, 0.15); /* focus ring 15% primary */
}

.contatti__field--honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.contatti__submit {
	cursor: pointer;
	border: none;
}

.contatti__form-status {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.contatti__form-status.is-success {
	color: var(--wp--preset--color--primary);
}

.contatti__form-status.is-error {
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 781px) {
	.contatti__row--cards {
		flex-direction: column;
	}

	/* Ordine mobile delle card: "Seguici" per ultima (a differenza del
	   desktop, dove sta in mezzo). */
	.contatti__col--comune {
		order: 1;
	}

	.contatti__col--officine {
		order: 2;
	}

	.contatti__col--social {
		order: 3;
	}
}

/* Email, telefono e indirizzo cliccabili nelle card (link aggiunti al
   render da inc/contatti-links.php): stesso colore del testo della card,
   sottolineatura sottile che si accentua in hover/focus. */
.fl-contatti__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 150ms;
}

.fl-contatti__link:hover,
.fl-contatti__link:focus-visible {
	color: inherit;
	text-decoration-thickness: 2px;
}

/*
 * Altezze. Card: su mobile, impilate, erano alte quanto il proprio
 * contenuto (339/213/316px, quella dei social molto più bassa): stessa
 * altezza minima per tutte, circa metà schermo. Su desktop sono già alla
 * pari (stretch nella riga) e restano alte quanto il contenuto.
 * Mappa: copre quasi tutto lo schermo, come l'hero in homepage (80% su
 * mobile, 75% su desktop); prima 300px fissi, stile inline dell'iframe
 * salvato in editor (da qui l'!important).
 * `svh` = altezza dello schermo con la barra degli indirizzi mobile
 * visibile, così non "saltano" quando la barra si ritira; `vh` è il
 * fallback per i browser più vecchi.
 */

/* display:block toglie anche lo spazio sotto l'iframe inline (wrapper 9px
   più alto della mappa). */
.contatti__band--map iframe {
	display: block;
	height: 75vh !important;
	height: 75svh !important;
}

@media (max-width: 781px) {
	.contatti__card {
		min-height: max( 22rem, 45vh );
		min-height: max( 22rem, 45svh );
	}

	.contatti__band--map iframe {
		height: 80vh !important;
		height: 80svh !important;
	}
}