/*
 Theme Name:   La Fabbrica dei colori
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/

/* --- Base: dimensioni & layout --- */

p { font-size:16px;  font-weight: 300;   font-family: "Sen", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;}

.white-card__text p { word-break:normal}

.container-fluid { padding-left:0px; padding-right:0px;}
.acf-swiper {
  position: relative;
  width: 100%;
  height: 60vh;            /* richiesta: altezza slider 60vh */
  overflow: hidden;
}

.acf-swiper .swiper-wrapper {
  height: 100%;
}


.amatic {  font-family: "Amatic SC", sans-serif;
  font-weight: 700;
  font-style: normal;}


.acf-swiper .swiper-slide {
  position: relative;
  height: 60vh;            /* allinea l’altezza della slide al wrapper */
  /* IMPORTANTE: non mettere width qui. Viene gestito per modalità. */
}
.is-white .swiper-slide {
  position: relative;
  height: auto;            /* allinea l’altezza della slide al wrapper */
  /* IMPORTANTE: non mettere width qui. Viene gestito per modalità. */
}

/* --- Media: immagine --- */
.acf-swiper .slide-media { 
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* FULLSCREEN → immagine che riempie */
.acf-swiper.is-fullscreen .slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CAROSELLO → larghezza naturale, altezza 100% */
.acf-swiper.is-carousel .slide-media img {
  height: 100%;
  width: auto;           /* mantieni la larghezza dell’immagine */
  object-fit: contain;   /* non taglia, mantiene proporzioni */
  display: block;
}

/* Carosello: slide centrati, larghezza auto */
.acf-swiper.is-carousel .swiper-slide {
  width: auto !important;   /* lascia che sia l’immagine a decidere */
  height: 60vh;             /* altezza fissa come da richiesta */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --- Overlay per leggibilità (disattivabile con .no-overlay) --- */


.slide-media.overlay-media::after { 
      content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.10) 100%);
  pointer-events: none;
    
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 100%);}

/* --- Contenuto in overlay --- */
.acf-swiper .slide-content {
  position: absolute; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  color: #fff;
  z-index: 2;              /* sopra immagine & overlay */
}

.acf-swiper .slide-content .title {
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);
  font-weight: 700;
  margin-bottom: .75rem;
}

