/* 
Theme Name: E.R. Theme
Text Domain: E.R. Theme
Version: 1.0
Description: Custom Theme
Author: Fabio P.  
*/

/* palette color
  green: #7DAF30;
  blue: #011F40;
  blue-divise: #05358b;
  blue-grey: #6387ac;
  grey: #425161;
  light-grey: #d1d9dc;
  dark-grey: #474e48;
  dark-blue: #0a2547;
  yellow: #f9ec21;
  white: #FEFEFE
*/

:root {
  --bs-brand: #7daf30;
  --txt-brand: #5a140d;
  --secondary-color: #1c5c34;
  --blu-custom: #0a2547;

  /* --- Posizione header: modifica solo questi valori --- */
  --header-padding-top: 1.6rem; /* distanza dal bordo superiore della pagina */
  --header-padding-x: 1.6rem; /* distanza di logo/menu dai bordi sinistro e destro */

  --logo-offset-x: 0px; /* sposta il logo: positivo = destra, negativo = sinistra */
  --logo-offset-y: 0px; /* sposta il logo: positivo = giù, negativo = su */

  --menu-offset-x: 0px; /* sposta le voci di menu: positivo = destra, negativo = sinistra */
  --menu-offset-y: 0px; /* sposta le voci di menu: positivo = giù, negativo = su */
}

/* Il tag <mark> (usato dall'editor per il colore del testo) ha di default
   uno sfondo giallo acceso nel browser: lo neutralizziamo, cosi' non
   dipende da cosa l'editor salva volta per volta nello style inline. */
mark {
  background-color: transparent;
  padding: 0;
}

.cstm-bg-text-logo {
  color: #7daf30;
  font-weight: bold;
  font-size: 0.8rem;
  border-radius: 0.5rem;
  border-radius: 0.5rem;
  background: radial-gradient(
    ellipse at center,
    rgba(82, 82, 82, 0.6) 0%,
    rgba(72, 72, 72, 0) 75%
  );
}

/* border-radius: 0.5rem;
  background: radial-gradient( ellipse at center, rgba(82, 82, 82, 0.6) 0%, rgba(72, 72, 72, 0) 75% ); */

.p-left {
  padding-left: 3.1rem;
}

/* --- Container / grid --- */
.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.container {
  max-width: 1140px;
}

