/* Dropdown dinamico "Eventi" nel menu di navigazione (voce di menu marcata
 * lem-eventi-nav-marker da inc/eventi-nav-submenu.php). Stesso componente
 * di designs/03-notte-rooftop/style.css, sezione "eventi hover submenu":
 * puramente CSS (:hover/:focus-within), nessun JS necessario per aprire/
 * chiudere su desktop. Ogni colore ha un fallback letterale via
 * var(--nome, fallback), stesso approccio di eventi-grid.css.
 */

/* Il link "Eventi" (<a>) resta esattamente com'è renderizzato dal tema —
 * niente wrapper attorno, per non rompere lo stile che Blocksy applica al
 * link attivo/corrente tramite il rapporto diretto <li> > <a>. Il
 * posizionamento del dropdown è sull'<li> marcato (.lem-eventi-nav-marker);
 * "align-self:center" impedisce all'<li> di allungarsi per riempire tutta
 * l'altezza dell'header nei menu a flex (comune, Blocksy incluso) — senza
 * quello "top:100%" partirebbe dal fondo dell'header intero invece che da
 * subito sotto il testo del link. */
.lem-eventi-nav-marker{ position:relative; align-self:center; padding-right:0; }
.lem-eventi-nav-marker::before{ content:''; position:absolute; top:100%; left:0; right:0; height:16px; }

/* Freccina a destra, centrata verticalmente sull'<li> (non sul link: il
 * link resta invariato, vedi commento in eventi-nav-submenu.php). */
.lem-eventi-nav-arrow{
  position:absolute; top:42%; right:0;
  width:6px; height:6px;
  border-right:1.5px solid var(--text-muted, #B8AFA2);
  border-bottom:1.5px solid var(--text-muted, #B8AFA2);
  transform:translateY(-50%) rotate(45deg);
  opacity:.7; pointer-events:none;
}

.nav-submenu{
  position:absolute; top:calc(100% + 12px); left:0; transform:translateY(6px);
  width:336px; background:var(--bg-card, #1D1712); border:1px solid var(--line, rgba(255,248,237,.12)); border-radius:16px;
  padding:10px; box-shadow:0 20px 44px -18px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; pointer-events:none; z-index:10;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.lem-eventi-nav-marker:hover .nav-submenu,
.lem-eventi-nav-marker:focus-within .nav-submenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.nav-submenu .nav-submenu__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:nowrap;
  padding:11px 12px; border-radius:10px; color:var(--text, #FFF8ED);
  font-size:.86rem; font-weight:600; transition:background .15s ease, color .15s ease;
}
.nav-submenu .nav-submenu__item:hover{ background:rgba(195,220,46,.08); color:var(--green, #C3DC2E); }
.nav-submenu__title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.nav-submenu__date{ flex-shrink:0; white-space:nowrap; color:var(--text-muted, #B8AFA2); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.nav-submenu .nav-submenu__all{
  display:block; text-align:center; margin-top:4px; padding:10px 12px; border-top:1px solid var(--line, rgba(255,248,237,.12));
  font-size:.78rem; font-weight:700; color:var(--green, #C3DC2E); letter-spacing:.02em; transition:color .15s ease;
}
.nav-submenu .nav-submenu__all:hover{ color:var(--green-bright, #D5E481); }

@media (max-width:900px){
  .lem-eventi-nav-arrow{ display:none; }
  .nav-submenu{
    position:static; display:flex; flex-direction:column; width:100%;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    background:none; border:none; box-shadow:none;
    padding:6px 0 2px 16px; margin-top:8px; border-left:1px solid var(--line, rgba(255,248,237,.12));
    border-radius:0;
  }
  .nav-submenu .nav-submenu__item{ padding:9px 10px; font-size:.88rem; }
  .nav-submenu .nav-submenu__all{ text-align:left; border-top:none; margin-top:2px; padding:9px 10px; }
}