/*
Theme Name: FEA Automazioni
Theme URI: https://feaautomazioni.it
Author: FEA Pier Giacomo
Author URI: https://feaautomazioni.it
Description: Tema a blocchi (Full Site Editing) per FEA Automazioni — quadri elettrici BT, automazione e impianti civili. Stile industriale/tecnico: avorio, quasi nero e ambra, angoli vivi, etichette monospace. Tutto modificabile da Aspetto → Editor.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fea-automazioni
Tags: full-site-editing, block-templates, block-patterns, two-columns, business, custom-colors, custom-logo, editor-style, wide-blocks
*/

/* -------------------------------------------------------------------------
   CSS custom — SOLO dove gli attributi dei blocchi core non arrivano.
   Palette e tipografia stanno in theme.json.
   ------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Ancore sotto l'header sticky (52px di barra + 2px di filo ambra + aria) */
:target {
	scroll-margin-top: 70px;
}

/* --- Animazioni allo scroll ---------------------------------------------- */

/* Lo stato iniziale esiste solo se lo script ha marcato il documento:
   senza JavaScript nulla viene nascosto. Vedi assets/js/reveal.js. */
.fea-anim .fea-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .6s cubic-bezier(.22, .61, .36, 1) var(--fea-delay, 0ms),
		transform .6s cubic-bezier(.22, .61, .36, 1) var(--fea-delay, 0ms);
	will-change: opacity, transform;
}

.fea-anim .fea-reveal.is-in {
	opacity: 1;
	transform: none;
	/* A entrata avvenuta il livello di compositing non serve più: tenerlo vivo
	   su decine di elementi costa memoria video senza dare nulla in cambio. */
	will-change: auto;
}

/* L'hero non deve "saltare": entra solo in dissolvenza */
.fea-anim .fea-grid.fea-reveal {
	transform: none;
}

/* Chi ha chiesto meno movimento al sistema non vede animazioni */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.fea-anim .fea-reveal,
	.fea-anim .fea-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Utility tipografiche ------------------------------------------------ */

.fea-balance {
	text-wrap: balance;
}

.fea-pretty {
	text-wrap: pretty;
}

/* Etichetta monospace maiuscola (kicker). Colore/size restano attributi blocco. */
.fea-kicker {
	text-transform: uppercase;
}

/* Misure di riga ottimali (max-width in caratteri).
   L'annullamento dei margini automatici serve dentro i contenitori
   "constrained": lì WordPress centra i blocchi più stretti del contenuto,
   mentre questi paragrafi devono restare allineati a sinistra.

   Il margine sinistro non è però 0: in un contenitore "constrained" i fratelli
   larghi (kicker, titolo) vengono centrati da WordPress dentro una colonna di
   contentSize, quindi un paragrafo a margine 0 finirebbe contro il bordo del
   gruppo, rientrato rispetto al titolo. Qui il margine ricalcola lo stesso
   rientro della colonna e vale 0 ovunque il contenitore sia più stretto di
   contentSize (colonne, card, mobile), dove il comportamento resta identico
   a prima. */
.fea-measure-44,
.fea-measure-52,
.fea-measure-62 {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	margin-right: auto !important;
}

.fea-measure-44 {
	max-width: 44ch;
}

.fea-measure-52 {
	max-width: 52ch;
}

.fea-measure-62 {
	max-width: 72ch;
}

/* Testata di sezione: "/ 01" allineato alla base del titolo */
.fea-section-head {
	align-items: baseline;
}

/* --- Reticolo tecnico sui fondi scuri ------------------------------------ */

/* Il reticolo sta su uno strato sopra lo sfondo, non nella proprietà
   background: così resta visibile anche quando la sezione usa un gradiente
   (che WordPress scrive come background con !important e sostituirebbe
   qualunque background-image). */
.fea-grid {
	position: relative;
	isolation: isolate;
}