/* --- Flex utility --- */
.d-flex {
  display: flex;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.grid-gap-4 {
  display: grid;
  gap: 4px;
}

.gap-2 {
  gap: 0.5rem;
}

.h-5 {
  height: 5rem;
}

/* --- Spaziatura / testo --- */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.p-2 {
  padding: 0.5rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pl-1-5 {
  padding-left: 1.5rem;
}

.pl-10 {
  padding-left: 10rem;
}

.pl-23 {
  padding-left: 23px;
}

.pl-24 {
  padding-left: 24px;
}

.pl-57 {
  padding-left: 24px;
}

.pl-180 {
  padding-left: 180px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ms-auto {
  margin-left: auto;
}

.text-decoration-none {
  text-decoration: none;
}

.text-center {
  text-align: center;
}

.text-light {
  color: #f8f9fa;
}

.bg-blue {
  background-color: var(--blu-custom);
}

.bg-transparent {
  background-color: transparent;
}

.border-bottom-0 {
  border-bottom: 0;
}

.f-small {
  font-size: small;
}

.small {
  font-size: 0.875em;
}

/* --- Navbar --- */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  white-space: nowrap;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.375rem;
  cursor: pointer;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

/* --- Dropdown --- */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.3em;
  vertical-align: 0.15em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  list-style: none;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu-end {
  right: 0;
  left: auto;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.35rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #e9ecef;
}

.dropdown-item.active {
  color: #fff;
  background-color: var(--bs-brand);
}

.header-wrapper {
  /* align-items: flex-start !important; */
  display: flex;
  margin-top: var(--header-padding-top);
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);
}

.header-wrapper .navbar-brand {
  transform: translate(var(--logo-offset-x), var(--logo-offset-y));
}

.header-wrapper #navbarMain {
  transform: translate(var(--menu-offset-x), var(--menu-offset-y));
}

.bg-color-brand {
  background-color: var(--bs-brand);
}

.color-brand {
  color: var(--bs-brand);
}

.p-custom {
  padding: 0.5rem;
}

.custom-logo {
  /* margin-top: 2rem; */
  /* -webkit-box-shadow: 0px 0px 48px 7px rgba(0, 0, 0, 0.59);
  box-shadow: 1px 1px 48px 7px rgba(255, 255, 255, 0.74); */
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
  border-radius: 70px;
}

.main-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.brand-text {
  font-family: "Inter", sans-serif;
}

/* Nel footer il logo (a differenza di quello in navbar, ridotto sotto i 767.98px)
   resta alla sua dimensione piena: il testo, centrato verticalmente dal flex del
   genitore, finisce visivamente troppo in basso rispetto al logo. Lo alziamo con
   un padding-bottom cosi' il centro "visivo" del testo sale rispetto al centro
   geometrico della riga. */
footer .brand-text {
  padding-bottom: 0.6rem;
}

.brand-name {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 4px;
  margin-bottom: 2px;
}

.brand-payoff {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav .nav-link {
  position: relative;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  transition: color 0.2s ease;
  /* text-shadow: 1px 1px 1px #8c8c8c; */
}

.main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.1rem;
  height: 2px;
  background-color: var(--bs-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  color: var(--bs-brand);
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link:focus::after {
  transform: scaleX(1);
}

.text-gradient {
  background: linear-gradient(90deg, var(--txt-brand), #15392d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-outline {
  -webkit-text-stroke: 1px #00000040;
}

.front-page-content > * {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.front-page-content > .alignwide {
  max-width: 1320px;
}

.front-page-content > .alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.front-page-content .wp-block-cover .wp-block-heading {
  /* scala tra min e max in base alla larghezza dello schermo, invece di restare fissa a 3.7rem */
  font-size: clamp(2.2rem, 4.5vw, 3.7rem) !important;
}

/* --- Larghezza da card: restringe un blocco (Gruppo, Copertina, ecc.) invece di farlo
   occupare tutta la riga. Seleziona il blocco -> Avanzate -> "Classi CSS aggiuntive" ->
   aggiungi: card-narrow. Cambia solo --card-width per regolare quanto e' larga. */
.card-narrow {
  --card-width: 300px;
  width: 100%;
  max-width: var(--card-width);
  margin-left: auto;
  margin-right: auto;
}

/* --- Card con immagine a piena larghezza in cima ---
   Sul Gruppo esterno (senza padding): Avanzate -> "Classi CSS aggiuntive" -> card-media.
   L'immagine deve essere il primo blocco dentro, il resto (icona/titolo/testo) va in un
   Gruppo interno separato con il suo padding. */
.card-media {
  overflow: hidden;
}

.card-media > figure:first-child img,
.card-media > img:first-child {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin: 0;
}

/* --- Icona a cavallo tra la foto e la parte bianca ---
   Da mettere sul blocco dell'icona (deve essere il primo elemento del Gruppo
   interno con padding, subito dopo l'immagine): Avanzate -> "Classi CSS
   aggiuntive" -> card-icon-badge. Il margine negativo la tira su a meta'
   sul bordo, niente position:absolute necessario. */
.icon-badge img {
  width: 48px;
  height: 48px;
  margin-top: -30px;
  margin-bottom: 0.75rem;
  background-color: #fff;
  display: flex;
  margin-right: 15rem;
}

.d-flex-content-center {
  display: flex;
  justify-content: center;
}

/* --- Card con effetto hover: immagine che si scurisce e testo che appare ---
   Da usare sul blocco Cover: seleziona il blocco -> Avanzate -> "Classi CSS aggiuntive" -> aggiungi: card-hover-reveal */
.card-hover-reveal {
  overflow: hidden;
}

.card-hover-reveal .wp-block-cover__background {
  opacity: 0.25 !important;
  transition: opacity 0.35s ease;
}

.card-hover-reveal:hover .wp-block-cover__background,
.card-hover-reveal:focus-within .wp-block-cover__background {
  opacity: 0.75 !important;
}

.card-hover-reveal .wp-block-cover__inner-container {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.card-hover-reveal:hover .wp-block-cover__inner-container,
.card-hover-reveal:focus-within .wp-block-cover__inner-container {
  opacity: 1;
  transform: translateY(0);
}

.btn {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--bs-brand);
  border: 2px solid var(--bs-brand);
  border-radius: 0.5rem;
  padding: 0.6rem 1.5rem;
  box-shadow: none;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus {
  color: #ffffff;
  background-color: var(--txt-brand);
  border-color: var(--txt-brand);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.btn:active {
  color: #ffffff;
  background-color: var(--txt-brand);
  border-color: var(--txt-brand);
  box-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.2);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(164, 208, 87, 0.4);
}

.btn:disabled,
.btn.disabled {
  color: #ffffff;
  background-color: #adb5bd;
  border-color: #adb5bd;
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

/* Reset per bottoni che devono apparire come un semplice link (es. selettore lingua) */
.btn-link {
  background-color: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Barra CTA fissa in fondo allo schermo ("Preventivo Gratuito"), su tutte le dimensioni di schermo */
.cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: var(--bs-brand);
  color: #1c1c1c;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* Essendo fissa, la .cta-bar sta "sopra" la pagina e ne copre il fondo (la riga
   del copyright nel footer). Le riserviamo lo spazio in fondo al documento.
   Il :has() limita la spaziatura alle pagine che contengono davvero la barra,
   evitando un vuoto inutile dove non c'e' (es. Contatti).
   Sotto i 768px non serve: li' la .cta-bar e' nascosta e ci pensa gia'
   "body { padding-bottom: 4rem }" a fare spazio alla striscia .cta-strip. */
@media (min-width: 768px) {
  body:has(.cta-bar) {
    padding-bottom: 96px;
  }
}

/* Striscia CTA verde: visibile solo su mobile (vedi media query in fondo al file) */
.cta-strip {
  display: none;
}

.wp-block-image img {
  border-radius: 2rem;
}

/* Schermo grande */
@media (min-width: 1900px) {
  /* .front-page-content .wp-block-cover .wp-block-buttons {
    padding-left: 20px !important;
  } */

  .w-21 {
    width: 21rem;
  }

  .w-23 {
    width: 23rem;
  }

  .p-left {
    padding-left: 3rem;
  }

  .p-left-9 {
    padding-left: 9rem !important;
  }

  .p-l-10 {
    padding-left: 10rem !important;
  }

  .p-l-37 {
    padding-left: 37px !important;
  }

  .ml-neg {
    margin-left: 0;
  }

  .ml-124 {
    margin-left: 124px;
  }

  .w-63 {
    width: 63px;
  }

  .pb-4 {
    padding-bottom: 4px;
  }

  .pb-19 {
    padding-bottom: 19px;
  }

  .pt-0-5.full-screen {
    padding-top: 0.5rem !important;
  }

  .pt-7 {
    padding-top: 7rem !important;
  }

  .pt-10 {
    padding-top: 10px;
  }

  .pr-4 {
    padding-right: 4rem !important;
  }

  .f-bas-50 {
    flex-basis: 50rem;
  }

  .flex-b-100 {
    flex-basis: 100px;
  }

  .gallery-filter-nav {
    margin: 1.5rem 25rem 3rem !important;
  }

  /* Riga contatti su schermi molto larghi: da applicare alla COLONNA che
     contiene le voci, dal campo "Classi CSS aggiuntive" di Gutenberg.
     Il problema non e' la mancanza di spazio ma il contrario: le voci restano
     della loro larghezza naturale e il di piu' diventa vuoto tra una e l'altra,
     mentre il testo dentro resta stretto e va a capo a meta' parola.
     Qui le facciamo dividere equamente lo spazio: flex-basis 0 + flex-grow 1
     danno a tutte la stessa larghezza indipendentemente dal contenuto, e
     min-width: 0 e' necessario perche' altrimenti un elemento flex non scende
     sotto la larghezza della sua parola piu' lunga. */
  .contacts-lg {
    display: flex;
    gap: 3rem;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }

  .contacts-lg > .wp-block-group {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Schermo grande */
@media (min-width: 1800px) {
  /* .front-page-content .wp-block-cover .wp-block-buttons {
    padding-left: 20px !important;
  } */

  .p-left {
    padding-left: 3rem;
  }
}

/* Schermo laptop */
@media (min-width: 1300px) and (max-width: 1600px) {
  /* .front-page-content .wp-block-cover .wp-block-heading,
  .front-page-content .wp-block-cover p,
  .front-page-content .wp-block-cover .wp-block-buttons {
    padding-left: 50px !important;
  } */

  /* .wp-block-group p {
    padding-left: 10px !important;
  } */

  .gap-restricted {
    gap: 14px;
  }

  /* .wp-block-cover__inner-container {
    padding-left: 3rem;
  } */

  .ml-neg {
    margin-left: -4rem !important;
  }

  .ml-100 {
    margin-left: 100px;
  }
  
  .mt-7 {
    margin-top: 7rem !important;
  }

  .p-x {
    padding: 0rem 1rem !important;
  }

  /* .wp-image-3893 {
    padding-right: 8px !important;
  } */

  .no-p {
    padding: 0px !important;
  }

  .pl-2 {
    padding-left: 2rem !important;
  }

  .pl-4 {
    padding-left: 4rem !important;
  }

  .p-left-7 {
    padding-left: 7rem !important;
  }

  .p-left-10 {
    padding-left: 10px;
  }

  .p-left {
    padding-left: 24px;
  }

  .p-left-50 {
    padding-left: 50px !important;
  }

  .pt-19 {
    padding-top: 19px;
  }

  .pt-23 {
    padding-top: 23px;
  }

  .flex-b-100 {
    flex-basis: 100px;
  }

  /* Riga statistiche "Chi Siamo": su laptop lo spazio non basta per stare
     su una riga sola (is-nowrap di Gutenberg) e il testo finiva spezzato
     a meta' parola. Permettiamo il wrap e nascondiamo i divisori verticali,
     che hanno senso solo tra elementi affiancati sulla stessa riga. */
  .front-page-content .wp-block-cover .p-left {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  /* .front-page-content .wp-block-cover .p-left > figure {
    display: none;
  } */

  .gallery-filter-nav {
    margin: 1.5rem 15rem 3rem !important;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .mb-lg-0 {
    margin-bottom: 0;
  }
}

/* =========================================================
   GRIGLIE - FASCIA TABLET (768px - 991.98px)
   Fascia CHIUSA di proposito: usando "max-width: 991.98px" queste regole
   varrebbero anche sui telefoni (una soglia max-width copre tutto cio' che sta
   sotto, fino a 0px), dove queste colonne sono troppo strette e spezzano le
   parole. La versione per telefono sta nella media query <=767.98px.
   Se cambi il numero di colonne qui, ricordati di controllare anche li'.
   ========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* niente overflow orizzontale quando il pannello e' aperto */
  .header-wrapper {
    flex-wrap: wrap;
    align-items: center;
  }

  /* Logo+scritta uniti a sinistra, hamburger ancorato a destra.
     Non basta justify-content: space-between sul contenitore: .header-wrapper
     ha tre figli (brand, hamburger, #navbarMain) e quando il menu si apre il
     pannello diventa un terzo elemento flex a tutta larghezza, cambiando la
     distribuzione. margin-left:auto sull'hamburger lo tiene a destra in ogni
     caso, indipendentemente da quanti fratelli sono visibili. */
  .header-wrapper .navbar-brand {
    flex-shrink: 0;
    margin-right: 0;
  }

  .header-wrapper .navbar-toggler {
    flex-shrink: 0;
    margin-left: auto;
  }

  .navbar-collapse {
    width: 100%;
  }

  .navbar-collapse.show {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }

  /* dentro al pannello aperto: lista pulita, niente margine automatico che spinge fuori dallo schermo */
  .navbar-collapse.show .navbar-nav {
    width: 100%;
    margin-left: 0 !important;
    gap: 0.25rem;
  }

  .navbar-collapse.show .nav-item {
    width: 100%;
  }

  .navbar-collapse.show .nav-link {
    width: 100%;
    box-sizing: border-box;
  }

  /* Card dei servizi (home): la griglia va sul blocco Colonne, che contiene le
     card, non sul Gruppo che lo avvolge (quello ha un figlio solo). */
  .wp-container-core-group-is-layout-15fe9432 > .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
  }

  .temp-grid-tablet .wp-block-group > .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .template-grid-tablet {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
  }

  /* "I NOSTRI CONTATTI" (pagina Contatti): qui la classe .temp-grid-tablet sta
     SUL blocco Colonne, non su un contenitore che lo avvolge. Le 4 voci
     (telefono, email, indirizzo, orari) non sono colonne: sono blocchi Gruppo
     fratelli dentro la PRIMA colonna, insieme all'immagine del titolo.
     La griglia va quindi su quella colonna, non sul blocco Colonne. */
  .temp-grid-tablet > .wp-block-column:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  /* il titolo e' il primo figlio della colonna: gli facciamo occupare la riga
     intera, altrimenti finirebbe in una cella accanto alla prima voce */
  .temp-grid-tablet > .wp-block-column:first-child > figure {
    grid-column: 1 / -1;
  }

  /* ---- Pagina Contatti: form su una riga, contatti + mappa sulla seconda ----
     Il blocco Colonne esterno ha 4 colonne (form, colonna vuota di spaziatura,
     contatti, mappa) e non ha una classe propria: lo identifichiamo dal fatto
     che contiene la colonna .temp-grid-tablet. Se preferisci un aggancio
     esplicito, basta aggiungere una classe al blocco da Gutenberg e sostituirla
     qui a ".wp-block-columns:has(> .temp-grid-tablet)". */
  .wp-block-columns:has(> .temp-grid-tablet) {
    flex-wrap: wrap !important;
  }

  /* il form: prima colonna, da sola su tutta la prima riga */
  .wp-block-columns:has(> .temp-grid-tablet) > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }

  /* la colonna vuota che faceva da distanziatore non serve piu' una volta che
     le colonne vanno a capo: occuperebbe solo spazio nella seconda riga */
  .wp-block-columns:has(> .temp-grid-tablet) > .wp-block-column.flex-b-50 {
    display: none;
  }

  /* contatti e mappa: meta' larghezza ciascuna, affiancati sulla seconda riga */
  .wp-block-columns:has(> .temp-grid-tablet) > .temp-grid-tablet,
  .wp-block-columns:has(> .temp-grid-tablet) > .wp-block-column:last-child {
    flex-basis: calc(50% - 0.5rem) !important;
  }

  /* ---- Pagina Richiedi Preventivo: stesso schema ----
     Il blocco Colonne esterno (form, distanziatore, passaggi, distanziatore,
     card blu) non ha ne' una classe propria ne' una classe custom su un figlio.
     Lo agganciamo quindi alla pagina: "page-id-3821" e' messa da WordPress sul
     <body> ed e' l'aggancio piu' stabile che ci sia — non dipende dal contenuto
     e non si perde risalvando in Gutenberg. Dentro quella pagina individuiamo il
     blocco Colonne che contiene il form. */
  .page-id-3821 .wp-block-columns:has(.wpcf7) {
    flex-wrap: wrap !important;
  }

  /* il form: prima colonna, da sola su tutta la prima riga */
  .page-id-3821 .wp-block-columns:has(.wpcf7) > .wp-block-column:first-child {
    flex-basis: 100% !important;
  }

  /* le due colonne vuote facevano da distanziatore quando tutto stava in riga */
  .page-id-3821 .wp-block-columns:has(.wpcf7) > .wp-block-column:empty {
    display: none;
  }

  /* i passaggi ("1. RICEVIAMO LA TUA RICHIESTA"...): tutta la larghezza */
  .page-id-3821
    .wp-block-columns:has(.wpcf7)
    > .wp-block-column:not(:first-child):not(:empty):not(:last-child) {
    flex-basis: 100% !important;
  }

  /* Icona ridotta e uniformata: da applicare al singolo blocco immagine dal
     campo "Classi CSS aggiuntive" di Gutenberg.
     Serve sovrascrivere sia width sia flex-basis perche' l'editor puo' impostare
     entrambi con valori diversi (es. width:50px nel CSS del blocco ma
     flex-basis:105px dal controllo di larghezza): vince il flex-basis, per
     questo le icone risultavano piu' grandi e di misure diverse tra loro.
     Per cambiare la misura, tieni i tre valori uguali. */
  .icon-60-tablet {
    flex-basis: 60px !important;
    width: 60px !important;
    max-width: 60px !important;
  }

  .icon-60-tablet img {
    width: 100% !important;
    height: auto !important;
  }

  /* Mappa piu' grande: da applicare alla COLONNA che contiene la mappa, dal
     campo "Classi CSS aggiuntive" di Gutenberg.
     L'iframe ha width e height fissi scritti nell'HTML (450x450): vanno
     sovrascritti entrambi, altrimenti la mappa resta della misura originale.
     Regola l'altezza da qui. */
  .map-lg-tablet iframe {
    width: 100% !important;
    height: 480px !important;
    margin-left: 0 !important;
  }

  /* Card blu "INTERVENTI SU FUNE": rettangolo stretto e verticale, centrato.
     Serve anche flex-grow: 0 perche' WordPress da' flex-grow:1 alle colonne,
     che altrimenti si allargherebbe a riempire tutta la riga.
     Regola la larghezza da qui. */
  .page-id-3821 .wp-block-columns:has(.wpcf7) > .wp-block-column:last-child {
    flex-basis: 320px !important;
    flex-grow: 0 !important;
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .template-grid-col-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1rem;
  }

  .stats-grid-tablet {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  /* Spaziature pensate per la larghezza del tablet: sui telefoni sfondano lo
     schermo (14rem = 224px), per questo stanno nella fascia chiusa. */
  .pl-14-tablet {
    padding-left: 14rem !important;
  }

  .pr-100-tablet {
    padding-right: 100px !important;
  }

  /* "EDILIZIA SU FUNE" (primo <mark>, blu scuro) diventa bianca su mobile perche'
     sull'overlay scuro dell'hero non e' abbastanza leggibile; "AD ALTA QUOTA"
     (secondo <mark>, verde brand) resta com'e'. Scoped a .text-white perche' e' l'H1
     della home: Contatti/Preventivo condividono lo stesso .wp-block-cover ma non
     questa classe, quindi non vengono toccati. */
  .front-page-content
    .wp-block-cover
    .wp-block-heading.text-white
    mark:first-of-type {
    color: #fff !important;
  }

  .front-page-content .wp-block-cover__image-background {
    object-position: 5% 20% !important;
  }

  /* background per tablet */
  .bg-cover .wp-block-cover__background {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      rgba(0, 0, 0, 0.7) 100%
    ) !important;
  }

  .navbar-collapse {
    display: none;
    width: 100%;
  }

  .navbar-collapse.show {
    display: block;
  }

  .d-none-tablet {
    display: none !important;
  }

  .d-flex-content-center-tablet {
    display: flex;
    justify-content: center !important;
  }

  .flex-b-50 {
    flex-basis: 50px;
  }

  .text-white {
    color: #fff !important;
    background-color: transparent !important;
  }

  /* ---- Sezione "numeri/statistiche" (es. I NUMERI CHE CI RAPPRESENTANO) ----
     Struttura del blocco: voci [icona + testo] alternate a lineette divisorie
     verticali (immagini a se' stanti dentro lo stesso Gruppo).
     Le lineette funzionano solo finche' le voci stanno su una riga unica: appena
     il contenitore va in griglia o a capo diventano celle autonome e spezzano
     l'incolonnamento. Qui le nascondiamo e ricostruiamo l'allineamento a mano.
     NB: in questo blocco stanno SOLO le regole strutturali, valide sia su tablet
     che su telefono. Il numero di colonne e' definito nelle due media query
     dedicate piu' avanti (fascia tablet 768-991.98px, fascia telefono <=767.98px). */

  /* le lineette divisorie: figure figlie dirette del gruppo */
  .stats-grid-tablet > figure.wp-block-image {
    display: none;
  }

  /* ogni voce: icona e testo affiancati e centrati verticalmente */
  .stats-grid-tablet > .wp-block-group {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
  }

  /* Colonna icona a larghezza fissa: ogni icona ha dimensioni diverse impostate
     dall'editor, quindi senza questo i testi delle varie voci partono da punti
     diversi e nulla risulta incolonnato. */
  .stats-grid-tablet > .wp-block-group > .wp-block-group:first-child {
    flex: 0 0 64px;
    display: flex;
    justify-content: center;
  }

  .stats-grid-tablet > .wp-block-group > .wp-block-group:first-child img {
    max-width: 100%;
    height: auto;
  }

  /* Da abbinare a .template-grid-tablet quando la PRIMA colonna e' un testo
     introduttivo che deve occupare l'intera riga (grid-column: 1 / -1 = dal
     primo all'ultimo binario della griglia), cosi' le voci successive si
     dispongono in griglia sotto. Es. "SICUREZZA E CERTIFICAZIONI" (Chi Siamo).
     Classe dedicata e non selettore per tipo di blocco: .template-grid-tablet
     e' usata su piu' blocchi (anche "COME OPERIAMO" in home) dove le voci sono
     tutte uguali e nessuna va allargata. */
  .intro-full-tablet > .wp-block-column:first-child {
    grid-column: 1 / -1;
  }

  .intro-full-tablet {
    padding-left: 0 !important;
  }

  /* Impila su piu' righe le colonne di un blocco Colonne che di default restano
     affiancate. Servono entrambe le regole: il blocco ha "non andare a capo"
     impostato dall'editor (flex-wrap:nowrap nel CSS generato da WordPress) e
     ogni colonna ha una larghezza fissa inline (es. flex-basis:50rem/40rem),
     che va portata al 100% perche' ognuna occupi una riga intera. */
  .stack-tablet {
    flex-wrap: wrap !important;
  }

  .stack-tablet-content-start {
    flex-wrap: wrap !important;
    justify-content: start !important;
  }

  .stack-tablet > .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Il blocco Cover che contiene una griglia .template-grid-tablet (es. la card
     "I NOSTRI VALORI") ha un'altezza fissa impostata dall'editor, pensata per il
     layout a riga unica: su due righe taglierebbe il contenuto, quindi la
     lasciamo crescere in base a quello che contiene. */
  .wp-block-cover:has(.template-grid-tablet) {
    min-height: auto !important;
    padding: 1.5rem 1rem;
  }

  .align-text-tablet {
    gap: 0.5rem !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .align-center > figure {
    align-self: center !important;
  }

  .gap-22 {
    gap: 22px !important;
  }

  .gap-p-9 {
    padding-left: 9px;
    gap: 19px !important;
  }

  .gap-p-3 {
    padding-left: 3px;
    gap: 13px !important;
  }

  .pt-2 {
    padding-top: 2rem !important;
  }

  .pl-2 {
    padding: 0 !important;
  }

  .p-left-3 {
    padding-left: 3rem !important;
  }

  .p-left-6 {
    padding-left: 6px !important;
  }

  .p-left-10-tablet {
    padding-left: 10px !important;
  }

  .p-left-15-tablet {
    padding-left: 15px !important;
  }

  .gap-19 {
    gap: 19px !important;
  }

  /* NB: .pl-14-tablet e .pr-100-tablet sono spostate nella media query a fascia
     chiusa 768-991.98px piu' avanti: sono spaziature pensate per il tablet e qui
     arriverebbero anche ai telefoni (14rem = 224px di padding sfondano lo schermo). */

  .reduce-space {
    height: 5px !important;
  }

  .ml-2 {
    margin-left: 2rem !important;
  }
  
  .mt-5 {
    margin-top: 5rem !important;
  }

  .gallery-filter-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1rem;
    margin: 20px 0 !important;
  }

  /* ---- Footer ----
     Le 4 colonne sono affiancate con .d-flex (senza wrap) e tre hanno .pl-10
     (10rem = 160px di padding sinistro fisso): a questa larghezza la somma
     sfora e le ultime due colonne finiscono fuori dallo schermo. Le mandiamo
     a capo su due righe e azzeriamo il padding fisso.
     Il selettore e' ristretto al .d-flex esterno perche' la stessa classe e'
     riusata dentro ogni colonna per logo+testo e titoli, che devono restare
     in riga. */
  footer > .container-evo > .d-flex {
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
  }

  footer .col-footer {
    flex: 1 1 calc(50% - 1.5rem);
  }

  footer .col-footer.pl-10 {
    padding-left: 0;
  }

  /* ---- Barra CTA verde fissa in fondo ----
     Il bottone "CONTATTACI" resta tagliato a destra: dentro la sua colonna c'e'
     uno spaziatore da 241px pensato per la larghezza del desktop, ed e' lui a
     spingere il contenuto oltre il bordo. */
  .cta-bar .wp-block-spacer {
    display: none;
  }

  /* Senza lo spaziatore il contenitore interno del Cover non ha piu' una
     larghezza propria: le colonne di WordPress hanno flex-basis:0, quindi non
     contribuiscono alla larghezza intrinseca e il blocco si stringe al minimo
     (il testo finisce a una lettera per riga). Gli imponiamo la larghezza piena. */
  .cta-bar .wp-block-cover__inner-container {
    width: 100%;
  }

  .cta-bar .wp-block-columns {
    gap: 1rem;
    align-items: center;
  }
}

/* =========================================================
   Ottimizzazioni mobile (header, hero, bottoni, card, footer)
   ========================================================= */
@media (max-width: 767.98px) {
  :root {
    --header-padding-top: 0.75rem;
    --header-padding-x: 1rem;
  }

  /* Evita lo scroll orizzontale su schermi stretti (alcuni blocchi hanno
     padding/larghezze fisse che sforano). Va su html, non su body: su body
     puo' interferire con il posizionamento di eventuali elementi fissi. */
  html {
    overflow-x: hidden;
  }

  /* lascia spazio in fondo alla pagina, altrimenti la striscia fissa copre
     gli ultimi contenuti del footer */
  body {
    padding-bottom: 4rem;
  }

  /* Alcuni blocchi immagine hanno una larghezza fissa impostata dall'editor
     (campo "CSS aggiuntivo" del blocco, es. width:550px sul titolo "I NOSTRI
     CONTATTI"): su schermi stretti sforano il viewport e allargano la pagina,
     spostando e tagliando gli elementi in position:fixed come .cta-strip.
     Li limitiamo alla larghezza disponibile. Basta la specificita' di questo
     selettore: le regole per-blocco generate da WordPress usano :where(),
     che non aggiunge specificita'. */
  .front-page-content figure.wp-block-image {
    max-width: 100%;
  }

  .front-page-content figure.wp-block-image img {
    max-width: 100%;
    height: auto;
  }

  /* Mappa Google (pagina Contatti): l'iframe ha width/height fissi via HTML
     (450x450). La larghezza si adatta gia' allo schermo (regola di base di
     WordPress su iframe/embed), ma l'altezza resta fissa a 450px, quindi su
     mobile la mappa risulta molto piu' alta che larga e occupa troppo spazio
     verticale. La riduciamo solo su schermi stretti. */
  iframe[src*="google.com/maps"] {
    height: 260px;
    width: calc(100% - 100px);
    margin-left: 40px;
  }

  /* Footer: le 4 colonne sono affiancate con .d-flex (nessun wrap) e 3 di esse
     hanno .pl-10 (10rem = 160px di padding sinistro fisso, definito una volta
     sola in cima al file senza distinzione mobile/desktop). Su schermi stretti
     la somma sfora la larghezza del viewport e manda tutta la pagina in scroll
     orizzontale. Le impiliamo verticalmente e azzeriamo il padding fisso.
     Selettore ristretto al .d-flex esterno (footer > .container-evo > .d-flex):
     .d-flex e' riusato anche dentro ogni colonna per logo+testo e titoli, che
     devono restare in riga. */
  footer > .container-evo > .d-flex {
    flex-direction: column;
    gap: 1.75rem;
  }

  footer .col-footer.pl-10 {
    padding-left: 0;
  }

  /* Su mobile la fascia .cta-bar del contenuto lascia il posto alla striscia
     compatta .cta-strip qui sotto */
  .cta-bar {
    display: none;
  }

  /* Striscia CTA verde fissa in fondo allo schermo: icona tonda bianca + testo,
     centrati. E' un semplice <a> figlio diretto del body (vedi footer.php),
     senza contenitori annidati, cosi' niente puo' interferire col fixed. */
  .cta-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 0.85rem 1rem;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
    background-color: var(--bs-brand);
    color: var(--blu-custom);
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  }

  .cta-strip:hover,
  .cta-strip:focus {
    color: var(--blu-custom);
    background-color: var(--bs-brand);
  }

  .cta-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: #fff;
    font-size: 0.7rem;
  }

  /* ---- GRIGLIE - FASCIA TELEFONO (<=767.98px) ----
     Stesse griglie della fascia tablet ma su UNA sola colonna: a due, i titoli
     lunghi e i testi accanto alle icone si spezzano parola per parola.
     Serve ridichiararle (e non solo cambiare il numero di colonne) perche' le
     regole della fascia tablet sono chiuse a 768px e qui non arrivano: senza
     queste, questi blocchi tornerebbero al loro default a riga unica schiacciata. */
  .wp-container-core-group-is-layout-15fe9432 > .wp-block-columns,
  .template-grid-tablet,
  .template-grid-col-3 {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.75rem 1rem;
  }

  .stats-grid-tablet {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1.5rem 1rem;
  }

  .d-none {
    display: none;
  }

  .d-flex {
    display: flex !important;
  }

  .d-contents {
    display: contents !important;
  }

  .d-flex-content-center-mobile {
    display: flex;
    justify-content: center !important;
  }

  .w-18 {
    width: 18rem;
  }

  .w-60 {
    width: 60px !important;
  }

  .pb-2 {
    padding-bottom: 2rem !important;
  }

  .pt-2 {
    padding-top: 2rem;
  }

  .pt-20 {
    padding-top: 20px;
  }

  /* usato per spegnere una regola CSS su mobile */
  .pl-2 {
    padding: 0 !important;
  }

  .p-left-3 {
    padding-left: 3rem !important;
  }

  .p-left-5 {
    padding-left: 5px;
  }

  .p-left-7 {
    padding-left: 7px !important;
  }

  .p-left-7-mobile {
    padding-left: 7px !important;
  }

  .p-left-8 {
    padding-left: 8px;
  }

  .p-left-9 {
    padding-left: 9px;
  }

  .p-left-11 {
    padding-left: 11px;
  }

  .p-right-9 {
    padding-right: 9px !important;
  }

  .m-2 {
    margin: 2px !important;
  }

  .mr-2-mobile {
    margin-right: 2rem !important;
  }

  .text-white {
    color: #fff !important;
    background-color: transparent !important;
  }

  .d-flex-j-center {
    display: flex;
    justify-content: center !important;
  }

  .align-center {
    align-items: center !important;
    padding-bottom: 4px;
  }

  .gap-0 {
    gap: 11.8px !important;
  }

  .gap-20 {
    gap: 20.2px !important;
  }

  .gap-26 {
    gap: 26.8px !important;
  }

  .w-3-pb-11 {
    width: 370px;
    padding-bottom: 11px;
  }

  .f-14 {
    font-size: 14px;
  }

  /* checkbox (acceptance/checkbox CF7): area di tocco piu' comoda col dito,
     e il testo/link non deve sforare su schermi stretti */
  .wpcf7-form .wpcf7-acceptance input[type="checkbox"],
  .wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
  }

  .wpcf7-form .wpcf7-list-item-label {
    overflow-wrap: anywhere;
  }

  /* Riga statistiche "SICUREZZA CERTIFICATA" / "INTERVENTI RAPIDI" nella sezione
     CHI SIAMO: il gruppo ha "non andare a capo" impostato dall'editor, quindi su
     schermi stretti i due box icona+testo vengono schiacciati e il testo si spezza
     lettera per lettera. Classe generata da WordPress per questo blocco specifico:
     se il blocco viene rieditato in Gutenberg l'hash puo' cambiare e va riverificato. */
  .wp-container-core-group-is-layout-f56f9fcf {
    flex-wrap: wrap !important;
    row-gap: 1.5rem;
    justify-content: start !important;
  }

  .justify-start {
    flex-wrap: wrap !important;
    row-gap: 1.5rem;
    justify-content: start !important;
  }

  .justify-center {
    justify-content: center !important;
  }

  .wp-container-core-group-is-layout-f56f9fcf img.wp-image-3330,
  .wp-container-core-group-is-layout-f56f9fcf .wp-block-spacer {
    display: none;
  }

  /* "I NUMERI CHE CI RAPPRESENTANO" (Chi Siamo): ogni riga ha un'icona con una
     larghezza fissa diversa dalle altre (60/65/60/70px, impostate una per una
     nell'editor), quindi le icone non si allineano in colonna. Il selettore
     "> .wp-block-group > .wp-block-group.is-vertical:first-child" prende solo
     il contenitore dell'icona (primo figlio di ogni riga icona+testo) e non
     tocca la sezione "CHI SIAMO" in home, che ha una struttura piu' piatta
     (non ha questo doppio livello di annidamento) pur condividendo lo stesso
     hash esterno. */
  .wp-container-core-group-is-layout-f56f9fcf
    > .wp-block-group
    > .wp-block-group.is-vertical:first-child {
    width: 70px;
    flex: 0 0 70px;
    display: flex;
    justify-content: center;
  }

  /* header: barra piena bianca invece di overlay trasparente sulla foto */
  .main-nav {
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* logo+scritta sempre uniti e ancorati tutto a sinistra, hamburger ancorato tutto a destra */
  .header-wrapper {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .header-wrapper .navbar-brand {
    flex-shrink: 0;
  }

  .header-wrapper .navbar-toggler {
    flex-shrink: 0;
    margin-left: auto;
    border-color: rgba(0, 0, 0, 0.25);
  }

  /* Pannello del menu: chiuso di default, si apre solo con la classe .show
     aggiunta dall'hamburger. Queste regole servono in TUTTE le larghezze sotto
     i 992px, non solo sui tablet: senza, il pannello resta sempre visibile e
     occupa mezza schermata sotto l'header. */
  .navbar-collapse {
    display: none;
    width: 100%;
  }

  .navbar-collapse.show {
    display: block;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
    box-sizing: border-box;
  }

  /* dentro al pannello aperto: lista pulita, niente margine automatico che
     spinge le voci fuori dallo schermo */
  .navbar-collapse.show .navbar-nav {
    width: 100%;
    margin-left: 0 !important;
    gap: 0.25rem;
  }

  .navbar-collapse.show .nav-item,
  .navbar-collapse.show .nav-link {
    width: 100%;
    box-sizing: border-box;
  }

  /* icona hamburger scura, per contrasto sulla barra bianca */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* logo piu' piccolo, a sinistra (l'hamburger resta a destra grazie a ms-auto sul menu) */
  .custom-logo {
    max-width: 42px;
    height: auto;
  }

  /* testo del brand blu, per contrasto sulla barra bianca (prima era bianco per stare sopra la foto).
     Scoped a .main-nav: senza questo scoping la regola (essendo solo .brand-name/.brand-payoff)
     si applicava anche al footer, che riusa le stesse classi ma su sfondo blu scuro. */
  .main-nav .brand-name {
    color: var(--blu-custom);
    font-size: 0.8rem;
  }

  .main-nav .brand-payoff {
    font-size: 0.55rem;
  }

  .cta-bar-mobile .front-page-content .wp-block-cover {
    min-height: 260px !important;
    align-items: flex-start !important;
  }

  /* l'altezza minima dell'hero e' fissata via stile inline del blocco (550px):
     su schermi piccoli va ridotta, serve !important per vincere sull'inline.
     Ora che l'header non e' piu' overlay ma occupa il suo spazio, l'hero
     puo' essere allineata in alto senza bisogno di un grosso padding-top */
  .cover-mobile .front-page-content .wp-block-cover {
    min-height: 460px !important;
    align-items: flex-start !important;
  }

  .front-page-content .wp-block-cover__inner-container {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    max-width: 90%;
  }

  /* .p-max-w {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1.5rem !important;
    max-width: 90% !important;
  } */

  /* la foto ha un soggetto (operaio) pensato per stare a destra: manteniamo
     il focus leggermente spostato a destra cosi' il testo a sinistra resta pulito */
  .front-page-content .wp-block-cover__image-background {
    object-position: 70% 20% !important;
  }

  /* background per mobile */
  .bg-cover .wp-block-cover__background {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      rgba(0, 0, 0, 0.7) 100%
    ) !important;
  }

  /* testo allineato a sinistra, piu' piccolo */
  /* .front-page-content .wp-block-cover .wp-block-heading,
  .front-page-content .wp-block-cover p {
    text-align: left !important;
  } */

  .front-page-content .wp-block-cover .wp-block-heading {
    font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }

  /* sottotitolo: sfumatura bianca leggera dietro per leggerlo sopra la foto, bordato/piu' leggibile,
     e ristretto con un max-width cosi' non si estende oltre "AD ALTA QUOTA" sopra
     (valore approssimativo: essendo un font diverso dal titolo, aggiustalo se non combacia) */
  /* .front-page-content .wp-block-cover p {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: inline-block;
    max-width: 12rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem; 
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0) 75%
    );
  }*/

  /* "EDILIZIA SU FUNE" (primo <mark>, blu scuro) diventa bianca su mobile perche'
     sull'overlay scuro dell'hero non e' abbastanza leggibile; "AD ALTA QUOTA"
     (secondo <mark>, verde brand) resta com'e'. Scoped a .text-white perche' e' l'H1
     della home: Contatti/Preventivo condividono lo stesso .wp-block-cover ma non
     questa classe, quindi non vengono toccati. */
  .front-page-content
    .wp-block-cover
    .wp-block-heading.text-white
    mark:first-of-type {
    color: #fff !important;
  }

  .front-page-content .wp-block-cover .wp-block-buttons {
    justify-content: flex-start !important;
  }

  .gallery-filter-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
    margin: 20px 0 !important;
  }
  
   
   #cmplz-manage-consent {
    --cta-strip-h: 3.1rem;
  }

  #cmplz-manage-consent .cmplz-manage-consent,
  #cmplz-manage-consent .cmplz-btn {
    bottom: calc(var(--cta-strip-h) + env(safe-area-inset-bottom)) !important;
    /* piu' compatto: a piena dimensione ruba troppo spazio in verticale */
    padding: 0.45rem 0.9rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    right: 2px !important;
    z-index: 0 !important;
  }
   
   /* 
  
  /* Il tab flottante sparisce: su mobile le preferenze cookie si riaprono dal
     link nel footer (colonna "Privacy e Cookie"). Se quel link viene rimosso,
     va rimossa anche questa regola, altrimenti il consenso non e' piu' revocabile. */
  /*#cmplz-manage-consent {
    //display: none !important;
  }*/
}

/* Form di contatto (Contact Form 7): stile coerente con i bottoni e i colori brand del tema */
.wpcf7-form p {
  margin-bottom: 1.25rem;
}

/* wpautop di CF7 lascia spesso <p> vuoti attorno ai div di layout: senza questo
   compaiono buchi verticali tra una riga di campi e l'altra */
.wpcf7-form p:empty {
  display: none;
}

.wpcf7-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--blu-custom);
}

