/* ==========================================================================
   Header: blocco arancione dietro al logo, menu maiuscolo allineato a destra
   (replica del sito in produzione)
   ========================================================================== */

/* Il blocco arancione deve arrivare fino al bordo sinistro vero della pagina,
   non solo al bordo del padding dell'header. Margine negativo pari al padding
   dell'header per allargare il box, padding positivo della stessa misura per
   riportare il logo nella sua posizione visiva originale (il logo non si sposta,
   solo lo sfondo si estende). Altezza 90px = altezza header impostata in admin
   (param "header_height" dello stile del template, non deducibile dal solo
   custom.css statico: verificato via query diretta al DB). */
#sp-logo {
	background-color: #fea520;
	height: 90px;
	display: flex;
	align-items: center;
	margin-left: -45px;
	padding-left: 80px;
	padding-right: 25px;
	transition: height 0.25s ease;
}

@media (max-width: 991.98px) {
	#sp-logo {
		/* Sotto i 991.98px l'header nativo di Helix Ultimate è già 60px (non 90),
		   quindi il blocco arancione resta alla misura piccola qui */
		height: 60px;
		margin-left: -15px;
		padding-left: 15px;
	}
}

@media (max-width: 575.98px) {
	#sp-logo {
		/* Sotto i 575.98px l'header nativo scende ulteriormente a 50px: senza
		   questo il blocco arancione (fermo a 60px) sbordava sotto l'header */
		height: 50px;
	}
}

/* Header sticky: Helix Ultimate aggiunge la classe "header-sticky" a #sp-header
   in scroll (main.js) ma non rimpicciolisce nulla di suo (nessuna regola nativa
   trovata in template.css/presets) — va gestito qui. Sotto i 991.98px l'header
   è già a 60px di base, quindi lo sticky non deve ridurlo ulteriormente. */
@media (min-width: 992px) {
	#sp-header.header-sticky {
		height: 60px;
	}

	#sp-header.header-sticky #sp-logo {
		height: 60px;
	}

	#sp-header.header-sticky .logo-image {
		height: 40px !important;
		transition: height 0.25s ease;
	}

	/* Stessa altezza del box, sempre in coppia in Helix Ultimate (vedi
	   template.css: ad ogni breakpoint "height" e "line-height" del menu
	   cambiano insieme), altrimenti le voci di menu restano centrate sulla
	   vecchia altezza di 90px e appaiono spostate verso il basso */
	#sp-header.header-sticky .sp-megamenu-parent > li > a,
	#sp-header.header-sticky .sp-megamenu-parent > li > span {
		line-height: 60px;
	}
}

/* Logo nel pannello off-canvas (menu mobile): stesso logo.png dell'header, ma
   qui è su sfondo bianco invece che sul blocco arancione — il file è un
   marchio bianco/chiaro su trasparenza (verificato campionando i pixel),
   quindi senza uno sfondo scuro risulta praticamente invisibile. Stesso
   trattamento arancione dell'header, adattato al box più piccolo. */
.offcanvas-menu .logo {
	display: inline-block;
	background-color: #fea520;
	padding: 8px 14px;
	border-radius: 4px;
}

/* Menu maiuscolo e allineato a destra (invece che centrato), con più margine
   dal bordo destro */
.sp-megamenu-parent > li > a {
	text-transform: uppercase;
}

.sp-megamenu-wrapper {
	justify-content: flex-end !important;
	padding-right: 40px;
}

@media (max-width: 991.98px) {
	.sp-megamenu-wrapper {
		padding-right: 0;
	}
}

/* Font del sito in produzione: Open Sans per il corpo, Roboto Slab per h2/h3 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto+Slab:wght@400;700&display=swap');

/* ==========================================================================
   Font e colori
   ========================================================================== */

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

h1, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
}

h2 {
	font-family: 'Roboto Slab', serif;
	font-weight: normal;
	font-size: 35px;
}

