/* ===== PALETTE & VARIABILI =========================== */
:root{
  --deep:#012F36;      /* petrolio */
  --coral:#F26D5B;     /* corallo */
  --sand:#FAF8F5;      /* sfondo */
  --stone:#253031;     /* testo */
  --radius:16px;
  --shadow:0 4px 14px rgba(0,0,0,.08);
  font-size:16px;

}

/* ===== RESET / BASE ================================= */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;width:100%}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:var(--sand);color:var(--stone);line-height:1.7}
img{max-width:100%;display:block}

/* ===== TOPBAR (HEADER) ======================================= */

header.topbar {
  background: var(--sand);
  box-shadow: var(--shadow);
  position: fixed;    /* da sticky → fixed */
  top: 0;
  left: 0;
  width: 100%;        /* occorre definire la larghezza */
  z-index: 1000;
}

/* spostiamo il contenuto in giù di 70px (l’altezza dell’header) */
body {
  padding-top: 70px;  /* o, se preferisci, sul main: main { margin-top:70px; } */
}
header.topbar .top-inner {
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
header.topbar .brand img {
  height: 56px;
}
@media (min-width: 601px) {
  header.topbar .brand img {
    height: 80px;
  }
}
/* — Logo leggermente più a sinistra (solo mobile) — */
@media (max-width: 600px) {
  header.topbar .brand {
    margin-left: -4.5rem;   /* sposta di mezzo rem verso il bordo */
  }
}


/* Titolo “Chalet Viverone”: nascosto su mobile, visibile e centrato su desktop */
.header-title {
  display: none;
}
@media (min-width: 601px) {
  .header-title {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--deep);
    white-space: nowrap;
  }
}

header.topbar .right-box {
  display: flex;
  align-items: center;
  gap: 1rem;
}
header.topbar .rating {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
}
header.topbar .rating i.fa-google {
  color: #34A853;
}
header.topbar .rating i.fa-star {
  color: #FFC107;
}
header.topbar .btn-cta {
  background: var(--deep);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: .25s;
}
header.topbar .btn-cta:hover {
  background: var(--coral);
  color: #000;
}
/* ---------- HAMBURGER / MOBILE NAV ---------- */
.burger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  font-size:1.6rem;
  background:none;border:none;
  color:var(--deep);
  cursor:pointer;
  z-index:1001;            /* sopra il menu */
}
@media (min-width:601px){
  .burger{display:none;}   /* visibile solo su mobile */
}

/* Menu off-canvas */
.mobile-nav{
  position:fixed;
  top:0; right:-100%;      /* fuori dallo schermo */
  width:70%; max-width:320px;
  height:100vh;
  background:#fff;
  box-shadow:-4px 0 14px rgba(0,0,0,.12);
  padding:4rem 1.5rem 2rem;
  transition:right .3s ease;
  z-index:1000;
}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav li{margin:1.3rem 0}
.mobile-nav a{
  font-family:'Inter',sans-serif;
  font-size:1.15rem;
  font-weight:600;
  color:var(--deep);
  text-decoration:none;
}

/* Stato aperto (aggiunto da JS) */
.mobile-nav.nav--open{ right:0; }

/* Cambia icona da ≡ a ✕ quando aperto */
.burger.burger--open i::before{ content:"\f00d"; } /* FontAwesome x-mark */

/* ===== HERO ========================================= */
.hero{position:relative;height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.hero-bg{position:absolute;inset:0;background:url('images/locale.jpg') center/cover no-repeat;filter:brightness(.55)}
.overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.75))}
.hero-content{position:relative;z-index:1;padding:0 1rem;max-width:720px}
.hero h1{font-family:Cinzel,serif;font-size:2.6rem;margin-bottom:1rem}
.hero p{font-size:1.1rem;margin-bottom:2rem}
.btn-primary{background:var(--coral);color:#fff;padding:.9rem 1.8rem;border-radius:var(--radius);font-weight:600;text-decoration:none;box-shadow:var(--shadow);transition:.25s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.btn-secondary {
  background: transparent;
  color: var(--deep);
  border: 2px solid var(--deep);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.btn-secondary:hover {
  background-color: var(--deep);
  color: white;
}

/* — Hero buttons wrapper — */
.hero-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* — Mobile: impila i pulsanti full-width — */
@media (max-width: 600px) {
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  .hero-buttons a {
    width: 100%;
  }
}



/* ===== SECTION GENERIC ============================== */
.section{padding:4.5rem 1.1rem}
.section-title{font-family:Cinzel,serif;font-size:2rem;color:var(--deep);margin-bottom:2.2rem;text-align:center}

/* ===== ABOUT: card layout =========================== */
#about {
  background: #fff;
  padding: 4rem 1rem;
}
.about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
}

