/* =============================================================
   SITE NAV — header unificato per le pagine informative
   Usato da: index, offerta, recensioni, guide (+ articoli),
   clienti (+ casi studio), legale.
   Accoppiato a /js/site-nav.js. Prefisso .site- per evitare
   collisioni con gli stili di pagina.
   ============================================================= */

:root{
  --snav-fh: var(--fh, 'DM Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  --snav-ink: var(--g900, #0F172A);
  --snav-muted: var(--g500, #64748B);
  --snav-line: var(--g100, #F1F5F9);
  --snav-teal: var(--teal, #0EA5A0);
  --snav-teal-dark: var(--teal-dark, #0A7E7A);
  --snav-grad: var(--grad-primary, linear-gradient(135deg,#0EA5A0 0%,#0891B2 100%));
  --snav-radius: var(--r-full, 9999px);
  --snav-ease: var(--ease, cubic-bezier(.16,1,.3,1));
  --snav-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04));
  --snav-shadow-pop: 0 18px 44px -12px rgba(15,23,42,.22), 0 4px 12px rgba(15,23,42,.08);
  --snav-shadow-cta: var(--shadow-teal, 0 8px 32px rgba(14,165,160,.30));
  --snav-h: 64px;
}

/* compensa l'header sticky quando si salta agli anchor (#prezzi, #camere…) */
html{ scroll-padding-top: calc(var(--snav-h) + 1.25rem); }

/* ---------- barra ---------- */
.site-hdr{
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .24s var(--snav-ease), box-shadow .24s var(--snav-ease);
}
.site-hdr.is-scrolled{
  border-bottom-color: var(--snav-line);
  box-shadow: var(--snav-shadow-sm);
}
.site-hdr *,
.site-drawer *{ box-sizing: border-box; }

/* ---------- difesa dagli stili di pagina ----------
   Alcune pagine informative definiscono regole globali sui link
   (es. `a{border-bottom:…}` o `a:hover{text-decoration:underline}`)
   che si riversavano sui link dell'header. Qui l'header neutralizza
   underline e bordi su tutti i suoi link, in ogni stato. */
.site-hdr a,
.site-drawer a,
.site-nav__top{
  text-decoration: none;
  border: 0;
}
.site-hdr a:hover,
.site-hdr a:focus,
.site-hdr a:focus-visible,
.site-hdr a:active,
.site-drawer a:hover,
.site-drawer a:focus,
.site-drawer a:focus-visible,
.site-drawer a:active,
.site-nav__top:hover,
.site-nav__top:focus,
.site-nav__top:focus-visible,
.site-nav__top:active{
  text-decoration: none;
  border-color: transparent;
}

.site-hdr__in{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  height: var(--snav-h);
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 1.9rem);
}

.site-hdr__logo{
  flex-shrink: 0;
  font-family: var(--snav-fh);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--snav-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-hdr__logo span{ color: var(--snav-teal); }

/* ---------- nav desktop ---------- */
.site-nav{
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-right: auto;
}
.site-nav__item{ position: relative; }

.site-nav__top{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--snav-fh);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1;
  color: var(--g700, #334155);
  background: none;
  border: 0;
  padding: .55rem .7rem;
  border-radius: .6rem;
  cursor: pointer;
  text-decoration: none;
  transition: color .18s, background-color .18s;
}
.site-nav__top:hover,
.site-nav__item:hover .site-nav__top,
.site-nav__item:focus-within .site-nav__top,
.site-nav__top[aria-expanded="true"]{
  color: var(--snav-teal-dark);
  background: rgba(14,165,160,.08);
}
.site-nav__top.is-active{
  color: var(--snav-teal-dark);
}
.site-nav__top.is-active::after{
  content: "";
  position: absolute;
  left: .7rem; right: .7rem;
  bottom: -.55rem;
  height: 2px;
  border-radius: 2px;
  background: var(--snav-teal);
}
.site-nav__chev{
  width: 12px; height: 12px;
  transition: transform .2s var(--snav-ease);
}
.site-nav__item:hover .site-nav__chev,
.site-nav__item:focus-within .site-nav__chev,
.site-nav__top[aria-expanded="true"] .site-nav__chev{ transform: rotate(180deg); }

/* ---------- panel dropdown ---------- */
.site-nav__panel{
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--snav-line);
  border-radius: 14px;
  box-shadow: var(--snav-shadow-pop);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s var(--snav-ease), transform .16s var(--snav-ease), visibility .16s;
}
.site-nav__item:hover .site-nav__panel,
.site-nav__item:focus-within .site-nav__panel,
.site-nav__panel.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__item:last-child .site-nav__panel{ left: auto; right: 0; }
/* ponte invisibile per non perdere l'hover nel gap */
.site-nav__panel::before{
  content: "";
  position: absolute;
  top: -.5rem; left: 0; right: 0;
  height: .5rem;
}
.site-nav__panel a{
  font-family: var(--snav-fh);
  font-size: .9rem;
  font-weight: 600;
  color: var(--g700, #334155);
  text-decoration: none;
  padding: .6rem .75rem;
  border-radius: 9px;
  transition: color .15s, background-color .15s;
}
.site-nav__panel a:first-child{
  color: var(--snav-ink);
}
.site-nav__panel a:hover,
.site-nav__panel a:focus-visible{
  color: var(--snav-teal-dark);
  background: var(--g50, #F8FAFC);
  outline: none;
}
/* voce CTA nel pannello "Il sistema" — Attiva ora */
.site-nav__panel a.site-nav__cta{
  margin-top: .3rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
  background: var(--snav-grad);
  box-shadow: var(--snav-shadow-cta);
}
.site-nav__panel a.site-nav__cta:first-child{ color: #fff; }
.site-nav__panel a.site-nav__cta:hover,
.site-nav__panel a.site-nav__cta:focus-visible{
  color: #fff;
  background: var(--snav-grad);
  filter: brightness(1.06);
}

/* ---------- utility a destra ---------- */
.site-hdr__util{
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
}
.site-hdr__mini{
  font-family: var(--snav-fh);
  font-size: .86rem;
  font-weight: 600;
  color: var(--snav-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s;
}
.site-hdr__mini:hover{ color: var(--snav-teal-dark); }
.site-hdr__mini.is-active{ color: var(--snav-teal-dark); }

.site-hdr__cta{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--snav-fh);
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--snav-grad);
  padding: .6rem 1.25rem;
  border-radius: var(--snav-radius);
  box-shadow: var(--snav-shadow-cta);
  transition: transform .22s var(--snav-ease), box-shadow .22s var(--snav-ease);
}
.site-hdr__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(14,165,160,.42);
}
.site-hdr__cta svg{ width: 14px; height: 14px; }

/* ---------- burger ---------- */
.site-hdr__burger{
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--snav-ink);
  padding: .35rem;
  cursor: pointer;
}
.site-hdr__burger svg{ width: 24px; height: 24px; display: block; }

/* ---------- breakpoints ---------- */
@media (max-width: 1040px){
  .site-hdr__mini{ display: none; }
}
@media (max-width: 900px){
  .site-nav{ display: none; }
  .site-hdr__util{ display: none; }
  .site-hdr__burger{ display: block; }
}

/* ---------- drawer mobile ---------- */
.site-drawer{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.1rem clamp(1rem, 5vw, 1.5rem) 1.4rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s var(--snav-ease), visibility .3s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-drawer.is-open{
  transform: translateX(0);
  visibility: visible;
}
.site-drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--snav-line);
}
.site-drawer__logo{
  font-family: var(--snav-fh);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--snav-ink);
}
.site-drawer__logo span{ color: var(--snav-teal); }
.site-drawer__close{
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--snav-line);
  border: 0;
  border-radius: 50%;
  color: var(--g700, #334155);
  cursor: pointer;
}
.site-drawer__close svg{ width: 16px; height: 16px; }

.site-drawer__body{
  display: flex;
  flex-direction: column;
  padding-block: .9rem;
}
.site-drawer__group{
  font-family: var(--snav-fh);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--snav-muted);
  margin: 1.4rem 0 .3rem;
}
.site-drawer__group:first-child{ margin-top: .6rem; }
.site-drawer__link,
.site-drawer__sub{
  font-family: var(--snav-fh);
  text-decoration: none;
  color: var(--snav-ink);
  padding: .6rem 0;
}
.site-drawer__link{
  font-size: 1.06rem;
  font-weight: 700;
}
.site-drawer__sub{
  font-size: .95rem;
  font-weight: 500;
  color: var(--g600, #475569);
  padding-left: .9rem;
}
.site-drawer__link.is-active,
.site-drawer__sub.is-active{ color: var(--snav-teal-dark); }
.site-drawer__link:active,
.site-drawer__sub:active{ color: var(--snav-teal-dark); }

.site-drawer__foot{
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--snav-line);
}
.site-drawer__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--snav-fh);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--snav-grad);
  padding: 1rem;
  border-radius: var(--snav-radius);
  box-shadow: var(--snav-shadow-cta);
}
.site-drawer__cta svg{ width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce){
  .site-hdr, .site-hdr *, .site-drawer, .site-drawer *{
    transition-duration: .01ms !important;
  }
}

