/* Reset CSS per rimuovere i margini e padding di default */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

html {
  scrollbar-gutter: stable;
}

/* Stile generale del body */
body {
    font-family: "Lora", serif; /* font più delicato */
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

/*  Stile generale dell'header */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 20px 0;
}

/* Contenitore logo intero */
.logo-full {
    display: flex;
    align-items: flex-start;
    gap: 1px;
    margin-left: 0;
    transform: translateX(-80px); /* sposta tutto verso sinistra */
  }
  
  
  /* Fiamma */
  .logo-icon img {
    height: 170px;             /* aumenta la fiamma */
    margin-top: 4px;           /* allinea la base con la scritta sotto */
    object-fit: contain;
  }
  
  /* Contenitore testo */
  .logo-testo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    line-height: 1.1;
    text-align: left;
    margin-top: 22px;
  }

  .logo-link {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  text-decoration: none;
  color: inherit;
}
  
  /* Riga "F.lli TIMPERI" */
  .riga1 {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }
  
/* "F.lli" */
.flli {
    font-family: 'Raleway', sans-serif;
    font-size: 50px;
    font-weight: 300;
    color: #000000; /* nero pieno */
    letter-spacing: 1px;
}
  
/* "TIMPERI" */
.timperi {
    font-family: 'Raleway', sans-serif;
    font-size: 85px;
    font-weight: 250;
    color: #5C1E1E; /* bordeaux più preciso */
    letter-spacing: 1px;
    margin-bottom: 1px;
}
  
  /* Riga sotto: "ONORANZE FUNEBRI GUIDONIA" */
  .riga2 {
    font-family: 'EB Garamond', serif;
    font-size: 23px;
    font-weight: 400;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 4px;
  }



/*  Barra del menu */
.navbar {
  width: 100%;
  background: #e5e5e5;
}

/*  Menu contenuto nella barra */
.navbar .menu {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 26px 0;
  gap: 45px;
}

/*  Voci principali del menu */
.navbar .menu li {
  position: relative;
  font-size: 20px;
  font-weight: 400;
  color: #111 !important;
  font-family: 'Libre Baskerville', serif;
}

/*  Stile dei link */
.navbar .menu a, 
.navbar .menu .dropdown > a { 
  text-decoration: none;
  font-size: 1.1rem;
  padding: 8px 16px;
  font-weight: 400;
  color: #111 !important;
  transition: color 0.3s ease;
  font-family: 'Libre Baskerville', serif;
}


@media screen and (min-width:993px ) {
  .navbar .menu a, 
  .navbar .menu .dropdown > a   {
      font-size: 1rem;
      padding: 4px;
    }
}

@media screen and (min-width: 1281px ) {
  .navbar .menu a, 
  .navbar .menu .dropdown > a   {
      font-size: 1.1rem;
      padding: 8px;
    }
}

/*  Hover e voce attiva */
.navbar .menu li:hover > a,
.navbar .menu a.active {
  color: #7a0d1e !important;
  font-weight: 700;
}

/*  Dropdown: correggiamo lo sfondo e la larghezza */
.navbar .dropdown .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  background: #e5e5e5;
  width: 240px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1000;
  padding: 6px 0;
  max-height: 340px;
  padding-inline-start: 0 !important;
}

/*  Mostra dropdown al passaggio con fade più elegante */
.navbar .dropdown:hover .submenu {
  display: block;
}

/*  Keyframes animazione fadeIn (definizione completa) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/*  Stile delle voci interne della tendina */
.navbar .submenu li {
  padding: 6px 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  width: 270px;
}

/*  Testo delle voci interne */
.navbar .submenu li a {
  font-family: 'Lora', serif;
  font-size: 17px;
  color: rgb(0, 0, 0);
  padding: 8px 12px;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  width: calc(170% - 28px);
  box-sizing: border-box;
}

/*  Hover su voci interne */
.navbar .submenu li:hover {
  background: #d0d0d0;
}

.navbar .submenu li:hover a {
  color: #000 !important;
}

/*  Effetto transizione generale su link */
.navbar .menu li a, 
.navbar .submenu li a {
  transition: all 0.3s ease-in-out;
}

/*  Protezione area hover anti-scomparsa */
.navbar .menu > li.dropdown {
  position: relative;
}

.navbar .menu > li.dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 30px;
}


.chiamata-urgente {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -20px; /* AGGIUNTO: spinge tutto il blocco verso l'alto */
}

.chiamata-testo {
    font-family: 'Libre Baskerville', serif;
    font-size: 23px;
    margin-bottom: 5px; /* Abbassiamo leggermente solo la scritta */
    color: #333;
}

.bottoni-chiamata {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-chiamata {
    background-color: #8B0000;
    color: #fff;
    padding: 13px 26px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s;
}

.btn-chiamata:hover {
    background-color: #600000;
}

.btn-chiamata small {
    display: block;
    font-weight: normal;
    margin-top: 4px;
    font-size: 14px;
}

/* Nuova versione blog dinamico */
.blog-container-advanced {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin: 60px auto;
  max-width: 1300px;
}

.blog-box-advanced {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  width: 360px;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.blog-box-advanced:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.blog-box-advanced img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

.blog-box-content {
  padding: 20px;
}

.blog-box-advanced h3 {
  font-family: 'Georgia', serif;
  font-size: 20px;
  font-weight: bold;
  color: #800000;
  margin: 10px 0 15px 0;
  line-height: 1.3;
  height: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-box-content h3 a {
  color: #800000;
  text-decoration: none;
}

.blog-box-content h3 a:hover {
  text-decoration: underline;
}

.blog-box-content .estratto {
  font-family: 'Georgia', serif;
  font-size: 16px;
  color: #444;
  line-height: 1.5;
}

.related-articles {
  text-align: center;
  margin: 80px auto 60px auto;
  max-width: 900px;
}

.related-articles .separatore {
  display: block;
  margin: 40px auto;
  max-width: 90%;
  height: 46px;
  opacity: 0.7;
}

.related-articles .related-title {
  font-family: 'Georgia', serif;
  font-size: 24px;
  font-weight: bold;
  color: #4a4a4a;
  margin-bottom: 16px;
}

.related-articles .related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-articles .related-list li {
  margin: 8px 0;
}

.related-articles .related-list a {
  color: #800000;
  font-family: 'Georgia', serif;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.related-articles .related-list a:hover {
  color: #a00000;
  text-decoration: underline;
}


/*  Nuova struttura: contenitore logo + bottoni */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    max-width: 1300px;
    margin: 0 auto;
    flex-wrap: wrap; /* aggiungiamo wrap per mobile dopo */
}


/* Contenitore principale */
.services {
    background: #f5f5f5;
    padding: 50px 10px;
}

/* Hamburger nascosto su desktop */
.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  gap: 5px;
  margin: 15px;
}

.hamburger-menu span {
  height: 4px;
  background-color: #700000;
  border-radius: 2px;
}

/* Hamburger per sticky bar DESKTOP */
.hamburger-desktop {
  display: none; /* nascosto di default */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.hamburger-desktop span {
  height: 4px;
  width: 25px;
  background-color: #700000;
  border-radius: 2px;
}

/* Titolo della sezione */
.services-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 500;
  color: #65533a;
  text-transform: uppercase;
  margin-bottom: 20px;   /* leggermente più spazio sotto al titolo */
  letter-spacing: 1px;
  text-align: center;
}

/* Contenitore dei box */
.services-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;             /* da 30px a 25px: più compatto */
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;         /* più aria dentro il contenitore */
}

/* Box dei servizi */
.service-box {
  aspect-ratio: 1 / 1;   /* lasciamo attivo su desktop */
  padding: 25px 20px 40px; /* ridotto un po’ il padding sotto */
  background: #ececec;
  border: 1px solid #d1d0d0;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
}

/* Hover */
.service-box:hover {
  box-shadow: 0 10px 18px rgb(112, 111, 111);
  transform: translateY(-3px);
}

/* Titoli dei box */
.service-box h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 21px;
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #222;
  margin-bottom: 15px;
}

