/* =========================================================
   Corte dei Limoni — Acireale
   Palette: pietra lavica, calce, limone, agrume
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&family=Poppins:wght@500;600&display=swap');

:root{
  --stone:#FAF6DC;        /* crema limone, più solare della calce grigia */
  --stone-deep:#F3EBB8;
  --ink:#2B2A16;           /* verde-lavica scurissimo, per leggibilità sul giallo */
  --ink-soft:#54522E;
  --lemon:#C4D22C;         /* verde limone acido — colore dominante */
  --lemon-deep:#9BAB1E;
  --rust:#E08A1E;          /* giallo-arancio agrume, accento/CTA */
  --rust-deep:#B96A0F;
  --line:#E4DA8E;
  --white:#FFFDF2;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Work Sans', -apple-system, sans-serif;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0 0 .4em;line-height:1.15;color:var(--ink);}
h1{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:500;letter-spacing:-.01em;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  color:var(--lemon-deep);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.btn{
  display:inline-block;
  padding:14px 30px;
  background:var(--lemon);
  color:var(--ink);
  text-decoration:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.02em;
  border-radius:2px;
  border:1px solid var(--lemon);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--lemon-deep);border-color:var(--lemon-deep);color:var(--white);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--lemon);}
.btn.light{background:var(--stone);color:var(--ink);border-color:var(--stone);}
.btn.accent{background:var(--rust);color:var(--white);border-color:var(--rust);}
.btn.accent:hover{background:var(--rust-deep);border-color:var(--rust-deep);}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,220,.94);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--lemon);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;max-width:1360px;margin:0 auto;
  gap:24px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);line-height:1;
}
.logo img{height:40px;width:auto;display:block;flex-shrink:0;}
.logo .logo-text{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.logo .logo-text strong{font-family:var(--serif);font-size:1.28rem;font-weight:600;white-space:nowrap;}
.logo .logo-text span{font-family:'Poppins',var(--sans);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;font-weight:600;white-space:nowrap;}
.logo .logo-text .wordmark{height:26px;width:auto;display:block;margin-bottom:2px;}

/* flex-shrink:0 + white-space:nowrap sulle voci di menu e sul pulsante:
   senza queste due righe, quando lo spazio scarseggia il browser non riduce
   lo spazio tra le parole ma spezza le voci di più parole ("Our Story",
   "Around Us", "Book now") su due righe, illeggibile. Meglio che l'intero
   blocco vada a capo sul burger (vedi soglia 1360px sotto) piuttosto che
   una singola voce si spezzi internamente. */
.navlinks{display:flex;gap:24px;align-items:center;list-style:none;margin:0;padding:0;}
.navlinks li{flex-shrink:0;}
.navlinks a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--ink-soft);white-space:nowrap;}
.navlinks a:hover,.navlinks a.active{color:var(--lemon-deep);}
.navlang{display:flex;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.05em;}
.navlang a{opacity:.5;text-decoration:none;}
.navlang a.active{opacity:1;color:var(--rust);}
.navcta{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.navcta .btn{white-space:nowrap;flex-shrink:0;}
.burger{display:none;background:none;border:none;cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  padding:90px 0 70px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;
}
.hero p.lead{font-size:1.15rem;color:var(--ink-soft);max-width:46ch;}
.hero-photo{
  border-radius:2px;overflow:hidden;
  background:linear-gradient(160deg,var(--lemon) 0%,var(--lemon-deep) 55%,var(--ink) 140%);
  position:relative;
  height:0;padding-top:125%;                     /* fallback 4:5 */
}
.hero-photo img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
.hero-photo.wide{padding-top:75%;}
@supports (aspect-ratio: 4 / 5){
  .hero-photo{height:auto;padding-top:0;aspect-ratio:4/5;}
  .hero-photo.wide{padding-top:0;aspect-ratio:4/3;}
}
.badgebar{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap;}
.badgebar div{font-size:.78rem;color:var(--ink-soft);border-left:2px solid var(--lemon-deep);padding-left:10px;}
.badgebar strong{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--ink);}

/* ---------- Trust line: rassicurazione prenotazione diretta, sotto le CTA ----------
   Aggiunta il 26/08/2026 (ottimizzazione CRO/prenotazioni dirette). */