/* Asterisco dei campi obbligatori: nel markup del form va scritto come
   <span class="req">*</span>, altrimenti resta un asterisco nero
   indistinguibile dal resto dell'etichetta. */
.wpcf7-form .req {
  color: var(--bs-brand);
}

/* ---- Righe di campi affiancati (Via/Civico, Citta'/Provincia/CAP) ----
   Flex e non grid: la colonna che contiene il form cambia larghezza tra
   desktop, tablet e mobile, cosi' i campi vanno a capo da soli quando lo
   spazio non basta, senza dover scrivere un breakpoint per ogni caso.
   Nel markup: <div class="form-row"> con dentro <div class="form-col"> */
.wpcf7-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.wpcf7-form .form-col {
  flex: 2 1 12rem; /* campo "largo": Via, Citta' */
  min-width: 0; /* senza questo il campo non si restringe mai sotto il contenuto */
}

.wpcf7-form .form-col-sm {
  flex: 1 1 7rem; /* campo corto: Civico, Provincia, CAP */
}

/* Tutti i controlli condividono tipografia, padding e bordo: cosi' i campi
   affiancati risultano della stessa altezza e allineati tra loro.
   Il file input fa eccezione sul padding (vedi piu' sotto). */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  display: block;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #212529;
  padding: 0.75rem 1rem;
  border: 1px solid #ced4da;
  border-radius: 7px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form input[type="file"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--bs-brand);
  box-shadow: 0 0 0 3px rgba(125, 175, 48, 0.25);
}