/* Testo descrittivo */
.service-box p {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.5;
  flex-grow: 1;
}

/* Bottone */
.service-box .btn {
  position: absolute;
  bottom: 20px;
  left: 25px;
  background-color: #b6b6b6;
  color: white;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.service-box .btn:hover {
  background-color: #8f0707;
}

/* === Separatore: BASE DESKTOP === */
.separatore {
  text-align: center;
  margin-top: 0px;   /* distanza dal titolo sopra */
  margin-bottom: 60px; /* distanza dai box sotto */
}

.separatore img {
  display: block;
  margin: 0 auto;
  max-width: 90%;   /* evita overflow */
  height: 68px;     /* altezza fissa desktop */
  opacity: 0.7;
}


/* Stile del nuovo testo introduttivo */
.intro-text {
    text-align: center;
    font-size: 20px;
    color: #555;
    max-width: 1000px;
    margin: 80px auto;
    line-height: 2.0;
}

.intro-text em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 28px;
    color: #636262;
}

/* Contenitore della sezione */
.grid-section {
    text-align: center;
    margin-bottom: 10px;
}

/* Titolo principale sopra la griglia */
.grid-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 500;
    color: #444;
    margin-bottom: 50px; /* maggiore spazio sotto il titolo */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* Contenitore della griglia */
.grid-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
    margin: 30px auto;
    max-width: 1700px;
}

/* Stile dei box */
.grid-box {
    flex: 1;
    max-width: 445px;
    min-height: 400px; /* altezza minima uguale per tutti */
    padding-left: 30px; /* spazio interno tra barra e testo */
    text-align: left;
    position: relative;
    border-left: 2px solid #cccccc; /* barra grigia più chiara */
    background: transparent; /* eliminiamo il bianco */
    box-shadow: none; /* togliamo l'ombra */
    border-radius: 0; /* togliamo gli angoli arrotondati */
}

.grid-box h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 400; /* leggero */
    color: #333333;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block; /* solo qui */
    padding-bottom: 10px; /* un po' di spazio tra titolo e linea */
    border-bottom: 2px solid #cccccc; /* linea grigia sotto il titolo */
}

/* Paragrafo iniziale nei box */
.grid-box p:first-of-type {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 19px;
    color: #555;
    margin-top: 10px; /* leggero respiro sopra */
    margin-bottom: 25px; /* leggero respiro sotto */
    line-height: 1.6;
}

/* Lista personalizzata */
.grid-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Voci della lista con icona personalizzata */
.grid-box ul li {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    font-size: 18px;
    font-family: 'Lora', serif; /* font elegante */
    color: #444;
    line-height: 1.8;
}

/* Stile dei link nelle liste */
.grid-box ul li a {
  color: #333;
  font-size: inherit;
  font-family: 'Lora', serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.2px;
  text-decoration-color: #5b5b5b; /* grigio chiaro iniziale */
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

/* Stile per lo span su desktop */
.grid-box ul li span.only-desktop {
  font-size: 18px;
  font-family: 'Lora', serif;
  line-height: 1.8;
  color: #333;
}

/* Puntini grafici accanto alle voci */
.grid-box ul li::before {
    content: "•"; /* pallino sottile e fine */
    color: #888; /* grigio chiaro */
    font-size: 15px;
    margin-right: 12px;
    line-height: 1.5;
}

/* Hover: righetta e testo rossi */
.grid-box ul li a:hover {
  color: #900000;
  text-decoration-color: #8B0000;
}

/* Testo descrittivo coerente */
.page-content .testo-blocco {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Lora', serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  padding: 0 20px;
}

.page-title h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  color: #65533a;
  text-align: center;
  margin-bottom: 26px;
  padding-top: 14px; /* aggiunto per staccare dal menu */
}
.gallery-orizzontale {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin: 40px auto;
  padding: 0 20px;
  max-width: 1000px;
}

/* Link che avvolge il documento: inline-block evita box “strano” */
.gallery-orizzontale a {
  display: inline-block;
  -webkit-tap-highlight-color: transparent; /* iOS: niente flash/blu */
}

/* Focus/active: niente contorni blu persistenti */
.gallery-orizzontale a:focus,
.gallery-orizzontale a:active {
  outline: none;
  box-shadow: none;
}

/* Immagini documento */
.gallery-orizzontale img {
  max-width: 300px;
  height: auto;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.12);

  /* Mobile/iOS: impedisce drag “ghost” e callout */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Desktop: evita trascinamento del LINK (l’etichetta URL che “porti in giro”) */
.gallery-orizzontale a,
.gallery-orizzontale a img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Immagine finale centrata e ridimensionata */
/*.img-small-center {
  display: block;
  margin: 40px auto;
  max-width: 600px;
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
}*/

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
}

.faq-question {
    background-color: #f2f2f2;
    color: #333;
    padding: 12px;
    width: 100%;
    border: none;
    font-weight: bold;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #ddd;
}

.faq-answer {
    display: none;
    padding: 10px 15px;
    background-color: #fafafa;
    font-size: 15px;
}

.cover-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

/* =============================
   Immagine di copertina
   ============================= */
.cover-image img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: block;
  margin-top: 35px;
}

.cover-image picture {
    width: 100%;
    max-width: 1000px;
    display: block;
}

.homepage-cover {
  position: relative;
  width: 100%;
  height: 280px; /* mobile */
  overflow: hidden;
}


.homepage-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.homepage-overlay {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 520px;
}

.homepage-overlay h1 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.homepage-overlay p {
  font-size: 0.95rem;
  margin: 0;
}


/* Gestione visibilità elementi (lasciali così) */
.only-mobile {
  display: none;
}
.only-desktop {
  display: inline;
}


