/* Errebi — personalizzazioni CSS.
   Vivono solo in questo file, in blocchi commentati. */

/* Errebi — Font del tema auto-ospitati.
   Poppins (300-800) e Shadows Into Light erano caricati da fonts.googleapis.com:
   ogni visita trasferiva l'indirizzo IP dell'utente a Google anche senza
   consenso ai cookie e aggiungeva una connessione esterna. I file sono ora in
   fonts/ (solo subset latino, 62 KB in tutto) e vengono serviti dal sito.
   Le regole coprono gli stessi pesi e lo stesso nome famiglia usati dal tema,
   quindi assets/porto/css/theme.css non va toccato. In fase CMS: questi file diventano gli
   asset del sito e questo blocco resta nel layout. */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/poppins-300-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/poppins-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/poppins-500-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/poppins-800-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Shadows Into Light';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/shadows-into-light-400-latin.woff2') format('woff2');
}

/* Errebi — Hero home: dimensione del testo display.
   La demo Construction e' tarata su titoli corti ("BUILDING DREAMS"); i nostri
   sono piu' lunghi e a certe larghezze uscivano dal contenitore.
   La misura viene quindi resa fluida (minimo, preferenza in vw, massimo). */
.custom-big-text-style-1 {
	font-size: clamp(2rem, 7.5vw, 6.5rem);
}

/* Errebi — alternanza dei fondi di sezione.
   Due classi esplicite, cosi' l'ordine bianco/grigio non dipende dal tema
   (il tema applica --grey-100 al fondo pagina: qui lo rendiamo dichiarato). */
