/* ==========================================================
   ZAYNDE DRAWER CSS (HOMEY) - CLEAN + SAFE
   File: /wp-content/themes/homey-child/assets/js/zaynde-drawer.css

   Obiettivi:
   - NIENTE blocchi click (fix pointer-events + overlay)
   - hamburger e login SEMPRE cliccabili
   - trigger cliccabile su TUTTO il cerchio (non solo sulle 3 righe)
   - drawer SOLO a destra
   - drawer CHIUSO di default (mai aperto al load / cambio pagina)
   - NIENTE "X" per chiudere (la nasconde)
   - drawer sotto le icone quando aperto
   ========================================================== */

/* ---------- variabili base ---------- */
:root{
  --z-drawer-top-desktop: 74px;   /* sotto header icone */
  --z-drawer-top-mobile:  64px;
  --z-drawer-gap:         18px;   /* distanza dal bordo destro */
  --z-drawer-w:           360px;
  --z-drawer-radius:      18px;
  --z-drawer-shadow:      0 18px 55px rgba(0,0,0,.22);
  --z-overlay:            rgba(0,0,0,.35);
}

/* ---------- HARD FIX: ripristina click se qualcosa li ha disattivati ---------- */
html, body { pointer-events: auto !important; }

/* Header: niente blocchi click su nav e icone */
.header-nav,
.header-inner,
.header-comp-navicon,
.header-comp-right,
.header-comp-right *{
  pointer-events: auto !important;
}

/* ---------- TRIGGER hamburger: cliccabile su tutto il cerchio ---------- */
.header-comp-navicon .side-nav-trigger{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;

  border-radius: 999px !important;
  cursor: pointer !important;
  user-select: none !important;

  /* area cliccabile = cerchio intero */
  pointer-events: auto !important;
}

.header-comp-navicon .side-nav-trigger i{
  pointer-events: none !important; /* il click lo prende il cerchio, non l'icona */
}

/* ---------- ICONA LOGIN: lascia cliccabile sempre ---------- */
.user-mobile-nav,
.user-mobile-nav *{
  pointer-events: auto !important;
}

/* ---------- OVERLAY: solo quando drawer è attivo ---------- */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 99990;
  transition: opacity .22s ease, background .22s ease;
}

body.zaynde-drawer-active::before{
  background: var(--z-overlay);
  opacity: 1;
  pointer-events: auto; /* blocca click dietro SOLO quando aperto */
}

/* ---------- PANNELLO: base (chiuso SEMPRE di default) ---------- */
#side-nav-panel.side-nav-panel{
  position: fixed !important;
  top: var(--z-drawer-top-desktop) !important;
  right: var(--z-drawer-gap) !important;
  left: auto !important;

  width: min(var(--z-drawer-w), calc(100vw - (var(--z-drawer-gap) * 2))) !important;
  max-height: calc(100vh - var(--z-drawer-top-desktop) - 18px) !important;

  background: #fff !important;
  border-radius: var(--z-drawer-radius) !important;
  box-shadow: var(--z-drawer-shadow) !important;

  overflow: hidden !important;

  /* CHIUSO di default */
  transform: translateX(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;

  z-index: 99998 !important;

  transition: transform .28s ease, opacity .28s ease !important;
}

/* Forza MAI a sinistra anche se Homey aggiunge classi */
#side-nav-panel.side-nav-panel-left,
#side-nav-panel.side-nav-panel-right{
  left: auto !important;
  right: var(--z-drawer-gap) !important;
}

/* APERTO: accettiamo sia body class che class Homey */
body.zaynde-drawer-active #side-nav-panel.side-nav-panel,
#side-nav-panel.side-nav-panel.side-nav-panel-open{
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ---------- Nascondi la X (tu NON la vuoi) ---------- */
#side-nav-panel .z-drawer-x{
  display: none !important;
}

/* ---------- Contenuto interno: menu ---------- */
#side-nav-panel .mobile-nav-wrap{
  padding: 10px 0 !important;
}

#side-nav-panel .mobile-menu{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#side-nav-panel .mobile-menu > li > a{
  display: block !important;
  padding: 16px 18px !important;
  text-decoration: none !important;
}

#side-nav-panel .mobile-menu > li > a:hover{
  background: rgba(228,71,115,.08) !important;
}

/* ---------- Mobile: drawer più grande e top più basso ---------- */
@media (max-width: 768px){
  #side-nav-panel.side-nav-panel{
    top: var(--z-drawer-top-mobile) !important;
    max-height: calc(100vh - var(--z-drawer-top-mobile) - 12px) !important;
    width: calc(100vw - (var(--z-drawer-gap) * 2)) !important;
  }
}