/* Posizionamento del bottone torna indietro */
.back-button-container {
  position: absolute;
  top: 360px; /* <-- questo lo aumentiamo ora */
  left: 30px;
  z-index: 999;
}

main {
  position: relative;
}

.back-button {
  font-family: 'Libre Baskerville', serif;
  font-size: 14px;
  color: #7a0d1e;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: o;
}

.back-button:hover {
  color: #000;
}

.back-button:hover {
  color: #000;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --- SWIPER CAROSELLO REVISIONATO --- */
/* Contenitore principale */
.gallery-carousel {
    position: relative;
    overflow: visible; /* importante per far vedere le frecce */
    max-width: 1280px;
    margin: 60px auto 0 auto;
    padding: 0 20px;
}

.carousel-title {
  font-family: 'Cormorant Garamond', serif; /* per uniformarlo al titolo principale */
  text-align: center;
  font-size: 46px; /* leggermente aumentato per dare importanza come h2 */
  margin-bottom: 10px;
  font-weight: bold;
  color: #8B0000; /* lo stesso colore del titolo principale */
}


/* Swiper */
.swiper {
    overflow: visible;
    position: relative;
}

.mySwiper {
    position: relative;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.mySwiper .swiper-slide {
  width: 250px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(195, 195, 195);
  border-radius: 10px;

  /*  bordo bordeaux */
  border: 1px solid #9d9d9d;

  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.mySwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: auto;
    transition: none;

    /* aggiunte per eliminare righe blu di focus */
    outline: none;                 /* elimina il contorno blu standard */
    box-shadow: none;              /* elimina eventuali glow */
    -webkit-tap-highlight-color: transparent; /* elimina flash grigio/blu su iOS */
}

.mySwiper .swiper-slide a:focus,
.mySwiper .swiper-slide a:focus-visible,
.mySwiper .swiper-slide img:focus {
  outline: none;
  box-shadow: none;
}

.swiper-container-outer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent; /*  nessun cerchio */
    border-radius: 0;        /*  nessun bordo tondo */
    box-shadow: none;       /*  nessuna ombra */
    cursor: pointer;
    margin: 0 -60px;
}


/*  Nascondi le frecce standard */
.swiper-button-next::after,
.swiper-button-prev::after {
    content: none !important;
}


/*  Aggiungi la freccia personalizzata */
.swiper-button-next::before,
.swiper-button-prev::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 3px solid #8B0000; /* bordeaux */
    border-right: 3px solid #8B0000;
    margin: auto;
    transform: rotate(45deg);
}

.swiper-button-prev::before {
    transform: rotate(-135deg);
}

/* Nasconde sticky quando lightbox è aperta */
.hide-sticky {
    display: none !important;
}


/* Caption di default (desktop) */
.fancybox__caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 20px;
  width: 100%;
  text-align: center;
  font-size: 18px;
  z-index: 1000; /* non serve 9999 */
}

/* ============================
   Blocco testo generale (usato anche in altre pagine)
   ============================ */
.testo-blocco {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

.testo-blocco h2 {
    margin-top: 3rem;        /* distanza sopra il titolo */
    margin-bottom: 0.9rem;   /* distanza sotto il titolo */
    font-size: 1.4rem;       /* opzionale per renderlo più evidente */
    color: #000000;        /* stesso colore dei titoli se vuoi coerenza */
}

.testo-blocco p + p {
    margin-top: 1.2rem;
}

.elenco-puntato {
  list-style-type: disc;
  margin: 0 0 1em 65px;  /* spinge tutto a destra per allinearsi ai : */
  padding: 0;
  margin-top: 1.5rem;
}

.elenco-puntato li {
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 1.6;
}

.elenco-descrittivo {
  list-style-type: disc;
  margin: 1.5rem 0 1.5rem 60px;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
}

.elenco-descrittivo li {
  margin-bottom: 1.2em;
}


/* Box che appare solo dopo scroll */
.sticky-callbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color:#dedddd; /* cambiato colore più elegante */
    border-bottom: 1px solid #9d9d9d;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ombra più leggera */
    z-index: 9999;
    padding: 14px 20px; /* leggermente meno padding */
}

/* Contenitore interno */
.sticky-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    height: 80px;
}
/*
.sticky-logo img {
    height: 280px;
    width: auto;
    object-fit: contain;
    margin-left: 15px; /* Sposta il logo verso destra 
    margin-top: 7px;   /* Abbassa leggermente il logo 
}
*/

/* ============================
   LOGO VARIANTE STICKY TOP
   ============================ */
.logo-full.logo-sticky {
  transform: none;        /* niente traslazione a sinistra */
  margin-left: 0;
  align-items: center;    /* meglio centrato in verticale */
}

.logo-full.logo-sticky .logo-icon img {
  height: 80px;          /* fiamma più alta */
  margin-top: 13px;
}

.logo-full.logo-sticky .logo-testo {
  margin-top: 18px;
  line-height: 1.0;
}

.logo-full.logo-sticky .flli {
  font-size: 24px;        /* da 50px → 18px */
}

.logo-full.logo-sticky .timperi {
  font-size: 44px;        /* da 85px → 32px */
  margin-bottom: 2;
}

.logo-full.logo-sticky .riga2 {
  font-size: 13px;        /* da 23px → 12px */
  letter-spacing: 1px;
  margin-top: 2px;
}


/* Testo "In caso di decesso" */
.sticky-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; /* leggermente più grande per armonizzare */
    color: #5d0000;
    margin-right: -10px; /* valore NEGATIVO per avvicinare ancora di più */
    white-space: nowrap;
}



.sticky-buttons {
    display: flex;
    gap: 10px;
}

/* Stile bottoni */
.sticky-buttons .call-btn {
    background-color: #8B0000; /* sfondo rosso scuro */
    color: #fff; /* testo bianco */
    border: none;
    padding: 12px 18px;
    border-radius: 6px; /* angoli arrotondati */
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: bold;
    min-width: 200px;
    line-height: 1.2;
}

/* Effetto al passaggio del mouse */
.sticky-buttons .call-btn:hover {
    background-color: #730101; /* colore più scuro al passaggio */
}

/* Nome persona sotto numero */
.sticky-buttons .call-btn span {
    display: block;
    font-size: 13px;
    font-weight: normal;
    margin-top: 4px;
}

.testo-blocco a {
    color: #8B0000;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.testo-blocco a:visited {
    color: #8B0000;  /* stesso colore dei link normali */
    font-weight: bold;
    text-decoration: none;
}


.testo-blocco a:hover {
    color: #730101; /* un tono più scuro per eleganza */
    text-decoration: underline;
}