.main > section.errebi-section-alt {
	background-color: var(--grey-100, #f4f4f4);
}

.main > section.errebi-section-plain {
	background-color: #fff;
}

/* Errebi — badge testuali (partner tecnologici, elenchi di marchi).
   Usati dove i loghi ufficiali non esistono o non sono autorizzati. */
.errebi-badge {
	display: inline-block;
	background-color: #fff;
	border: 1px solid #e8e8e8;
	padding: 8px 24px;
	font-weight: 600;
}

/* Errebi — loghi partnership tecnologiche (media/errebi/partners/).
   I file hanno formati molto diversi (wordmark larghi e leggeri, lockup quadrati
   con simbolo, scansioni a bassa risoluzione): a ogni logo e' assegnata una cella
   che segue il proprio formato, scelta a occhio per pareggiare il peso dei marchi
   e mantenere uniforme lo spazio tra un logo e l'altro.
   Con object-fit il logo resta dentro la cella senza deformarsi; la cella e'
   centrata nella colonna (text-align: center della riga), quindi i marchi
   risultano allineati al centro della propria riga.
   Per ritoccare un logo basta cambiare le due variabili della sua classe. */
.errebi-partner-logo {
	--errebi-logo-larghezza: 130px;
	--errebi-logo-altezza: 34px;
	width: min(var(--errebi-logo-larghezza), 100%);
	height: var(--errebi-logo-altezza);
	object-fit: contain;
}

/* La riga dei loghi e' tenuta entro una larghezza controllata: cosi' l'andata a
   capo e' sempre 4 + 3 (centrata) e non cambia con la larghezza della finestra.
   Il valore e' tarato sulle celle sopra: 4 loghi entrano, 5 no. */
.errebi-partner-row {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Errebi — loghi delle piattaforme di supervisione
   (pagina Tecnologie > Supervisione (BMS)).
   Qui il logo sta in un riquadro bianco e non in una fascia di marchi: una sola
   larghezza massima per tutti (l'altezza segue il formato del file) e un ritocco
   verso il basso sul solo logo Trend, disponibile a bassa risoluzione. */
.errebi-tech-logo {
	display: block;
	max-width: 160px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.errebi-tech-logo.errebi-tech-logo--trend {
	max-width: 110px;
}

/* Wordmark larghi: tenuti piu' bassi, cosi' non dominano la riga. */
.errebi-partner-logo--tridium { --errebi-logo-larghezza: 141px; --errebi-logo-altezza: 23px; }
.errebi-partner-logo--siemens { --errebi-logo-larghezza: 116px; --errebi-logo-altezza: 28px; }
.errebi-partner-logo--honeywell { --errebi-logo-larghezza: 128px; --errebi-logo-altezza: 23px; }
.errebi-partner-logo--trend { --errebi-logo-larghezza: 111px; --errebi-logo-altezza: 20px; }

/* Lockup con simbolo: piu' alti, perche' a parita' di altezza risultano piccoli. */
.errebi-partner-logo--j2 { --errebi-logo-larghezza: 126px; --errebi-logo-altezza: 25px; }
.errebi-partner-logo--belimo { --errebi-logo-larghezza: 93px; --errebi-logo-altezza: 36px; }
.errebi-partner-logo--jci { --errebi-logo-larghezza: 82px; --errebi-logo-altezza: 38px; }

/* Errebi — titolo di pagina lungo (pagine dei servizi).
   Il titolo del template sta su una riga, e la fascia scura che gli sta dietro
   e' dimensionata di conseguenza: con i titoli dei servizi, piu' lunghi, la
   fascia va alzata per contenere anche la seconda riga e sui telefoni il testo
   va staccato dal bordo destro dello schermo.
   La classe si mette sull'<h1> della pagina. */
.errebi-titolo-lungo .custom-svg-position-1 > svg {
	min-height: 126px;
}

@media (max-width: 575px) {
	.errebi-titolo-lungo {
		padding-right: 1.5rem;
	}
}

/* Errebi — "Fasi di implementazione": tappe numerate al posto dell'elenco
   puntato. Le fasi stanno su due colonne e ogni tappa ha il numero in
   evidenza; qui il numero riceve una larghezza minima, cosi' i testi delle
   tappe restano allineati tra loro (le cifre del font non sono monospaziate). */
.errebi-fase-numero {
	flex: 0 0 auto;
	min-width: 1.4em;
}

/* Errebi — icone del blocco contatti del footer (colonna "Contatti").
   Telefono ed email usano gli SVG del tema (23px), fax e sede due icone
   FontAwesome di larghezza diversa: qui anche queste ultime ricevono la stessa
   larghezza, cosi' i quattro testi partono tutti dallo stesso punto. */
.errebi-contatto-icona {
	flex: 0 0 23px;
	text-align: center;
}

/* Errebi — riquadro con i dati della sede (pagina contatti).
   Stesso grigio delle sezioni alternate: il bg-light di Bootstrap e' troppo
   chiaro e sul fondo bianco il riquadro non si distingueva. */
.errebi-card-grey {
	background-color: var(--grey-100, #f4f4f4);
}

/* Errebi — partnership tecnologiche in card (pagina chi-siamo).
   Un riquadro per marchio, tutti della stessa altezza: il logo e' centrato
   dentro la card e rimpicciolito rispetto alla fila di loghi della home, dove
   la cella e' piu' larga (qui la card e' larga un quarto della colonna).
   La card e' bianca sul fondo bianco della pagina: a distinguerla ci pensa
   un'ombra leggera, non un bordo. */
.errebi-partner-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	padding: 1.25rem 1rem;
	background-color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}

.errebi-partner-card .errebi-partner-logo {
	width: min(calc(var(--errebi-logo-larghezza) * 0.85), 100%);
}
/* Errebi — footer: quadrato decorativo nero a destra.
   Il template ancora questo blocco al bordo superiore del footer (classe
   top-0): dentro c'e' un quadrato di 626px ruotato di 48 gradi che sporge
   oltre il bordo destro, quindi la porzione visibile dipende dall'altezza del
   footer e il resto viene tagliato dal suo overflow-hidden. Accorciando il
   footer (padding ridotti) il quadrato finiva fuori dall'area visibile e
   spariva: qui viene alzato di 7rem, cosi' il "triangolo" nero torna visibile
   quanto prima. Se in futuro si cambia ancora l'altezza del footer, si ritocca
   solo questo valore. */
.errebi-footer-decorazione {
        top: -7rem;
}/* Errebi — Hero home: velo sfocato dietro al testo.
   Nella slide 1 il titolo bianco cade su una parete di monitor molto
   dettagliata: questo velo sfoca e scurisce appena la parte centrale/destra
   della foto (dove passano titolo, etichette e didascalia) e lascia nitida la
   parte sinistra dell'immagine. E' un "vetro smerigliato": nessuna immagine
   duplicata, agisce sul fondo con backdrop-filter e sfuma con una maschera a
   gradiente. Va inserito come primo figlio di .owl-item, prima del .container
   (che ha z-index-1 e resta quindi sopra il velo). */
.errebi-hero-veil {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: linear-gradient(to right,
                rgba(8, 17, 26, 0) 6%,
                rgba(8, 17, 26, 0.16) 34%,
                rgba(8, 17, 26, 0.32) 58%,
                rgba(8, 17, 26, 0.32) 100%);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.45) 33%, #000 56%, #000 100%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.45) 33%, #000 56%, #000 100%);
}

/* Sotto il breakpoint lg il titolo e' allineato a sinistra e la foto viene
   ritagliata al centro: il velo si sposta sulla meta' sinistra. */
@media (max-width: 991px) {
        .errebi-hero-veil {
                background-image: linear-gradient(to right,
                        rgba(8, 17, 26, 0.32) 0%,
                        rgba(8, 17, 26, 0.32) 46%,
                        rgba(8, 17, 26, 0.16) 74%,
                        rgba(8, 17, 26, 0) 94%);
                -webkit-mask-image: linear-gradient(to right, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0) 94%);
                mask-image: linear-gradient(to right, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0) 94%);
        }
}

/* Errebi — Footer: contrasto dei testi.
   Il tema e' tarato su un footer scuro: i link sono --default (#777) e su
   hover/focus tendono a schiarirsi (--light, --grey-500), illeggibili sul
   nostro fondo chiaro. Qui i link delle liste e le righe di copyright usano un
   grigio piu' scuro, #5f5f5f: 6,4:1 su bianco e 5,8:1 sul grigio --grey-100
   (WCAG AA per il testo normale). Lo stato :focus/:active resta scuro invece di
   diventare chiaro.
   La regola del tema ha specificita' (1,2,1) per via dei suoi
   :not(.btn):not(.no-footer-css), quindi i selettori la pareggiano (1,2,2). */
#footer ul.list a:not(.btn),
#footer .footer-copyright p,
#footer .footer-copyright p a:not(.btn) {
	color: #5f5f5f;
}