.trust-line{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin-top:16px;font-size:.82rem;color:var(--ink-soft);
}
.trust-line span{display:inline-flex;align-items:center;gap:6px;}
.trust-line span::before{content:"✓";color:var(--lemon-deep);font-weight:700;}

/* ---------- Barra di prenotazione fissa su mobile ----------
   Aggiunta il 26/08/2026: prima il pulsante "Prenota" dell'header spariva
   del tutto su mobile (sotto i 1360px, vedi commento più sotto), lasciando
   la prenotazione senza una CTA sempre visibile durante lo scroll — un
   problema per la conversione. Nascosta su desktop, attiva solo sotto i
   1360px (stesso breakpoint del burger). Non inserita in prenota.html
   (l'utente è già lì) né in 404.html. */
.mobile-book-bar{display:none;}

/* ---------- Sections ---------- */
section{padding:70px 0;}
section.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:640px;margin-bottom:44px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.card{
  background:var(--white);border:1px solid var(--line);padding:26px;
}
.photo-block{
  background:linear-gradient(150deg,var(--stone-deep),var(--lemon) 120%);
  position:relative;overflow:hidden;
  height:0;padding-top:75%;                      /* fallback 4:3 */
}
.photo-block img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
@supports (aspect-ratio: 4 / 3){
  .photo-block{height:auto;padding-top:0;aspect-ratio:4/3;}
}
/* il segnaposto compare solo dove non c'è ancora una foto */
.photo-block[data-caption]:not(:has(img))::after{
  content:attr(data-caption);
  position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  color:rgba(38,34,27,.55);font-size:.7rem;letter-spacing:.04em;
}

/* ---------- Room cards ---------- */
.room{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--line);margin-bottom:26px;background:var(--white);
  scroll-margin-top:110px;
}
.room-index{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.room-index a{font-size:.82rem;font-weight:600;color:var(--ink);background:var(--stone);padding:8px 16px;border-radius:20px;text-decoration:none;transition:background .2s,color .2s;}
.room-index a:hover{background:var(--lemon);color:var(--ink);}
.room-media{display:flex;flex-direction:column;}
.room-thumbs{display:flex;gap:1px;background:var(--line);}
.room-thumbs a{flex:1;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;display:block;background:var(--stone-deep);position:relative;}
.room-thumbs a::after{content:attr(data-tag);position:absolute;left:4px;bottom:4px;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(43,42,22,.6);padding:2px 6px;font-weight:600;}
.room-thumbs img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.room-thumbs a:hover img{transform:scale(1.08);}
.room-media.empty .room-photo{
  display:flex;align-items:center;justify-content:center;
}
.room-media.empty .room-photo::after{
  content:"Foto in preparazione";
  color:rgba(38,34,27,.55);font-size:.75rem;letter-spacing:.05em;font-family:var(--sans);
}
.room-photo{position:relative;overflow:hidden;background:var(--stone-deep);height:0;padding-top:75%;}
.room-photo img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
@supports (aspect-ratio: 4 / 3){
  .room-photo{height:auto;padding-top:0;aspect-ratio:4/3;}
}
.room-info{padding:32px;display:flex;flex-direction:column;justify-content:center;}
.room-info .eyebrow{margin-bottom:8px;}
.room-info ul{list-style:none;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:10px 18px;}
.room-info li{font-size:.82rem;color:var(--ink-soft);}
.room-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.room-foot-single{justify-content:flex-end;}
.price{font-family:var(--serif);font-size:1.3rem;}
.price small{font-family:var(--sans);font-size:.7rem;color:var(--ink-soft);}

/* ---------- Quote / review ---------- */
.quote{
  border-left:3px solid var(--lemon-deep);padding-left:24px;font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--ink);margin:0 0 10px;
}
.quote-src{font-size:.78rem;color:var(--ink-soft);letter-spacing:.03em;}