.google-map {
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.google-map iframe {
    display: block;
    border: none;
    height: 400px;
}

.map-title {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #333;
}

.map-popup {
    text-align: center;
    font-family: 'Arial', sans-serif;
    color: #333;
    max-width: 220px;
    padding: 10px;
  }
  
  .map-popup img {
    width: 60px;
    height: auto;
    margin-bottom: 8px;
  }
  
  .map-popup a {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    background-color: #800000; /* stesso bordeaux del sito */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
  }
  
  .map-popup a:hover {
    background-color: #a00000;
  }

/* --- Footer Layout Elegante --- */
.site-footer {
    background-color: #e6e6e6; /* beige elegante */
    padding: 95px 20px;
    font-family: 'Libre Baskerville', serif;
    color: #333;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
    border-top: 1px solid #ddd;
  }
  
  .footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonne fisse */
    gap: 30px;
    max-width: 1200px;
    margin: auto;
  }
  
  .footer-column {
    flex: 1 1 220px;
    min-width: 200px;
    padding-right: 20px;
    margin-bottom: 30px;
    border-right: 1px solid #ddd;
  }
  
  .footer-column:last-child {
    border-right: none;
  }
  
  .footer-column h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    margin-bottom: 14px;
    color: #441d1d; /* bordeaux più morbido */
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-column ul li {
    margin-bottom: 6px;
    line-height: 1.8;
  }
  
  .footer-column ul li a {
    text-decoration: none;
    color: #555;
    font-size: 18px;
    transition: all 0.3s ease;
  }
  
  .footer-column ul li a:hover {
    color: #5a2a2a;
    text-decoration: underline;
  }
  
  .footer-column p {
    margin: 6px 0;
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }
  
  .footer-bottom {
    text-align: center;
    margin-top: 30px;
    font-size: 13px;
    color: #666;
    padding-top: 15px;
    border-top: 1px solid #ccc;
  }

  /* Link telefono, email e PEC nella colonna Contatti */
.site-footer .footer-column a[href^="tel:"],
.site-footer .footer-column a[href^="mailto:"]{
  color: #700000;          /* il tuo bordeaux */
  text-decoration: none;  /* niente sottolineatura */
  font-weight: 500;       /* leggermente più leggibile senza ingrandire */
}

/* Feedback al passaggio del mouse (desktop) */
.site-footer .footer-column a[href^="tel:"]:hover,
.site-footer .footer-column a[href^="mailto:"]:hover{
  text-decoration: underline;
}
  
/* Menu Sticky Desktop */
.desktop-menu-overlay {
  display: none;
  background-color: #ececec; /* stesso colore del footer */
  padding: 20px 10px;
  font-family: 'Libre Baskerville', serif;
  color: #333;
  position: fixed;
  top: 108px;
  left: 0;
  width: 100%;
  height: 350px;
  z-index: 9999;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-top: 1px solid #cdcdcd;
  border-bottom: 1px solid #cdcdcd;
}

.desktop-menu-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  text-align: left;
  gap: 30px;
  align-items: flex-start;
}

.desktop-menu-overlay .menu {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  gap: 30px;
}

.desktop-menu-overlay .menu > li {
  border-right: 1px solid #cdcdcd;
  flex: 1 1 240px;
  min-width: 220px;
}

.desktop-menu-overlay .menu > li:last-child {
  border-right: none;
}

/* Titoli delle colonne */
.desktop-menu-overlay .menu > li > a.menu-titolo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  margin-bottom: 14px;
  color: #441d1d;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  padding-left: 10px;
}

/* Sottosezioni SEMPRE visibili */
.desktop-menu-overlay .submenu {
  display: block;
  position: static;
  background: none;
  box-shadow: none;
  padding-left: 0;
  margin-top: 10px;
  max-height: none;
  overflow: visible;
}

.desktop-menu-overlay .submenu li {
  margin-bottom: 2px;
}

.desktop-menu-overlay .submenu li a {
  font-family: 'Lora', serif;
  font-size: 17px;        /*  riportato a dimensione leggibile */
  line-height: 1.8;       /*  spaziatura più comoda */
  color: #333;
  text-decoration: none;
  display: block;
  padding: 6px 0;
  text-align: left;
  padding-left: 10px;
}

.desktop-menu-overlay .submenu li a:hover {
  text-decoration: underline;
  color: #5a2a2a;
}

/* Pulsante chiusura */
.desktop-menu-overlay .close-menu {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  background: none;
  border: none;
  color: #611e1e;
  cursor: pointer;
}

#cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #2b2b2b;
  color: #fff;
  padding: 15px;
  text-align: center;
  font-size: 16px;
  z-index: 9999;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
}

#cookie-banner .cookie-content {
  max-width: 1200px;
  margin: 0 auto;
}

#cookie-banner button {
  background-color: #8b5c5c;
  color: #fff;
  border: none;
  padding: 8px 20px;
  margin-left: 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

#cookie-banner button:hover {
  background-color: #a07070;
}

#cookie-banner a {
  color: #fff;
  text-decoration: underline;
}

/* Sticky bar in fondo alla pagina */
.sticky-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #d1d1d1;   /* grigio chiaro uniforme con top bar */
  border-top: 1px solid #983535;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
  padding: 8px 20px;
}

.sticky-bottom-bar .sticky-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

/* Logo come blocco "testuale + fiamma" */
.sticky-bottom-bar .logo-full.logo-sticky {
  display: flex;
  align-items: center;
  gap: 6px;
  transform: none;  /* rimuove spostamenti */
  margin-left: 0;
}

.sticky-bottom-bar .logo-full.logo-sticky .logo-icon img {
  height: 75px;   /* dimensione più grande per la fiamma */
  object-fit: contain;
}

.sticky-bottom-bar .logo-full.logo-sticky .flli {
  font-size: 24px;
}

.sticky-bottom-bar .logo-full.logo-sticky .timperi {
  font-size: 40px;
  margin-bottom: 4px;
}

.sticky-bottom-bar .logo-full.logo-sticky .riga2 {
  font-size: 12px;
  margin-top: 0;
}

/* Testo centrale */
.sticky-bottom-bar .sticky-text {
  font-weight: bold;
  color: #800101;
  font-size: 24px;
  margin: 0 15px;
  white-space: nowrap;
}

/* Bottoni */
.sticky-bottom-bar .sticky-buttons {
  display: flex;
  gap: 10px;
}

.sticky-bottom-bar .sticky-buttons .call-btn {
  background-color: #8B0000;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: bold;
  min-width: 160px;
  line-height: 1.2;
}

.sticky-bottom-bar .sticky-buttons .call-btn:hover {
  background-color: #730101;
}

.sticky-bottom-bar .sticky-buttons .call-btn span {
  display: block;
  font-size: 11px;
  font-weight: normal;
  margin-top: 3px;
}

/* Stile form contatti */
.contact-form {
  max-width: 600px;
  margin: auto;
}

.contact-form label {
  display: block;
  margin: 15px 0 5px;
  font-weight: bold;
  font-size: 16px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
}