#footer ul.list a:not(.btn):focus,
#footer ul.list a:not(.btn):active,
#footer .footer-copyright p a:not(.btn):focus,
#footer .footer-copyright p a:not(.btn):active {
	color: #212529;
}

/* Errebi — Marchio (logo) colorabile dal CSS.
   Il marchio e' un SVG inline (theme/partials/logo.html): `fill`/`stroke` sono
   proprieta' CSS e gli attributi di presentazione hanno specificita' 0, quindi
   queste regole vincono sempre e il colore si sceglie per contesto tramite le
   variabili --errebi-logo-simbolo / --errebi-logo-scritta.
   Default = simbolo blu #4285D3 e scritta nel **colore primario del sito**: la
   scritta segue la palette (--primary), quindi cambia da sola insieme al
   primario (il primario sta nella skin del tema).
   Il colore e' animato, cosi' il passaggio bianco -> colorato non e' brusco. */
.errebi-logo-simbolo {
	fill: var(--errebi-logo-simbolo, #4285D3);
	stroke: var(--errebi-logo-simbolo, #4285D3);
}

.errebi-logo-scritta {
	fill: var(--errebi-logo-scritta, var(--primary));
}

.errebi-logo-simbolo,
.errebi-logo-scritta {
	transition: fill 300ms, stroke 300ms;
}

/* L'<img> del tema era position:relative (sopra il rombo, che e' un ::before
   assoluto): si mantiene anche sull'SVG inline. */
#header .header-logo .logo,
#footer .logo {
	position: relative;
}

/* Default del sito per il marchio dell'header, con la palette del tema: nero sulla
   barra chiara (header sticky e sotto il breakpoint lg). Sopra il rombo arancione,
   da lg in su, il marchio e' invece bianco: la regola sta piu' sotto, dentro il
   media query, ed e' piu' specifica. Footer e casella di "Chi siamo" usano il
   default del marchio (simbolo blu e scritta nel primario). */
#header .header-logo {
	--errebi-logo-simbolo: #000;
	--errebi-logo-scritta: #000;
}