.wpcf7-form ::placeholder {
  color: #8a94a0;
  opacity: 1; /* Firefox schiarisce i placeholder di suo */
}

.wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Select: la freccia nativa non e' stilizzabile, quindi la sostituiamo con una
   chevron SVG inline (nessuna richiesta di rete) e lasciamo spazio a destra. */
.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a2547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.85rem;
  cursor: pointer;
}

/* Con "first_as_label" la prima option e' un finto placeholder (value vuoto):
   finche' resta selezionata la mostriamo grigia come un placeholder vero.
   :has() e' gia' usato altrove nel tema, quindi stesso supporto browser. */
.wpcf7-form select:has(option[value=""]:checked) {
  color: #8a94a0;
}

.wpcf7-form select option {
  color: #212529;
}

/* Campo allegato: il browser non lascia stilizzare l'intero <input type="file">,
   ma il pseudo-elemento standard ::file-selector-button si' (Chrome/Edge, Firefox 82+,
   Safari 15.4+); -webkit-file-upload-button e' il fallback per motori piu' vecchi. */
.wpcf7-form input[type="file"] {
  display: block;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  color: #495057;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 7px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form input[type="file"]::file-selector-button,
.wpcf7-form input[type="file"]::-webkit-file-upload-button {
  background-color: var(--bs-brand);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  border: none;
  border-radius: 7px;
  padding: 0.5rem 1.1rem;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpcf7-form input[type="file"]:hover::file-selector-button,
.wpcf7-form input[type="file"]:hover::-webkit-file-upload-button {
  background-color: var(--blu-custom);
}

/* Pulsante "X" per rimuovere il file caricato dal campo allegato: nascosto finche'
   non e' stato selezionato un file (classe .has-file aggiunta da assets/js/main.js). */
.file-field-wrap {
  position: relative;
  display: block;
}

.file-field-wrap input[type="file"] {
  padding-right: 2.5rem;
}

.file-clear-btn {
  display: none;
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: #dc3545;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.file-clear-btn:hover {
  background-color: #a71d2a;
}

.file-field-wrap.has-file .file-clear-btn {
  display: flex;
}

.wpcf7-form input[type="submit"] {
  background-color: var(--bs-brand);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  border-radius: 7px;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
  background-color: var(--blu-custom);
}

.wpcf7-form input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Lo spinner di CF7 compare a fianco del bottone durante l'invio: senza
   allineamento verticale si appoggia alla baseline e "salta" verso il basso. */
.wpcf7-form .wpcf7-spinner {
  vertical-align: middle;
}

/* Stato di errore: oltre al messaggio rosso sotto, marchiamo anche il campo,
   altrimenti in un form lungo non si capisce quale sia da correggere. */
.wpcf7-form .wpcf7-not-valid {
  border-color: #c0392b;
  background-color: rgba(192, 57, 43, 0.04);
}

.wpcf7-form .wpcf7-not-valid:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}

.wpcf7-not-valid-tip {
  display: block;
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.3rem;
}

.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
  display: block;
  margin-bottom: 1.25rem;
}