.privacy-check {
  margin: 20px 0;
  font-size: 14px;
}

.contact-form button {
  background-color: #8B0000;
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #5a0000;
}

/* Nasconde le voci solo nel menu sticky desktop */
.desktop-menu-overlay .solo-no-sticky {
  display: none !important;
}

/* ======================================
   Overlay menu mobile (valido sempre)
   >>> BLOCCO DISATTIVATO <<<
======================================

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: white;
  z-index: 9999;
  display: none;  
  flex-direction: column;
  overflow-y: scroll; 
  overflow-x: hidden;
  scrollbar-width: none; 
  padding: 40px 20px 60px;
  box-sizing: border-box;
}

.mobile-menu-overlay::-webkit-scrollbar {
  display: none;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  background: none;
  border: none;
  color: #8B0000;
  cursor: pointer;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.mobile-nav ul li {
  margin: 15px 0;
}

.mobile-nav ul li a {
  text-decoration: none;
  font-size: 20px;
  color: #8B0000;
  font-weight: bold;
}

.mobile-nav .dropdown {
  font-weight: bold;
  font-size: 18px;
  cursor: default;
  margin: 15px 0 5px;
  color: #700000;
  pointer-events: auto;
}

.mobile-nav .submenu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu-overlay .submenu {
  position: static !important;
  background-color: #f7f7f7;
  border-radius: 10px;
  margin: 0 auto 20px;
  padding: 12px 18px;
  width: 90%;
  max-width: 100%;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  text-align: left;
  overflow: visible !important;
  max-height: none !important;
  scrollbar-width: none !important;
}

.mobile-menu-overlay .submenu::-webkit-scrollbar {
  display: none !important;
}

.mobile-menu-overlay .submenu li {
  margin: 6px 0;
}

.mobile-menu-overlay .submenu li a {
  display: block;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  padding: 6px 0;
}

.menu-box {
  background-color: #f4f4f4;
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin: 8px auto 14px;
  width: 75%;
  max-width: 270px;
  box-sizing: border-box;
}

.menu-box li {
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.2;
  padding: 1px 0;
}

.menu-box li:last-child {
  margin-bottom: 0;
}

====================================== */

/* Regole comuni a TUTTI i device */
#backToTop {
  display: none; /* nascosto inizialmente, sarà lo script a mostrarlo */
  position: fixed;
  right: 20px;
  bottom: 22px;   /* posizione standard desktop */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8B0000;
  color: #ffffff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 9999;

  font-weight: bold;
  line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 1px #fff;
}

/*  Copertina in alto 
.hero-copertina img {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  border-bottom: 1px solid #ccc;
}
*/

/* ============================
   Titolo pagina - "Fiori per Funerali"
   ============================ 
   .page-title {
    text-align: center;
    font-size: 34px;
    color: #8B0000;
    margin-bottom: 20px;/*
}

/* ============================
   Testo descrittivo centrale
   ============================
   .page-text {
    max-width: 900px;
    margin: 0 auto 50px;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}/*

/*
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.gallery-item {
  flex: 0 1 250px; /* dimensione fissa 
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.gallery-item:hover {
  transform: scale(1.03);
}
*/


/*  Commentate vecchie regole che non servono più */
/*
.swiper-button-prev {
    left: -20px;
}

.swiper-button-next {
    right: -20px;
}
*/

/* --- LIGHTBOX (solo se mantieni quello tuo, altrimenti rimuovilo perché usi Fancybox) ---
#lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}
*/


/* ============================
   Sezione Galleria fotografica
   ============================ 
.flower-gallery {
    text-align: center;
    padding-bottom: 50px;
}

.flower-gallery h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #8B0000;
}

/* ============================
   Layout griglia immagini
   ============================ 
.gallery-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================
   Stile singola immagine
   ============================ 
.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.galleria-titolo {
    font-size: 28px;
    margin-bottom: 20px;
    color: #8B0000;
    text-align: center;
}
*/

/* === BLOCCO OBSOLETO PER MOBILE: sticky-callbar in alto === */
  /* --- Sticky Callbar --- 
  .sticky-callbar {
    padding: 4px 10px;
    height: auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sticky-inner {
    flex-direction: column;
    gap: 6px;
    height: auto;
  }

  .sticky-logo img {
    height: 220px;
    margin: 0 auto;
  }

  .sticky-text {
    font-size: 16px;
    margin: 4px 0;
  }

  .sticky-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .sticky-buttons .call-btn {
    font-size: 13px;
    padding: 6px 10px;
    min-width: 180px;
    line-height: 1.1;
  }
  */

  /* --- Hero Section --- 
  .hero-image {
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .hero-content {
    padding: 12px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 1.1rem;
  }

  .hero-content p {
    font-size: 1rem;
  }
}*/

/*
  /* --- Swiper Carousel --- 
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  .mySwiper {
    padding: 0 20px;
  }

  .mySwiper .swiper-slide {
    width: 160px;
    height: 140px;
  }
*/

/*
 Sezione bottoni chiamata più in basso
.hero {
    text-align: center;
    padding: 40px 20px;
    background: #d6d3d3;
    margin-top: 20px; 
}

.hero-image {
    background-image: url('/img/agenzia-guidonia.jpg');
    background-size: cover;
    background-position: center;
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
}

.hero-content {
    background: rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.hero-content h1, .hero-content p {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
*/

/*.blog-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin: 40px auto;
  max-width: 1200px;
}

.blog-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: 320px;
  text-align: center;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.blog-box:hover {
  transform: scale(1.03);
}

.blog-box img {
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

.blog-box h3 {
  font-size: 20px;
  color: #800000;
  margin: 15px 0 10px 0;
}

.blog-box p {
  font-size: 16px;
  color: #333;
}*/

