/* ============================================================
   STILE DEL SITO
   I colori principali sono qui sotto: cambiali per dare
   al sito la tua personalità.
   ============================================================ */

:root {
  --colore-principale: #2f6f5e;   /* verde salvia scuro — MODIFICA per cambiare il colore del sito */
  --colore-scuro: #1f2a28;
  --colore-sfondo: #ece1c8;       /* sfondo pagina: marrone chiaro/giallo come i mattoni — MODIFICA qui per schiarire/scurire */
  --colore-chiaro: #f4ecdd;       /* tono più chiaro dello sfondo, per le sezioni alternate */
  --colore-testo: #2b2b2b;
  --colore-tenue: #6b6b6b;
  --brand-marrone: #8a5a48;  /* colore di "Vecchio Calzaturificio" (come il logo) - MODIFICA per ritoccare */
  --brand-azzurro: #6f8dad;  /* colore di "Verducci" (come il logo) - MODIFICA per ritoccare */
  --bianco: #ffffff;
  --ombra: 0 6px 20px rgba(0, 0, 0, 0.08);
  --raggio: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Dimensione base di tutto il sito: tutti i testi in "rem" scalano da qui.
   Aumenta questo valore (es. 19px, 20px) per ingrandire ancora tutto in modo proporzionale;
   il default dei browser è 16px. */
html { font-size: 19px; }

body {
  /* MODIFICA font: per tornare indietro rimetti "Segoe UI", system-ui, -apple-system, Arial, sans-serif
     e togli i link a Google Fonts nelle pagine HTML. */
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  color: var(--colore-testo);
  line-height: 1.6;
  background: var(--colore-sfondo);
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--colore-principale); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------- INTESTAZIONE ---------- */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  z-index: 100;
}
/* La barra occupa tutta la larghezza, così il nome sta a sinistra e il menu a destra */
.site-header .container.header-inner { max-width: 100%; padding: 0 40px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--colore-scuro); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 42px; width: auto; }
.brand-name { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.5px; }
.brand-vecchio { color: var(--brand-marrone); }
.brand-verducci { color: var(--brand-azzurro); }

.main-nav { display: flex; gap: 28px; }
.main-nav a { color: var(--colore-scuro); font-weight: 500; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--colore-scuro);
}

/* ---------- SEZIONE INIZIALE (HERO) ---------- */
.hero {
  position: relative;
  /* Riempie tutto lo schermo tranne la barra in alto (alta 70px),
     così la sezione successiva compare solo scorrendo. MODIFICA 70px
     se cambi l'altezza della barra, o usa un valore fisso tipo 88vh. */
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  /* MODIFICA lo sfondo: cambia il nome file qui sotto per usare un'altra foto. */
  background: url("immagini/chiochiera/copertina.jpg") center/cover no-repeat,
              linear-gradient(135deg, #3a7a68, #1f2a28);
  color: var(--bianco);
  text-align: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,42,40,0.45), rgba(31,42,40,0.65));
}
.hero-content { position: relative; z-index: 1; }
.hero h1 { font-size: 3.2rem; margin-bottom: 16px; color: var(--colore-sfondo); text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.hero-tagline {
  font-size: 1.25rem;
  max-width: 640px;
  margin: 0 auto 28px;
  color: var(--colore-sfondo);           /* beige/marroncino come lo sfondo della pagina */
  font-weight: 700;                      /* grassetto, per maggiore visibilità */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* ---------- PULSANTI ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--colore-principale); color: var(--bianco); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ombra); text-decoration: none; }

/* ---------- SEZIONE ILLUSTRAZIONE / LOGO ---------- */
.intro-logo {
  padding: 64px 0 8px;
  text-align: center;
}
.intro-logo img {
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  /* Trucco: "multiply" fa sparire il bianco del disegno, che si fonde con lo sfondo */
  mix-blend-mode: multiply;
}
.intro-logo p {
  max-width: 620px;
  margin: 20px auto 0;
  color: var(--colore-scuro);
  font-size: 1.1rem;
}

/* ---------- SEZIONI GENERICHE ---------- */
.section { padding: 72px 0; }
.section-alt { background: var(--colore-chiaro); }
.section-title {
  font-size: 2rem;
  color: var(--colore-scuro);
  text-align: center;
  margin-bottom: 12px;
}
.section-intro {
  text-align: center;
  color: var(--colore-tenue);
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: 1.1rem;   /* stessa dimensione del testo di benvenuto (.intro-logo p) */
}

/* ---------- CAMERE ---------- */
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
/* Card "immersiva" (Opzione B): foto a tutto riquadro con il testo sovrapposto in basso.
   MODIFICA height per card più alte/basse; MODIFICA il gradiente per l'ombra sul testo. */