.fea-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(var(--wp--custom--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--grid-line) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* --- Testi tenui su fondo scuro ------------------------------------------ */

.fea-on-dark {
	color: var(--wp--custom--on-dark) !important;
}

.fea-on-dark-strong {
	color: var(--wp--custom--on-dark-strong) !important;
}

.fea-on-dark-lede {
	color: var(--wp--custom--on-dark-lede) !important;
}

.fea-on-dark-soft {
	color: var(--wp--custom--on-dark-soft) !important;
}

.fea-on-dark-faint {
	color: var(--wp--custom--on-dark-faint) !important;
}

/* --- Header / navigazione ------------------------------------------------ */

/* Barra compatta: l'altezza la danno il logo e il padding, non un min-height
   generoso. 52px lascia il menu ben leggibile senza rubare spazio alla pagina. */
.fea-header {
	position: sticky;
	top: 0;
	z-index: 50;
	min-height: 52px;
	padding-top: 6px;
	padding-bottom: 6px;
	/* Header e hero sono entrambi scuri: senza uno stacco la barra sparisce.
	   Il fondo più profondo dell'hero è impostato sul blocco (modificabile
	   dall'editor); qui filo ambra e ombra la tengono staccata dal contenuto
	   che le scorre sotto. */
	border-bottom: 2px solid var(--wp--preset--color--accent);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
}

.fea-logo {
	flex: none;
}

/* Il logo è un JPG su fondo bianco: lo si monta come pastiglia chiara così il
   bianco dell'immagine legge come scelta grafica e non come ritaglio sbagliato. */
.fea-logo-badge {
	margin: 0;
	flex: none;
	width: 38px;
	height: 38px;
	padding: 2px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px rgba(237, 162, 26, .55);
}

.fea-logo-badge a,
.fea-logo-badge img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fea-logo-text > * {
	line-height: 1;
	margin: 0;
}

.fea-back-link a {
	text-decoration: none;
}

.fea-back-link a:hover,
.fea-back-link a:focus {
	color: var(--wp--preset--color--accent);
}

.fea-nav .wp-block-navigation__container,
.fea-nav .wp-block-navigation__responsive-container-content {
	align-items: center;
	gap: clamp(12px, 2vw, 26px);
}

.fea-nav .wp-block-navigation-item__content {
	color: var(--wp--custom--on-dark-strong);
	padding: 0;
	white-space: nowrap;
}

/* Sottolineatura che cresce al passaggio: rende evidente la voce attiva
   senza spostare il testo. */
.fea-nav .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.fea-nav .wp-block-navigation-item__content:hover,
.fea-nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
}

.fea-nav .wp-block-navigation-item__content:hover::after,
.fea-nav .wp-block-navigation-item__content:focus::after {
	transform: scaleX(1);
}

/* Voce evidenziata "Documentazione".
   min-height: il bersaglio da toccare resta comodo anche su tablet, dove il
   menu è ancora in linea ma il dito non ha la precisione del mouse. */
.fea-nav .fea-nav-cta .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	padding: 8px 14px;
	font-weight: 700;
	font-size: 12.5px;
}

.fea-nav .fea-nav-cta .wp-block-navigation-item__content::after {
	display: none;
}

/* Glifo tecnico davanti alla voce evidenziata */
.fea-nav .fea-nav-cta .wp-block-navigation-item__content::before {
	content: "\25A4";
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	margin-right: 8px;
}

.fea-nav .fea-nav-cta .wp-block-navigation-item__content:hover,
.fea-nav .fea-nav-cta .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.fea-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 24px clamp(20px, 4vw, 56px);
}

/* Nel menu a tendina le voci sono l'unico modo per navigare da telefono: qui il
   bersaglio da toccare vale 44px pieni, non l'altezza del testo. Il padding
   verticale è preferito a un min-height con flex perché lascia la
   sottolineatura ::after sotto l'etichetta invece di affiancarla. */
.fea-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 13px 0;
}

.fea-nav .wp-block-navigation__responsive-container.is-menu-open .fea-nav-cta .wp-block-navigation-item__content {
	min-height: 44px;
	padding: 13px 16px;
}

/* Doppio tocco per lo zoom: sui link del menu è solo un ritardo di 300ms. */
.fea-nav .wp-block-navigation-item__content,
.fea-nav .wp-block-navigation__responsive-container-open,
.fea-nav .wp-block-navigation__responsive-container-close {
	touch-action: manipulation;
}

