/* ==========================================================================
   BONSAI COCKTAIL BAR — stylesheet
   Dark botanical speakeasy · mobile-first (390px default)
   Palette derivata dal logo: petrolio, teal, oro, crema.
   ========================================================================== */

:root{
  /* Colori (hex) */
  --ink:      #051B1B;   /* fondo pagina, quasi-nero petrolio */
  --petrol:   #0C302F;   /* superfici / card */
  --petrol-2: #0F3E3C;   /* superfici in rilievo */
  --teal:     #2A9D9F;   /* accento brand (da logo #258185) */
  --gold:     #C9A86A;   /* accento: prezzi, filetti, firma */
  --gold-2:   #E4C98A;   /* oro chiaro per hover */
  --cream:    #F5ECD6;   /* testo primario */
  --sage:     #A9C1BB;   /* testo secondario (non grigio) */
  --line:     rgba(201,168,106,.22); /* filetto oro */
  --line-2:   rgba(245,236,214,.10);
  --danger:   #E8A29A;

  /* Tipi */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spaziatura (rem) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;

  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.7);
  --sticky-h: 68px; /* barra CTA mobile */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom));
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.05; margin:0}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s5)}
.eyebrow{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.section{padding-block:var(--s8)}
.section-head{max-width:44ch; margin-bottom:var(--s6)}
.section-head h2{font-size:clamp(2rem,7vw,3rem); margin-top:var(--s2)}
.section-head p{color:var(--sage); margin-top:var(--s3)}

/* botanical hairline divider */
.leaf-rule{display:flex; align-items:center; gap:var(--s3); color:var(--gold); margin:var(--s2) 0}
.leaf-rule::before,.leaf-rule::after{content:""; height:1px; background:var(--line); flex:1}
.leaf-rule svg{width:20px; height:20px; opacity:.9}

/* ---------- HEADER / NAV ------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s5); transition:background .3s, box-shadow .3s;
}
.site-header.scrolled{
  background:rgba(5,27,27,.82); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line-2);
}
.brand{display:flex; align-items:center; gap:var(--s3)}
.brand-mark{width:38px; height:38px; border-radius:50%; flex:0 0 auto}
.brand-wordmark{height:20px; width:auto; display:block}
.nav-links{display:none}
.nav-links a{font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-ig{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--cream);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem; font-size:.8rem;
}
.nav-ig:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- HERO -------------------------------------------------------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:var(--s8); overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero__bg::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,27,27,.55) 0%, rgba(5,27,27,.25) 35%, rgba(5,27,27,.85) 82%, var(--ink) 100%),
    radial-gradient(120% 80% at 50% 20%, transparent 40%, rgba(5,27,27,.5) 100%);
}
.hero__inner{position:relative; z-index:1; width:100%}
.hero h1{margin:0}
.hero-logo img{width:min(78vw,420px); height:auto; display:block; filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.hero .kind{color:var(--sage); font-size:.95rem; letter-spacing:.08em; margin-top:var(--s4)}
.hero .hook{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,5.5vw,2rem);
  color:var(--cream); margin-top:var(--s2)}
.hero .claim{color:var(--sage); margin-top:var(--s3); max-width:34ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
.status-pill{display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--s5);
  font-size:.85rem; letter-spacing:.04em; color:var(--cream);
  background:rgba(12,48,47,.6); border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem}
.dot{width:9px; height:9px; border-radius:50%; background:var(--sage); box-shadow:0 0 0 0 rgba(0,0,0,0)}
.dot.open{background:#5FD08A; box-shadow:0 0 12px 1px rgba(95,208,138,.6)}
.dot.closed{background:var(--danger)}

/* ---------- BUTTONS ----------------------------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.03em;
  padding:.85rem 1.4rem; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s, background .2s, color .2s, border-color .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold); color:#20160a}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{background:transparent; color:var(--cream); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn--wa{background:#1FA855; color:#fff}
.btn--wa:hover{background:#25c063}
.btn--block{width:100%}

/* ---------- SIGNATURE — galleria a scorrimento automatico --------------- */
/* Full-bleed: esce dal .wrap per occupare tutta la larghezza schermo */
.marquee{margin-top:var(--s6); width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  user-select:none}
.marquee__track{display:flex; gap:var(--s4); width:max-content;
  animation:sig-scroll 60s linear infinite; will-change:transform;
  pointer-events:none}          /* non si può fermare né cliccare */
.marquee__item{flex:0 0 auto; margin:0;
  width:clamp(220px, 62vw, 300px); aspect-ratio:3/4;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--petrol)}
