/* =========================================================
   Innovando Swiss - Dropdown UX (Flatsome) - v5 "Extra Slow"
   Autore: Flo
   - Indicatore verticale bianco agganciato al BORDO del dropdown (li::before)
   - Comparsa extra morbida del menu (fade + slide up 700ms)
   - Focus ring accessibile
   - RTL ready con proprietà logiche
   ========================================================= */

/* ===========================
   Variabili personalizzabili
   =========================== */
:root{
  --dropdown-indicator-color: #fff;
  --dropdown-indicator-width: 15px;
  --dropdown-anim-duration: 700ms;       /* durata extra lenta */
  --dropdown-fade-duration: 240ms;
  --dropdown-left-gap: 1.5em;            /* usata solo se riattivi la versione "sul testo" */
  --dropdown-padding-left: 1.5em;        /* padding per il testo del link */
  --dropdown-radius: 0px;
  --focus-ring: rgba(255,255,255,.35);
}

/* =========================================================
   Struttura base + indicatore a BORDO (li::before)
   ========================================================= */

/* Il LI fa da contenitore per la barra */
.header .header-nav .nav-dropdown li{
  position: relative;
}

/* Link del dropdown: padding sinistro standard (non sommiamo più la width della barra) */
.header .header-nav .nav-dropdown li > a{
  position: relative;
  padding-left: var(--dropdown-padding-left);
  transition: color 180ms ease, background-color 180ms ease;
  z-index: 1; /* sopra all'indicatore */
}

/* Indicatore verticale bianco flush al bordo del dropdown */
.header .header-nav .nav-dropdown li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;     /* bordo sinistro in LTR, destro in RTL */
  top: 0;
  width: var(--dropdown-indicator-width);
  height: 100%;
  background: var(--dropdown-indicator-color);
  border-radius: var(--dropdown-radius);
  opacity: 0.95;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 320ms ease-out;
  pointer-events: none;
  z-index: 0;
}

/* Stati attivi che mostrano l’indicatore */
.header .header-nav .nav-dropdown li:hover::before,
.header .header-nav .nav-dropdown li:focus-within::before,
.header .header-nav .nav-dropdown li.current-menu-item::before,
.header .header-nav .nav-dropdown li.current-menu-ancestor::before{
  transform: scaleY(1);
}

/* Focus ring sul link (accessibile) */
.header .header-nav .nav-dropdown li > a:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
  border-radius: 4px;
}

/* RTL: padding simmetrico sul link */
.rtl .header .header-nav .nav-dropdown li > a{
  padding-right: var(--dropdown-padding-left);
  padding-left: 0.4em;
}

/* =========================================================
   Dropdown nascosto (stato base)
   ========================================================= */
.header .header-nav .nav-dropdown{
  visibility: hidden;
  opacity: 0;
  transform: translateY(22px);
  will-change: transform, opacity;
  transition: opacity var(--dropdown-fade-duration) ease;
  /* se il tema applica padding che crea un gap col bordo, lo puoi ridurre: */
  /* padding-left: 0; */
}

/* Keyframes extra slow */
@keyframes menuExtraSlowUp{
  0%   { transform: translateY(24px); opacity: 0; }
  30%  { transform: translateY(10px); opacity: 0.4; }
  60%  { transform: translateY(3px);  opacity: 0.85; }
  85%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* =========================================================
   Stati aperti del dropdown
   ========================================================= */
.header .header-nav li:hover > .nav-dropdown,
.header .header-nav li.nav-hover > .nav-dropdown,
.header .header-nav li.nav-dropdown-active > .nav-dropdown,
.header .header-nav li.current-dropdown > .nav-dropdown,
.header .header-nav li.active-dropdown > .nav-dropdown,
.header .header-nav li.open > .nav-dropdown,
.header .header-nav li.is-active > .nav-dropdown,
.header .header-nav li:hover > .nav-dropdown.nav-dropdown-default,
.header .header-nav li:hover > .nav-dropdown.nav-dropdown-large,
.header .header-nav li:hover > .nav-dropdown.nav-dropdown-mega{
  visibility: visible !important;
  opacity: 1 !important;
  animation: menuExtraSlowUp var(--dropdown-anim-duration) cubic-bezier(.25,.8,.25,1);
  transform: translateY(0) !important;
}

/* Mega menu: manteniamo gli hint per la GPU */
.header .ux-megamenu .nav-dropdown{
  will-change: transform, opacity;
}

/* =========================================================
   Riduzione movimento
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .header .header-nav .nav-dropdown,
  .header .header-nav li:hover > .nav-dropdown,
  .header .header-nav li.nav-hover > .nav-dropdown,
  .header .header-nav li.nav-dropdown-active > .nav-dropdown,
  .header .header-nav li.current-dropdown > .nav-dropdown,
  .header .header-nav li.active-dropdown > .nav-dropdown,
  .header .header-nav li.open > .nav-dropdown,
  .header .header-nav li.is-active > .nav-dropdown{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
  .header .header-nav .nav-dropdown li::before{
    transition: none !important;
  }
}

/* =========================================================
   Ritocchi opzionali (commentati)
   ========================================================= */
/* VERSIONE "sul testo" (non flush al bordo) — NON usare con li::before
.header .header-nav .nav-dropdown li > a{
  padding-left: calc(var(--dropdown-padding-left) + var(--dropdown-indicator-width));
}
.header .header-nav .nav-dropdown li > a::before{
  content:"";
  position:absolute;
  left: var(--dropdown-left-gap);
  top:50%;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center top;
  width: var(--dropdown-indicator-width);
  height:100%;
  background: var(--dropdown-indicator-color);
  border-radius: var(--dropdown-radius);
  opacity:.95;
  transition: transform 320ms ease-out;
  pointer-events:none;
}
.header .header-nav .nav-dropdown li:hover > a::before,
.header .header-nav .nav-dropdown li > a:focus::before,
.header .header-nav .nav-dropdown li.current-menu-item > a::before,
.header .header-nav .nav-dropdown li.current-menu-ancestor > a::before{
  transform: translateY(-50%) scaleY(1);
}
*/

/* BARRA A DESTRA (se ti serve in layout LTR)
.header .header-nav .nav-dropdown li::before{
  inset-inline-start: auto;
  inset-inline-end: 0;
}
*/

/* RIDUCI GAP SE IL TEMA HA PADDING INTERNO SUL CONTENITORE MENU
.header .header-nav .nav-dropdown{ padding-left: 0; }
*/