/* =====================================================================
   Stabia Boat Rental — stili condivisi (home + landing per località)
   Estratti da index.html il 2026-06-17 per tenere le pagine DRY.
   ===================================================================== */
:root{--navy:#0A2540;--primary:#0E7C86;--primary-dark:#0A5F67;--accent:#F7D354;--accent-soft:#FFE58F;--bg:#F4F8FB;--muted:#5A7184;--footer:#071A2B;}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--navy); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
input, select, textarea, button { font-family: inherit; }
::selection { background: var(--accent); color: var(--navy); }
@keyframes pop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* tour chips (step 1) */
.chip { background:var(--bg); color:#27425a; border:1px solid rgba(10,37,64,.14); font-weight:700; font-size:.88rem; padding:.5rem .85rem; border-radius:999px; cursor:pointer; transition:background .15s ease,color .15s ease,box-shadow .15s ease; }
.chip.active { background:var(--primary); color:#fff; border:1px solid var(--primary); box-shadow:0 6px 14px rgba(14,124,134,.3); }

/* form steps */
.step { display:none; }
.step.active { display:block; }

/* faq */
.faq-a { display:none; padding:0 1.25rem 1.15rem; color:var(--muted); line-height:1.6; }
.faq-item.open .faq-a { display:block; }

/* intl-tel-input: il wrapper deve occupare tutta la riga del form */
.iti { width: 100%; display: block; }

/* Telefono: CTA chiamata solo su mobile (da desktop non ha senso) — richiesta utente 2026-07-03 */
@media (min-width: 901px) {
  header .js-tel, a.js-tel[aria-label="Call"] { display: none !important; }
}

/* =====================================================================
   GALLERY + LIGHTBOX (2026-08-17) — un solo sistema per tutte le pagine.
   Prima ogni pagina si portava dietro il proprio markup/CSS/JS inline:
   la landing senza patente aveva `width:auto` + `loading="lazy"` su un
   flex item → larghezza 0 → il lazy non scattava MAI → foto invisibili.
   Qui le misure sono esplicite, così il bug non può ripetersi.
   Il lightbox lo costruisce site.js: basta la classe .js-gimg su una <img>.
   ===================================================================== */
.js-gimg { cursor: zoom-in; }

/* Scroller orizzontale (gallery di una barca). Mobile: una foto per schermata. */
.gal { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:.7rem; scrollbar-width:thin; }
.gal img { flex:0 0 auto; width:min(78vw, 380px); height:clamp(210px, 52vw, 300px); object-fit:cover; border-radius:14px; scroll-snap-align:start; }
@media (min-width: 780px) { .gal img { width:340px; height:280px; } }

/* Mosaico di anteprime dentro una card barca. Sotto i 700px le tre foto
   diventano una fascia leggibile invece di 3 francobolli da 112x120. */
.boat-thumbs { display:grid; grid-template-columns:2fr 1fr; grid-auto-rows:130px; gap:5px; }
.boat-thumbs img { width:100%; height:100%; object-fit:cover; }
.boat-thumbs img.is-lead { grid-row:1 / 3; }
@media (max-width: 700px) {
  /* Fix 2026-08-24: la lead aveva height:200px dentro una riga da 110px →
     sbordava e si sovrapponeva alle altre foto. Ora la riga 1 È alta 200px. */
  .boat-thumbs { grid-template-columns:1fr 1fr; grid-template-rows:200px; grid-auto-rows:110px; }
  .boat-thumbs img.is-lead { grid-column:1 / -1; grid-row:1; height:100%; }
}

/* Lightbox (markup generato da site.js). Bottoni 44px = area tocco minima. */
.glb { position:fixed; inset:0; z-index:120; background:rgba(7,26,43,.95); display:none; align-items:center; justify-content:center; }
.glb.open { display:flex; }
.glb-img { max-width:94vw; max-height:82vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5); object-fit:contain; }
.glb-btn { position:absolute; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:1.5rem; line-height:1; display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.glb-btn:hover { background:rgba(255,255,255,.26); }
.glb-close { top:max(12px, env(safe-area-inset-top)); right:12px; }
.glb-prev { left:10px; top:50%; margin-top:-23px; }
.glb-next { right:10px; top:50%; margin-top:-23px; }
.glb-count { position:absolute; bottom:max(16px, env(safe-area-inset-bottom)); left:0; right:0; text-align:center; color:#cfe0ee; font-size:.85rem; font-weight:700; letter-spacing:.04em; }
.glb-one .glb-prev, .glb-one .glb-next, .glb-one .glb-count { display:none; }
@media (max-width: 700px) { .glb-img { max-width:96vw; max-height:76vh; } }

/* =====================================================================
   MENU HEADER (2026-08-24) — desktop: link inline · mobile: hamburger
   con pannello a tendina agganciato sotto l'header sticky.
   ===================================================================== */
.site-nav { display:flex; align-items:center; }
.nav-links { display:flex; align-items:center; gap:clamp(.7rem,1.6vw,1.35rem); list-style:none; margin:0; padding:0; }
.nav-links a { font-weight:700; font-size:.92rem; color:var(--navy); white-space:nowrap; transition:color .15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--primary); }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid rgba(10,37,64,.14); border-radius:10px; background:#fff; cursor:pointer; place-items:center; padding:0; color:var(--navy); }
@media (max-width: 1000px) {
  .nav-toggle { display:grid; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; gap:0; padding:.35rem 0 .6rem; border-bottom:1px solid rgba(10,37,64,.1); box-shadow:0 22px 34px rgba(10,37,64,.14); }
  .site-nav.open .nav-links { display:flex; }
  .nav-links a { display:block; padding:.8rem clamp(1rem,4vw,2.2rem); font-size:1rem; }
}

/* Bolla "Chiama" mobile (iniettata da site.js accanto a WhatsApp) */
.js-callfab { width:54px; height:54px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px rgba(14,124,134,.45); }
@media (min-width: 901px) { .js-callfab { display:none !important; } }

/* ---- Banner consenso cookie ---- */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(10,37,64,.25);}
.consent-bar p{margin:0;font-size:.88rem;line-height:1.45;max-width:640px;}
.consent-bar a{color:var(--accent);text-decoration:underline;}
.consent-actions{display:flex;gap:.6rem;}
.consent-btn{font:inherit;font-weight:700;font-size:.88rem;padding:.55rem 1.2rem;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;cursor:pointer;}
.consent-btn--ok{background:var(--accent);border-color:var(--accent);color:var(--navy);}
@media (max-width:640px){.consent-bar{flex-direction:column;align-items:stretch;text-align:center;}
  .consent-actions{justify-content:center;}}
.form-privacy{font-size:.78rem;color:#7f9db8;margin:.5rem 0 0;text-align:center;}
.form-privacy a{text-decoration:underline;color:inherit;}

/* ---- Logo header responsive (2026-08-26): stesso lockup della home su TUTTE le pagine.
   Prima le landing fissavano height:38px inline -> header più basso e logo piccolo. ---- */
.brand-logo{width:auto;display:block;}
.brand-logo-h{height:clamp(46px,6vw,60px);}   /* lockup orizzontale — desktop/tablet */
.brand-logo-v{display:none;}                  /* lockup stacked (icona sopra) — solo mobile */
@media (max-width:640px){
  .brand-logo-h{display:none;}
  .brand-logo-v{display:block;height:58px;}
  .header-rating{display:none !important;}    /* header meno affollato su mobile (batte lo style inline) */
}
.brand-logo-footer{height:clamp(50px,6vw,60px);width:auto;display:block;margin-bottom:.9rem;}

/* ---- Carousel recensioni (2026-08-26): card scorrevoli con snap, frecce solo desktop ---- */
.rev-carousel{position:relative;}
.rev-track{display:flex;gap:clamp(1rem,2vw,1.5rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.25rem .25rem 1.1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.rev-track::-webkit-scrollbar{display:none;}
.rev-card{flex:0 0 clamp(270px,26vw,330px);scroll-snap-align:start;background:#fff;border:1px solid rgba(10,37,64,.08);border-radius:16px;padding:1.4rem;margin:0;box-shadow:0 10px 28px rgba(10,37,64,.06);display:flex;flex-direction:column;gap:.7rem;}
.rev-stars{display:flex;align-items:center;gap:.5rem;color:var(--accent);letter-spacing:1px;font-size:1.02rem;}
.rev-text{margin:0;font-size:.97rem;line-height:1.55;color:#27425a;}
.rev-text.is-clamped{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.rev-more{background:none;border:0;padding:0;margin:0;color:var(--muted);font-weight:700;font-size:.88rem;cursor:pointer;text-align:left;font-family:inherit;}
.rev-more:hover{color:var(--primary);}
.rev-who{margin-top:auto;font-size:.88rem;color:var(--muted);line-height:1.4;}
.rev-nav{position:absolute;top:calc(50% - 21px);width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid rgba(10,37,64,.14);box-shadow:0 8px 22px rgba(10,37,64,.16);display:grid;place-items:center;cursor:pointer;z-index:2;color:var(--navy);padding:0;}
.rev-nav:disabled{opacity:0;pointer-events:none;}
.rev-prev{left:-10px;}
.rev-next{right:-10px;}
@media (max-width:640px){.rev-nav{display:none;}} /* su mobile si scorre col dito */
.rev-links{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:.6rem;}
.rev-link-all{color:var(--primary);font-weight:700;font-size:.95rem;text-decoration:underline;}
.rev-link-write{display:inline-flex;align-items:center;gap:.45rem;border:1.5px solid var(--primary);color:var(--primary);font-weight:700;font-size:.95rem;padding:.55rem 1.1rem;border-radius:999px;}
.rev-link-write:hover{background:#F0F6FC;}