.fea-nav .wp-block-navigation__responsive-container-open,
.fea-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

/* --- Bottoni: angoli vivi ovunque ---------------------------------------- */

.wp-block-button__link,
.wp-block-search__button,
.wp-element-button {
	border-radius: 0;
	touch-action: manipulation;
}

/* Bottone secondario (outline chiaro su fondo scuro) */
.fea-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(242, 240, 234, .35);
	font-weight: 600;
}

.fea-btn-ghost .wp-block-button__link:hover,
.fea-btn-ghost .wp-block-button__link:focus {
	background: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Bottone scuro (Download) */
.fea-btn-dark .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.fea-btn-dark .wp-block-button__link:hover,
.fea-btn-dark .wp-block-button__link:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* --- Elenchi con quadratino ambra ---------------------------------------- */

.fea-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 14.5px;
	line-height: 1.4;
}

.fea-list li {
	display: flex;
	gap: 10px;
	align-items: center;
}

.fea-list li::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--wp--preset--color--accent);
}

/* --- Hero ---------------------------------------------------------------- */

.fea-hero-columns {
	align-items: center;
}

/* Striscia tecnica sotto l'immagine hero */
.fea-hero-strip {
	display: flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 1px;
}

.fea-hero-strip::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--wp--preset--color--accent);
}

.fea-hero-strip .fea-hero-strip__end {
	margin-left: auto;
}

/* Immagine hero in proporzione 4:3, riempie la colonna */
.fea-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Immagine di testata delle card servizi.
   L'altezza è fissa e il ritaglio è "cover": qualunque foto si carichi al
   posto del segnaposto, la card mantiene la stessa altezza e le quattro
   schede restano allineate fra loro. */
.fea-card-media {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.fea-card-media img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center;
	transition: transform .5s ease;
}

.fea-card:hover .fea-card-media img,
.fea-card:focus-within .fea-card-media img {
	transform: scale(1.04);
}

/* --- Card servizi: la colonna testo si allunga fino a fondo card --------- */

/* Le card restano della stessa altezza anche con testi di lunghezza diversa */
.wp-block-column > .fea-card {
	height: 100%;
}

.fea-card {
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.fea-card:hover {
	border-color: var(--wp--preset--color--verde) !important;
	box-shadow: 0 10px 30px rgba(23, 25, 28, .09);
	transform: translateY(-3px);
}

.fea-card > .fea-card-body {
	flex: 1;
}

/* --- Contatti ------------------------------------------------------------ */

.fea-section-head-center {
	justify-content: center;
}

.fea-contatti-grid {
	align-items: flex-start;
	justify-content: center;
	text-align: center;
}

.fea-contatto {
	min-width: 200px;
}

.fea-contatto a {
	color: inherit;
	text-decoration: none;
}

.fea-contatto a:hover,
.fea-contatto a:focus {
	color: var(--wp--preset--color--accent);
}

/* Il riquadro con ragione sociale e P.IVA resta centrato e stretto.
   Il contentSize del blocco vale per i figli, non per il gruppo stesso:
   la larghezza va data qui. */
.fea-ragione-sociale {
	max-width: 460px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Dentro Contatti nessun paragrafo va tenuto a sinistra dalle utility
   di misura: qui tutto è centrato. */
.fea-contatti .fea-measure-44,
.fea-contatti .fea-measure-52,
.fea-contatti .fea-measure-62 {
	margin-left: auto !important;
	margin-right: auto !important;
}

.fea-card-body > .fea-list {
	margin-top: auto;
}

/* --- Form contatti (Contact Form 7 / fallback HTML) ---------------------- */

.fea-form .wpcf7-form,
.fea-form form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fea-form .fea-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* CF7 avvolge ogni campo in uno span: deve comportarsi da blocco */
.fea-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.fea-form form > p {
	margin: 0;
}

.fea-form label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 10.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--custom--on-dark-soft);
}

