:root{--brand:#3fb34f}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border:2px solid var(--brand);color:var(--brand);background:#fff}
.btn-outline:hover{background:var(--brand);color:#fff}
.badge{background:rgba(63,179,79,.12);color:#1f7a33;font-weight:600}
.wa-fab{position:fixed;right:18px;bottom:18px;width:62px;height:62px;border-radius:9999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px rgba(0,0,0,.15);z-index:60}
.wa-fab svg{width:30px;height:30px}
.cta-bar{position:fixed;left:0;right:0;bottom:0;background:#ffffffE6;backdrop-filter:blur(8px);border-top:1px solid #e5e7eb;z-index:50}
.hover-raise{transition:transform .25s ease, box-shadow .25s ease}
.hover-raise:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.1)}
.chip{border:1.5px solid #e2e8f0}
.chip.active{border-color:var(--brand); background:rgba(63,179,79,.08); color:#14532d}
.focus-ring:focus-visible{
  outline:3px solid rgba(63,179,79,.4);
  outline-offset:2px;
}
.tag{background:rgba(63,179,79,.12);color:#14532d;border-radius:999px;padding:.35rem .7rem;font-size:.8rem;font-weight:600}

/* ===== Desktop sub-menu base ===== */
.epic-nav .menu-item-has-children { position: relative; }

.epic-nav .sub-menu{
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  border: 1px solid rgba(226,232,240,1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  z-index: 60;
}

.epic-nav .menu-item-has-children.is-open > .sub-menu{ display: block; }

.epic-nav .sub-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
}
.epic-nav .sub-menu a:hover{ background: rgba(241,245,249,1); }

/* ===== Mega menu SOLO per la voce con classe mega-servizi ===== */
.epic-nav .mega-servizi.is-open > .sub-menu{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 520px;
  padding: 16px;
}

.epic-nav .mega-servizi .mega-servizi-all{
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,1);
}
.epic-nav .mega-servizi .mega-servizi-all > a{
  font-weight: 700;
  color: var(--brand, #10b981);
}

/* ===== Mobile menu base ===== */
.epic-mnav-list > li > a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
}
.epic-mnav-list > li > a:hover{ background: rgba(241,245,249,1); }

/* caret per aprire sottomenu */
.epic-mnav .m-has-children { position: relative; }
.epic-mnav .m-caret{
  position: absolute;
  right: 6px;
  top: 6px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  background: #fff;
}

.epic-mnav .m-has-children > a{
  padding-right: 56px;
}

.epic-mnav .m-caret{
  position: absolute;
  right: 8px;
  top: 6px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  background: #fff;
  z-index: 2;
}


.epic-mnav .m-open > .m-caret{ transform: rotate(180deg); }

/* sub-menu mobile */
.epic-mnav .sub-menu{
  margin: 6px 0 10px 0;
  padding-left: 10px;
  display: grid;
  gap: 4px;
}
.epic-mnav .sub-menu a{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248,250,252,1);
}

/* MOBILE: sub-menu come lista pulita */
.epic-mnav .sub-menu{
  margin: 8px 0 12px 0;
  padding: 0 0 0 14px;
  display: none;           /* aperto via JS */
  gap: 6px;
}

.epic-mnav .m-open > .sub-menu{
  display: grid;           /* quando aperto */
}

.epic-mnav .sub-menu li{
  margin: 0;
  padding: 0;
  list-style: none;
}

.epic-mnav .sub-menu a{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248,250,252,1);
  border: 1px solid rgba(226,232,240,1);
}

/* caret non deve coprire il link */
.epic-mnav .m-has-children > a{ padding-right: 56px; }
.epic-mnav .m-caret{
  position: absolute;
  right: 8px;
  top: 6px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  background: #fff;
  z-index: 2;
}

/* Desktop fallback: hover apre comunque */
@media (min-width: 768px){
  .epic-nav .menu-item-has-children:hover > .sub-menu{
    display: block;
  }
  .epic-nav .mega-servizi:hover > .sub-menu{
    display: grid;
  }
}

/* =========================================================
   MOBILE MENU OVERLAY (FIX)
   - Il menu mobile (#mnav) deve essere un overlay a tutta altezza.
   - Su iOS/Safari: evitare #mnav come figlio di un elemento con backdrop-filter.
   - Le regole sotto sovrascrivono eventuali stili precedenti (con !important dove serve).
   ========================================================= */

/* Overlay */
#mnav{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--mnav-top, 64px);
  bottom: 0;
  z-index: 999;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(226,232,240,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 0 calc(24px + env(safe-area-inset-bottom));
}

/* Compatibile con Tailwind .hidden */
#mnav.hidden{ display: none !important; }

body.nav-open{ overflow: hidden; }

/* Container interno */
#mnav .epic-mnav{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

/* Voci principali */
#mnav .epic-mnav-list > li{ position: relative; }
#mnav .epic-mnav-list > li > a{
  display: block;
  padding: 12px 12px;
  border-radius: 14px;
  color: #0f172a;
}

/* Caret per sottomenu */
#mnav li.m-has-children > a{ padding-right: 56px; }
#mnav .m-caret{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,1);
  background: #fff;
  display: grid;
  place-items: center;
  line-height: 1;
  cursor: pointer;
}
#mnav li.m-open > .m-caret{ transform: rotate(180deg); }