h3 {
	font-family: 'Roboto Slab', serif;
	font-weight: normal;
	font-size: 19px;
}

/* Interlinea del sito in produzione, su tutti i paragrafi */
p {
	font-size: 16px;
	line-height: 32px;
}

/* Blu del brand (menu, link, bottoni) */
a {
	color: #26aae1;
}

a:hover,
a:focus {
	color: #1a8bba;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
	color: #26aae1;
}

.btn-primary {
	background-color: #26aae1 !important;
	border-color: #1c98cc !important;
	color: #ffffff !important;
}

.btn-primary:hover {
	background-color: #1a8bba !important;
	border-color: #177aa4 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   Titoli di sezione (come in produzione): h2 grigio maiuscolo con rigo
   arancione sotto, h3 maiuscolo con spaziatura lettere (diventa blu quando
   è dentro un link, es. le card teaser della Home, per ereditarietà da "a")
   ========================================================================== */

#sp-main-body h2 {
	position: relative;
	text-align: center;
	text-shadow: 0 0 12px #cecece;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 0;
	/* !important perché nel markup alcuni h2 hanno ancora la classe Bootstrap
	   "mb-4" (margin-bottom:1.5rem!important) che altrimenti vincerebbe */
	margin-bottom: 50px !important;
	color: #656565;
}

#sp-main-body h2::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 50px);
	width: 100px;
	height: 3px;
	margin-top: 15px;
	background: #fea520;
}

#sp-main-body h3 {
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* Pagina Contatti: icone più grandi e grigio chiaro, come in produzione */
#contatti .fa {
	font-size: 35px;
	color: #aaaaaa;
	text-align: center;
}

/* ==========================================================================
   Prefooter "sp-bottom" (moduli Contattaci ora / GTE CASA), presente su
   tutte le pagine. La section #sp-bottom la genera già Helix Ultimate per le
   posizioni bottom1/bottom2 (di suo con uno sfondo arancione di default),
   qui sovrascriviamo con l'immagine e i colori della produzione.
   ========================================================================== */

#sp-bottom {
	background-color: transparent;
	background-image: url('../../../images/bg-prefooter.jpg');
	background-size: cover;
	background-position: center;
	padding: 30px 0;
	color: #656565;
}

/* Le due colonne di Helix Ultimate arrivano con classi larghezza sbagliate
   (col-lg-3/col-lg-9, 25%/75% invece di 50/50 come in produzione): forziamo
   la larghezza corretta a prescindere dalle classi Bootstrap generate. */
#sp-bottom1,
#sp-bottom2 {
	flex: 0 0 50% !important;
	max-width: 50% !important;
	width: 50% !important;
}

@media (max-width: 767.98px) {
	#sp-bottom1,
	#sp-bottom2 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* display:inline-block: l'h2 si restringe alla larghezza del testo, così la
   sottolineatura sotto (vedi ::after) si posiziona sul testo e non su tutta
   la colonna (che è molto più larga del testo stesso) */
#sp-bottom h2 {
	position: relative;
	display: inline-block;
	text-align: left;
	text-transform: uppercase;
	text-shadow: none;
	margin-bottom: 20px;
	letter-spacing: 1px;
	color: #656565;
}

#sp-bottom h2::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 0;
	width: 80px;
	height: 1px;
	background: #656565;
}

#sp-bottom p {
	font-size: 19px;
	line-height: 17px;
	text-align: left;
}

/* In produzione la sottolineatura sparisce sotto i 768px (colonne impilate,
   niente più bisogno di ancorarla al testo) */
@media (max-width: 767.98px) {
	#sp-bottom h2::after {
		display: none;
	}
}

/* Colonna destra (GTE CASA): in produzione, solo da 768px in su, titolo e
   testo sono allineati a destra invece che a sinistra come la colonna
   sinistra (sotto i 768px le colonne sono impilate e restano entrambe a
   sinistra). L'h2 qui torna block (a tutta larghezza) invece di
   inline-block: da inline-block il box si restringe al testo e resta
   ancorato a sinistra della colonna, quindi "text-align:right" agirebbe
   solo dentro quel box stretto senza spostarlo davvero a destra. */
