/* ==========================================================================
   Dropdown-Only Highlight Bar
   --------------------------------------------------------------------------
   Attiva la barra arancione SOLO sulle voci dentro il menu a tendina,
   mantenendo il testo SEMPRE bianco.
   ========================================================================== */

/* 1) Solo sottovoci (dropdown) */
.sub-menu li.menu-item > a {
  position: relative !important;
  padding-left: 20px !important; /* spazio per la barra */
  color: #ffffff !important;      /* testo sempre bianco */
}

/* 2) Pseudo-barra arancione nascosta */
.sub-menu li.menu-item > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 0;
  background-color: #ff9900;
  transition: height 0.25s ease-in-out;
}

/* 3) Al passaggio mouse o voce attiva nella tendina */
.sub-menu li.menu-item:hover > a::before,
.sub-menu li.current-menu-item > a::before {
  height: 100% !important;
}

/* 4) Testo bianco anche al hover/attivo */
.sub-menu li.menu-item:hover > a,
.sub-menu li.current-menu-item > a {
  color: #ffffff !important;
}

/* ===== Refinements menu Flatsome – LPM PACKAGING ===== */
:root{
  --menu-zoom: 1.20;                 /* 120% */
  --menu-zoom-speed: .18s;           /* velocità zoom */
  --menu-zoom-ease: cubic-bezier(.2,.8,.2,1);
  --menu-shadow: 0 8px 24px rgba(0,0,0,.12);
  --menu-highlight: #ffd200;         /* barra gialla già usata */
}

/* Garantiamo che gli elementi possano sovrapporsi */
.header-wrapper, .header-nav, .header-nav-main, .header-nav-main .nav { overflow: visible; }

/* Voci primo livello */
.header-nav-main .nav > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;                /* crea stacking context per z-index locale */
  transition: transform var(--menu-zoom-speed) var(--menu-zoom-ease),
              filter var(--menu-zoom-speed) var(--menu-zoom-ease);
  transform-origin: center;
  will-change: transform;
  z-index: 0;                        /* base */
}

/* Barra gialla (se la tua è già attiva, puoi saltare questo blocco) */
.header-nav-main .nav > li > a::before{
  content:"";
  position:absolute; inset: 0;
  border: 15px solid transparent;               /* bordo “cornice” */
  border-color: var(--menu-highlight);
  opacity: 0; transform: scale(.98);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: -1;                                   /* dietro al testo della voce */
  border-radius: .25rem;                         /* opzionale: angolo morbido */
}

/* Hover/focus: lente + barra gialla */
.header-nav-main .nav > li:hover > a,
.header-nav-main .nav > li > a:focus-visible {
  transform: scale(var(--menu-zoom)) translateZ(0);
  z-index: 3;                                   /* sopra le voci adiacenti */
  filter: none;
}
.header-nav-main .nav > li:hover > a::before,
.header-nav-main .nav > li > a:focus-visible::before{
  opacity: 1; transform: scale(1);
  box-shadow: var(--menu-shadow);
}

/* Compensazione “salto ottico”: mantenere linea di base */
.header-nav-main .nav > li { line-height: 1; }

/* Evita che l’header cambi altezza: fissa l’altezza minima se necessario */
.header-bottom, .header-main { overflow: visible; }

/* ===== Dropdown più raffinato ===== */
.header-nav-main .nav > li.has-dropdown { position: relative; }
.header-nav-main .nav > li.has-dropdown > .nav-dropdown {
  display: block;                 /* lasciamo “block” ma lo nascondiamo con opacità/visibilità */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transform-origin: top center;
  transition: opacity .18s var(--menu-zoom-ease),
              transform .18s var(--menu-zoom-ease),
              visibility 0s linear .18s;  /* ritarda il toggle visibilità per chiudere fluentemente */
  will-change: transform, opacity;
  box-shadow: var(--menu-shadow);
}

/* Mostra il dropdown su hover/focus del li */
.header-nav-main .nav > li.has-dropdown:hover > .nav-dropdown,
.header-nav-main .nav > li.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s, 0s, 0s;
  z-index: 50;
}

/* Evita che lo zoom della voce tagli il dropdown */
.header-nav-main .nav > li.has-dropdown > a { z-index: 51; }

/* ===== Accessibilità: riduci motion ===== */
@media (prefers-reduced-motion: reduce){
  .header-nav-main .nav > li > a { transition: none !important; }
  .header-nav-main .nav > li.has-dropdown > .nav-dropdown { transition: none !important; }
}

/* ===== Mobile/Touch: disattiva lente (opzionale) ===== */
@media (hover: none), (pointer: coarse){
  .header-nav-main .nav > li > a { transform: none !important; }
  .header-nav-main .nav > li > a::before { display: none; } /* barra gialla solo su tap? up to you */
}
/* === PATCH MINIMALE – Refinements extra === */

/* 1) Garantisci overlap anche a livello di <li> */
.header-nav-main .nav > li { 
  overflow: visible; 
  position: relative;           /* stacking solido */
}

/* 2) Sottovoci: focus tastiera con stesso highlight e hit area più leggibile */
.sub-menu li.menu-item > a:focus-visible {
  outline: none;
}
.sub-menu li.menu-item > a,
.sub-menu li.menu-item:hover > a,
.sub-menu li.current-menu-item > a {
  line-height: 1.25;            /* leggermente più alto per respirare */
}

/* 3) Riduci-motion completo: niente scale nemmeno su hover/focus */
@media (prefers-reduced-motion: reduce){
  .header-nav-main .nav > li:hover > a,
  .header-nav-main .nav > li > a:focus-visible {
    transform: none !important;
  }
}

/* 4) Anti-flicker tra voce e dropdown (piccolo cuscinetto) */
.header-nav-main .nav > li.has-dropdown > .nav-dropdown {
  margin-top: 2px;              /* cuscino invisibile */
}

/* 5) (Opzionale) Sottovoci: barra arancione più “viva” senza cambiare estetica */
.sub-menu li.menu-item > a::before {
  will-change: height;
}