/* Mobile e Tablet: caption in basso */
@media (max-width: 1024px) {
  .fancybox__caption {
    top: auto;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 14px;
    font-size: 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}


@media (max-width: 1024px) {
  /* Menu Mobile Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: none;   /* si attiva con JS */
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: 40px 20px 60px;
    box-sizing: border-box;
  }

  .mobile-menu-overlay::-webkit-scrollbar {
    display: none;
  }

  /* Bottone chiudi */
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    background: none;
    border: none;
    color: #8B0000;
    cursor: pointer;
  }

  /* Lista generale */
  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .mobile-nav ul li {
    margin: 15px 0;
  }

  /* Link singoli (Home, Chi siamo, Blog) */
  .mobile-nav > ul > li:not(.dropdown) > a {
    text-decoration: none;
    font-size: 26px;
    color: #8B0000;
    font-weight: 500;
    font-family: 'Cormorant Garamond', serif;
    display: block;
    margin: 15px 0;
  }

  /* Titoli sezioni (Servizi Funebri, Articoli Funerari, ecc.) */
  .mobile-nav .dropdown > a {
    font-size: 26px;
    margin: 20px 0 10px;
    display: block;
    color: #700000;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: 'Cormorant Garamond', serif;
    pointer-events: none; /* non cliccabili */
  }

  /* Contenitore sottomenù */
  .mobile-menu-overlay .submenu {
    display: block;
    position: static;
    background: #f7f7f7;
    border-radius: 10px;
    margin: 0 auto 18px;
    padding: 12px 18px;
    width: 90%;
    max-width: 300px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    text-align: left;
  }

  /* Link sottovoci */
  .mobile-menu-overlay .submenu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e3e3e3;
  }

  .mobile-menu-overlay .submenu li:last-child {
    border-bottom: none;
  }

  .mobile-menu-overlay .submenu li a {
    display: block;
    font-size: 17px;        /* più grande di prima */
    line-height: 1.6;       /* spaziatura verticale */
    color: #333;
    text-decoration: none;
    padding: 10px 0;        /* più aria verticale */
    width: 100%;
    font-family: 'Lora', serif;
  }

  .mobile-menu-overlay .submenu li a:hover {
    color: #700000;
    text-decoration: none;
  }

  /* Disattiva sfondo hover */
  .mobile-menu-overlay .submenu li:hover {
    background: none;
  }

  .mobile-menu-overlay .submenu li a:hover {
    color: #700000;
    background: none;
  }
}  



/* ======================================
   Responsive Homepage
   ====================================== */

/* Tablet e mobile fino a 992px */
@media (max-width: 992px) {
  /* Servizi Funebri - layout */
  .services-wrapper {
    grid-template-columns: 1fr; /* colonna singola */
  }

  .service-box {
    height: auto;
    padding: 20px;
  }

  .service-box .btn {
    position: static;
    margin-top: 15px;
    align-self: flex-start;
  }

  .service-box p {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita a 3 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 3); /* massimo 3 righe */
  }

  /* Griglia Organizzazione del Funerale */
  .grid-container {
    flex-direction: column;
    gap: 55px; /* più spazio tra i box */
    align-items: center;
  }
}


