/* ═══════════════════════════════════════════════════════════
   Volo Sereno - barra di navigazione, condivisa da tutte le pagine.
   Sta in un file solo: se un domani cambia una voce del menu,
   si tocca questo e basta.

   Su schermo largo: marchio a sinistra, voci in fila a destra.
   Su telefono:      marchio a sinistra (sempre visibile, nome compreso),
                     poi Prenota, poi il bottone che apre la tendina.
   ═══════════════════════════════════════════════════════════ */

.topbar{position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(15,23,42,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09)}

.topbar .tbwrap{max-width:1180px;margin:0 auto;
  padding:10px clamp(14px,3vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ── Marchio: logo + nome. Non si nasconde mai, nemmeno sul telefono ── */
.topbar .brand{display:flex;align-items:center;gap:9px;color:#fff;
  text-decoration:none;flex:none;position:static}
.topbar .brand svg{width:26px;height:26px;flex:none}
.topbar .brand b,
.topbar .brand span{font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:1.02rem;letter-spacing:.02em;white-space:nowrap;
  display:inline;color:#fff}

/* ── Blocco di destra: voci + Prenota + bottone tendina ── */
.topbar .tbright{display:flex;align-items:center;gap:clamp(10px,2vw,22px)}

.topbar .tbnav{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.topbar .tbnav a{color:#cfe0ee;text-decoration:none;font-size:.92rem;
  font-weight:600;white-space:nowrap;transition:color .2s ease}
.topbar .tbnav a:hover{color:#fff}
.topbar .tbnav a[aria-current="page"]{color:#fff}

.topbar a.tbcta{background:linear-gradient(180deg,#F59E0B,#D97706);color:#3a2400;
  padding:10px 20px;border-radius:999px;font-weight:700;font-size:.92rem;
  text-decoration:none;white-space:nowrap;flex:none;
  animation:ctaPulse 2.8s cubic-bezier(.65,0,.35,1) infinite}
.topbar a.tbcta:hover{transform:translateY(-1px);color:#3a2400}

@keyframes ctaPulse{
  0%,100%{box-shadow:0 12px 26px rgba(245,158,11,.38), 0 0 0 0 rgba(245,158,11,.5)}
  50%{box-shadow:0 15px 32px rgba(245,158,11,.52), 0 0 0 13px rgba(245,158,11,0)}}

/* ── Bottone che apre la tendina: invisibile su schermo largo ── */
.topbar .tbmenu{display:none;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;color:#fff}
/* il tocco deve finire sempre sul bottone, mai sul disegno dentro */
.topbar .tbmenu svg{width:22px;height:22px;display:block;pointer-events:none}
.topbar .tbmenu .icona-chiudi{display:none}
.topbar.aperto .tbmenu .icona-apri{display:none}
.topbar.aperto .tbmenu .icona-chiudi{display:block}
.topbar .tbmenu:hover{background:rgba(255,255,255,.17)}

/* ═══════════ Telefono e tablet stretto ═══════════ */
@media (max-width:900px){

  /* le voci escono dalla riga e diventano una tendina sotto la barra */
  .topbar .tbnav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#0f172a;
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px rgba(5,12,21,.45);
    padding:6px 0 10px;
    /* chiusa: nascosta e non cliccabile */
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}

  .topbar.aperto .tbnav{opacity:1;visibility:visible;transform:none}

  .topbar .tbnav a{
    padding:15px clamp(16px,5vw,28px);
    font-size:1.02rem;color:#dce9f4;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .topbar .tbnav a:last-child{border-bottom:none}
  .topbar .tbnav a[aria-current="page"]{
    color:#fff;background:rgba(255,255,255,.06);
    box-shadow:inset 3px 0 0 #F59E0B}

  .topbar .tbmenu{display:flex}

  /* Prenota resta sempre in vista, appena più compatto */
  .topbar a.tbcta{padding:9px 16px;font-size:.86rem}
  .topbar .tbright{gap:10px}
}

@media (max-width:380px){
  .topbar .brand b,.topbar .brand span{font-size:.95rem}
  .topbar .brand svg{width:23px;height:23px}
  .topbar a.tbcta{padding:9px 13px;font-size:.82rem}
}

@media (prefers-reduced-motion:reduce){
  .topbar a.tbcta{animation:none;box-shadow:0 12px 26px rgba(245,158,11,.38)}
  .topbar .tbnav{transition:none}
}

/* La barra non deve finire nei PDF stampati dalla pagina agenzie */
@media print{.topbar{display:none}}


/* ═══════════════════════════════════════════════════════════
   Pulsante WhatsApp fisso, su tutte le pagine.
   Il markup lo crea menu.js: cosi' non va aggiunto a mano in
   ogni pagina, e se cambia il numero si tocca un file solo.

   Attenzione ai livelli sulla home: il filmato di apertura sta
   a z-index 300 e il banner dei cookie a 400. Il pulsante sta
   a 380, quindi resta sotto al banner e sopra a tutto il resto.
   ═══════════════════════════════════════════════════════════ */

.wa-flt{position:fixed;right:24px;bottom:24px;z-index:380;
  width:72px;height:72px;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,box-shadow .2s ease}
.wa-flt.wa--on{opacity:1;visibility:visible;transform:none}
.wa-flt:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa-flt svg{width:38px;height:38px;display:block}

/* ── Come si fa notare ──
   Due movimenti tenuti separati di proposito: l'alone lavora sull'ombra
   del cerchio, la scossa sulla rotazione dell'icona dentro. Se muovessi
   il cerchio con "transform" andrei a sbattere contro l'effetto di
   comparsa e contro il sollevamento al passaggio del mouse, che usano
   la stessa proprieta'. */
@keyframes waAlone{
  0%  {box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.6)}
  70% {box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 20px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,0)}
}
/* La scossa non e' continua: sta ferma per quasi tutto il giro e si muove
   solo alla fine. Un tremolio perpetuo dopo un minuto diventa fastidioso. */
@keyframes waScuoti{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-14deg)}
  90%{transform:rotate(11deg)}
  92%{transform:rotate(-9deg)}
  94%{transform:rotate(7deg)}
  96%{transform:rotate(-4deg)}
  98%{transform:rotate(2deg)}
}
.wa-flt.wa--on{animation:waAlone 2.6s ease-out infinite}
.wa-flt.wa--on svg{animation:waScuoti 7s ease-in-out infinite}

/* Col mouse sopra si ferma tutto: a quel punto la persona l'ha gia' notato
   e l'animazione darebbe solo fastidio. */
.wa-flt:hover{animation:none;transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.wa-flt:hover svg{animation:none}

/* Etichetta al passaggio del mouse. Sul telefono non serve: non c'e' il
   mouse e ruberebbe spazio. */
.wa-flt::after{content:attr(data-eti);
  position:absolute;right:84px;white-space:nowrap;
  background:#0f172a;color:#fff;
  font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.86rem;font-weight:600;
  padding:9px 14px;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.wa-flt:hover::after,.wa-flt:focus-visible::after{opacity:1;transform:none}
@media (max-width:900px){.wa-flt::after{display:none}}

/* Su telefono il banner dei cookie occupa tutta la larghezza in basso e
   coprirebbe il pulsante: finche' e' aperto, il pulsante sale. */
@media (max-width:700px){
  .wa-flt.wa--sopra-cookie{bottom:190px}
}

@media (max-width:520px){
  .wa-flt{width:62px;height:62px;right:18px;bottom:18px}
  .wa-flt svg{width:33px;height:33px}
}

/* Chi ha chiesto meno animazioni nelle impostazioni del telefono o del
   computer non deve vedere niente muoversi: il pulsante resta fermo e
   ben visibile lo stesso. */
@media (prefers-reduced-motion:reduce){
  .wa-flt{transition:none}
  .wa-flt.wa--on,.wa-flt.wa--on svg{animation:none}
  .wa-flt:hover{transform:none}
}

/* Nei PDF stampati dalla pagina agenzie non deve comparire */
@media print{.wa-flt{display:none}}