.wpcf7-form .wpcf7-list-item {
  display: block;
  margin: 0 0 0.6rem;
}

.wpcf7-form .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

.wpcf7-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0;
  cursor: pointer;
}

.wpcf7-form .wpcf7-list-item-label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #495057;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"],
.wpcf7-form .wpcf7-checkbox input[type="checkbox"] {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15rem;
  accent-color: var(--bs-brand);
  cursor: pointer;
  flex-shrink: 0;
}

.wpcf7-form .wpcf7-acceptance a {
  color: var(--blu-custom);
  text-decoration: underline;
}

/* Titolo di un gruppo di campi (es. il testo che introduce il checkbox del
   vincolo monumentale): stessa gerarchia delle etichette ma non e' un <label>. */
.wpcf7-form .form-group-title {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: var(--blu-custom);
}

.wpcf7-response-output {
  border-radius: 7px;
  padding: 0.9rem 1.2rem;
  margin-top: 1.5rem;
  font-family: "Inter", sans-serif;
}

.wpcf7-mail-sent-ok {
  border: 1px solid var(--bs-brand);
  background-color: rgba(125, 175, 48, 0.1);
  color: #1c5c34;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  border: 1px solid #c0392b;
  background-color: rgba(192, 57, 43, 0.08);
  color: #c0392b;
}