/* Submenu: chiuso di default */
#mnav .sub-menu{
  display: none !important;
  margin: 8px 0 12px 0;
  padding-left: 14px;
  gap: 8px;
}
#mnav li.m-open > .sub-menu{ display: grid !important; }

#mnav .sub-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(248,250,252,1);
  border: 1px solid rgba(226,232,240,1);
  color: #0f172a;
}

/* CTA blocco in basso */
#mnav .mt-3.grid.gap-2{
  padding-top: 8px;
}


/* Effetto icona submenu (chevron) */
@media (max-width: 767px){
  /* Stato normale */
  #mnav .m-caret{
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
  }

  /* Hover/press (se vuoi un feedback) */
  #mnav .m-caret:active{
    transform: scale(.96);
  }

  /* Quando il submenu è aperto */
  #mnav li.m-open > .m-caret{
    transform: rotate(180deg);
    background: rgba(63,179,79,.10);          /* leggero verde brand */
    border-color: rgba(63,179,79,.30);
    box-shadow: 0 6px 14px rgba(15,23,42,.10);
  }

  
}

/* Brand dinamico header */
.epic-brand{min-width:max-content}
.epic-brand-logo{display:block;object-fit:contain}
.epic-brand-logo--full{width:auto;max-width:190px;height:42px}
.epic-brand-logo--mark{width:40px;height:40px;border-radius:12px}
@media (max-width: 767px){
  .epic-brand-logo--full{max-width:150px;height:38px}
}

/* Carousel immagini Chi Siamo */
.epic-media-carousel{position:relative;overflow:hidden}
.epic-media-carousel-track{display:flex;transition:transform .5s ease;will-change:transform}
.epic-media-carousel-slide{min-width:100%;aspect-ratio:4/3}
.epic-media-carousel-slide img{width:100%;height:100%;object-fit:cover}
.epic-media-carousel-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;pointer-events:none}
.epic-media-carousel-dot{width:8px;height:8px;border-radius:9999px;background:rgba(255,255,255,.65);box-shadow:0 1px 4px rgba(15,23,42,.18)}
.epic-media-carousel-dot.is-active{background:#fff;transform:scale(1.25)}
@media (prefers-reduced-motion: reduce){.epic-media-carousel-track{transition:none}}

/* Evita che la CTA bar copra il contenuto finale */
.epic-footer--with-cta{margin-bottom:56px}

/* ===== v1.2: video Home, rich text, anchor e mappe responsive ===== */
.epic-home-video{
  background:radial-gradient(circle at 20% 20%, rgba(63,179,79,.14), transparent 38%),linear-gradient(135deg,rgba(63,179,79,.09),#fff 65%);
}
.epic-home-video-card{box-shadow:0 18px 45px rgba(15,23,42,.10)}
.epic-home-video video{display:block;max-width:100%;height:auto;aspect-ratio:16/9}

.epic-richtext > :first-child{margin-top:0}
.epic-richtext > :last-child{margin-bottom:0}
.epic-richtext p{margin:.6em 0}
.epic-richtext ul,.epic-richtext ol{margin:.65em 0;padding-left:1.35rem}
.epic-richtext ul{list-style:disc}
.epic-richtext ol{list-style:decimal}
.epic-richtext strong{font-weight:700;color:inherit}
.epic-richtext a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.epic-richtext-compact p{margin:.35em 0}

/* Mantiene marker e contenuto WYSIWYG sulla stessa riga nelle liste. */
.epic-rich-list{list-style-position:outside}
.epic-rich-list li{padding-left:.15rem}
.epic-rich-list li > p:first-child{display:inline;margin:0}
.epic-rich-list li > p + p{margin:.4rem 0 0}

/* Iframe Google Maps: neutralizza width/height inline troppo rigidi su mobile. */
.epic-map-frame{position:relative;display:grid;width:100%;max-width:100%;min-height:360px;overflow:hidden}
.epic-map-frame iframe{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
}

[id]{scroll-margin-top:92px}

@media (max-width:640px){
  .epic-home-video{padding-top:1.25rem;padding-bottom:1.5rem}
  .epic-home-video-card{padding:.5rem;border-radius:1.35rem}
  .epic-home-video video{border-radius:1rem}
  .epic-map-frame{aspect-ratio:auto!important;min-height:300px}
  .epic-map-frame iframe{height:100%!important;min-height:0!important}
}