/* ---------- Booking widget box ---------- */
.booking-box{
  border:1px solid var(--ink);padding:34px;background:var(--white);
}
.booking-box .placeholder{
  border:1px dashed var(--rust);padding:26px;font-size:.85rem;color:var(--ink-soft);background:var(--stone);
  line-height:1.7;
}
.why-direct{background:var(--stone);border-left:3px solid var(--lemon-deep);padding:22px 26px;margin-bottom:30px;}
.why-direct h3{margin:0 0 10px;font-size:1.05rem;}
.why-direct p{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.6;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--stone);padding:56px 0 26px;}
footer a{color:var(--stone);text-decoration:none;opacity:.8;}
footer a:hover{opacity:1;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(251,249,243,.15);}
.foot-grid h4{color:var(--stone);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:.86rem;}
.footbottom{display:flex;justify-content:space-between;padding-top:22px;font-size:.72rem;opacity:.6;flex-wrap:wrap;gap:10px;}
.social-links{display:flex;gap:12px;margin-top:16px;}
.social-links a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(251,249,243,.3);
  color:var(--stone);opacity:.85;
  transition:background .2s, border-color .2s, opacity .2s;
}
.social-links a:hover{background:var(--lemon);border-color:var(--lemon);color:var(--ink);opacity:1;}
.social-links svg{width:16px;height:16px;fill:currentColor;}

/* ---------- Cookie banner ---------- */
#cookiebar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--ink);color:var(--stone);
  padding:18px 28px;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border-top:2px solid var(--rust);
}
#cookiebar p{margin:0;font-size:.82rem;max-width:70ch;}
#cookiebar .actions{display:flex;gap:10px;flex-shrink:0;}
#cookiebar a{text-decoration:underline;opacity:.85;}

/* ---------- Legal pages ---------- */
.legal-body{max-width:760px;margin:0 auto;padding:60px 28px 100px;}
.legal-body h2{margin-top:2em;font-size:1.3rem;}
.legal-body h1{font-size:2rem;margin-bottom:.2em;}
.legal-body .updated{font-size:.8rem;color:var(--ink-soft);margin-bottom:2.5em;}
.legal-body p{text-align:justify;}
.legal-body table{width:100%;min-width:520px;border-collapse:collapse;margin:0;font-size:.9rem;}
.legal-body th,.legal-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;}
.legal-body th{background:var(--white);}
/* Le tabelle a 2-3 colonne con testo lungo forzavano l'intera pagina fuori
   dallo schermo su mobile (nessun contenitore con scroll orizzontale
   dedicato) — corretto 24/08/2026: la tabella scorre dentro il proprio
   contenitore invece di allargare la pagina. */
.legal-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0;}
@media (max-width:600px){
  .legal-body{padding:40px 20px 80px;}
  .legal-body h1{font-size:1.5rem;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid,.grid2{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}
  .grid4{grid-template-columns:1fr 1fr;}
  .room{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- Menu header: passa a burger sotto 1360px, non 900 ----------
   Motivo (24/08/2026, corretto due volte): le voci di menu in russo e
   spagnolo sono più lunghe che in italiano/inglese ("Окрестности",
   "Nuestra Historia", ecc.). Misurato con i font reali del sito (Fraunces/
   Work Sans, non i font di sistema): logo + voci di menu + pulsante hanno
   bisogno di almeno ~1290px (spagnolo) / ~1280px (russo) per stare su una
   riga sola — più dei 1180px massimi che l'header aveva prima. Con soglia
   più bassa (900px, poi 1250px) il contenuto non ci stava e il browser
   spezzava le voci di più parole a metà ("Our Story" → "Our" / "Story"),
   sia in russo/spagnolo sia, di misura, anche in inglese. Corretto in due
   modi: (1) l'header ora può allargarsi fino a 1360px (non più 1180px),
   dando lo spazio che serve; (2) sotto i 1360px scatta sempre il burger
   (già collaudato) per tutte le lingue, cosa che impedisce per sempre lo
   spezzamento interno delle voci, comunque bloccato anche via CSS
   (flex-shrink:0 + white-space:nowrap su voci di menu e pulsante). */
@media (max-width:1360px){
  .navlinks{display:none;}
  .burger{display:block;font-size:1.3rem;line-height:1;padding:4px;flex-shrink:0;}

  /* Header mobile: prima "Prenota" nell'header + IT/EN/FR/RU/DE affiancati
     mandavano il pulsante e il burger fuori dallo schermo, con la lingua
     che finiva addosso al logo. Sul mobile il CTA dell'header è ridondante
     (c'è già "Prenota il soggiorno" in home e negli altri punti della pagina),
     quindi si nasconde; il selettore lingua resta ma più compatto. */
  .nav{padding:12px 16px;gap:8px;}
  .logo{gap:8px;flex-shrink:1;min-width:0;}
  .logo img{height:30px;}
  .logo .logo-text strong{font-size:1.02rem;}
  .logo .logo-text span{font-size:.5rem;}
  .logo .logo-text .wordmark{height:20px;}
  .navcta{gap:0;flex-shrink:0;}
  .navcta .btn{display:none;}
  .navlang{gap:5px;font-size:.64rem;flex-shrink:0;}

  /* Barra "Prenota ora" fissa in fondo allo schermo — vedi commento sulla
     regola .mobile-book-bar più sopra. Il padding-bottom sul body lascia
     spazio perché la barra non copra l'ultima parte del footer; il
     .share-fab-wrap (Condividi/WhatsApp) sale sopra la barra per non
     sovrapporsi. */
  .mobile-book-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--stone);border-top:2px solid var(--lemon);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px rgba(43,42,22,.16);
  }
  .mobile-book-bar .btn{width:100%;text-align:center;font-size:1rem;padding:14px;}
  body{padding-bottom:66px;}
  .share-fab-wrap{bottom:84px;}

  /* Menu mobile: il bottone ☰ non aveva alcuna regola che riportasse
     .navlinks visibile al click — risolto il 23/08/2026 insieme a
     assets/menu.js, che aggiunge/rimuove la classe .menu-open su .nav. */
  .nav{position:relative;}
  .nav.menu-open .navlinks{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--stone);
    border-top:1px solid var(--line);
    border-bottom:2px solid var(--lemon);
    padding:18px 20px 22px;
    gap:16px;
    box-shadow:0 10px 24px rgba(43,42,22,.12);
    z-index:60;
  }
  .nav.menu-open .navlinks a{font-size:1.02rem;padding:4px 0;}
}

