/* ============================================================================
   KW NAV — menu full-screen a due colonne
   v1.0.0 — 2026-08-06 — M.P. Mobili Porro

   Le parent restano sempre visibili a sinistra, sovradimensionate.
   Le sub compaiono a destra, nella colonna accanto: nessun pannello che
   scorre via, nessuna gerarchia che sparisce.

   DOVE VA
   wp-content/themes/Divi-child/kw-nav/kw-nav.css
   Caricato da kw-nav.php con filemtime per il cache busting.

   ATTENZIONE AL PURGE DI KW DIVI SPEED
   Le classi is-open, is-active, is-visible, is-sub-open arrivano dal JS.
   Vanno in safelist, oppure escludi l'handle 'kw-nav' dal purge.

   COSA SI ANIMA
   Solo transform e opacity. Timing in valori letterali, ritardi di stagger
   scritti a mano con nth-child: nessuna custom property nei tempi.
   ============================================================================ */

/* ---- guscio -------------------------------------------------------------- */
.kw-nav{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#403382;
  color:#FFFDF8;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;
  visibility:hidden;
  transition:opacity 420ms cubic-bezier(0.16,1,0.3,1),visibility 0ms linear 420ms;
}
.kw-nav.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity 420ms cubic-bezier(0.16,1,0.3,1),visibility 0ms linear 0ms;
}
.kw-nav *{box-sizing:border-box}
.kw-nav a{text-decoration:none;color:inherit}

/* blocco dello scroll: la compensazione della scrollbar la fa il JS */
body.kw-nav-open{overflow:hidden}

