/* ==========
   Design tokens
   ========== */
:root{
  --bg: #fff8ef;
  --paper: #ffffff;
  --ink: #232323;
  --muted: #6b6b6b;
  --accent: #7a9553;   /* oliva/pistacchio */
  --accent-2: #b24a2e; /* terracotta */
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --radius: 14px;
  --space: 18px;
}

/* Reset & base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3{font-family: "Playfair Display", Georgia, "Times New Roman", serif; line-height:1.2; margin:0 0 10px}
h1{font-size: clamp(32px, 5vw, 54px)}
h2{font-size: clamp(26px, 3.3vw, 36px)}
h3{font-size: clamp(20px, 2.2vw, 24px)}
p{margin:0 0 12px}
a{color:var(--accent); text-decoration: none}
a:hover{text-decoration: underline}
img{max-width:100%; display:block}
.container{max-width:1100px; margin-inline:auto; padding: 0 20px}
.section{padding: clamp(40px, 8vw, 90px) 0}
.section.alt{background: var(--paper)}

.badges{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-block; font-size:13px; padding:6px 10px; border-radius:999px; background:#eef3e7; color:#2e4a1a; border:1px solid #dfe7d3}

/* Accessibility */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:10px; top:10px; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:999}

/* Buttons */
.btn{
  display:inline-block;
  background: var(--accent);
  color:#fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight:600;
  box-shadow: var(--shadow);
  border: 2px solid var(--accent);
  transition: transform .06s ease;
}
.btn:hover{text-decoration:none; transform: translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-outline{background:transparent; color:var(--accent); border-color:var(--accent)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border-bottom:1px solid #eee}
.header-inner{display:flex; align-items:center; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink)}
.brand span{font-family: "Playfair Display", Georgia, serif; font-size: 20px}
.site-nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.site-nav a{color:var(--ink); font-weight:600}
.nav-toggle{display:none; border:2px solid #ddd; background:#fff; padding:8px 12px; border-radius:8px}

/* Hero */
.hero {
  background-image: url("../img/hero.jpg"); /* Percorso dell'immagine */
  background-size: cover;        /* Copre tutta l'area */
  background-position: center;   /* Centra l'immagine */
  background-repeat: no-repeat;
  min-height: 600px;             /* Altezza minima della sezione */
  position: relative;
  display: flex;
  align-items: center;           /* Centra verticalmente il contenuto */
  justify-content: center;       /* Centra orizzontalmente */
  text-align: center;
  color: white;                   /* Testo leggibile sullo sfondo */
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);   /* Overlay scuro per leggibilità */
}

.hero-inner {
  position: relative;
  z-index: 1;                     /* Sopra l'overlay */
  padding: 20px;
  max-width: 1200px;              /* Limite del testo */
}

.hero h1, .hero p {
  color: #fff;                     /* Testo bianco sopra l'immagine */
}

/* Galleria immagini */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  display: block;
}

.gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(0.9);
}

/* Cards */
.cards{display:grid; grid-template-columns: repeat(3,1fr); gap:20px}
.card{background:var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding:22px}
.card .bullets{margin:0; padding-left:18px; color:var(--muted)}

/* Split & KPIs */
.split{display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: start}
.feature{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
.kpi{background:var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); padding:16px; text-align:center}
.kpi strong{font-size: 28px; display:block}
.kpi span{color:var(--muted); font-size:14px}

/* Menu grid */
.menu-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:12px}
.menu-item{background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding:18px; position:relative; min-height:120px}
.menu-item .tag{position:absolute; top:12px; right:12px; font-size:12px; background: var(--accent-2); color:#fff; padding:4px 10px; border-radius:999px}
.note{color:var(--muted); margin-top:8px}

/* Embeds */
.embeds{display:grid; grid-template-columns:1fr; gap:12px}
.gal-cta{margin-top:10px}

/* Address & Hours */
.address{font-style:normal; margin: 6px 0 18px}
.hours{margin-top:6px}
.hours-list{list-style:none; padding:0; margin:6px 0; display:grid; grid-template-columns: 1fr; gap:4px}
.hours-list li{display:flex; justify-content: space-between; padding:8px 12px; border-radius: 10px; background: var(--paper); box-shadow: var(--shadow)}
.open-now{font-weight:700; margin-bottom:8px}
.fine-print{color:var(--muted); font-size: 14px}

/* Map */
.map-embed iframe{width:100%; height:380px; border:0; border-radius: var(--radius); box-shadow: var(--shadow)}

/* Footer */
.site-footer{border-top:1px solid #eee; background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0}
.footer-links{display:flex; gap:14px; list-style:none; margin:0; padding:0}

/* Responsive */
@media (max-width: 900px){
  .hero-inner, .split{grid-template-columns:1fr}
  .feature{grid-template-columns: 1fr 1fr}
  .menu-grid{grid-template-columns:1fr 1fr}
  .site-nav{display:none}
  .nav-toggle{display:inline-block}
}
@media (max-width: 600px){
  .menu-grid, .feature{grid-template-columns:1fr}
}

/* Extra mobile optimizations */
@media (max-width: 480px) {
  /* Make hero text smaller */
  .hero h1 {
    font-size: clamp(24px, 7vw, 32px);
  }
  .hero p {
    font-size: 14px;
  }

  /* Single column layout for small screens */
  .gallery-grid,
  .menu-grid,
  .cards {
    grid-template-columns: 1fr !important;
  }

  /* Add breathing room for buttons */
  .cta .btn {
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
  }

  /* Improve navigation spacing */
  .site-nav ul {
    flex-direction: column;
    gap: 12px;
    padding: 10px;
  }
}

/* --- Stile form contatti --- */
#contatti form {
  max-width: 600px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#contatti label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}

#contatti input,
#contatti textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#contatti input:focus,
#contatti textarea:focus {
  border-color: #c8a97e; /* colore in palette con lo sfondo */
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.25);
  outline: none;
}

#contatti textarea {
  resize: vertical;
  min-height: 120px;
}

#contatti button[type="submit"] {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background-color: #c8a97e;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#contatti button[type="submit"]:hover {
  background-color: #b18d64;
}