/* ============================================================
   EUFORIA — Header custom (Fase 1)
   File:   assets/css/header.css  ·  handle: euforia-header
   Server: wp-content/themes/hello-elementor-child/assets/css/header.css
   ------------------------------------------------------------
   Dipende dai token :root "Luce di Sicilia" del child (style.css):
   --paper --paper-2 --linen --line --grey --ink --ink-soft --ink-mut
   --fucsia --gold --lemon-l --cream --font-d --font-b --ease
   Convenzioni Fase 0: classi euf-*, stati is-*, unico ID #siteHead.
   Design: mock approvato site-preview/preview-homepage-v2.html.
   v2 (call cliente 19 lug 2026): logo più grande · topbar con
   messaggi a rotazione (markup .euf-topbar-item, giro nel JS) ·
   nel mega-menu il pannello immagine sta a DESTRA delle colonne
   voci e mostra l'immagine della voce su cui si passa.
   ============================================================ */

/* ---------- skip link (accessibilità) ---------- */
.euf-skip{position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:13px;font-weight:700;padding:10px 16px;}
.euf-skip:focus{left:0;}

/* ============================================================
   BARRA FISSA — trasparente sull'hero → solida (scroll o mega aperto)
   Le variabili --h-* descrivono lo stato TRASPARENTE e vengono
   ribaltate dallo stato solido (.is-solid / .is-mega) e, come
   fallback senza JS, dalle pagine senza hero (body senza
   .euf-header-overlay).
   ============================================================ */
.euf-head{
  position:fixed;top:0;left:0;right:0;z-index:300;
  --h-ink:#fff;                              /* voci menu */
  --h-ink-2:rgba(255,255,255,.92);           /* utility (Cerca/Carrello) */
  --h-hover:var(--lemon-l);                  /* hover voci */
  --h-hover-2:#fff;                          /* hover utility */
  --h-shadow:0 1px 12px rgba(10,28,38,.4);   /* leggibilità su foto */
  --h-logo:brightness(0) invert(1);          /* logo bianco */
  --h-line:transparent;                      /* bordo sotto la nav */
  --h-top-bg:transparent;                    /* topbar */
  --h-top-ink:rgba(255,255,255,.92);
  --h-top-b:#fff;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
/* velo scuro sull'hero: rende leggibile il menu bianco sopra la foto.
   ⚠️ z-index:-1 non lo mette "sotto" lo sfondo del genitore: per le regole
   di stacking CSS un figlio con z-index negativo si disegna SOPRA lo sfondo
   del genitore (e sotto il testo). Quindi questo velo, se presente, tinge di
   scuro la fascia dell'header dall'alto — è "l'ombra sopra il menu".
   Perciò: ESISTE SOLO sulla home (unica pagina con header trasparente).
   Default display:none → su ogni altra pagina non viene proprio renderizzato,
   nessuna possibilità che compaia come ombra/grigio sopra la nav. */
.euf-head::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:-1;
  background:linear-gradient(180deg,rgba(8,20,28,.70) 0%,rgba(8,20,28,.46) 55%,rgba(8,20,28,0) 100%);
  pointer-events:none;display:none;}
/* Il velo compare SOLO nello stato trasparente PURO della home (non
   scrollato E mega/ricerca chiusi). Gestito con `display` (scatta netto),
   NON con opacity: con l'opacità in transizione, aprendo un mega
   dall'header trasparente il velo restava visibile a metà fade e tingeva
   di grigio la fascia della nav (mentre il pannello mega sotto era già
   bianco). Con display il velo o c'è o non c'è: niente stato intermedio. */
body.home .euf-head:not(.is-solid):not(.is-mega)::before,
body.euf-header-overlay .euf-head:not(.is-solid):not(.is-mega)::before{display:block;}

/* ---------- fix HFE: un antenato del wrapper header applica un transform
   (comune nei plugin "sticky header" per compositing GPU) che crea un nuovo
   containing block e rompe il position:fixed di #siteHead, facendolo
   scorrere via invece di restare agganciato in alto. Si neutralizza
   qualunque transform/contain sugli antenati di #siteHead, qualunque sia
   la loro classe (:has() copre HFE/Elementor senza dover indovinare gli
   ID generati). ---------- */