.marquee__item img{width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block}
@keyframes sig-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- MENU -------------------------------------------------------- */
#menu{background:linear-gradient(180deg, var(--ink), #041615)}
.tabs{position:sticky; top:0; z-index:40; background:rgba(5,27,27,.9);
  backdrop-filter:blur(10px); margin:0 calc(-1*var(--s5)); padding:var(--s3) var(--s5);
  border-block:1px solid var(--line-2)}
.tabs__scroll{display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.tabs__scroll::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto; font-size:.82rem; letter-spacing:.06em; padding:.5rem .9rem;
  border-radius:999px; color:var(--sage); border:1px solid var(--line);
  background:transparent; cursor:pointer; transition:all .2s; font-family:var(--sans)}
.tab[aria-selected="true"]{background:var(--gold); color:#20160a; border-color:var(--gold); font-weight:600}
.menu-panel{padding-top:var(--s6)}
.menu-panel[hidden]{display:none}
.menu-panel__note{color:var(--sage); font-family:var(--serif); font-style:italic;
  font-size:1.15rem; max-width:52ch; margin-bottom:var(--s5)}
.menu-group + .menu-group{margin-top:var(--s6)}
.menu-group__title{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--s3)}
.menu-list{display:grid; gap:var(--s1)}
.menu-item{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:var(--s3);
  padding:var(--s3) 0; border-bottom:1px dashed var(--line-2)}
.menu-item__name{font-family:var(--serif); font-size:1.28rem; color:var(--cream)}
.menu-item__desc{color:var(--sage); font-size:.9rem; margin-top:2px}
.menu-item__price{font-family:var(--serif); font-size:1.28rem; color:var(--gold); white-space:nowrap}
.menu-item__price::before{content:"€ "}
.menu-item__price.noeuro::before{content:""}
.tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem}
.tag{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(42,157,159,.4); border-radius:999px; padding:.15rem .5rem}
.tag.hot{color:#F0B49A; border-color:rgba(240,180,154,.4)}
.tag.star{color:var(--gold); border-color:var(--line)}

/* ---------- ABOUT ------------------------------------------------------- */
.about{display:grid; gap:var(--s6)}
.about__img{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.about__img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.about__text h2{font-size:clamp(2rem,7vw,3rem)}
.about__text p{color:var(--sage); margin-top:var(--s4)}
.about__text p .accent{color:var(--cream)}
.universe{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
.universe a{font-size:.85rem; border:1px solid var(--line); border-radius:999px;
  padding:.45rem .9rem; color:var(--sage)}
.universe a:hover{border-color:var(--teal); color:var(--teal)}

/* ---------- PRENOTA ----------------------------------------------------- */
#prenota{background:linear-gradient(180deg,#041615,var(--ink))}
.book{max-width:520px; margin-inline:auto; background:var(--petrol);
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--s6) var(--s5)}
.field{margin-bottom:var(--s4)}
.field label{display:block; font-size:.8rem; letter-spacing:.06em; color:var(--cream); margin-bottom:.35rem}
.field input,.field select{width:100%; font-family:var(--sans); font-size:1rem; color:var(--cream);
  background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem}
.field input:focus,.field select:focus{border-color:var(--gold); outline:none}
.field .err{display:none; color:var(--danger); font-size:.8rem; margin-top:.35rem}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field.invalid .err{display:block}
.field select{appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--gold) 50%),
  linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat}
.book__confirm{display:none; margin-top:var(--s4); padding:var(--s4);
  border:1px solid var(--teal); border-radius:10px; background:rgba(42,157,159,.08); color:var(--cream)}
.book__confirm.show{display:block}
.book__confirm b{color:var(--teal)}