@media (max-width: 992px) {
  /* Homepage cover */
  .homepage-cover {
    position: relative;
    width: 100%;
    height: auto;        /* lascia altezza automatica */
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .homepage-cover picture,
  .homepage-cover img {
    width: 100%;
    height: auto;        /* immagine intera senza tagli */
    max-width: none;
    object-fit: contain; /* mostra tutta la foto */
    display: block;
  }

  /* Overlay (testo sopra immagine) */
  .homepage-overlay {
    position: absolute;
    bottom: 20px;        /* testo fissato in basso, più elegante */
    left: 50%;
    transform: translateX(-50%);
    background: none !important;
    padding: 12px;
    text-align: center;
    width: 90%;
  }

  .homepage-overlay h1,
  .homepage-overlay p {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  }

  .homepage-overlay h1 {
    font-size: 1rem;
  }

  .homepage-overlay p {
    font-size: 0.9rem;
  }

  .cover-image {
    padding: 0;
    margin: 0; /* niente margine sopra o sotto */
  }

  .cover-image img {
    margin-top: 0 !important; /* elimina lo spazio sopra */
    border-radius: 0;          /* elimina gli angoli arrotondati */
    box-shadow: none;          /* niente ombra */
    max-width: 100%;
    height: auto;
  }

  .cover-image picture {
    max-width: 100%;
  }
  

  /* Mostra/nascondi contenuti */
  .only-mobile {
    display: inline;
  }
  .only-desktop {
    display: none;
  }

  /* Pulsante indietro */
  .back-button-container {
    display: none;
  }

  /* Nascondi overlay desktop su mobile */
  .desktop-menu-overlay {
    display: none !important;
  }
}


/* ============================================
   Mobile (fino a 992px)
   Layout base, Header/Logo, Menu, Sticky Bar
============================================ */
@media (max-width: 992px) {

  /* --- Layout base --- */
  body, html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* --- Header / Logo --- */
  .top-header {
    flex-direction: column;
    align-items: center;
    padding: 8px 0 0 0;   /* meno spazio sopra */
    gap: 10px;           /* meno spazio tra i blocchi */
  }

  .logo-full {
    transform: none;
    margin-left: -23px;
    text-align: center;
  }

  .logo-icon img {
    height: 80px; /* altezza logo più compatta */
    margin: 0 auto;
  }

  .logo-testo {
    margin-top: 6px;
    line-height: 1.2;
  }

  .riga1 {
    display: inline-block;
    font-size: 38px;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 0px;
  }

  .flli, .timperi {
    display: inline;
    font-size: inherit;
    margin-left: -6px;
    padding: 0;
  }

  .riga2 {
    font-size: 11px;
    white-space: nowrap;
    margin-bottom: 6px;
    margin-left: -6px;
  }

  .chiamata-urgente {
    margin-top: 8px;
  }

  .chiamata-testo {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .bottoni-chiamata {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .btn-chiamata {
    width: 160px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .btn-chiamata small {
    font-size: 8px;
  }

  /* --- Menu Mobile Hamburger --- */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    width: 25px;
    gap: 5px;
    margin-left: 25px;
    margin-right: 0px;
    margin-top: 19px;  /* abbassa leggermente */
  }
  
  .hamburger-menu span {
    height: 3px;        /* linee più sottili */
    background-color: #700000;
    border-radius: 1px;
  }
  


   /* Blocca scroll sotto il menu mobile */
    body.menu-open {
  overflow: hidden;
  height: 100vh;
  }

/* Nasconde la navbar desktop su mobile */
.navbar {
  display: none;
}

  /*.navbar nav {
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: none !important;
    flex-direction: column;
    background-color: #f4f4f4;
    padding: 20px;
  }

  .navbar nav::-webkit-scrollbar {
    display: none;
  }

  .navbar nav.active {
    display: flex !important;
  }

  .navbar .menu {
    flex-direction: column;
    gap: 15px;
  }

  .navbar .menu li {
    text-align: left;
  }

  .navbar .submenu {
    display: block;
    position: static;
    padding-left: 20px;
    margin-top: 5px;
    overflow: hidden !important;
    scrollbar-width: none;
  }

  .navbar .submenu::-webkit-scrollbar {
    display: none;
  }

  .navbar .dropdown {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .navbar .dropdown a {
    font-family: 'Cormorant Garamond', serif;
  }*/

  /* --- Sticky Bar Mobile in basso --- */
  .bottom-callbar-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #bfbfbf;
    border-top: 1px solid #9d9d9d;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding: 12px 15px calc(20px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }

  .bottom-callbar-mobile.is-visible {
    pointer-events: auto;
  }

  .bottom-callbar-mobile .sticky-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .bottom-callbar-mobile .sticky-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: #5d0000;
    font-weight: bold;
  }

  .bottom-callbar-mobile .sticky-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
  }

  .bottom-callbar-mobile .sticky-buttons .call-btn {
    background-color: #8B0000;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    line-height: 1.2;
    min-width: 140px;
    max-width: 48%;
    flex: 1 1 140px;
    box-sizing: border-box;
  }

  .bottom-callbar-mobile .sticky-buttons .call-btn small {
    display: block;
    font-size: 11px;
    margin-top: 4px;
  }

  .bottom-callbar-mobile .sticky-buttons .call-btn:hover {
    background-color: #730101;
  }
}



/* Mobile fino a 992px */
@media (max-width: 992px) {

  /* --- Servizi --- */
  .services {
    display: none; /* nascondi le 3 griglie centrali */
  }

  /* Ma li mostro nella pagina articoli funerari */
  .services.articoli-funerari {
    display: block;
  }

  /* Ma li mostro nella pagina servizi funebri */
.services.servizi-funebri {
  display: block;
}

/* Mostro i box solo nella pagina "In caso di decesso" */
.services.decesso-servizi {
  display: block;
}

  /* --- Intro --- */
  .intro-text {
    margin-top: 40px;   /* riduce lo spazio sopra */
    margin-bottom: 25px;
  }

  .intro-text p {
    margin-bottom: 10px; /* riduce lo spazio tra i paragrafi */
  }

  .intro-text em {
    font-size: 20px;   /* ridotto rispetto ai 28px desktop */
    line-height: 1.5;
    letter-spacing: 0.2px;
  }

  /* --- Separatore (già esistente, parte alta) --- */
  .separatore {
    margin: 30px auto;   /* compatto su mobile */
  }

  .separatore img {
    max-width: 90%;      /* mantiene proporzioni */
    height: 40px;        /* più piccolo rispetto al desktop */
    display: block;
    margin: 40px auto 50px auto; /* sopra 40px, sotto 50px */
    opacity: 0.7;
  }

  section,
  .intro-text,
  .grid-section {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 50px;
    margin-bottom: 10px;
  }
  
.grid-container,
.grid-box {
  width: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  border-left: none; /* tolta la riga verticale su mobile */
  margin-bottom: 35px;  /* oppure 40px se vuoi più respiro */
}

.grid-box:last-of-type {
  margin-bottom: 5px; /* meno spazio solo sotto l’ultimo box */
}

.grid-title, 
.services-title {
  font-size: 30px;      /* grandezza già ok, lo lasciamo */
  margin-top: -30px;     /* spazio dal separatore */
  margin-bottom: 65px;  /* spazio dall'h3 sotto */
  text-align: center;   /* opzionale: per centrarlo meglio */
  font-weight: 550;
}


/* --- Titoli Box Interni (es. Predisposizione del Funerale) --- */
.grid-box h3 {
  font-size: 22px;      /* più piccolo rispetto al titolo principale */
  font-weight: 460;
  margin-bottom: 1px;
  text-transform: uppercase; /* opzionale: se vuoi tutto maiuscolo */
  border-bottom: 2px solid #ccc; /* linea sotto titolo */
  padding-bottom: 1px;
}

/* --- Paragrafi nei box --- */
.grid-box p {
  font-size: 12px;      /* testo ridotto per leggibilità su mobile */
  line-height: 1.5;
  margin-bottom: 4px;
}

.grid-box p:first-of-type {
  font-size: 19px;       /* più piccolo per schermi stretti */
  line-height: 1.5;      /* respiro sufficiente */
  letter-spacing: 0.3px; /* spaziatura leggera tra lettere */
  margin-top: 8px;       /* meno spazio sopra */
  margin-bottom: 24px;   /* meno spazio sotto */
}

/* Lista personalizzata */
.grid-box ul {
  border-left: 1px solid #931111; /* linea verticale adattata */
  padding-left: 6px;
  margin-left: -18px;
}

.grid-box ul li {
  font-size: 16px;       /* comune a tutti */
  line-height: 1.8;
  letter-spacing: 0.3px;
  margin: 4px 0;
  color: #333;
}

.grid-box ul li a {
  font-size: inherit;    /* eredita dal li */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  line-height: 1.8;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}


  /* --- Google Map --- */
  .google-map {
    margin: 25px 0;
  }

  /* --- Footer --- */
  .site-footer {
    margin-top: 1rem !important;
    padding-top: 2rem;
    padding-bottom: 115px; /* spazio per sticky bar */
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .footer-column {
    text-align: center;
    border-right: none;
    padding-right: 0;
    margin-bottom: 20px;
  }

  .footer-column h4 {
    margin-top: 10px;
    font-size: 22px; /* più proporzionato su mobile */
  }

  .footer-column p,
  .footer-column ul li a {
    font-size: 16px;
    line-height: 1.5;
  }

  .footer-bottom {
    font-size: 12px;
    margin-top: 20px;
    padding-top: 10px;
  }
}


  
/* --- Regole solo per MOBILE --- */
@media (max-width: 992px) {
  
  /* Titoli principali */
  .page-title h1 {
    font-size: 32px;   /* più piccolo rispetto al desktop */
    margin-bottom: 18px;
  }

  .page-content .testo-blocco {
    max-width: 95%;     /* più stretto e adattato allo schermo */
    font-size: 15px;    /* leggermente più piccolo del desktop */
    line-height: 1.6;   /* respiro sufficiente */
    padding: 0 12px;    /* meno padding laterale */
  }

  /* Link dentro il testo introduttivo */
.page-content .testo-blocco em a {
  font-size: inherit;       /* stessa dimensione del testo circostante */
  font-family: inherit;     /* eredita il font del testo */
  font-weight: normal;      /* evita il grassetto forzato */
  color: #8B0000;         /* colore rosso istituzionale */
  text-decoration: none;    /* niente sottolineatura */
}

  .page-content .testo-blocco a {
  font-size: inherit;
  font-weight: 500;        /* leggermente più marcato, ma non enorme */
  color: #8B0000;
}

  /* Titoli h2 nei blocchi */
  .testo-blocco h2 {
    font-size: 19px;
    margin-top: 2rem;
  }

  /* Testo descrittivo */
  .testo-blocco {
    font-size: 15px;
    line-height: 1.6;
    padding: 0 10px;   /* meno spazio laterale su mobile */
  }

  .elenco-puntato li {
    font-size: 14px;        /* riduce leggermente la dimensione */
    line-height: 1.1;       /* regola altezza della riga */
    letter-spacing: 0.2px;  /* spaziatura tra le lettere */
    margin-bottom: 8px;     /* più respiro tra i punti */
  }

  .elenco-puntato {
    list-style-type: disc;
    margin: 0 0 1em 30px;  /* puoi regolare il rientro */
    padding: 2px;
    margin-top: 1.7rem;    /* spazio sopra */
  }

  .elenco-descrittivo {
    max-width: 95%;      /* come il testo-blocco */
    font-size: 12px;     /* stesso font-size */
    line-height: 1.6;    /* stesso respiro */
    padding: 0 12px;     /* margine interno simile */
    margin: 1.2rem auto; /* centrato e un po’ meno spazio */
  }

  .elenco-descrittivo li {
    margin-bottom: 0.8em;  /* più compatto su mobile */
    letter-spacing: 0.2px; /* piccolo respiro tra lettere */
  }

  /* Titolo delle gallerie */
  .carousel-title {
    font-size: 32px;
    margin-bottom: 8px;
  }

.services-wrapper {
  gap: 24px;               /* ancora più spazio tra i box */
  padding: 5px;
  margin-top: 15px;
}

.service-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* distribuisce titolo, testo, bottone */
  align-items: center;            /* centra orizzontalmente */
  padding: 20px 15px 60px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #ececec;
  text-align: center;
  position: relative;
}

.service-box h3 {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 6px;  /* più compatto */
  line-height: 1.3;
  text-align: center;
}

.service-box p {
  font-size: 16px;
  line-height: 1.4;
  margin: 20px 0 70px;
  flex-grow: 1;   /* spinge il testo a occupare spazio centrale */
}
}


/* ======================================
   Mobile (fino a 992px)
   Nuovi elementi: pulsante servizi + box decesso
====================================== */
@media (max-width: 992px) {

  /* Disabilito l'hover sul box */
  .service-box:hover {
    box-shadow: none;
    transform: none;
  }

  /* Pulsante dentro i box servizi */
  .service-box .btn {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    min-width: 220px;
    padding: 10px 60px;
    font-size: 18px;
    font-weight: 500;
    color: #940000;           /* testo rosso */
    background: #bbbbbb;      /* grigio chiaro */
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
  }

  /* Nessun hover sul mobile */
  .service-box .btn:hover {
    background: #bbbbbb;
    color: #940000;
  }

  /* Effetto SOLO al click reale */
  .service-box .btn:active {
    background: #999999 !important;  /* grigio più scuro */
    color: #940000 !important;
  }

  .cta-mobile {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0; /* spazio attorno al bottone */
  }

  .btn-outline-servizi {
    display: inline-block;
    min-width: 180px;
    text-align: center;
    padding: 22px 46px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: transparent;
    transition: all 0.3s ease;
  }

  /* Box "In caso di decesso" */
  .decesso-box {
    background: #efeae4;
    border: 1px solid #d8d2c8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 240px;
    padding: 20px 25px;
    margin: 24px 15px 66px;
    text-align: center;
  }

  .decesso-box h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    letter-spacing: 1px;
    color: #65533a;
    text-transform: uppercase;
    margin: 2px 0 12px;
  }

  .decesso-box p {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin: 0 auto;
  }

  .btn-decesso {
    display: inline-block;
    background-color: #8B0000;
    color: #fff;
    padding: 6px 28px;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.25s ease;
    margin-top: auto;
    align-self: center;
  }

  .btn-decesso:hover {
    background-color: #600000;
  }

  .intro-decesso-quote {
    text-align: center;
    margin: 18px auto 24px;
    border-top: 1px solid #ddd;
    padding-top: 14px;
  }

  .intro-decesso-quote p {
    font-size: 20px;
    line-height: 1.5;
    color: #444;
    margin-bottom: 10px;
  }

  .intro-decesso-quote em {
    font-family: 'Cormorant Garamond', serif;
    color: #333;
  }

  .intro-decesso-quote a {
    font-size: inherit;
    font-weight: normal;
    font-family: inherit;
    letter-spacing: inherit;
    color: #8B0000;
    text-decoration: none;
  }

  .intro-decesso-quote a:hover {
    text-decoration: underline;
    color: #600000;
  }

}