body:has(#siteHead) [data-elementor-type="wp-post"]:has(#siteHead),
body:has(#siteHead) .elementor-element:has(#siteHead),
body:has(#siteHead) #tahefobu-header,
body:has(#siteHead) .turbo-header-template{
  transform:none!important;will-change:auto!important;contain:none!important;filter:none!important;
}

/* stato SOLIDO: scroll, mega/ricerca aperti, o pagina senza hero
   (hero = home, classe 'home' di WP, o pagine con classe body
   'euf-header-overlay' aggiunta a mano) */
.euf-head.is-solid,
.euf-head.is-mega,
body:not(.euf-header-overlay):not(.home) .euf-head{
  --h-ink:var(--ink);
  --h-ink-2:var(--ink-soft);
  --h-hover:var(--fucsia);
  --h-hover-2:var(--fucsia);
  --h-shadow:none;
  --h-logo:none;
  --h-line:var(--line);
  --h-top-bg:var(--linen);
  --h-top-ink:var(--ink-soft);
  --h-top-b:var(--fucsia);
  background:var(--paper);
  /* ombra tenue: solo un filo netto + un alone morbido e leggero, così
     non legge come una banda grigia sotto la nav */
  box-shadow:0 1px 0 var(--line),0 10px 20px -18px rgba(43,39,35,.14);
}

/* apertura mega dall'header trasparente: passaggio a solido ISTANTANEO
   (0s), non i 0.35s dello scroll. Così lo sfondo diventa bianco pieno
   subito e non si vede né il fondo semi-trasparente né residui del velo a
   metà transizione. Chiudendo il mega (is-mega rimossa) torna la
   transizione base .35s → ritorno al trasparente morbido. */
.euf-head.is-mega{transition-duration:0s;}

/* col mega aperto l'ombra grande e sfumata dell'header (0 16px 32px -26px)
   si somma a quella del pannello .euf-mega appena sotto: la sfocatura di
   entrambe "risale" sopra il confine e tinge di grigio la fascia bianca
   della nav. Col mega aperto si tiene solo il filo sottile, l'ombra
   morbida resta solo per lo stato solido da scroll (senza mega) */
.euf-head.is-mega{box-shadow:0 1px 0 var(--line);}

/* admin bar di WordPress (solo per chi è loggato — i clienti reali non la vedono) */
body.admin-bar .euf-head{top:32px!important;}
@media(max-width:782px){body.admin-bar .euf-head{top:46px!important;}}
/* nell'editor di Elementor l'header fisso coprirebbe l'area di lavoro */
body.elementor-editor-active .euf-head,
body.elementor-editor-active .euf-head-spacer{display:none;}

/* distanziatore per le pagine senza hero (il JS lo porta all'altezza reale) */
.euf-head-spacer{height:114px;}
body.home .euf-head-spacer,
body.euf-header-overlay .euf-head-spacer{display:none;}

/* ---------- topbar (announcement) — v2: messaggi a rotazione ----------
   I messaggi (.euf-topbar-item) stanno tutti nella stessa cella di una
   griglia 1×1: si sovrappongono e il JS accende uno alla volta la classe
   .is-on (giro ogni 4s, pausa in hover). Niente altezze fisse: la cella
   è alta quanto il messaggio più lungo, zero salti di layout. Se il JS
   non parte resta visibile il primo messaggio (is-on già nell'HTML). */
.euf-topbar{display:grid;text-align:center;background:var(--h-top-bg);color:var(--h-top-ink);
  font-family:var(--font-b);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding:9px 16px;
  transition:background .35s var(--ease),color .35s var(--ease);}
.euf-topbar b{color:var(--h-top-b);font-weight:700;}
.euf-topbar-item{grid-area:1/1;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);}
.euf-topbar-item.is-on{opacity:1;transform:none;pointer-events:auto;}

/* ---------- nav a 3 zone: voci sx · logo centrale · voci+utility dx ---------- */
.euf-nav{display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:80px;background:transparent;
  border-bottom:1px solid var(--h-line);transition:border-color .35s var(--ease);}
.euf-nav-left,.euf-nav-right{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);flex:1;min-width:0;}
.euf-nav-right{justify-content:flex-end;}
/* height + overflow:hidden = paracadute: qualunque sia il file logo
   caricato (dimensioni/proporzioni reali), non può mai sforare l'altezza
   della nav e spaccare il layout dell'header */
.euf-nav-brand{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  padding:0 18px;height:100%;overflow:hidden;}
/* v2: logo ingrandito su richiesta cliente (42px → 56px) */
.euf-nav-logo{height:56px!important;max-height:56px!important;width:auto!important;
  max-width:280px;object-fit:contain;display:block;
  filter:var(--h-logo);transition:filter .35s var(--ease);}

/* voci di primo livello */
.euf-navitem{font-family:var(--font-b);font-size:12px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--h-ink);
  padding:28px 0;position:relative;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;text-shadow:var(--h-shadow);
  transition:color .25s var(--ease),text-shadow .25s var(--ease);}
.euf-navitem:hover{color:var(--h-hover);}
.euf-navitem .euf-car{font-size:8px;transition:transform .25s var(--ease);}
.euf-has-mega:hover .euf-navitem .euf-car,
.euf-has-mega.is-open .euf-navitem .euf-car{transform:rotate(180deg);}