.fea-form input[type="text"],
.fea-form input[type="tel"],
.fea-form input[type="email"],
.fea-form textarea {
	width: 100%;
	background: transparent;
	border: 1px solid rgba(242, 240, 234, .25);
	border-radius: 0;
	color: var(--wp--preset--color--base);
	padding: 13px 14px;
	font-family: var(--wp--preset--font-family--archivo);
	/* Sotto i 16px Safari su iOS ingrandisce la pagina appena si tocca il
	   campo, e non la rimpicciolisce più: qui 16px è un vincolo, non una
	   scelta tipografica. */
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
}

.fea-form textarea {
	resize: vertical;
	min-height: 130px;
}

.fea-form input:focus,
.fea-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.fea-form input::placeholder,
.fea-form textarea::placeholder {
	color: rgba(242, 240, 234, .35);
}

.fea-form input[type="submit"],
.fea-form button[type="submit"] {
	align-self: flex-start;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	border: none;
	border-radius: 0;
	min-height: 44px;
	padding: 15px 32px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}

.fea-form input[type="submit"]:hover,
.fea-form button[type="submit"]:hover {
	background: var(--wp--preset--color--base);
}

.fea-form .wpcf7-response-output {
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	margin: 0;
	padding: 12px 14px;
}

.fea-form .wpcf7-not-valid-tip {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	color: #ff8a80;
	letter-spacing: 1px;
}

/* Il segnaposto shortcode, quando il plugin form non è ancora installato */
.fea-form > p:only-child {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--wp--custom--on-dark-soft);
	border: 1px dashed rgba(242, 240, 234, .25);
	padding: 24px;
	margin: 0;
}

/* --- Pagina Documentazione ----------------------------------------------- */

/* Chip filtro categoria */
.fea-chip .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--line);
	padding: 9px 18px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.fea-chip .wp-block-button__link:hover,
.fea-chip .wp-block-button__link:focus,
.fea-chip.is-active .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Riga documento */
.fea-doc-row {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.fea-doc-row + .fea-doc-row {
	border-top: 1px solid var(--wp--preset--color--line);
}

.fea-doc-icon {
	display: grid;
	place-items: center;
	min-width: 39px;
	height: 39px;
	padding: 0 6px;
	white-space: nowrap;
	flex: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--wp--preset--color--muted);
}

.fea-doc-meta {
	flex: 1 1 320px;
	min-width: 0;
}

.fea-doc-meta > * {
	margin: 0;
}

.fea-doc-badge {
	flex: none;
	background: var(--wp--preset--color--surface);
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

.fea-doc-actions {
	flex: none;
	margin-left: auto;
}

/* Riga nascosta dal filtro categoria */
.fea-doc-row[hidden] {
	display: none;
}

/* --- Footer -------------------------------------------------------------- */

.fea-footer-brand > * {
	margin: 0;
}

.fea-footer-links {
	display: flex;
	gap: 20px;
	letter-spacing: 1px;
}

.fea-footer a {
	text-decoration: none;
}

.fea-footer a:hover,
.fea-footer a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 781px) {

	.fea-header {
		position: static;
	}

	/* Con l'header non più sticky l'ancora non deve lasciare spazio sopra. */
	:target {
		scroll-margin-top: 0;
	}

	/* Se l'immagine dell'hero è stata ridimensionata dall'editor, porta
	   un'altezza fissa in stile inline: su un telefono quell'altezza occupa
	   mezzo schermo con un taglio deciso su un altro formato. Qui torna a
	   proporzione, a tutta larghezza della colonna. L'!important è l'unico modo
	   per avere ragione di uno stile inline. */
	.fea-hero-media img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
	}

	.fea-form .fea-form-row {
		grid-template-columns: 1fr;
	}

	.fea-doc-row {
		gap: 14px;
	}

	.fea-doc-actions {
		margin-left: 0;
		width: 100%;
	}

	.fea-doc-actions .wp-block-button,
	.fea-doc-actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.fea-hero-strip {
		flex-wrap: wrap;
	}
}

@media (max-width: 599px) {

	/* Su schermi stretti restano marchio e voce del menu: la riga descrittiva
	   sotto "FEA" ruberebbe lo spazio all'hamburger. */
	.fea-logo .fea-kicker {
		display: none;
	}

	.fea-doc-meta {
		flex-basis: 100%;
	}
}