@media (min-width: 768px) {
	#sp-bottom2 h2 {
		display: block;
		text-align: right;
	}

	#sp-bottom2 p {
		text-align: right;
	}

	#sp-bottom2 h2::after {
		left: auto;
		right: 0;
	}
}

#sp-bottom a {
	color: #000000;
}

#sp-bottom a:hover {
	color: #656565;
}

/* Sezione Chi siamo (teaser Home): sfondo dedicato come in produzione */
#chi-siamo {
	background-image: url('../../../images/bg-chi-siamo.jpg');
	background-size: cover;
	background-position: center;
	padding-top: 90px;
	padding-bottom: 90px;
}

#chi-siamo p {
	text-align: center;
	padding: 0 10px;
}

/* Rimuove il padding verticale di default di #sp-main-body (100px top/bottom da template.css) */
#sp-main-body {
	padding-top: 0;
	padding-bottom: 0;
}

/* Nasconde la toolbar di modifica rapida articolo (visibile solo agli utenti loggati
   con permessi di edit). Serve !important perché l'elemento ha anche la classe
   Bootstrap "d-flex" che applica display:flex!important. */
.article-can-edit {
	display: none !important;
}

/* ==========================================================================
   Sezione 1 (Home): hero slider full-width (esce dal container Bootstrap
   dell'articolo fino al bordo del viewport)
   ========================================================================== */

#hero-slider {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 50px;
}

.gte-hero-img {
	height: 60vh;
	min-height: 320px;
	max-height: 685px;
	object-fit: cover;
}

/* ==========================================================================
   Home: card teaser (Chi Siamo / Servizi / Lavori)
   ========================================================================== */

.gte-teaser-img {
	height: 220px;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
}

.gte-teaser-card a {
	text-decoration: none;
}

/* ==========================================================================
   Servizi: banner immagine sotto al titolo di ogni sezione
   ========================================================================== */

.gte-banner-img {
	height: 320px;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	margin: 20px 0;
}

/* ==========================================================================
   Lavori: gallerie con lightbox (vanilla, nessun plugin) — stesso pattern
   collaudato su laguerriera.it
   ========================================================================== */

.lg-gallery-item {
	display: block;
	overflow: hidden;
	cursor: pointer;
	position: relative;
}

.lg-gallery-item img {
	transition: transform 0.3s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lg-gallery-item:hover img {
	transform: scale(1.06);
}

.lg-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.lg-lightbox-overlay.active {
	display: flex;
}

.lg-lightbox-img-wrap {
	max-width: 90vw;
	max-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lg-lightbox-img {
	max-width: 90vw;
	max-height: 78vh;
	object-fit: contain;
	cursor: zoom-in;
	transition: transform 0.25s ease;
}

.lg-lightbox-img.zoomed {
	transform: scale(1.9);
	cursor: zoom-out;
}

.lg-lightbox-caption {
	color: #ffffff;
	margin-top: 18px;
	font-size: 16px;
	text-align: center;
	padding: 0 20px;
}

.lg-lightbox-counter {
	color: #cccccc;
	font-size: 13px;
	margin-top: 4px;
}

.lg-lightbox-close,
.lg-lightbox-prev,
.lg-lightbox-next {
	position: absolute;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 12px 18px;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.lg-lightbox-close:hover,
.lg-lightbox-prev:hover,
.lg-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.28);
}

.lg-lightbox-close {
	top: 20px;
	right: 20px;
	font-size: 28px;
	padding: 6px 14px;
}

.lg-lightbox-prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.lg-lightbox-next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 767.98px) {
	.lg-lightbox-prev,
	.lg-lightbox-next {
		padding: 8px 12px;
		font-size: 18px;
	}
}