/* ---- testa --------------------------------------------------------------- */
.kw-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px 46px;
  border-bottom:1px solid rgba(255,253,248,.16);
}
.kw-nav__brand{display:flex;align-items:center;gap:16px;min-width:0}
.kw-nav__brand img{display:block;height:34px;width:auto}
.kw-nav__eyebrow{
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,253,248,.6);margin:0;
}
.kw-nav__close{
  display:inline-flex;align-items:center;gap:12px;
  background:none;border:0;padding:10px 2px;cursor:pointer;
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,253,248,.72);
  transition:color 240ms linear;
}
.kw-nav__close:hover{color:#FFFDF8}
.kw-nav__close svg{display:block;transition:transform 420ms cubic-bezier(0.16,1,0.3,1)}
.kw-nav__close:hover svg{transform:rotate(90deg)}

/* ---- corpo a due colonne ------------------------------------------------- */
.kw-nav__body{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:0;
}
.kw-nav__parents{
  padding:52px 46px 52px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.kw-nav__subs{
  position:relative;
  padding:58px 46px 52px 64px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* il filo che divide le due colonne: si traccia dall'alto all'apertura */
.kw-nav__subs::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(255,253,248,.18);
  transform:scaleY(0);transform-origin:top center;
  transition:transform 620ms cubic-bezier(0.16,1,0.3,1) 160ms;
}
.kw-nav.is-open .kw-nav__subs::before{transform:scaleY(1)}

/* ---- parent -------------------------------------------------------------- */
.kw-nav__list{list-style:none;margin:0;padding:0}

.kw-nav__row{
  position:relative;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 460ms cubic-bezier(0.16,1,0.3,1),transform 620ms cubic-bezier(0.16,1,0.3,1);
}
.kw-nav.is-open .kw-nav__row{opacity:1;transform:none}
.kw-nav.is-open .kw-nav__row:nth-child(1){transition-delay:130ms}
.kw-nav.is-open .kw-nav__row:nth-child(2){transition-delay:176ms}
.kw-nav.is-open .kw-nav__row:nth-child(3){transition-delay:222ms}
.kw-nav.is-open .kw-nav__row:nth-child(4){transition-delay:268ms}
.kw-nav.is-open .kw-nav__row:nth-child(5){transition-delay:314ms}
.kw-nav.is-open .kw-nav__row:nth-child(6){transition-delay:360ms}
.kw-nav.is-open .kw-nav__row:nth-child(7){transition-delay:406ms}
.kw-nav.is-open .kw-nav__row:nth-child(8){transition-delay:452ms}
.kw-nav.is-open .kw-nav__row:nth-child(9){transition-delay:498ms}
.kw-nav.is-open .kw-nav__row:nth-child(10){transition-delay:544ms}
.kw-nav.is-open .kw-nav__row:nth-child(11){transition-delay:590ms}
.kw-nav.is-open .kw-nav__row:nth-child(12){transition-delay:636ms}

/* la linea di richiamo: esce dal margine e punta alla voce, come una quota */
.kw-nav__row::before{
  content:"";
  position:absolute;left:0;top:50%;width:20px;height:1px;
  background:#DC9474;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.kw-nav__row:hover::before,
.kw-nav__row.is-active::before{transform:scaleX(1)}

.kw-nav__label{
  display:block;width:100%;
  margin:0;padding:9px 0;
  background:none;border:0;
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(32px,4.4vw,72px);
  line-height:1.04;
  letter-spacing:-.022em;
  text-align:left;
  color:rgba(255,253,248,.66);
  cursor:pointer;
  transition:color 300ms linear,transform 480ms cubic-bezier(0.16,1,0.3,1);
}
.kw-nav__row:hover .kw-nav__label,
.kw-nav__row.is-active .kw-nav__label,
.kw-nav__label:focus-visible{color:#FFFDF8;transform:translateX(30px)}
.kw-nav__label:focus{outline:none}
.kw-nav__label:focus-visible{outline:1px solid rgba(255,253,248,.7);outline-offset:6px}

/* pagina corrente */
.kw-nav__row[data-current="1"] .kw-nav__label{color:#FFFDF8}

/* piccolo indicatore per le voci con figli */
.kw-nav__count{
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:11px;letter-spacing:.14em;
  vertical-align:super;
  margin-left:14px;
  color:rgba(255,253,248,.42);
  transition:color 300ms linear;
}
.kw-nav__row.is-active .kw-nav__count{color:#DC9474}

/* ---- sub ---------------------------------------------------------------- */
.kw-nav__sub{display:none}
.kw-nav__sub.is-visible{display:block}

.kw-nav__sub-eyebrow{
  margin:0 0 30px;
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#DC9474;
}
.kw-nav__sub-list{list-style:none;margin:0;padding:0}

.kw-nav__sub-item{
  opacity:0;
  transform:translateX(26px);
  transition:opacity 420ms cubic-bezier(0.16,1,0.3,1),transform 520ms cubic-bezier(0.16,1,0.3,1);
}
.kw-nav__sub.is-visible .kw-nav__sub-item{opacity:1;transform:none}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(1){transition-delay:40ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(2){transition-delay:78ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(3){transition-delay:116ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(4){transition-delay:154ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(5){transition-delay:192ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(6){transition-delay:230ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(7){transition-delay:268ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(8){transition-delay:306ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(9){transition-delay:344ms}
.kw-nav__sub.is-visible .kw-nav__sub-item:nth-child(10){transition-delay:382ms}

.kw-nav__sub-link{
  position:relative;
  display:block;
  padding:15px 0 15px 30px;
  font-family:'Newsreader',Georgia,serif;
  font-weight:300;
  font-size:clamp(19px,1.55vw,25px);
  line-height:1.2;
  color:rgba(255,253,248,.74);
  border-bottom:1px solid rgba(255,253,248,.12);
  transition:color 280ms linear,transform 460ms cubic-bezier(0.16,1,0.3,1);
}
/* la tacca a sinistra: cresce dal basso, la stessa figura del bottone */
.kw-nav__sub-link::before{
  content:"";
  position:absolute;left:0;top:50%;margin-top:-6px;
  width:1px;height:13px;
  background:#DC9474;
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform 380ms cubic-bezier(0.16,1,0.3,1);
}
.kw-nav__sub-link:hover,
.kw-nav__sub-link:focus-visible{color:#FFFDF8;transform:translateX(8px)}
.kw-nav__sub-link:hover::before,
.kw-nav__sub-link:focus-visible::before{transform:scaleY(1)}
.kw-nav__sub-link:focus{outline:none}
.kw-nav__sub-link:focus-visible{outline:1px solid rgba(255,253,248,.7);outline-offset:4px}
.kw-nav__sub-link[aria-current]{color:#FFFDF8}
.kw-nav__sub-link[aria-current]::before{transform:scaleY(1)}

/* la prima riga della colonna: la sezione stessa */
.kw-nav__sub-all{
  display:inline-flex;align-items:center;gap:11px;
  margin-bottom:22px;padding:0;
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,253,248,.66);
  border:0;
  transition:color 260ms linear;
}
.kw-nav__sub-all svg{transition:transform 380ms cubic-bezier(0.16,1,0.3,1)}
.kw-nav__sub-all:hover{color:#FFFDF8}
.kw-nav__sub-all:hover svg{transform:translateX(5px)}

/* ---- piede -------------------------------------------------------------- */
.kw-nav__foot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 34px;
  padding:22px 46px 26px;
  border-top:1px solid rgba(255,253,248,.16);
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,253,248,.56);
}
.kw-nav__foot a{transition:color 240ms linear}
.kw-nav__foot a:hover{color:#FFFDF8}

/* ---- il bottone burger --------------------------------------------------- */
.kw-burger{
  display:inline-flex;align-items:center;gap:14px;
  background:none;border:0;padding:10px 4px;cursor:pointer;
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  font-size:20px;letter-spacing:.2em;text-transform:uppercase;
  color:#403382;
}
.kw-burger__lines{display:block;width:26px;height:9px;position:relative}
.kw-burger__lines i{
  position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.kw-burger__lines i:nth-child(1){top:0}
.kw-burger__lines i:nth-child(2){bottom:0}
.kw-burger:hover .kw-burger__lines i:nth-child(1){transform:translateX(5px)}
.kw-burger:hover .kw-burger__lines i:nth-child(2){transform:translateX(-5px)}
.kw-burger--light{color:#FFFDF8}

/* ---- mobile: la sub diventa un secondo pannello che entra da destra ------ */
@media (max-width:980px){
  .kw-nav__head{padding:20px 24px}
  .kw-nav__foot{padding:18px 24px 22px;gap:8px 22px}
  .kw-nav__body{grid-template-columns:1fr}
  .kw-nav__parents{padding:34px 24px 40px}
  .kw-nav__label{font-size:clamp(30px,8.4vw,46px)}
  .kw-nav__row:hover .kw-nav__label,
  .kw-nav__row.is-active .kw-nav__label{transform:translateX(22px)}

  .kw-nav__subs{
    position:absolute;
    inset:0;
    z-index:4;
    padding:34px 24px 40px;
    background:#403382;
    transform:translateX(100%);
    transition:transform 480ms cubic-bezier(0.16,1,0.3,1);
  }
  .kw-nav__subs::before{display:none}
  .kw-nav.is-sub-open .kw-nav__subs{transform:none}
  .kw-nav__back{
    display:inline-flex;align-items:center;gap:11px;
    background:none;border:0;padding:0 0 26px;cursor:pointer;
  font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,253,248,.7);
  }
  .kw-nav__sub-link{font-size:20px;padding:14px 0 14px 26px}
}
.kw-nav__back{display:none}
@media (max-width:980px){.kw-nav.is-sub-open .kw-nav__back{display:inline-flex}}

/* ---- riduzione del movimento -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .kw-nav,.kw-nav *,.kw-nav *::before,.kw-nav *::after{
    transition-duration:1ms !important;
    transition-delay:0ms !important;
  }
}

/* ----------------------------------------------------------------------------
   CHANGELOG
   1.2.0 — 2026-08-06 — nessuna sezione aperta all'apertura del menu: la
           colonna di destra parte vuota, con il solo filo divisorio a
           delimitarla.
   1.0.0 — 2026-08-06 — prima release. Due colonne con parent sempre visibili,
           filo divisorio tracciato all'apertura, linea di richiamo sulla voce
           attiva, stagger con ritardi letterali, secondo pannello su mobile,
           focus-visible su tutti gli elementi interattivi.
   -------------------------------------------------------------------------- */