/* ---------- CONTATTI ---------------------------------------------------- */
.contact{display:grid; gap:var(--s6)}
.contact__info dl{display:grid; grid-template-columns:auto 1fr; gap:.4rem var(--s4); margin:0}
.contact__info dt{color:var(--gold); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; align-self:center}
.contact__info dd{margin:0; color:var(--cream)}
.contact__actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
.map{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:320px}
.map iframe{width:100%; height:100%; min-height:320px; border:0; filter:grayscale(.2) contrast(1.05)}

/* ---------- FOOTER ------------------------------------------------------ */
.site-footer{border-top:1px solid var(--line-2); padding-block:var(--s7) var(--s6); text-align:center}
.site-footer .brand{justify-content:center; margin-bottom:var(--s4)}
.site-footer .socials{display:flex; justify-content:center; gap:var(--s4); margin-bottom:var(--s4)}
.site-footer .socials a{color:var(--sage)} .site-footer .socials a:hover{color:var(--gold)}
.site-footer small{color:var(--sage); font-size:.78rem; line-height:1.8}

/* ---------- STICKY MOBILE CTA ------------------------------------------ */
.sticky-cta{position:fixed; inset:auto 0 0 0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s2);
  padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  background:rgba(5,27,27,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.sticky-cta .btn{padding:.8rem 1rem}

/* ---------- ANIMATION --------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- DESKTOP ADAPTATION ----------------------------------------- */
@media(min-width:760px){
  body{padding-bottom:0}
  .sticky-cta{display:none}
  .nav-links{display:flex; gap:var(--s5); align-items:center}
  .hero__cta .btn{padding:.9rem 1.6rem}
  .marquee__item{width:clamp(280px, 26vw, 360px)}
  .menu-list{grid-template-columns:1fr 1fr; gap:0 var(--s7)}
  .about{grid-template-columns:1fr 1fr; align-items:center}
  .contact{grid-template-columns:1fr 1fr; align-items:stretch}
  .contact__info{display:flex; flex-direction:column; justify-content:center}
  .section{padding-block:var(--s9)}
}
@media(min-width:1040px){
  .hero-logo img{width:min(46vw,560px)}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none; transition:none}
  /* la galleria continua comunque a scorrere in modo ben visibile (richiesta esplicita) */
  .marquee__track{animation:sig-scroll 55s linear infinite !important}
}

/* ---------- MENU come link esterno (pulsante) ---------------------------- */
.menu-cta__btn{display:flex; justify-content:center; margin-top:var(--s6)}
.menu-cta__btn .btn{font-size:1rem; padding:1.05rem 3.2rem; letter-spacing:.14em; text-transform:uppercase}

/* ---------- FESTE & COMPLEANNI ------------------------------------------ */
#feste{background:linear-gradient(180deg, var(--ink), #041615)}
.feste-card{position:relative; max-width:760px; margin-inline:auto; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, var(--petrol-2), var(--petrol));
  border:1px solid var(--gold); border-radius:var(--radius);
  padding:var(--s7) var(--s5); box-shadow:var(--shadow)}
.feste-card .eyebrow{display:block}
.feste-card h2{font-size:clamp(2rem,7vw,3rem); margin-top:var(--s2)}
.feste-card__text > p{color:var(--sage); margin-top:var(--s4); max-width:52ch; margin-inline:auto}
.feste-card__text > p strong{color:var(--gold2); font-weight:600}
.feste-feat{display:inline-flex; flex-direction:column; gap:var(--s2); margin:var(--s5) auto 0; text-align:left}
.feste-feat li{position:relative; padding-left:1.6rem; color:var(--cream); font-size:.95rem}
.feste-feat li::before{content:"✦"; position:absolute; left:0; color:var(--gold)}
.feste-cta{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin-top:var(--s6)}
.feste-note{color:var(--sage); font-size:.85rem; font-style:italic; margin-top:var(--s5)!important}

/* ---------- PADEL CLUB -------------------------------------------------- */
#padel{background:linear-gradient(180deg, #041615, var(--ink))}
.padel-poster{margin:var(--s6) auto 0; max-width:440px}
.padel-poster img{width:100%; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
.padel-cta{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin-top:var(--s5)}