.room-card-link {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 440px;
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra);
  text-decoration: none;
  transition: transform 0.18s ease;
}
.room-card-link:hover { transform: translateY(-4px); text-decoration: none; }
.room-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 32px 28px 26px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.85));
}
.room-body h3 { color: #fff; margin-bottom: 8px; font-size: 1.5rem; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.room-body p { color: #f2f2f2; }
.room-link-cta { display: inline-block; margin-top: 12px; color: #fff; font-weight: 700; }

/* ---------- PAGINA CAMERA (dettaglio) ---------- */
.torna-home { display: inline-block; margin-bottom: 8px; font-weight: 600; }
.room-hero-title { text-align: center; margin-bottom: 6px; color: var(--colore-scuro); font-size: 2.2rem; }
.room-hero-sub { text-align: center; color: var(--colore-tenue); margin-bottom: 36px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}
.gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--raggio);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gallery img:hover { transform: scale(1.02); box-shadow: var(--ombra); }
/* La prima foto occupa due colonne per dare respiro */
.gallery img:first-child { grid-column: span 2; height: 340px; }

/* Le due parti sono impilate, ognuna a tutta larghezza */
.room-descrizione { margin-bottom: 44px; }
.room-descrizione h2,
.room-servizi h2 { color: var(--colore-scuro); margin-bottom: 14px; font-size: 1.4rem; }
.room-descrizione p { margin-bottom: 14px; text-align: justify; }

/* Servizi disposti su più colonne per occupare tutta la larghezza */
.servizi-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 36px;
}
.servizi-list li { padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.servizi-list li::before { content: "✓ "; color: var(--colore-principale); font-weight: 700; }
.room-cta { margin-top: 28px; }

/* Riquadro "La storia del nome" */
.storia {
  margin-top: 56px;
  background: var(--colore-chiaro);
  border-left: 5px solid var(--colore-principale);
  border-radius: var(--raggio);
  padding: 32px 34px;
}
.storia-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--colore-principale);
  margin-bottom: 6px;
}
.storia h2 { color: var(--colore-scuro); font-size: 1.5rem; margin-bottom: 16px; }
.storia p { margin-bottom: 14px; max-width: 760px; }
.storia .storia-fonte { font-size: 0.85rem; color: var(--colore-tenue); margin-bottom: 0; }

/* Finestra ingrandimento foto (lightbox) */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92%; max-height: 88%; border-radius: 8px; }
.lightbox-close {
  position: absolute; top: 18px; right: 26px;
  color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1;
}

/* ---------- EXPERIENCE (dintorni) ---------- */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px;
}
.exp-card {
  background: var(--bianco);
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra);
  transition: transform 0.18s ease;
}
.exp-card:hover { transform: translateY(-4px); }
/* Card che è anche un link (apre un sito esterno) */
.exp-card-link { display: block; text-decoration: none; color: inherit; }
.exp-card-link:hover { text-decoration: none; color: inherit; }
.exp-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.exp-body { padding: 20px 22px 24px; }
.exp-body h3 { color: var(--colore-scuro); margin-bottom: 8px; font-size: 1.3rem; }
.exp-body p { color: var(--colore-tenue); line-height: 1.5; }

/* ---------- DOVE SIAMO ---------- */
.dove-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.dove-list { list-style: none; margin-top: 16px; }
.dove-list li { padding: 8px 0; display: flex; gap: 13px; align-items: flex-start; }
.dove-list li svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--colore-principale); margin-top: 2px; }
.dove-map iframe { border-radius: var(--raggio); box-shadow: var(--ombra); }

/* ---------- CONTATTI ---------- */
.contatti-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 36px;
}
.contatti-info p { font-size: 1.1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.contatti-info p svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--colore-principale); }
.contatti-form { display: flex; flex-direction: column; gap: 14px; }
.contatti-form label { display: flex; flex-direction: column; font-weight: 600; gap: 6px; font-size: 0.95rem; }
.contatti-form input,
.contatti-form textarea {
  padding: 11px 14px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.contatti-form input:focus,
.contatti-form textarea:focus {
  outline: none;
  border-color: var(--colore-principale);
}
.form-row { display: flex; gap: 14px; }
.form-row label { flex: 1; }
.form-note { font-size: 0.85rem; color: var(--colore-tenue); font-weight: 400; }

/* ---------- PIÈ DI PAGINA ---------- */
.site-footer {
  background: var(--colore-scuro);
  color: #d7d7d7;
  text-align: center;
  padding: 30px 0;
}
.footer-small { font-size: 0.85rem; color: #9a9a9a; margin-top: 6px; }

/* ---------- PULSANTE WHATSAPP FISSO ---------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #fff;
  padding: 13px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.32);
  text-decoration: none;
  color: #fff;
}
.whatsapp-float svg { width: 26px; height: 26px; flex-shrink: 0; }
@media (max-width: 420px) {
  .whatsapp-float { right: 14px; bottom: 14px; padding: 13px; }
  .whatsapp-float .wa-text { display: none; }  /* su schermi piccolissimi resta solo l'icona tonda */
}

/* ============================================================
   ADATTAMENTO AI TELEFONI (schermi piccoli)
   ============================================================ */
@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bianco);
    flex-direction: column;
    gap: 0;
    box-shadow: var(--ombra);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 16px 20px; border-top: 1px solid #eee; }

  .hero h1 { font-size: 2.2rem; }
  .dove-grid,
  .contatti-grid,
  .room-detail-grid { grid-template-columns: 1fr; }
  .gallery img:first-child { grid-column: span 1; height: 220px; }
}