/* Il tema gestisce il logo scambiando due <img> (.logo e .logo-sticky, quest'ultimo
   allineato con translate3d(-100%,0,0)): qui il marchio e' uno solo che cambia
   colore, quindi le regole che nascondevano .logo vanno annullate. */
html.sticky-header-active #header .header-logo .logo {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (min-width: 992px) {
	/* Sopra il rombo arancione (solo da lg in su e solo quando il header non e'
	   sticky: sotto lg il tema rimuove il rombo, in sticky la barra e' chiara) il
	   marchio e' tutto bianco e spostato di 13px a sinistra per centrarlo sulla
	   forma. Con transform e non con margin: un margine sposterebbe anche il
	   layout attorno. */
	html:not(.sticky-header-active) #header .header-logo {
		--errebi-logo-simbolo: #fff;
		--errebi-logo-scritta: #fff;
	}

	html:not(.sticky-header-active) #header .header-logo .logo {
		transform: translateX(-13px);
	}
}

@media (max-width: 991px) {
	/* Sotto lg il tema nasconde .logo e mostra .logo-sticky: qui il marchio e' uno
	   solo, quindi resta visibile con i colori del marchio. */
	html #header .header-logo .logo {
		display: inline-block;
	}
}

/* Errebi — foto segnaposto (pagina Chi siamo).
   Le fotografie aziendali arriveranno dal cliente: nel frattempo la casella
   della foto di "Chi siamo" tiene l'ingombro dell'immagine precedente (802x350,
   il segnaposto grigio della demo) e centra il marchio Errebi, cosi' il layout
   non cambia quando arrivera' la foto vera. Per rimettere la foto basta
   ripristinare l'<img> al posto del <div> e togliere questo blocco, tranne
   position e overflow, che servono allo sfondo particellare qui sotto.
   Sotto il breakpoint lg la casella resta a piena larghezza ma diventa piu' alta
   (vedi la media query in fondo al blocco): in formato orizzontale resterebbe una
   fascia bassa, con la superficie particellare schiacciata e il marchio
   minuscolo. */
