/* =========================
   Reset e variabili
   ========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root{
  --green: #77B93A;
  --orange: #FF7D09;
  --bg: #fdfbf7;
  --ink-900: #2E2E2E;
  --ink-700: #706969;
  --ink-600: #686565;
  --ink-500: #555;

  --ff-sans: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-serif: 'Lora', Georgia, 'Times New Roman', serif;

  --content-max: 1100px;
  --radius: 12px;
  --side-gap: 10px;
}

/* =========================
   Base tipografia
   ========================= */
body {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;          /* base confortevole */
  line-height: 1.65;
  color: var(--ink-600);
  background-color: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 71px;        /* spazio per header fisso */
}

/* Headings */
h1, h2, h3, h4 {
  font-family: 'Lora', Georgia, serif;
  color: var(--ink-700);
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 2.2vw + 1rem, 2.6rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.4rem, 1.6vw + .9rem, 1.9rem); margin: 1.5em 0 .6em; }
h3 { font-size: clamp(1.1rem, .9vw + .9rem, 1.3rem); margin: 1.2em 0 .4em; }
p  { margin: 0 0 1rem; font-size: 1.06rem; }

/* Lead (intro) */
.lead {
  font-size: 1.2rem;        /* ≈19px */
  line-height: 1.8;
  color: #444;
}

/* =========================
   Container
   ========================= */
.container-std {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   Skip link
   ========================= */
.skip-link {
  position: absolute;
  top: -40px; left: 10px;
  background: var(--orange);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: top .3s;
  z-index: 1001;
}
.skip-link:focus { top: 10px; }

/* =========================
   Header + nav
   ========================= */
/* ====== Header baseline (già presente ma ribadisco i punti chiave) ====== */
.site-header{
  background-color: var(--green);
  position: fixed; top: 0; left: 0; right: 0;
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.logo-main{ height: 62px; width:auto; display:block; }

/* ====== NAV desktop ====== */
.site-nav ul{
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0; padding: 0;
}
.site-nav a{
  color: #fff; font-weight: 500; font-size: 1.05rem; text-decoration: none;
}
.site-nav a.active, .site-nav a:hover{
  border-bottom: 2px solid var(--orange); text-decoration: none;
}

/* ====== Toggle hamburger (mobile) ====== */
.menu-toggle{ display: none; } /* l’input rimane nascosto */
.menu-toggle-btn{
  display: none;              /* visibile solo su mobile */
  width: 44px; height: 44px;
  margin-left: auto;
  align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
}
.menu-toggle-btn .burger{
  position: relative; width: 24px; height: 2px; background: #fff; display: block;
}
.menu-toggle-btn .burger::before,
.menu-toggle-btn .burger::after{
  content:""; position: absolute; left:0; right:0; height:2px; background:#fff;
}
.menu-toggle-btn .burger::before{ top:-7px; }
.menu-toggle-btn .burger::after{  top: 7px; }

/* Stato “aperto” (animazione semplice della X) */
.menu-toggle:checked + .menu-toggle-btn .burger{ background: transparent; }
.menu-toggle:checked + .menu-toggle-btn .burger::before{ transform: rotate(45deg); top:0; }
.menu-toggle:checked + .menu-toggle-btn .burger::after{  transform: rotate(-45deg); top:0; }

/* Backdrop: nascosto di default */
.menu-backdrop{
  display: none;
}

/* ====== MOBILE layout ====== */
@media (max-width: 768px){
  .site-header{ height: 60px; padding: 0 20px; }

    body {padding-top: 61px;}

  .logo-main{ height: 58px; }

  /* mostra il bottone hamburger */
  .menu-toggle-btn{ display: inline-flex; }

  /* il menu mobile parte nascosto */
  .site-nav ul{
    position: absolute;
    top: 60px;                /* esce subito sotto l’header mobile */
    right: 12px;
    width: min(86vw, 280px);
    display: none;
    flex-direction: column;
    gap: 8px;
    background: var(--green);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 14px 30px rgba(0,0,0,.15);
    z-index: 1001;
  }

  /* quando il checkbox è spuntato, mostra il menu */
  .menu-toggle:checked ~ .site-nav ul{ display: flex; }

  .menu-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;             /* sotto al pannello menu (1001) ma sopra l’header (1000) */
    display: none;
  }
  .menu-toggle:checked ~ .menu-backdrop{ display: block; }

    /* Impedisci click “dietro” al backdrop */
  .menu-toggle:checked ~ .menu-backdrop { pointer-events: auto; }
  .site-header { pointer-events: auto; }

  /* link più grandi e comodi al tocco */
  .site-nav a{
    display: block;
    padding: 10px 12px;
    font-size: 1rem;
  }
  .site-nav a.active, .site-nav a:hover{
    background: rgba(255,255,255,.12);
    border-bottom: none;
    border-radius: 8px;
  }
}

/* opzionale: riduci padding nav su schermi molto larghi */
@media (min-width: 1400px){
  .site-header{ padding: 0 56px; }
}


/* =========================
   Footer
   ========================= */
footer {
  background: #f6f0e3;
  padding: 20px;
  font-size: .95rem;
  color: var(--ink-900);
  margin-top: auto;
}

.footer-row {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 15px;
  text-align: center;
}

footer p { margin: 0; }
footer .social a { margin: 0 8px; }
footer .social img { width: 26px; height: 26px; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px){
  .site-nav ul {
    flex-direction: column;
    position: absolute; top: 70px; right: 20px;
    background: var(--green);
    padding: 12px;
    border-radius: 6px;
    display: none;
  }
  .menu-toggle:checked + .menu-icon + .site-nav ul { display: flex; }
  .footer-row { flex-direction: column; text-align: center; }
}

/* =========================
   Bottoni CTA
   ========================= */
.btn-cta {
  background: #FF7D09;
  color: #fff;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
  text-shadow: none;
}

.btn-cta:hover {
  background: #e96c00;
}

/* Variante outline (secondaria) */
.btn-cta--outline{
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
}
.btn-cta--outline:hover{
  background: var(--orange);
  color: #fff;
}

/* =========================
   WhatsApp floating button
   ========================= */
.whatsapp-float{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px; height: 56px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 900;
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.1); }
.whatsapp-float img{
  width: 28px; height: 28px;
  filter: brightness(0) invert(1); /* bianco */
}

/* Nascondi floating su desktop, mostra solo su mobile */
@media (min-width: 769px){
  .whatsapp-float{ display: none; }
}

.nota-prenotazione {
  font-size: 0.95rem;
  color: #555;
  background: #f9f9f9;
  border-top: 1px solid #f3dcc8;
  border-bottom: 1px solid #f3dcc8;
  border-left: 2px solid #FF7D09;
  border-right: 2px solid #FF7D09;
  padding: 10px 14px;
  margin: 16px 0;
  border-radius: 6px;
  font-style: italic;
  text-align: center;
}

.icona-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%; /* cerchio */
  background-color: #555; /*#556b2f; #b22222;*/
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}