/* =========================================================
   FCMM · Megamenu (Divi 5)
   Caricato dal child theme (fcmm-megamenu.php).
   I pannelli sono generati dallo shortcode [fcmm_megamenu] dal menu
   di WordPress; lo script li sposta sotto l'header e li collega alle
   voci del modulo Menu di Divi. Su tablet e telefono resta il menu
   standard di Divi.
   ========================================================= */

:root {
  --fcmm-ease: cubic-bezier(.23, 1, .32, 1);
  --fcmm-red: #CB3727;
  --fcmm-red-dark: #A92C1F;
  --fcmm-title: #B3301F;
  --fcmm-ink: #2A211D;
  --fcmm-line: #E7E3E0;
  --fcmm-wash: #F4F2F0;
  --fcmm-panel-h: 450px;
  --fcmm-header-z: 100;
  --fcmm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- Header: riferimento per i pannelli ---------- */
.et-l--header { position: relative; z-index: var(--fcmm-header-z); }
.et-l--header .et_builder_inner_content { position: relative; }

/* ---------- Voci di menu con megamenu (desktop) ---------- */
@media (min-width: 981px) {
  /* il sottomenu WordPress non serve: lo sostituisce il pannello */
  .fcmm-js .fcmm-has-mega > .sub-menu { display: none !important; }
  .fcmm-has-mega > a:after { transition: transform .22s var(--fcmm-ease); }
  .fcmm-has-mega.fcmm-open > a:after { transform: rotate(180deg); }

  /* Variante "bottone": classe CSS fcmm-toggle sulla voce (es. Contenuti inediti) */
  .fcmm-toggle > a {
    border: 1.5px solid rgba(255, 255, 255, .6) !important;
    border-radius: 2px;
    padding: 12px 34px 12px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--fcmm-ease);
  }
  .fcmm-toggle > a:active { transform: scale(.97); }
  .fcmm-toggle > a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .fcmm-toggle > a:after { right: 12px !important; }
  .fcmm-toggle.fcmm-open > a { background: #fff; color: var(--fcmm-red) !important; border-color: #fff !important; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .fcmm-toggle > a:hover { border-color: #fff !important; opacity: 1 !important; }
}

/* ---------- Velo scuro sulla pagina (creato dallo script) ---------- */
.fcmm-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--fcmm-header-z) - 1);
  background: rgba(40, 18, 12, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.fcmm-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; }

/* ---------- Pannello ---------- */
.fcmm-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  min-height: min(var(--fcmm-panel-h), calc(100vh - var(--fcmm-top, 0px)));
  max-height: calc(100vh - var(--fcmm-top, 0px));
  background: #fff;
  box-shadow: 0 24px 48px -16px rgba(70, 25, 15, .4);
  color: var(--fcmm-ink);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.fcmm-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .22s var(--fcmm-ease), transform .22s var(--fcmm-ease), visibility 0s;
}

/* Colonna 1: voci */
.fcmm-panel__voci {
  flex: 0 0 440px;
  box-sizing: content-box;
  margin: 0 56px 0 0;
  padding: 44px 0 44px 72px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fcmm-panel .fcmm-panel__titolo {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em;
  color: var(--fcmm-title) !important;
}
.fcmm-panel__titolo a { color: inherit !important; text-decoration: none !important; }
.fcmm-panel .fcmm-voci,
.fcmm-panel .fcmm-voci li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  line-height: inherit;
}
.fcmm-panel .fcmm-voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--fcmm-line);
  font-family: 'Cinzel', serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--fcmm-ink) !important;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.fcmm-voci li:first-child .fcmm-voce { border-top: 1px solid var(--fcmm-line); }
.fcmm-voce:after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--fcmm-arrow) center / contain no-repeat;
          mask: var(--fcmm-arrow) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s var(--fcmm-ease), transform .2s var(--fcmm-ease);
}
.fcmm-voce.is-active { background: var(--fcmm-wash); }
.fcmm-voce.is-active:after { opacity: 1; transform: none; }
.fcmm-voce:focus-visible { outline: 2px solid var(--fcmm-red); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .fcmm-voce:not(.is-active):hover { background: #F9F8F7; }
}

/* Colonna 2: foto + testo, a filo in alto, a destra e in basso */
.fcmm-panel__media {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--fcmm-wash);
}
.fcmm-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transition: visibility 0s linear .18s;
}
.fcmm-slide.is-active { visibility: visible; transition: visibility 0s; }

/* Foto (campo "Immagine megamenu" o immagine in evidenza) */
.fcmm-slide__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .18s ease;
}
.fcmm-slide.is-active .fcmm-slide__foto { opacity: 1; transition: opacity .28s var(--fcmm-ease); }
.fcmm-panel .fcmm-slide__img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  filter: grayscale(1) contrast(.85) brightness(1.2) blur(3px);
  transform: scale(1.04);
  transition: transform .45s var(--fcmm-ease), filter .3s var(--fcmm-ease);
}
.fcmm-slide.is-active .fcmm-slide__img { transform: none; filter: grayscale(1) contrast(.85) brightness(1.2) blur(0); }
/* Velo sopra la foto */
.fcmm-slide__foto:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 33, 29, .45); /* colore e intensità del velo */
  pointer-events: none;
}

/* Testo (campo "Descrizione") + bottone */
.fcmm-slide__testo {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 40px;
  z-index: 1;
}
.fcmm-panel .fcmm-slide__testo p {
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}
.fcmm-panel .fcmm-slide__testo p + p { margin-top: 18px !important; }
.fcmm-slide__desc { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--fcmm-ink); }
.fcmm-slide--img .fcmm-slide__desc { color: #fff; }
.fcmm-slide.is-active .fcmm-slide__testo p {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity .4s var(--fcmm-ease) .2s, transform .5s var(--fcmm-ease) .2s, filter .4s var(--fcmm-ease) .2s;
}
.fcmm-slide.is-active .fcmm-slide__testo p:last-child { transition-delay: .3s, .3s, .3s; }

/* Bottone rosso */
.fcmm-panel a.fcmm-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px;
  border-radius: 2px;
  background: var(--fcmm-red);
  color: #fff !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none !important;
  transition: background-color .2s ease, transform .16s var(--fcmm-ease);
}
.fcmm-panel a.fcmm-cta:after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--fcmm-arrow) center / contain no-repeat;
          mask: var(--fcmm-arrow) center / contain no-repeat;
  transition: transform .2s var(--fcmm-ease);
}
.fcmm-panel a.fcmm-cta:active { transform: scale(.97); }
.fcmm-panel a.fcmm-cta:focus-visible { outline: 2px solid var(--fcmm-red); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .fcmm-panel a.fcmm-cta:hover { background: var(--fcmm-red-dark); }
  .fcmm-panel a.fcmm-cta:hover:after { transform: translateX(4px); }
}

/* ---------- Tablet e telefono: niente pannello, resta il menu di Divi ---------- */
@media (max-width: 980px) {
  .fcmm-panel, .fcmm-scrim { display: none !important; }
}

/* ---------- Riduci movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .fcmm-panel, .fcmm-panel.is-open, .fcmm-voce:after,
  .fcmm-slide__img, .fcmm-slide.is-active .fcmm-slide__img,
  .fcmm-panel .fcmm-slide__testo p, .fcmm-slide.is-active .fcmm-slide__testo p { transform: none !important; }
  .fcmm-slide__img, .fcmm-slide.is-active .fcmm-slide__img { filter: grayscale(1) contrast(.85) brightness(1.2); transition: none; }
  .fcmm-panel .fcmm-slide__testo p { filter: none; }
}