/* Le regole che nel WordPress non stavano nei fogli di stile, per le pagine Brix. */

/* Brix allargava le sezioni "estese" fino ai bordi della finestra con
   JavaScript: lo sfondo arriva ai bordi, il contenuto resta nella colonna. */
.fx-l-oh { overflow: hidden; }
.brix-builder .brix-extended-boxed,
.brix-builder .brix-extended-extended {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.brix-builder .brix-extended-boxed > .brix-section-inner-wrapper { max-width: 90vw; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* La voce della fisarmonica e' un pulsante vero (tastiera e lettori di
   schermo), ma deve restare identica al div del tema. */
.brix-builder button.brix-toggle-trigger {
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* Le icone social di Easy Social Icons, disegnate in SVG al posto del font. */
.brix-builder .cnss-social-icon { margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.brix-builder .cnss-social-icon li { display: inline-block; }
.brix-builder .cnss-social-icon a {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 2px;
  place-items: center;
  color: #fff;
}
.brix-builder .cnss-social-icon svg { width: 32px; height: 32px; fill: currentColor; }
.brix-builder .cnss-facebook { background: #3b5998; }
.brix-builder .cnss-whatsapp { background: #25d366; }
.brix-builder .cnss-usps { background: #999; }

/* Nella sezione con il recapito le due colonne partono alla stessa altezza e i
   testi sono centrati: nel WordPress la colonna di sinistra aveva un margine
   del 30% e i titoli tradotti erano allineati a sinistra (registro, voce 36).
   Delle icone social resta solo Facebook, rotonda come nel piè di pagina: email
   e WhatsApp sono gia' nei pulsanti accanto (BrixLayout.astro). */
.brix-section:has(.r4g-contatti) .brix-section-row-inner-wrapper { align-items: center; }
.brix-section:has(.r4g-contatti) .brix-section-column-spacing-wrapper { margin-top: 0 !important; }
.brix-section:has(.r4g-contatti) .brix-block-content :is(h1, h2, h3, h4, h5, h6) { text-align: center !important; }
/* Qui Facebook e' il logo ufficiale di Meta (simple-icons), che e' gia' il cerchio: il fondo bianco fa la "f" (important: originale.css forza il blu vecchio). */
.brix-builder ul.cnss-social-icon li.cn-fa-icon a.cnss-facebook { border-radius: 50%; color: #0866ff; background: #fff !important; }
.brix-builder .cnss-social-icon a.cnss-facebook svg { width: 48px; height: 48px; }

/* La testata della pagina Contatti: il testo bianco cadeva sulla tazzina e
   non si leggeva. Sta a destra; su telefono si allinea a destra, piu' piccolo
   e su piu' righe. Un'ombra lo stacca. */
.brix-section:has(.brix-block-button[href="#dove-siamo"]) h2 { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.brix-section:has(.brix-block-button[href="#dove-siamo"]) .brix-section-column-inner-wrapper { margin-left: 45%; }
@media screen and (max-width: 767px) {
  .brix-section:has(.brix-block-button[href="#dove-siamo"]) .brix-section-column-inner-wrapper { margin-left: 35%; }
  .brix-section:has(.brix-block-button[href="#dove-siamo"]) h2 { font-size: 21px; line-height: 1.3; text-align: right !important; }
  .brix-section:has(.brix-block-button[href="#dove-siamo"]) .brix-section-column-block-button { text-align: right !important; white-space: nowrap; }
}

/* La pillola che manda al motore di prenotazione, sotto il paragrafo di
   apertura della home (vedi HomePage.astro). Stesse misure di "Dove Siamo". */
.r4g-prenota { text-align: center; }
.r4g-prenota a {
  display: inline-block;
  padding: .9em 1.8em;
  border: 2px solid #94212c;
  border-radius: 50em;
  color: #fff;
  background: #94212c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .11), 0 4px 6px rgba(0, 0, 0, .08);
  font-size: 13.6px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.r4g-prenota a:hover { color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, .2), 0 7px 16px rgba(0, 0, 0, .2); }

/* Il recapito al posto del modulo di contatto (vedi brix.ts). */
.r4g-contatti { text-align: center; }
/* Stessa pillola di "Dove Siamo": piena per la mail, a contorno per WhatsApp. */
.r4g-contatti a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 6px;
  padding: .9em 1.8em;
  border: 2px solid #94212c;
  border-radius: 50em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .11), 0 4px 6px rgba(0, 0, 0, .08);
  font-size: 13.6px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.r4g-contatti svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.r4g-contatti .fx-b-s-fill { color: #fff; background: #94212c; }
.r4g-contatti .fx-b-s-ghost { color: #94212c; background: #fff; }

/* Titoli a cui la pulizia ha corretto il livello (pulizia.ts): restano con la
   misura del livello di prima, prese dal tema. Valgono nelle pagine Brix e
   negli articoli. */
.fx-mc-w_i [data-livello="2"] { font-size: 32px; line-height: 1.25; letter-spacing: -1px; text-transform: none; }
.fx-mc-w_i [data-livello="3"] { font-size: 24px; line-height: 1.25; letter-spacing: -1px; text-transform: none; }
.fx-mc-w_i [data-livello="4"] { font-size: 21px; line-height: 1.25; letter-spacing: -1px; text-transform: none; }
.fx-mc-w_i [data-livello="5"] { font-size: 16px; line-height: 1.25; letter-spacing: 2px; text-transform: uppercase; }
.fx-mc-w_i [data-livello="6"] { font-size: 16px; line-height: 1.25; letter-spacing: 0; text-transform: none; }

/* Il tema faceva comparire sfondi e icone con una dissolvenza lanciata dal suo
   JavaScript, e nelle fisarmoniche calcolava l'altezza della voce aperta. Qui
   sfondi e icone sono subito visibili e la voce chiusa non occupa spazio. */
.brix-builder .brix-background-image,
.brix-builder .brix-icon { opacity: 1; }
.brix-builder .brix-toggle .brix-toggle-content { display: none; opacity: 1; }
.brix-builder .brix-toggle.brix-active .brix-toggle-content { display: block; }

/* Il carosello degli articoli della home: nel tema lo muoveva Flickity, qui
   scorre con il CSS e le frecce lo spostano di una schermata. */
.brix-builder .fx-loop-style-carousel .fx-b-l-w {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.brix-builder .fx-loop-style-carousel .fx-b-l-w::-webkit-scrollbar { display: none; }
.brix-builder .fx-loop-style-carousel .fx-loop-item-style-carousel { display: flex; flex: 0 0 auto; flex-direction: column; box-sizing: border-box; scroll-snap-align: start; }
.brix-builder .r4g-frecce-sopra { display: flex; flex-direction: column-reverse; }
.brix-builder .brix-blog-carousel-controls-wrapper button { margin: 0; border: 0; background: none; color: #171819; cursor: pointer; }
.brix-builder .brix-blog-carousel-controls-wrapper .brix-blog-carousel-prev-arrow:before,
.brix-builder .brix-blog-carousel-controls-wrapper .brix-blog-carousel-next-arrow:before,
.brix-builder .brix-blog-carousel-controls-wrapper .brix-blog-carousel-prev-arrow:after,
.brix-builder .brix-blog-carousel-controls-wrapper .brix-blog-carousel-next-arrow:after { content: none !important; }
.brix-builder .brix-blog-carousel-controls-wrapper button svg {
  display: block !important;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none !important;
}
.brix-builder .brix-blog-carousel-arrow-disabled { opacity: .3; pointer-events: none; }

/* Le schede del carosello: foto tutte 3:2 e titolo che prende lo spazio libero,
   cosi' la linea rossa (il bordo del footer con la categoria) cade alla stessa
   altezza in ogni scheda. Il riassunto, che il tema lasciava vuoto, sta in tre
   righe per tenere allineati anche i "Read more". */
.brix-builder .fx-loop-style-carousel .fx-loop-item-style-carousel header { flex-grow: 1; }
.brix-builder .fx-loop-style-carousel .fx-entry-featured-image a { display: block; }
.brix-builder .fx-loop-style-carousel .fx-entry-featured-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.brix-builder .fx-loop-style-carousel .entry-content p { display: -webkit-box; height: 4.5em; margin: 12px 0 0; overflow: hidden; font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Le cinque home WordPress avevano conservato spaziature diverse nel blocco
   Curiosita'. La home italiana e' il riferimento: titolo, tre pulsanti e
   carosello usano le sue distanze in tutte le lingue. */
.r4g-home-brix .brix-section:has(.r4g-carosello) .brix-section-column-block-text { padding-bottom: 0 !important; }
.r4g-home-brix .brix-section:has(.r4g-carosello) .brix-section-column-block-button {
  margin: 20px 0 0 !important;
  padding: 0 !important;
}
.r4g-home-brix .brix-section-column-block-blog:has(.r4g-carosello) { margin: 0 !important; padding: 0 !important; }
@media screen and (max-width: 1024px) {
  .r4g-home-brix .brix-section:has(.r4g-carosello) .brix-section-column-block-button { margin: 0 !important; }
}
@media screen and (max-width: 767px) {
  .r4g-home-brix .brix-section:has(.r4g-carosello) .brix-section-column-block-button { margin: 10px 0 !important; }
}

/* Lo stesso per il blocco recensioni: le home tradotte non azzeravano i margini
   del titolo, della linea e del blocco, l'italiana si'. */
.r4g-home-brix .brix-section:has(.r4g-recensioni) .brix-section-column-block-text { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.r4g-home-brix .brix-section:has(.r4g-recensioni) .brix-section-column-block-divider { padding-bottom: 0 !important; }
.r4g-home-brix .brix-section-column-block-html:has(.r4g-recensioni) { padding-top: 0 !important; padding-bottom: 0 !important; }

/* L'elenco di articoli a colonne (tour autoguidati): nel tema le disponeva lo
   script Isotope, qui le affianca il CSS. */
.brix-builder .fx-loop-style-masonry .brix-blog-block-loop-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; }
.brix-builder .fx-loop-style-masonry .hentry { box-sizing: border-box; }
.brix-builder .fx-loop-style-masonry.fx-loop-col-2 .hentry { width: 50%; }
.brix-builder .fx-loop-style-masonry.fx-loop-col-3 .hentry { width: 33.33333333%; }
.brix-builder .fx-loop-style-masonry.fx-loop-col-4 .hentry { width: 25%; }
@media screen and (max-width: 768px) { .brix-builder .fx-loop-style-masonry[class*="fx-loop-col-"] .hentry { width: 100%; } }

/* L'elenco Curiosita' con i filtri (ContentPage): la riga del filtro attivo e
   le schede nascoste dal filtro. */
.blog [hidden] { display: none !important; }
.blog .blog-active { margin: 0 15px 12px; font-size: 14px; }
.blog .blog-active a { color: #94212c; }
.blog .blog-empty { margin: 24px 15px; }
/* I titoli tradotti hanno lunghezze diverse. La testata conserva quattro righe
   in ogni lingua: il bordo rosso e la categoria cominciano quindi alla stessa
   altezza in tutte le schede della griglia. */
.blog .article-card > header { min-height: 120px; }
.blog .article-card .fx-entry-featured-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Le locandine dell'assicurazione nelle pagine Offerte erano immagini
   inline: su schermi stretti conservavano la loro larghezza intrinseca e il
   riquadro restava troppo piccolo. Riempiono ora la colonna senza ritagli. */
.offerta-assicurazione-image .brix-image,
.offerta-assicurazione-image .brix-image-wrapper,
.offerta-assicurazione-image .brix-block-image-img { width: 100%; }
.offerta-assicurazione-image .brix-block-image-img { display: block; aspect-ratio: 1; object-fit: contain; }
@media screen and (max-width: 768px) { .blog .article-card > header { min-height: 0; } }

/* Le griglie di foto degli album e delle gallerie: nel tema le disponeva lo
   script Isotope, qui bastano le colonne. */
.fx-a-mc-w_i::after, .brix-gallery-container::after { content: ""; display: table; clear: both; }
.fx-a-mc .fx-gc-i, .brix-gallery-container .fx-gc-i { box-sizing: border-box; margin: 0; padding: 6px; }
.fx-a-mc.fx-gc-2 .fx-gc-i, .brix-gallery-columns-2 .fx-gc-i { width: 50%; }
.fx-a-mc.fx-gc-3 .fx-gc-i, .brix-gallery-columns-3 .fx-gc-i { width: 33.33333333%; }
.fx-a-mc .fx-gc-i img, .brix-gallery-container .fx-gc-i img { display: block; width: 100%; height: auto; }
@media screen and (max-width: 768px) { .brix-gallery-columns-3 .fx-gc-i { width: 50%; } }

/* Le frecce fra un album e l'altro: la punta era un'icona del font del tema. */
.fx-a-n [rel="prev"]:before, .fx-a-n [rel="next"]:before { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.fx-a-n [rel="prev"]:before { transform: rotate(-45deg); }
.fx-a-n [rel="next"]:before { transform: rotate(135deg); }

/* "Read more" nelle schede degli articoli: il tema lo mostrava al 40% di
   opacita', sotto la soglia di contrasto. Pieno, il suo grigio sta a 5,2:1
   (grigi scuriti con l'ok di Stabellini, registro voce 23). */
.fx-rm a { opacity: 1; }