.acf-swiper .slide-content .btn-wrap {
  margin-top: .5rem;
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Se usi .btn-light di Bootstrap sull’immagine scura, migliora contrasto */
.acf-swiper .slide-content .btn.btn-light {
  color: #111;
}

/* --- Controlli Swiper (frecce e pallini) --- */
.acf-swiper .swiper-button-prev,
.acf-swiper .swiper-button-next {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.acf-swiper .swiper-pagination-bullet {
  background: #fff; 
  opacity: .6;
}
.acf-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* --- Modalità: FULLSCREEN (1 slide) --- */
.acf-swiper.is-fullscreen .swiper-slide {
  width: 100%;             /* 1 slide per volta */
}

/* --- Modalità: CAROSELLO (slides centrati, larghezza auto) --- */
.acf-swiper.is-carousel .swiper-wrapper {
  align-items: stretch;     /* assicura altezza coerente */
}



/* --- Utility opzionali --- */

/* 1) Posizionamenti alternativi del contenuto (usa in aggiunta a .slide-content) */
.acf-swiper .content-top-left    { align-items: flex-start; justify-content: flex-start; text-align: left; padding: 2rem; }
.acf-swiper .content-top-center  { align-items: flex-start; justify-content: center;     text-align: center; padding: 2rem; }
.acf-swiper .content-top-right   { align-items: flex-start; justify-content: flex-end;   text-align: right;  padding: 2rem; }
.acf-swiper .content-bottom-left { align-items: flex-end;   justify-content: flex-start; text-align: left;   padding: 2rem; }
.acf-swiper .content-bottom-center{align-items: flex-end;   justify-content: center;     text-align: center; padding: 2rem; }
.acf-swiper .content-bottom-right{ align-items: flex-end;   justify-content: flex-end;   text-align: right;  padding: 2rem; }

/* 2) Variante senza overlay scuro */
.acf-swiper.no-overlay .slide-media::after { display: none; }

/* 3) Riduci padding contenuto su schermi molto piccoli */

/* 4) Se il tema ha header fixed e vuoi “spingere giù” il contenuto testuale:
   .acf-swiper .slide-content { padding-top: calc(1.25rem + var(--header-h, 0px)); }
*/




/* ===== Sezione Bianca ===== */
.section-white { background: #f5f5f5; } /* o #fff se preferisci */
.section-white .wysiwyg p:last-child { margin-bottom: 0; }

/* Carosello “white” */
.acf-swiper.is-white { --tile-h: 220px; } /* altezza immagine; regola a gusto */
.acf-swiper.is-white .swiper-wrapper { align-items: stretch; }
.acf-swiper.is-white .swiper-slide { width: auto; }

.white-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Media + overlay title */
.white-card__media {
  position: relative;
  height: auto;
  overflow: hidden;
  border-radius: .5rem;
  background: #eee;
}
.white-card__media img {
  height: 100%;
  width: 100%;           /* conserva larghezza naturale */
  object-fit: cover;
  display: block;
}

.altezza { min-height:40vh;display: flex;
  align-items: center; /* centra verticalmente le colonne */}

.is-white { height:auto!important}
.white-card__overlay-title {
  position: absolute;
  left: .75rem; bottom: .5rem;
  
  color: #fff;
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: .35rem;
  line-height: 1.1;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

/* Corpo */
.white-card__body {
  padding-top: .75rem;
}
.white-card__text p { margin-bottom: .5rem; }

/* Controlli Swiper “white” */
.acf-swiper.is-white .swiper-button-prev,
.acf-swiper.is-white .swiper-button-next {
  color: #111;
}
.acf-swiper.is-white .swiper-pagination-bullet {
  background: #111;
  opacity: .35;
}
.acf-swiper.is-white .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Responsive: 1 → 2 → 3 tile visibili, con spazio */
@media (min-width: 576px) {
  .acf-swiper.is-white { --tile-h: 240px; }
}
@media (min-width: 768px) {
  .acf-swiper.is-white { --tile-h: 260px; }
}
@media (min-width: 1200px) {
  .acf-swiper.is-white { --tile-h: 280px; }
}


.section-white__text h1,
.section-white__text h2,
.section-white__text h3,
.section-white__text h4,
.section-white__text h5,
.section-white__text h6 {
  font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  
}


.section-white__text h1,
.section-white__text h2 { font-size:300%;}
.white-card__overlay-title {
  position: absolute;
  inset: 0;                        /* occupa tutta l’area dell’immagine */
  display: flex;
  align-items: center;             /* centro verticale */
  justify-content: center;         /* centro orizzontale */

   /
  color: #fff;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: .35rem;
  line-height: 1.2;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-align: center;
}
.white-card__overlay-title { font-size:200%;}


/* ===== Sezione Colorata ===== */
.section-colored__row { min-height: 60vh; } /* allineamento verticale gradevole */
.section-colored__media-wrap { position: relative; height: 100%; }
.section-colored__media { display: block; width: 100%; height: 100%; object-fit: cover; }

/* eventuale testo sulla foto a sinistra */
.section-colored__media-text {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(0,0,0,.45); color: #fff; padding: .5rem .75rem; border-radius: .35rem;
}

/* pannello a destra con colore dinamico */
.section-colored__panel {
  background: var(--panel-bg, #f0934e);
  color: #fff;
  height: 100%;
}

/* titolo grande */
.section-colored__title { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }

/* --- carosello interno (variant color) --- */
.acf-swiper.is-colored { --tile-h: 200px; }
.acf-swiper.is-colored .swiper-wrapper { align-items: stretch; }
.acf-swiper.is-colored .swiper-slide { width: auto; }

.colored-card { display: flex; flex-direction: column; height: 100%; }
.colored-card__media { position: relative; height: var(--tile-h); overflow: hidden; border-radius: .5rem; background:#fff2; }
.colored-card__media img { height: 100%; width: auto; object-fit: contain; display: block; margin: 0 auto; }

/* testo overlay centrato sull'immagine */
.colored-card__overlay-title {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center; padding: .25rem .5rem;
  background: rgba(0,0,0,.35); border-radius: .5rem;
  font-weight: 700; line-height: 1.2; font-size: clamp(1rem,1.6vw,1.25rem);
}

.colored-card__body { padding-top: .75rem; }
.colored-card__text p { margin-bottom: .5rem; }

/* controlli chiari sul pannello colorato */
.acf-swiper.is-colored .swiper-button-prev,
.acf-swiper.is-colored .swiper-button-next { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.acf-swiper.is-colored .swiper-pagination-bullet { background: #fff; opacity: .5; }
.acf-swiper.is-colored .swiper-pagination-bullet-active { opacity: 1; }

/* responsive tile height */
@media (min-width: 576px){ .acf-swiper.is-colored { --tile-h: 220px; } }
@media (min-width: 768px){ .acf-swiper.is-colored { --tile-h: 240px; } }
@media (min-width: 1200px){ .acf-swiper.is-colored { --tile-h: 260px; } }

/* La riga deve essere alta ~60vh */
.section-colored__row { min-height: 60vh; }




/* Il wrapper dell’immagine occupa tutta l’altezza della colonna */
.section-colored__media-wrap {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;   /* cresce per riempire la colonna d-flex */
}

/* L’immagine si comporta come background-size: cover */
.section-colored__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Pannello a destra: centra verticalmente il contenuto */
.section-colored__panel {
  background: var(--panel-bg, #f0934e);
  min-height: 100%;
}


/* row alta 60vh */
.section-colored__row { min-height: 60vh; }

/* immagine sinistra: cover */
.section-colored__media-wrap { position: relative; overflow: hidden; }
.section-colored__media { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* pannello destro: riempi altezza e centra verticalmente */
.section-colored__panel { background: var(--panel-bg, #f0934e); height: 100%; display: flex; align-items: center; }

.white-card__text h1, .white-card__text h2, .white-card__text h3, .white-card__text h4, .white-card__text h5 {font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;} 


.testo_icone { margin-top:30px;}

.col_icona img { width:80%;}

.testo_icone h1, .testo_icone h2, .testo_icone h3, .testo_icone h4, .testo_icone h5 {font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;}
.colored-card__text h1, .colored-card__text h2, .colored-card__text h3, .colored-card__text h4, .colored-card__text h5  {font-family: "Amatic SC", sans-serif;
  font-weight: 400;
  font-style: normal;}

/* SOLO nella sezione colorata: niente 60vh fissi */
.section-colored .acf-swiper,
.acf-swiper.is-colored {
  height: auto !important;
}

.acf-swiper.is-colored .swiper-wrapper,
.acf-swiper.is-colored .swiper-slide {
  height: auto !important;
}

.acf-swiper.is-colored .swiper-slide {
  width: 50% !important;   /* annulla .acf-swiper.is-colored .swiper-slide { width:auto; } */
  flex: 0 0 auto;            /* non allargarti oltre la width inline */
  min-width: 0;              /* evita overflow per contenuti lunghi */
}
.acf-swiper .swiper-slide {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Niente width strane sul wrapper */
.acf-swiper .swiper-wrapper {
  /* non mettere width qui */
  flex-wrap: nowrap; /* ok specificarlo */
}
/* Evita che il pannello imponga h:100% lungo la catena */
.section-colored__panel {
  height: auto !important;
  min-height: 0 !important;
}

.acf-swiper.is-colored .swiper-wrapper { align-items: stretch; }

.menu-item a {font-family: "Amatic SC", sans-serif!important; font-size:24px!important; font-weight:bold!important}

.navbar-nav .menu-item:not(:last-child) a::after {
    content: "|";           /* ← cambia il simbolo come vuoi */
    margin: 0 24px;
    color: #333;            /* colore del separatore */
    font-weight: 300;
}