/* Overlay & shell */
.fm-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; z-index:9998; transition:opacity .25s; }
.fm-overlay[hidden]{ display:none; }

.fm-offcanvas{
  position:fixed; inset:0 auto 0 0; width:min(1080px, 96vw); max-width:1180px;
  background:var(--fm-bg); color:var(--fm-text); z-index:9999;
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,.35);
}
body.fm-open .fm-offcanvas{ transform:translateX(0); }
body.fm-open .fm-overlay{ opacity:1; pointer-events:auto; }
body.fm-open{ overflow:hidden; }

/* Header */
.fm-close{ position:absolute; left:12px; top:10px; background:none; border:0; font-size:36px; line-height:1; color:var(--fm-text, #19202B); cursor:pointer; }
.fm-header{ padding:28px 28px 14px 54px; border-bottom:1px solid rgba(0,0,0,.08); }
.fm-logo{ max-height:46px; width:auto; display:block; margin-bottom:10px; border-radius:0!important; padding-left:40px; }
.fm-subtitle{ font-size:20px; font-weight:700; letter-spacing:.02em; padding-left:40px;}

/* Pannelli */
.fm-panels{ display:grid; grid-template-columns:1fr; height:100%; }
.fm-panels.cols-2{ grid-template-columns:1fr 1fr; }
.fm-panels.cols-3{ grid-template-columns:1fr 1fr 1fr; }

.fm-panel{ overflow:auto; padding:16px 20px 28px 20px; border-right:1px solid rgba(0,0,0,.08); opacity:1; transition:opacity .18s ease; }
.fm-panel:last-child{ border-right:0; }

/* chiusi davvero */
.fm-panel[hidden], .fm-panel.is-hidden{ display:none !important; }
.fm-panel.is-enter{ opacity:0; }

/* Liste */
.fm-list{ list-style:none; margin:0; padding:0; }

/* Riga voce con split 80/20 (solo se has-children) */
.fm-li{
  --fm-left: 80%;
  --fm-right: 20%;
  display:flex; align-items:stretch; gap:0; border-radius:10px; padding:2px;
}
.fm-li:hover{ background:rgba(0,0,0,.04); }

.fm-item{
  flex:1 1 auto; display:block; padding:15px 14px; text-decoration:none;
  color:var(--fm-text); font-weight:700; font-size:18px; border-radius:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* split attivo solo per voci con figli */
.fm-li.has-children .fm-item{ flex:0 0 var(--fm-left); }
.fm-li.has-children .fm-expand{
  flex:0 0 var(--fm-right);
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; border-radius:8px;
  padding:0 6px; font-size:22px; line-height:1; color:var(--fm-text);
  border-left:1px solid rgba(0,0,0,.08);
  min-width:44px; /* hit-area minima per tap */
}

/* Hover per le due porzioni */
.fm-li.has-children .fm-item:hover{ background:rgba(0,0,0,.06); }
.fm-li.has-children .fm-expand:hover{ background:var(--fm-highlight); color:#fff; }
.fm-expand:focus-visible, .fm-item:focus-visible{ outline:2px solid rgba(0,0,0,.35); outline-offset:2px; }

/* Evidenziata (quando attiva nel pannello) */
.fm-li[aria-current="true"]{ background:var(--fm-highlight); }
.fm-li[aria-current="true"] .fm-item,
.fm-li[aria-current="true"] .fm-expand{ color:#fff; }

/* Back (solo in mobile) */
.fm-back{ display:none; }
.fm-offcanvas.is-mobile .fm-back{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; margin:0 0 8px 0; border-radius:8px;
  background:rgba(0,0,0,.06); font-weight:700;
}
.fm-back button{
  background:transparent; border:0; padding:6px 4px; cursor:pointer;
  color:var(--fm-text); display:flex; align-items:center; gap:8px; font:inherit;
}

/* Hamburger (più marcato e rosso) */
.fm-hamburger{ appearance:none; background:transparent; border:0; padding:10px; cursor:pointer; display:inline-flex; }
.fm-hamburger-box{ width:34px; height:24px; position:relative; }
.fm-hamburger-inner, .fm-hamburger-inner::before, .fm-hamburger-inner::after{
  content:""; position:absolute; left:0; width:34px; height:4px; background:#BF1E2E; border-radius:2px; transition:transform .2s, top .2s, opacity .2s;
}
.fm-hamburger-inner{ top:10px; }        /* centrale */
.fm-hamburger-inner::before{ top:-10px; }/* superiore */
.fm-hamburger-inner::after{ top:10px; }  /* inferiore */

body.fm-open .fm-hamburger-inner{ transform:rotate(45deg); }
body.fm-open .fm-hamburger-inner::before{ top:0; opacity:0; }
body.fm-open .fm-hamburger-inner::after{ top:0; transform:rotate(-90deg); }

/* Responsive */
@media (max-width: 900px){
  .fm-offcanvas{ width:min(520px, 95vw); }
  .fm-panels.cols-3{ grid-template-columns:1fr 1fr; }
}

/* MOBILE FULL WIDTH */
@media (max-width: 640px){
  /* Full width + full screen */
  .fm-offcanvas{
    inset: 0 0 0 0;      /* tocca anche il bordo destro */
    width: 100vw;        /* tutta la larghezza */
    max-width: 100vw;
  }
  .fm-offcanvas.is-mobile .fm-panels{ grid-template-columns:1fr !important; }
  .fm-item{ font-size:17px; padding:12px 12px; }
}

@media (min-width: 1200px){
  .fm-offcanvas{ width:min(1180px, 96vw); }
  .fm-item{ font-size:20px; padding:16px 16px; }
  .fm-li.has-children .fm-expand{ font-size:22px; }
}