@media print{
  .site-hdr, .site-drawer{ display: none !important; }
}

/* =============================================================
   WHATSAPP FAB — contatto rapido, pagine informative
   Iniettato da /js/site-nav.js: vive solo dove è caricato
   questo bundle (index, offerta, recensioni, guide, clienti,
   legale) — mai nell'app gestionale né nel sito pubblico.
   Coerente con l'header: stesse ombre, easing, tipografia.
   ============================================================= */
.wa-fab{
  position: fixed;
  right: clamp(1rem, 3.5vw, 2rem);
  bottom: clamp(1rem, 3.5vw, 2rem);
  z-index: 180;                 /* sotto il drawer mobile (300) */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  text-decoration: none;
  box-shadow:
    0 10px 30px -8px rgba(15,23,42,.28),
    0 3px 10px rgba(15,23,42,.10),
    0 6px 18px rgba(37,211,102,.32);   /* alone verde discreto del brand */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity .38s var(--snav-ease),
    visibility .38s var(--snav-ease),
    transform .24s var(--snav-ease),
    box-shadow .24s var(--snav-ease);
}
.wa-fab.is-ready{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* micro-bounce d'entrata: sull'icona, così il contenitore resta
   libero per transform di hover/click */
.wa-fab.is-ready .wa-fab__icon{
  animation: wa-fab-in .55s var(--snav-ease) both;
}
@keyframes wa-fab-in{
  0%   { transform: scale(.8); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.wa-fab__icon{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* etichetta: pill in posizione assoluta a sinistra, non altera
   il layout del pulsante */
.wa-fab__label{
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  font-family: var(--snav-fh);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  color: var(--snav-ink);
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--snav-line);
  box-shadow: var(--snav-shadow-pop);
  padding: .6rem .85rem;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  transition: opacity .2s var(--snav-ease), transform .2s var(--snav-ease);
}

/* hover / focus da tastiera: solleva il pulsante, rivela l'etichetta */
.wa-fab:hover,
.wa-fab:focus-visible{
  transform: translateY(-3px);
  box-shadow:
    0 18px 42px -8px rgba(15,23,42,.34),
    0 5px 14px rgba(15,23,42,.12),
    0 8px 22px rgba(37,211,102,.42);
  outline: none;
}
.wa-fab:focus-visible{
  box-shadow:
    0 18px 42px -8px rgba(15,23,42,.34),
    0 0 0 3px rgba(37,211,102,.45);
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* click */
.wa-fab:active{
  transform: translateY(-1px) scale(.93);
  transition-duration: .08s;
}

/* mobile: sola icona, un filo più compatta, nessuna etichetta */
@media (max-width: 560px){
  .wa-fab{ width: 50px; height: 50px; }
  .wa-fab__label{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .wa-fab, .wa-fab *{
    transition-duration: .01ms !important;
    animation: none !important;
  }
}

@media print{
  .wa-fab{ display: none !important; }
}

/* =============================================================
   COOKIE CONSENT — banner + preferenze
   Iniettato da /js/site-nav.js, stesso principio del WA FAB:
   vive solo dove è caricato questo bundle (pagine informative).
   Consent-before-load: GA4 parte solo dopo "Accetta".
   ============================================================= */
.cc-banner{
  position: fixed;
  left: clamp(.75rem, 3vw, 1.25rem);
  bottom: clamp(.75rem, 3vw, 1.25rem);
  z-index: 400;
  width: min(328px, calc(100vw - 1.5rem));
  background: #fff;
  border: 1px solid var(--snav-line);
  border-radius: 16px;
  box-shadow: var(--snav-shadow-pop);
  padding: .95rem 1rem .9rem;
  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  transition: transform .28s var(--snav-ease), opacity .28s var(--snav-ease), visibility .28s;
}
.cc-banner.is-open{ transform: translateY(0); opacity: 1; visibility: visible; }
.cc-banner__close{
  position: absolute;
  top: .55rem; right: .55rem;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--g400, #94A3B8); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.cc-banner__close:hover{ color: var(--g700, #334155); background: var(--g50, #F8FAFC); }
.cc-banner__close svg{ width: 13px; height: 13px; }
.cc-banner__in{ padding-right: 1.1rem; }
.cc-banner__text{ font-size: .8rem; line-height: 1.5; color: var(--g600, #475569); margin-bottom: .75rem; }
.cc-banner__text b{ font-family: var(--snav-fh); color: var(--snav-ink); }
.cc-banner__text a{ color: var(--snav-teal-dark); text-decoration: underline; }
.cc-banner__actions{ display: flex; gap: .5rem; }
.cc-btn{
  flex: 1; text-align: center;
  font-family: var(--snav-fh); font-weight: 700; font-size: .8rem;
  padding: .5rem .9rem; border-radius: var(--snav-radius); cursor: pointer;
  transition: transform .2s var(--snav-ease), box-shadow .2s var(--snav-ease), border-color .2s, color .2s;
  border: 1.5px solid var(--snav-line); background: #fff; color: var(--g700, #334155);
}
.cc-btn:hover{ border-color: var(--snav-teal); color: var(--snav-teal-dark); }
.cc-btn--accept{ background: var(--snav-grad); color: #fff; border: none; box-shadow: var(--snav-shadow-cta); }
.cc-btn--accept:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(14,165,160,.4); }

/* riapre le preferenze dopo che l'utente ha già scelto */
.cc-reopen{
  position: fixed;
  left: clamp(.75rem, 3vw, 1.25rem);
  bottom: clamp(.75rem, 3vw, 1.25rem);
  z-index: 180;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--snav-line); box-shadow: var(--snav-shadow-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--g500, #64748B);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--snav-ease), visibility .3s, transform .2s var(--snav-ease), color .2s, border-color .2s;
}
.cc-reopen.is-ready{ opacity: 1; visibility: visible; transform: translateY(0); }
.cc-reopen:hover{ color: var(--snav-teal-dark); border-color: var(--snav-teal); }
.cc-reopen svg{ width: 17px; height: 17px; }

@media (max-width: 640px){
  .cc-banner__in{ flex-direction: column; align-items: stretch; }
  .cc-banner__actions{ justify-content: stretch; }
  .cc-btn{ flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce){ .cc-banner, .cc-reopen{ transition-duration: .01ms !important; } }
@media print{ .cc-banner, .cc-reopen{ display: none !important; } }