/* ==========================================================================
   FISHING EXPERIENCE — TESTATA E MEGA MENÙ
   --------------------------------------------------------------------------
   Un menù a tendina largo quanto la pagina, con le voci raggruppate per
   colonna e una tessera in evidenza. Serve perché il sito ha venti pagine su
   sei rami: un menù a lista le nasconderebbe tutte dietro tre livelli.

   Regole che questo menù rispetta e che quelli fatti male no:
   · si apre al passaggio del mouse MA anche al clic e da tastiera
   · non si chiude se il mouse attraversa il vuoto fra voce e pannello
   · su mobile diventa una fisarmonica, non un mega menù rimpicciolito
   · funziona senza JavaScript: :focus-within apre il pannello
   ========================================================================== */

.fe-head{
  position:sticky; top:0; z-index:120;
  background:rgba(20,23,15,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.fe-head__in{
  max-width:1360px; margin:0 auto;
  padding:.85rem clamp(1rem,.6rem + 2vw,2rem);
  display:flex; align-items:center; gap:1.5rem;
}
.fe-head__logo{display:flex;align-items:center;flex:0 0 auto}
/* 38px erano pochi: il marchio spariva accanto alle voci del menu. Sale a
   46 sul desktop e resta a 40 sul telefono, dove accanto c'e' il pulsante
   del menu e oltre quella misura si toccherebbero. */
.fe-head__logo img{display:block;height:clamp(40px,34px + .9vw,46px);width:auto}

/* --- barra delle voci ---------------------------------------------------- */
.fe-nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.fe-nav__voce{position:relative}
.fe-nav__t{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.7rem .85rem; border:0; background:none; cursor:pointer;
  color:rgba(255,255,255,.86); text-decoration:none;
  font-family:var(--fe-fb,inherit); font-size:.82rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:10px; transition:color .2s, background .2s;
}
.fe-nav__t:hover,.fe-nav__t:focus-visible{color:#fff;background:rgba(255,255,255,.07)}
.fe-nav__voce.is-on > .fe-nav__t{color:var(--fe-lime,#C7F564)}
/* La freccia e' un pulsante separato dal collegamento: il testo porta alla
   pagina, la freccia apre l'elenco. Su desktop resta un dettaglio grafico
   attaccato alla voce; su telefono e' l'unico modo per avere tutte e due le
   azioni senza che una mangi l'altra. */
.fe-nav__voce{display:inline-flex; align-items:center}
.fe-nav__piu{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:-.5rem; padding:.7rem .5rem; border:0; background:none;
  color:inherit; cursor:pointer; border-radius:10px;
}
.fe-nav__piu:hover,.fe-nav__piu:focus-visible{background:rgba(255,255,255,.07)}
.fe-nav__piu svg{width:9px;height:9px;opacity:.6;transition:transform .25s}
.fe-nav__voce:hover .fe-nav__piu svg,
.fe-nav__voce:focus-within .fe-nav__piu svg,
.fe-nav__voce[data-aperto] .fe-nav__piu svg{transform:rotate(180deg)}

/* --- il pannello --------------------------------------------------------- */
.fe-mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--fe-ease,ease), transform .22s var(--fe-ease,ease), visibility .22s;
  background:#1B2013; border:1px solid rgba(255,255,255,.12);
  border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,.5);
  padding:1.5rem; display:flex; gap:1.5rem;
}
/* La zona invisibile sopra il pannello copre i 10px di stacco: senza,
   il menù si chiude mentre il mouse ci passa sopra. */
.fe-mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* Chiuse dentro la media query di proposito: `[data-aperto] .fe-mega` ha
   specificità maggiore di `.fe-mega`, e senza questo confine vincerebbe sulle
   regole mobili riportando la traslazione del -50% — il pannello a fisarmonica
   usciva mezzo fuori schermo. */
@media (min-width:1080px){
  .fe-nav__voce:hover .fe-mega,
  .fe-nav__voce:focus-within .fe-mega,
  .fe-nav__voce[data-aperto] .fe-mega{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
}

.fe-mega__col{min-width:236px}
.fe-mega__k{
  display:block; margin:0 0 .7rem; padding-bottom:.55rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--fe-fb,inherit); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fe-green,#75AD00);
}
.fe-mega__l{
  display:block; padding:.55rem .6rem; margin:0 -.6rem;
  border-radius:11px; text-decoration:none; transition:background .18s;
}
.fe-mega__l:hover,.fe-mega__l:focus-visible{background:rgba(117,173,0,.14)}
.fe-mega__l strong{
  display:block; font-family:var(--fe-fb,inherit); font-size:.9rem; font-weight:600;
  color:#fff; letter-spacing:-.01em; line-height:1.3;
}
.fe-mega__l span{
  display:block; margin-top:.12rem; font-size:.76rem; line-height:1.45;
  color:rgba(255,255,255,.58);
}
.fe-mega__l.is-on strong{color:var(--fe-lime,#C7F564)}

/* --- tessera in evidenza ------------------------------------------------- */
.fe-mega__spot{
  width:250px; flex:0 0 auto; position:relative; overflow:hidden;
  border-radius:15px; text-decoration:none; display:block; min-height:210px;
  border:1px solid rgba(255,255,255,.12);
}
.fe-mega__spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--fe-ease,ease)}
.fe-mega__spot:hover img{transform:scale(1.06)}
.fe-mega__spot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,23,15,.1) 30%,rgba(20,23,15,.92) 100%)}
.fe-mega__spot > div{position:absolute;left:0;right:0;bottom:0;padding:1rem;z-index:2}
.fe-mega__spot b{display:block;font-size:.95rem;font-weight:600;color:#fff;line-height:1.25}
.fe-mega__spot em{display:block;margin-top:.2rem;font-style:normal;font-size:.74rem;
  color:var(--fe-lime,#C7F564);letter-spacing:.12em;text-transform:uppercase;font-weight:700}

/* --- il bottone contatti ------------------------------------------------- */
.fe-head__cta{
  margin-left:.6rem; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.66rem 1.15rem; border-radius:50px;
  background:var(--fe-green,#75AD00); color:#14170F; text-decoration:none;
  font-family:var(--fe-fb,inherit); font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.fe-head__cta:hover{background:var(--fe-lime,#C7F564);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(117,173,0,.32)}

/* --- il bottone del menù su mobile --------------------------------------- */
.fe-head__burger{
  display:none; margin-left:auto; width:44px; height:44px; padding:0;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  background:none; cursor:pointer; position:relative;
}
.fe-head__burger span{position:absolute;left:11px;right:11px;height:2px;background:#fff;
  border-radius:2px;transition:transform .28s var(--fe-ease,ease),opacity .18s}
.fe-head__burger span:nth-child(1){top:14px}
.fe-head__burger span:nth-child(2){top:21px}
.fe-head__burger span:nth-child(3){top:28px}
.fe-head__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.fe-head__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fe-head__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   MOBILE — la fisarmonica
   Sotto i 1080px il mega menù non si rimpicciolisce: cambia forma. Un
   pannello a tre colonne su 375px di schermo è illeggibile comunque lo si
   comprima.
   ========================================================================== */
@media (max-width:1079px){
  /* Niente backdrop-filter qui sotto. Un filtro sull'antenato crea un blocco
     contenitore per i discendenti `position:fixed`: il pannello del menù si
     ancorava all'intestazione invece che alla finestra, e restava alto trenta
     pixel. Su mobile l'intestazione è comunque opaca, quindi non si perde nulla. */
  .fe-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:#14170F}
  .fe-head__burger{display:block}
  .fe-nav{
    position:fixed; left:0; right:0; bottom:0; margin:0; z-index:119;
    top:var(--fe-head-h,64px);
    flex-direction:column; align-items:stretch; gap:0;
    background:#14170F; overflow-y:auto;
    padding:1rem clamp(1rem,.6rem + 2vw,2rem) 3rem;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .25s, transform .25s, visibility .25s;
  }
  .fe-nav[data-aperto]{opacity:1;visibility:visible;transform:none}
  .fe-nav__voce{border-bottom:1px solid rgba(255,255,255,.09);
    display:flex; flex-wrap:wrap; align-items:center}
  .fe-nav__t{flex:1;padding:1.05rem .2rem;font-size:.92rem;letter-spacing:.04em}
  /* Area di tocco piena: la freccia deve essere presa al primo colpo, non
     centrata al millimetro. */
  .fe-nav__piu{margin-left:0;padding:1.05rem .9rem;align-self:stretch}
  .fe-nav__piu svg{width:13px;height:13px;opacity:.75}
  .fe-nav__voce .fe-mega{flex-basis:100%}
  .fe-nav__voce .fe-mega,
  .fe-nav__voce[data-aperto] .fe-mega{
    position:static; left:auto; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:none; border:0; box-shadow:none; border-radius:0;
    padding:0 0 1rem; flex-direction:column; gap:1.1rem;
    display:none;
  }
  .fe-nav__voce[data-aperto] .fe-mega{display:flex}
  .fe-mega__col{min-width:0}
  .fe-mega__spot{width:100%;min-height:150px}
  .fe-head__cta{margin:1.4rem 0 0;justify-content:center;padding:.95rem 1.2rem}
}

/* Il menù aperto blocca lo scorrimento sotto */
body.fe-nav-aperto{overflow:hidden}

/* ==========================================================================
   PIÈ DI PAGINA
   ========================================================================== */
.fe-foot{
  background:#0F120C; color:rgba(255,255,255,.7);
  padding:clamp(3rem,2.2rem + 3vw,4.5rem) clamp(1rem,.6rem + 2vw,2rem) 2.5rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.fe-foot__in{max-width:1360px;margin:0 auto;display:grid;gap:2.5rem;
  grid-template-columns:minmax(240px,1.2fr) repeat(3,minmax(150px,1fr))}
.fe-foot__marchio img{height:44px;width:auto;margin-bottom:1.1rem}
.fe-foot__marchio p{margin:0 0 .5rem;font-size:.86rem;line-height:1.7}
.fe-foot__tondo{width:88px;height:88px;margin-top:1.4rem;opacity:.9}
.fe-foot h3{margin:0 0 .9rem;font-family:var(--fe-fb,inherit);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fe-green,#75AD00)}
.fe-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.52rem}
.fe-foot a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.86rem;transition:color .2s}
.fe-foot a:hover{color:var(--fe-lime,#C7F564)}
.fe-foot__basso{max-width:1360px;margin:2.8rem auto 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  justify-content:space-between;font-size:.76rem;color:rgba(255,255,255,.45)}
@media (max-width:860px){
  .fe-foot__in{grid-template-columns:1fr 1fr}
  .fe-foot__marchio{grid-column:1 / -1}
}