/* Fix form layout Richiedi Preventivo */

/* ---- Form CF7: spaziatura verticale piu' compatta ----
   Va tenuto in fondo al file perche' sovrascrive le regole del blocco CF7 piu'
   sopra. I <p> generati da wpautop avevano solo margin-bottom impostato: il
   margin-top di default del browser (1em) restava e si sommava, distanziando i
   campi di ~36px invece dei 20 previsti. Qui azzeriamo il margine superiore e
   accorciamo quello inferiore: per stringere o allargare, tocca solo il valore
   di .wpcf7-form p. */
.wpcf7-form p {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

/* Etichetta piu' vicina al proprio campo */
.wpcf7-form label {
  margin-bottom: 0.3rem;
}

/* Nelle righe di campi affiancati la spaziatura verticale la da' gia' il <p>
   interno: qui serve solo la distanza orizzontale tra le colonne. */
.wpcf7-form .form-row {
  gap: 0 1rem;
}

/* I gruppi checkbox non passano da wpautop, quindi vanno allineati a mano allo
   stesso ritmo degli altri campi. */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox {
  margin-bottom: 1rem;
}

.wpcf7-form .wpcf7-list-item {
  margin-bottom: 0.4rem;
}

/* Un po' d'aria in piu' prima del bottone: e' l'azione finale e non deve
   sembrare attaccata all'ultimo campo. */
.wpcf7-form input[type="submit"] {
  margin-top: 0.5rem;
}


/* Fine Fix */

/* Sotto i 576px il bottone di invio a tutta larghezza: e' l'unica azione della
   pagina e cosi' resta comodo da toccare col pollice. */
@media (max-width: 575.98px) {
  .wpcf7-form input[type="submit"] {
    display: block;
    width: 100%;
  }
}


/* Bottoni CTA della hero: impilati a tutta larghezza e piu' compatti sotto i 576px */
@media (max-width: 575.98px) {
  .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-block-buttons .wp-block-button {
    width: 100%;
  }

  .wp-block-buttons .wp-block-button .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    font-size: 0.85rem !important;
  }
}