/* Ottimizzazioni blog anteprime su mobile */
@media (max-width: 992px) {
  .blog-container-advanced {
    gap: 20px;              /* meno spazio tra i box */
    margin: 30px auto;      /* margini verticali ridotti */
  }

  .blog-box-advanced {
    width: 100%;            /* i box occupano tutta la larghezza */
    max-width: 95%;         /* con un piccolo margine laterale */
    margin: 0 auto;
  }

  .blog-box-advanced img {
    height: 180px;          /* immagine meno alta per non tagliare troppo */
  }

  .blog-box-advanced h3 {
    font-size: 18px;        /* titolo leggermente più piccolo */
    height: auto;           /* lascia adattare altezza se serve */
    -webkit-line-clamp: 3;  /* max 3 righe invece di 2 */
  }

  .blog-box-content .estratto {
    font-size: 15px;        /* testo più compatto */
    line-height: 1.4;
  }

  .related-articles {
    margin: 50px auto;
    padding: 0 15px;
  }

  .related-articles .related-title {
    font-size: 20px;
  }

  .related-articles .related-list a {
    font-size: 15px;
  }
}

/* Eventuali correzioni SOLO per mobile */
@media (max-width: 992px) {
  #backToTop {
    bottom: 190px; /* così sta sopra la sticky bar mobile */
    right: 5px;
  }
}

/* Mostra solo su desktop */
@media (min-width: 993px) {
  .hamburger-desktop {
    display: flex;
  }
}

@media (min-width: 993px) {
  .homepage-cover {
    height: 520px; /* su desktop un po' più alta */
  }
}

/* Nascondi sempre su desktop */
@media only screen and (min-width: 993px) {
  .bottom-callbar-mobile {
    display: none !important;
  }
}

@media (min-width: 993px) {
  #mobileMenuOverlay {
    display: none !important;
  }
}


@media (max-width: 480px) {
  #cookie-banner {
    font-size: 14px;
    padding: 10px;
  }

  #cookie-banner button {
    padding: 6px 15px;
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .bottom-callbar-mobile .sticky-buttons .call-btn {
    font-size: 12px;       /* testo più piccolo */
    padding: 8px 10px;     /* meno spazio interno */
    min-width: 110px;      /* ridotta larghezza minima */
    max-width: 45%;        /* così entrano affiancati */
  }
  

  .bottom-callbar-mobile .sticky-buttons {
    gap: 8px; /* spazio più piccolo tra i bottoni */
  }
}

@media (max-width: 380px) {
  .logo-icon img {
    height: 65px;
  }
  .riga1 {
    font-size: 32px;
  }
  .riga2 {
    font-size: 10px;
  }
}

/* Extra ottimizzazione per schermi molto piccoli (tipo 320px) */
@media (max-width: 360px) {
  .blog-box-advanced img {
    height: 150px;          /* ancora più compatta */
  }

  .blog-box-advanced h3 {
    font-size: 16px;
  }

  .blog-box-content .estratto {
    font-size: 14px;
  }
}


main {
  margin-bottom: 2rem;
}

.privacy-check {
  display: flex; 
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.privacy-check > input {
  flex: 1;
}

.privacy-check > label {
  flex: 5;
  margin:0;
}