/* ============================================================
   Sportiva — Widget Navigazione Area Utente (spv_user_nav)
   Modalità: inline | toggle (slide-out / dropdown) su desktop+mobile.
   Autonomo: nessuna dipendenza dall'header standard del sito.
   ============================================================ */

.spv-unav { position: relative; }

.spv-unav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Orientamento (prefix_class sul wrapper del widget) */
.spv-unav-orient-vertical .spv-unav__list {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.spv-unav__item { display: block; }

.spv-unav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  line-height: 1.2;
  transition: background-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.spv-unav-orient-vertical .spv-unav__link { width: 100%; }
.spv-unav__link:hover { background-color: rgba(0, 0, 0, .06); }

.spv-unav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.spv-unav__icon.dashicons { font-family: dashicons; }
.spv-unav__icon svg { width: 1em; height: 1em; }

.spv-unav__item.is-active > .spv-unav__link {
  background-color: rgba(0, 0, 0, .08);
  font-weight: 600;
}

/* Pulsante "Torna al sito" */
.spv-unav__back { font-weight: 600; }
.spv-unav-orient-vertical .spv-unav__item--back {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  margin-bottom: 6px;
  padding-bottom: 6px;
}

/* Pulsante apri menu — nascosto se non in modalità toggle */
.spv-unav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: inherit;
}
.spv-unav__toggle .dashicons { font-size: 26px; width: 26px; height: 26px; }

.spv-unav__backdrop { display: none; }

/* Riga con pulsante Chiudi (solo in modalità toggle) */
.spv-unav__closerow { display: none; list-style: none; }
.spv-unav--toggle .spv-unav__closerow {
  display: block;
  text-align: right;
  padding: 0 4px 6px;
  margin: 0;
}
.spv-unav__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  color: inherit;
  line-height: 1;
}
.spv-unav__close:hover { background: rgba(0, 0, 0, .06); }
.spv-unav__close .dashicons { font-size: 24px; width: 24px; height: 24px; }

/* Voce logout */
.spv-unav__logout { font-weight: 600; }

/* ============================================================
   MODALITÀ TOGGLE (a scomparsa) — desktop + mobile
   ============================================================ */
.spv-unav--toggle > .spv-unav__toggle { display: inline-flex; }

/* Backdrop (slide, e dropdown su mobile) */
.spv-unav--toggle.spv-unav--slide .spv-unav__backdrop,
.spv-unav--toggle.spv-unav--dropdown .spv-unav__backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 2147483645;
}
.spv-unav--toggle .spv-unav__backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- SLIDE-OUT laterale (default) ---- */
.spv-unav--toggle.spv-unav--slide .spv-unav__list {
  position: fixed;
  top: 0;
  right: 0;
  width: min(86vw, 360px);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 2px;
  background: #ffffff;
  padding: 64px 12px 24px;
  box-shadow: -8px 0 40px rgba(0, 0, 0, .28);
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2147483646;
  visibility: hidden;
}
.spv-unav--toggle.spv-unav--slide .spv-unav__list.is-drawer-open {
  transform: translateX(0);
  visibility: visible;
}
.spv-unav--toggle.spv-unav--slide .spv-unav__link { width: 100%; }

/* ---- DROPDOWN sotto il pulsante (desktop) ---- */
.spv-unav--toggle.spv-unav--dropdown { display: inline-block; }
.spv-unav--toggle.spv-unav--dropdown .spv-unav__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: 90vw;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 2px;
  background: #ffffff;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
  z-index: 2147483646;
  display: none;
}
.spv-unav--toggle.spv-unav--dropdown .spv-unav__list.is-drawer-open { display: flex; }
.spv-unav--toggle.spv-unav--dropdown .spv-unav__link { width: 100%; }

/* Scroll lock quando è aperto uno slide-out */
body.spv-unav-open { overflow: hidden; }

/* Su mobile il dropdown diventa slide-out (più robusto) */
@media (max-width: 768px) {
  .spv-unav--toggle.spv-unav--dropdown .spv-unav__list {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: min(86vw, 360px);
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    padding: 64px 12px 24px;
    box-shadow: -8px 0 40px rgba(0, 0, 0, .28);
    transform: translateX(100%);
    transition: transform .25s ease;
    visibility: hidden;
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .spv-unav--toggle.spv-unav--dropdown .spv-unav__list.is-drawer-open {
    transform: translateX(0);
    visibility: visible;
  }
}