/* Card con hover-reveal: sui touch screen non esiste ":hover" affidabile,
   quindi il contenuto resta sempre visibile invece di dipendere dal tocco */
@media (hover: none) {
  .card-hover-reveal .wp-block-cover__background {
    opacity: 0.55 !important;
  }

  .card-hover-reveal .wp-block-cover__inner-container {
    opacity: 1;
    transform: none;
  }
}

/* Footer: testo un po' piu' piccolo su schermi molto stretti */
@media (max-width: 380px) {
  footer .small {
    font-size: 0.8em;
  }
}

/* Galleria foto: nav di filtro per categoria + griglia responsive */
.gallery-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
  justify-content: center;
}

.gallery-filter-btn {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blu-custom);
  background-color: #fff;
  border: 2px solid var(--blu-custom);
  border-radius: 2rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.gallery-filter-btn:hover {
  background-color: rgba(125, 175, 48, 0.1);
}

.gallery-filter-btn.active {
  background-color: var(--bs-brand);
  border-color: var(--bs-brand);
  color: #fff;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.gallery-item {
  margin: 0;
  border-radius: 0.5rem;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.gallery-item:hover img {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.gallery-item.is-hidden {
  display: none;
}

/* Popup/lightbox: mostra a schermo intero la foto cliccata nella griglia */
/* Lightbox della galleria.
   Lo stato aperto/chiuso e' gestito dalla classe .is-open (vedi main.js).
   Chiuso usa opacity + visibility invece di spostare il pannello fuori schermo:
   niente movimento dell'intero riquadro, e con visibility:hidden l'elemento non
   e' raggiungibile da tastiera mentre e' chiuso. */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background-color: rgba(16, 20, 26, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(1rem, 5vw, 3.5rem);
  cursor: zoom-out;

  opacity: 0;
  visibility: hidden;
  /* in chiusura visibility scatta solo a dissolvenza finita, cosi' non sparisce
     di colpo; in apertura invece e' immediata */
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

#popup.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 220ms ease,
    visibility 0s;
}

#selectedImage {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.94);
  /* curva con partenza rapida e arrivo morbido: e' quella che da' la sensazione
     di "materiale" invece del movimento lineare */
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 200ms ease;
}

#popup.is-open #selectedImage {
  opacity: 1;
  transform: scale(1);
}

/* Chi ha ridotto le animazioni a livello di sistema riceve lo stesso lightbox
   senza il movimento (requisito di accessibilita'). */
@media (prefers-reduced-motion: reduce) {
  #popup,
  #selectedImage {
    transition-duration: 1ms;
  }

  #selectedImage {
    transform: none;
  }
}