/*
 * stylemd_nav.css — Regole STRUTTURALI per navigazione container, RTL e animazioni.
 * NON modificare da editor CSS. Nessun colore, font-size o padding personalizzabile qui.
 * I colori/aspetto dei pulsanti nav sono in stylemd_mod.css (gestiti dall'editor).
 */

#menu.vm-nav-mode ~ #close-all-btn,
body:has(#menu.vm-nav-mode) #close-all-btn { display: none !important; }

.vm-nav-shell { margin-bottom: 1rem; }

.vm-nav-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.vm-nav-header-start { justify-self: start; min-width: 0; }
.vm-nav-header-end   { justify-self: end;   min-width: 0; pointer-events: none; }

.vm-nav-title {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  min-width: 0;
  max-width: 100%;
}

html[dir="rtl"] .vm-nav-header-start { justify-self: end; }
html[dir="rtl"] .vm-nav-header-end   { justify-self: start; }

.vm-nav-stage { position: relative; overflow: hidden; min-height: 60px; }
.vm-nav-panel { transition: transform 0.24s ease, opacity 0.24s ease; will-change: transform, opacity; }

.vm-nav-panel-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.35rem;
}
html[dir="rtl"] .vm-nav-panel-footer { justify-content: flex-start; }

#menu.vm-nav-mode .vm-nav-node-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  border: none;
  text-align: center;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
}

/* Link esterni: stesso blocco dei pulsanti nav, aspetto da ancoraggio */
#menu.vm-nav-mode a.vm-nav-node-btn.vm-node-link-button {
  text-decoration: none;
  color: inherit;
}

#menu.vm-nav-mode .vm-nav-node-btn .vm-node-link-ico {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  opacity: 0.9;
}

html[dir="rtl"] #menu.vm-nav-mode .vm-nav-node-btn .vm-node-link-ico {
  transform: translateY(-50%) scaleX(-1);
}

.vm-node-title {
  width: 100%;
  text-align: center;
}

.vm-node-hint {
  text-transform: none;
  line-height: 1.15;
  color: inherit;
}

#menu.vm-nav-mode .vm-nav-node-btn .vm-node-chevron {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: inherit;
}

html[dir="rtl"] #menu.vm-nav-mode .vm-nav-node-btn .vm-node-chevron {
  transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .vm-nav-back-arrow { display: inline-block; transform: scaleX(-1); }

.vm-nav-empty { padding: 0.5rem 0; }

/* Animazioni navigazione LTR */
#menu.vm-nav-mode .vm-nav-panel.vm-nav-leave-fwd-ltr  { transform: translateX(-36px);  opacity: 0.45; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-fwd-ltr  { transform: translateX(100%);   opacity: 0.65; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-fwd-ltr.vm-nav-enter-active  { transform: translateX(0); opacity: 1; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-leave-back-ltr { transform: translateX(100%);   opacity: 0.5; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-back-ltr { transform: translateX(-40px);  opacity: 0.45; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-back-ltr.vm-nav-enter-active { transform: translateX(0); opacity: 1; }

/* Animazioni navigazione RTL */
#menu.vm-nav-mode .vm-nav-panel.vm-nav-leave-fwd-rtl  { transform: translateX(36px);   opacity: 0.45; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-fwd-rtl  { transform: translateX(-100%);  opacity: 0.65; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-fwd-rtl.vm-nav-enter-active  { transform: translateX(0); opacity: 1; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-leave-back-rtl { transform: translateX(-100%);  opacity: 0.5; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-back-rtl { transform: translateX(40px);   opacity: 0.45; }
#menu.vm-nav-mode .vm-nav-panel.vm-nav-enter-back-rtl.vm-nav-enter-active { transform: translateX(0); opacity: 1; }

/* Due righe sul bottone sezione (menu classico): .vm-cat-line1 / .vm-cat-line2 da app.js */
#menu:not(.vm-nav-mode) .categoria .vm-cat-line1,
#menu:not(.vm-nav-mode) .categoria .vm-cat-line2 {
  display: block;
}
#menu:not(.vm-nav-mode) .categoria .vm-cat-line2 {
  margin-top: 0.15em;
}