/* utility: Cerca · IT/EN (Fase 2) · Carrello */
.euf-ico{font-family:var(--font-b);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--h-ink-2);
  cursor:pointer;text-shadow:var(--h-shadow);white-space:nowrap;
  background:none;border:none;padding:0;transition:color .25s var(--ease);}
.euf-ico:hover{color:var(--h-hover-2);}

/* hamburger (solo mobile) */
.euf-burger{display:none;background:none;border:none;cursor:pointer;
  color:var(--h-ink);width:34px;height:34px;place-items:center;
  text-shadow:var(--h-shadow);padding:0;}

/* ============================================================
   MEGA MENU — colonne di voci + pannello immagine a DESTRA (v2:
   il cliente vuole l'immagine a destra rispetto al menu).
   Il pannello mostra l'immagine della voce su cui si passa
   (attributi data-img/data-name/data-meta sui link; swap nel JS).
   Nel DOM il pannello resta il PRIMO figlio di .euf-mega-in (così
   il blocco HTML nel widget HFE non cambia): a spostarlo in coda
   ci pensa `order:1` + la colonna immagine messa per ultima nel
   grid-template-columns.
   ============================================================ */
.euf-has-mega{position:static;}
.euf-mega{position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line);
  /* offset alto + blur contenuto: un blur troppo grande rispetto a
     offset/spread fa "risalire" l'ombra sopra il bordo del pannello,
     tingendo di grigio la fascia bianca della nav appena sopra (nessun
     gap fra .euf-nav e .euf-mega: top:100% le fa combaciare) */
  box-shadow:0 30px 24px -10px rgba(43,39,35,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;}
.euf-has-mega:hover .euf-mega,
.euf-has-mega.is-open .euf-mega,
.euf-has-mega:focus-within .euf-mega{opacity:1;visibility:visible;transform:translateY(0);}
/* n° colonne voci per singolo mega: inline style --euf-cols sul .euf-has-mega.
   v2: la colonna larga dell'immagine è l'ULTIMA (pannello a destra) */
.euf-mega-in{max-width:1480px;margin:0 auto;display:grid;
  grid-template-columns:repeat(var(--euf-cols,3),1fr) minmax(300px,1.15fr);
  gap:40px;padding:38px 48px 46px;}

/* colonne di voci */
.euf-mega-group{display:flex;flex-direction:column;}
.euf-mega-eyebrow{font-family:var(--font-b);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mut);
  margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid var(--line);}
.euf-mega-eyebrow.is-second{margin-top:26px;}
.euf-mega-group a{font-family:var(--font-d);font-size:18px;font-weight:400;color:var(--ink);
  padding:5px 0;line-height:1.25;transition:color .18s,padding-left .18s;}
.euf-mega-group a:hover{color:var(--fucsia);padding-left:6px;}
.euf-mega-group a small{font-family:var(--font-b);font-size:10px;font-weight:600;
  letter-spacing:.04em;color:var(--ink-mut);display:block;text-transform:none;margin-top:-1px;}
.euf-mega-group a.is-all{font-family:var(--font-b);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;}
.euf-mega-group a.is-all:hover{color:var(--fucsia);}
.euf-mega-group a.is-feat{color:var(--gold);}
.euf-mega-group a.is-feat:hover{color:var(--fucsia);}
.euf-mega-note{font-family:var(--font-b);font-size:12.5px;line-height:1.6;
  color:var(--ink-soft);margin-top:12px;}
.euf-mega-cta{margin-top:18px;align-self:flex-start;}

/* pannello immagine (v2: a destra, ultima colonna della griglia grazie a
   order:1 — le colonne voci restano a order 0) — due layer per il crossfade */
.euf-mega-panel{display:block;position:relative;overflow:hidden;border-radius:3px;
  align-self:start;order:1;}
.euf-mp-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--grey);position:relative;}
.euf-mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .3s var(--ease);}
.euf-mp-img.is-on{opacity:1;}
.euf-mp-cap{position:absolute;left:0;right:0;bottom:0;padding:16px;
  background:linear-gradient(to top,rgba(30,24,20,.52),transparent);}