.about-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s;
}
.about-card:hover {
  transform: translateY(-4px);
}

.card-img {
  width: 100%;
  /* l’altezza rimane automatica, così l’immagine non viene tagliata */
  height: auto;
  object-fit: cover;
}

.card-text {
  padding: 1.5rem;
  color: var(--stone);
  text-align: left;
}
.card-text h2 {
  font-family: Cinzel, serif;
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  color: var(--deep);
}
.card-text p {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Mobile: unica colonna */
@media (max-width: 600px) {
  #about {
    padding: 2rem 1rem;
  }
  .about-content {
    grid-template-columns: 1fr;
  }
}

/* ===== REVIEWS ===================================== */
.reviews-grid{max-width:1100px;margin:auto;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.review{background:#fff;padding:1.7rem;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.9rem}
.stars{color:#FFC107;font-size:1rem}
.review p{font-style:italic}
.author{font-weight:600;color:var(--deep);font-size:.95rem}
.review-cta{text-align:center;margin-top:2.8rem}
.btn-secondary{background:var(--deep);color:#fff;padding:.55rem 1.3rem;border-radius:var(--radius);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:.25s}
.btn-secondary:hover{background:var(--coral);color:#000}

/* ===== SOCIAL compatto (140 px) ===================== */
.social{background:var(--deep);color:#fff;padding:1.8rem 1rem 2.2rem}
.social-title{color:#fff;margin-bottom:1.2rem}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:240px;margin:0 auto}
.soc{font-size:2.2rem;color:#fff;display:flex;justify-content:center;transition:transform .25s}
.soc:hover{transform:translateY(-6px)}
.insta:hover{color:#E1306C}
.fb:hover{color:#1877F2}
.ta:hover{color:#34E0A1}
.goog:hover{color:#4285F4}
/* ===== INFO-SECTION: Orari + Contatti in due colonne ===== */
.info-section {
  background: #fff;
  padding: 4rem 1rem;
}
.info-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
  align-items: stretch;
}

.info-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* — Orari */
.hours-card .section-title {
  margin: 0;
  padding: 1.5rem;
  font-size: 1.8rem;
  color: var(--deep);
  text-align: center;
}
.hours-card .subtitle {
  margin: 0 1.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep);
  text-align: center;
}
.hours-card .hour-table {
  width: auto;
  margin: 0 1.5rem 1.5rem;
  border-collapse: collapse;
  table-layout: fixed;       /* usa le larghezze del colgroup */
  flex: 1;
}
.hours-card .hour-table .col-day {
  width: 60%;                /* 60% per il giorno */
}
.hours-card .hour-table .col-time {
  width: 40%;                /* 40% per l’orario */
}
.hours-card th,
.hours-card td {
  padding: .5rem .8rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  white-space: nowrap;
}
.hours-card th {
  text-align: left;
  font-weight: 600;
}
.hours-card td {
  text-align: right;
  font-weight: 500;
}

/* — Contatti */
.contact-card .section-title {
  margin: 0;
  padding: 1.5rem;
  font-size: 1.8rem;
  color: var(--deep);
  text-align: center;
}
.contact-card .contact-details {
  padding: 0 1.5rem 1rem;
  flex: 1;
}
.contact-card .contact-details p {
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.contact-card .contact-details a {
  color: var(--deep);
  text-decoration: none;
  font-weight: 600;
}
.contact-card .map-wrapper {
  margin: 0 1.5rem 1.5rem;
}
.contact-card .map-wrapper iframe {
  width: 100%;
  height: 250px;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Mobile: unica colonna */
@media (max-width: 600px) {
  .info-section {
    padding: 2rem 1rem;
  }
  .hours-card .section-title,
  .contact-card .section-title {
    text-align: left;
  }
  .hours-card .subtitle {
    text-align: left;
  }
}

/* ===== FOOTER ====================================== */
.footer{background:var(--deep);color:#fff;text-align:center;padding:1.3rem 1rem;margin-top:4rem;font-size:.9rem}

/* ===== PDF BUTTONS ================================= */
.pdf-buttons{max-width:700px;margin:0 auto;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pdf-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;background:var(--deep);color:#fff;padding:1rem;border-radius:var(--radius);font-weight:600;text-decoration:none;transition:.25s}
.pdf-btn i{font-size:1.2rem}
.pdf-btn:hover{background:var(--coral);color:#000;transform:translateY(-3px);box-shadow:var(--shadow)}
.pdf-btn.highlight{background:var(--coral);color:#000}
.pdf-btn.highlight:hover{background:#ffb199}

/* ===== RESPONSIVE ================================== */
@media(max-width:600px){
  .hero{height:72vh}
  .hero h1{font-size:2.05rem}
  .btn-cta{padding:.5rem .9rem;font-size:.9rem}
}
@media(max-width:480px){
  .social-grid{gap:1rem}
  .soc{font-size:1.9rem}
}
@media(max-width:360px){
  .brand img{height:48px}
  .hero h1{font-size:1.7rem}
}

/* =======================================================
   ANIMAZIONI “ABOUT” – desktop ← →  |  mobile zoom+fade
   ======================================================= */

   .about-card{
    opacity: 0;
    transition: transform .6s ease-out, opacity .6s ease-out;
  }
  
  /* ----- DESKTOP (≥601 px)  */
  @media (min-width: 601px){
    .about-card.card-left  { transform: translateX(-60px); }
    .about-card.card-right { transform: translateX( 60px); }
    .about-card.show       { transform: translateX(0); opacity:1; }
  }
  
  /* ----- MOBILE (<601 px) */
  @media (max-width: 600px){
  
    /* stato iniziale: leggero zoom + invisibile */
    .about-card            { transform: scale(.94); }
  
    /* ingresso scorrendo ↓ */
    .about-card.show.from-down{
      animation: cardInUp .55s cubic-bezier(.25,.8,.25,1) forwards;
    }
    /* ingresso scorrendo ↑ */
    .about-card.show.from-up{
      animation: cardInDown .55s cubic-bezier(.25,.8,.25,1) forwards;
    }
  
    @keyframes cardInUp{
      from{ transform: translateY(40px) scale(.94); opacity:0; }
      to  { transform: translateY(0)    scale(1);  opacity:1; }
    }
    @keyframes cardInDown{
      from{ transform: translateY(-40px) scale(.94); opacity:0; }
      to  { transform: translateY(0)     scale(1);  opacity:1; }
    }
  }
  
  /* hover invariato */
  .about-card:hover{ transform: translateY(-4px); }
/* =======================================================
   ANIMAZIONI “REVIEWS” – slide ← / →
   ======================================================= */

   .review{
    opacity: 0;
    /* nessun translate iniziale: lo decide la keyframe */
    transition: box-shadow .3s;
  }
  
  /* ingresso da sinistra (scroll ↓) */
  .review.enter-left{
    animation: reviewInLeft .5s cubic-bezier(.25,.8,.25,1) forwards;
  }
  /* ingresso da destra (scroll ↑) */
  .review.enter-right{
    animation: reviewInRight .5s cubic-bezier(.25,.8,.25,1) forwards;
  }
  
  @keyframes reviewInLeft{
    from{ transform: translateX(-60px); opacity:0; }
    to  { transform: translateX(0);    opacity:1; }
  }
  @keyframes reviewInRight{
    from{ transform: translateX(60px); opacity:0; }
    to  { transform: translateX(0);    opacity:1; }
  }
  
  /* focus quando la card è nella fascia centrale */
  .review.focus{
    transform: translateX(0) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
  }
  /* =======================================================
   ANIMAZIONI PAGINA MENÙ
   ======================================================= */

/* --------------- FADE-IN testuale ----------------- */
.menu-intro{                 /* assegneremo la classe via HTML o JS */
  opacity: 0;
  transform: translateY(25px);
  animation: introIn .6s .2s ease-out forwards;
}

@keyframes introIn{
  to{ opacity:1; transform: translateY(0); }
}

/* --------------- PDF BUTTONS ---------------------- */
.pdf-btn{
  opacity: 0;
  transform: scale(.88);
  animation: btnIn .55s ease-out forwards;
}

/* effetto di “wave”   */
.pdf-btn:nth-child(1){ animation-delay: .3s; }
.pdf-btn:nth-child(2){ animation-delay: .45s;}
.pdf-btn:nth-child(3){ animation-delay: .6s; }

@keyframes btnIn{
  60%{ transform: scale(1.08); } /* leggero overshoot */
  to { transform: scale(1); opacity:1; }
}

/* ---------- pulsante hover leggermente più energico ---------- */
.pdf-btn:hover{
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}