/* ---------- Pulsante Condividi (assets/share.js) ---------- */
/* pointer-events:none sul contenitore: da chiuso il menu (share-menu) è
   invisibile (opacity:0) ma resta comunque alto nel layout — senza questo,
   quello spazio "fantasma" restava sopra al contenuto sottostante e ne
   bloccava i click. Bug scoperto il 25/08/2026: su mobile i link "Termini
   e condizioni" e "Informativa turistica" nel footer risultavano cliccabili
   solo sulla prima riga di testo, perché la seconda riga cadeva proprio
   sotto quest'area invisibile. Corretto riabilitando pointer-events solo
   sui pulsanti realmente visibili (.share-fab, .wa-chat-fab) e sul menu
   quando è aperto (.share-menu.open, già presente più sotto). */
.share-fab-wrap{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;}
.share-fab{
  width:52px;height:52px;border-radius:50%;
  background:var(--lemon);color:var(--ink);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(43,42,22,.22);
  transition:background .2s, transform .2s;
  pointer-events:auto;
}
.share-fab:hover{background:var(--lemon-deep);}
.share-fab svg{width:22px;height:22px;fill:currentColor;}
.share-menu{
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s, transform .18s;
}
.share-menu.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.share-item{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--line);
  padding:8px 14px 8px 8px;border-radius:30px;
  text-decoration:none;color:var(--ink);font-size:.82rem;font-weight:600;
  box-shadow:0 4px 14px rgba(43,42,22,.14);
  cursor:pointer;
}
.share-item .share-icon{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.share-item svg{width:16px;height:16px;fill:currentColor;}
.share-item.whatsapp .share-icon{background:#25D366;}
.share-item.email .share-icon{background:var(--rust);}
.share-item.copy .share-icon{background:var(--ink);}
.share-toast{
  position:fixed;right:20px;bottom:82px;z-index:90;
  background:var(--ink);color:var(--stone);font-size:.8rem;
  padding:9px 16px;border-radius:4px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.share-toast.show{opacity:1;transform:translateY(0);}

/* ---------- Pulsante "Scrivici su WhatsApp" (assets/share.js), sopra al pulsante Condividi ---------- */
.wa-chat-fab{
  width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(43,42,22,.22);
  transition:background .2s, transform .2s;
  pointer-events:auto;
}
.wa-chat-fab:hover{background:#1EBE59;}
.wa-chat-fab svg{width:26px;height:26px;fill:currentColor;}

@media (max-width:900px){
  .share-fab-wrap{right:14px;bottom:78px;}
  .share-fab{width:48px;height:48px;}
  .wa-chat-fab{width:48px;height:48px;}
}