.euf-mp-name{display:block;font-family:var(--font-d);font-size:20px;color:#fff;line-height:1.05;}
.euf-mp-meta{display:block;font-family:var(--font-b);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:3px;}

/* ============================================================
   RICERCA — barra a scomparsa sotto l'header
   ============================================================ */
.euf-search{position:absolute;top:100%;left:0;right:0;
  background:var(--paper);border-bottom:1px solid var(--line);
  /* stesso accorgimento di .euf-mega: blur contenuto per non "risalire"
     sopra il bordo e tingere di grigio la nav appena sopra */
  box-shadow:0 30px 24px -10px rgba(43,39,35,.18);
  padding:26px 48px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;}
.euf-search.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.euf-search form{max-width:760px;margin:0 auto;display:flex;align-items:flex-end;gap:18px;}
.euf-search input[type="search"]{flex:1;border:none;border-bottom:1px solid var(--ink);
  background:transparent;font-family:var(--font-d);font-size:26px;font-weight:300;
  color:var(--ink);padding:6px 2px;outline:none;border-radius:0;-webkit-appearance:none;}
.euf-search input[type="search"]::placeholder{color:var(--ink-mut);}
.euf-search-go{background:none;border:none;border-bottom:1px solid var(--ink);cursor:pointer;
  font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);padding:0 2px 6px;
  transition:color .25s var(--ease),border-color .25s var(--ease);}
.euf-search-go:hover{color:var(--fucsia);border-color:var(--fucsia);}

/* ============================================================
   OFF-CANVAS MOBILE
   ============================================================ */
body.euf-lock{overflow:hidden;}
.euf-mnav-backdrop{position:fixed;inset:0;z-index:390;background:rgba(20,30,30,.5);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;}
.euf-mnav-backdrop.is-open{opacity:1;visibility:visible;}
.euf-mnav{position:fixed;top:0;left:0;bottom:0;z-index:400;width:min(86vw,380px);
  background:var(--paper);transform:translateX(-100%);transition:transform .4s var(--ease);
  overflow-y:auto;padding:24px 26px 40px;display:flex;flex-direction:column;}
.euf-mnav.is-open{transform:translateX(0);box-shadow:0 0 60px rgba(20,30,30,.3);}
body.admin-bar .euf-mnav{top:46px;}
.euf-mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;overflow:hidden;}
.euf-mnav-top img{height:44px!important;max-height:44px!important;width:auto!important;max-width:190px;object-fit:contain;display:block;}
.euf-mnav-close{background:none;border:none;cursor:pointer;color:var(--ink);
  width:34px;height:34px;display:grid;place-items:center;padding:0;}
.euf-mnav details{border-top:1px solid var(--line);}
.euf-mnav details:last-of-type{border-bottom:1px solid var(--line);}
.euf-mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:16px 2px;
  font-family:var(--font-d);font-size:24px;font-weight:400;color:var(--ink);}
.euf-mnav summary::-webkit-details-marker{display:none;}
.euf-mnav summary .euf-plus{font-family:var(--font-b);font-size:18px;color:var(--ink-mut);
  transition:transform .25s var(--ease);}
.euf-mnav details[open] summary .euf-plus{transform:rotate(45deg);}
.euf-msub{display:flex;flex-direction:column;gap:2px;padding:0 2px 16px;}
.euf-msub a{font-family:var(--font-b);font-size:14px;font-weight:500;color:var(--ink-soft);
  padding:7px 0;letter-spacing:.02em;}
.euf-msub a:hover{color:var(--fucsia);}
.euf-msub-h{font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mut);margin:12px 0 4px;}
.euf-msub-h:first-child{margin-top:2px;}
/* voce senza sottomenu, nell'off-canvas */
.euf-mnav-link{display:block;font-family:var(--font-d);font-size:24px;color:var(--ink);
  padding:16px 2px;border-top:1px solid var(--line);}
.euf-mnav-foot{margin-top:auto;padding-top:24px;display:flex;gap:18px;flex-wrap:wrap;}
.euf-mnav-foot .euf-ico{color:var(--ink-soft);text-shadow:none;}

/* ============================================================
   RESPONSIVE
   Con 6 voci + logo centrale il menu desktop regge fino a ~1024px:
   sotto si passa a hamburger + off-canvas.
   ============================================================ */
@media(max-width:1280px){
  .euf-nav{padding:0 24px;}
  .euf-navitem{font-size:11px;letter-spacing:.08em;}
}
@media(max-width:1023px){
  .euf-topbar{display:none;}
  .euf-nav-left .euf-navitem,.euf-nav-left .euf-has-mega,
  .euf-nav-right .euf-navitem,.euf-nav-right .euf-has-mega,
  .euf-ico[data-euf-search],.euf-lang{display:none;}
  .euf-burger{display:grid;}
  .euf-nav{padding:0 18px;height:64px;}
  /* v2: anche il logo mobile cresce (44px nella barra da 64px).
     Serve !important per vincere sugli !important della regola base. */
  .euf-nav-logo{height:44px!important;max-height:44px!important;}
  .euf-search{padding:20px 18px;}
  .euf-head-spacer{height:64px;}
}
@media(min-width:1024px){.euf-mnav,.euf-mnav-backdrop{display:none;}}

@media(prefers-reduced-motion:reduce){
  .euf-head,.euf-head *,.euf-mnav,.euf-mnav-backdrop{
    transition:none!important;animation:none!important;}
}