.errebi-foto-segnaposto {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 802 / 350;
	padding: 2rem;
	background-color: var(--grey-100, #f4f4f4);
}

/* Errebi — sfondo particellare della casella della foto (il disegno e' in
   theme/script.js: il grafico a punti di una superficie sinusoidale casuale).
   Livello decorativo dietro il contenuto: a tutto riquadro, e senza
   intercettare il mouse, perche' i movimenti del puntatore li legge il
   contenitore .errebi-foto-segnaposto. I punti sono in toni di grigio
   (l'arancio della palette resta riservato al logo). */
.errebi-particelle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Il marchio nella casella e' l'SVG inline condiviso (theme/partials/logo.html),
   non piu' un <img>: la scritta usa il colore primario del sito, quindi segue la
   palette del tema e non resta piu' sull'arancio del file. Il fondo della casella
   e' chiaro, come il footer: le varianti del pannello "Tema" sono le sue. */
.errebi-foto-segnaposto > .logo {
	position: relative;
	z-index: 1;
	width: min(45%, 320px);
	height: auto;
}

@media (max-width: 991px) {
	/* Sotto lg la colonna dei contenuti e' a piena larghezza: la casella la riempie
	   tutta (nessuno spazio laterale) e prende un'altezza fissa, piu' alta del
	   formato orizzontale, che in questa fascia sarebbe una fascia bassa con la
	   superficie particellare schiacciata e il marchio minuscolo. Il rapporto del
	   desktop va annullato, altrimenti e' lui a decidere la larghezza. */
	.errebi-foto-segnaposto {
		aspect-ratio: auto;
		height: 28rem;
	}

	.errebi-foto-segnaposto > .logo {
		width: min(70%, 280px);
	}
}

/* Errebi — icona LinkedIn nei recapiti di "Contatti".
   In arancio, come le altre icone di quella riga, il marchio non si riconosceva
   a colpo d'occhio: qui usa il blu, lo stesso #0073b2 che il tema applica
   all'hover delle icone social, cosi' la palette resta coerente. */
.errebi-icona-linkedin {
	color: #0073b2;
}
/* Errebi — campo esca del modulo contatti.
   Deve esistere nel DOM (i bot lo compilano) ma restare fuori dallo schermo,
   senza occupare spazio e senza comparire nella navigazione da tastiera:
   il modulo della pagina contatti usa tabindex="-1" e aria-hidden="true" sull'input. */
.errebi-esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Errebi — Consenso cookie (theme/partials/cookie-banner.html).
   Il banner usa le classi gdpr-* del tema (css/theme-elements.css): qui ci sono
   solo l'adattamento al marchio, la disposizione dei pulsanti e il pannello
   delle preferenze. Lo stato aperto/chiuso e' gestito da theme/script.js con le
   classi .show / .removing gia' previste dal tema.
   In fase CMS va rimosso insieme al partial e al blocco JS. */
.errebi-consenso-bar {
        background: #1c1c1c;
        border-top: 3px solid var(--primary);
        padding: 1.25rem 1.5rem;
        gap: 1rem;
}

.errebi-consenso-bar .gdpr-bar-description {
        max-width: 68rem;
}

.errebi-consenso-azioni {
        gap: .75rem;
        flex-wrap: wrap;
}

@media (min-width: 576px) {
        .errebi-consenso-azioni {
                justify-content: flex-end;
        }
}

.errebi-consenso-azioni .btn-link {
        font-weight: 600;
        text-decoration: none;
}

.errebi-consenso-azioni .btn-link:hover,
.errebi-consenso-azioni .btn-link:focus-visible {
        color: var(--light);
        text-decoration: underline;
}

.errebi-consenso-azioni .btn:focus-visible,
.errebi-consenso-pannello button:focus-visible,
.errebi-consenso-interruttore .form-check-input:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
}

@media (max-width: 575.98px) {
        .errebi-consenso-azioni {
                flex-direction: column;
                align-items: stretch;
        }

        .errebi-consenso-azioni .btn {
                width: 100%;
                margin: 0;
        }
}

.errebi-consenso-pannello {
        width: 100%;
        max-width: 760px;
        max-height: calc(100vh - 2rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
}

.errebi-consenso-pannello .gdpr-preferences-popup-content-body {
        max-height: none;
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 2rem;
}

.errebi-consenso-pannello-footer {
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1.25rem 2rem;
}

.errebi-consenso-interruttore {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin: 0;
        cursor: pointer;
        font-weight: 600;
}

.errebi-consenso-interruttore .form-check-input {
        margin: 0;
        float: none;
        width: 2.75rem;
        height: 1.4rem;
        cursor: pointer;
}

.errebi-consenso-popup .gdpr-close-popup {
        top: 1rem;
        right: 1rem;
        z-index: 2;
}

@media (max-width: 767.98px) {
        .errebi-consenso-pannello .gdpr-preferences-popup-content-body {
                padding: 1.5rem;
        }

        .errebi-consenso-pannello-footer {
                padding: 1rem 1.5rem;
        }

        .errebi-consenso-pannello-footer .btn {
                flex: 1 1 auto;
        }
}