/* ============================================================
   FILE: menupage.css
   DESTO — Pagina Menù (Hero + Lista Piatti + Switch Menu)
   ============================================================ */


/* ============================================================
   HERO — Stile coerente con Cookies/Policy
============================================================ */
.menupage-hero {
  margin-top: 50px;
  width: 100%;
  height: 65vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  text-align: center;
  overflow: hidden;
}

.menupage-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 20px;
}

.menupage-hero-tag {
  display: inline-block;
  background: rgba(235,219,208,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 5px 16px;
  font-size: .8rem;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 12px;
      letter-spacing: -0.05rem;        /* niente spacing */

}

.menupage-hero h1 {
  font-family: 'Chopard', serif;
  font-size: clamp(2.6rem, 6vw, 4.3rem);
    letter-spacing: -0.57rem;        /* niente spacing */

  text-transform: uppercase;
}

.menupage-hero-sub {
  max-width: 750px;
  margin: 14px auto 0;
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: .95;
  
}

.menupage-hero-blur {
  position: absolute;
  inset: 0;
  background-image: url("../images/desto-bistrot-menu-dettaglio-ristorante-firenze.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(.55);
  transform: scale(1.12);
  opacity: .9;
  z-index: 1;
}


/* ============================================================
   SWITCH BISTROT / RISTORANTE
============================================================ */
.menu-switch-wrapper {
  margin: 40px 0 30px;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full bleed */
}

.menu-switch-inner {
  padding: 0 15vw;
  display: flex;
  justify-content: space-between;
}

.menu-main-tab {
  width: 35vw;
  padding: 18px 10px;
  border: 1px solid rgba(235,219,208,0.45);
  font-family: 'Chopard', serif;
      letter-spacing: -0.18rem;        /* niente spacing */

  font-size: 1.5rem;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  opacity: .7;
  transition: .3s ease;
}

.menu-main-tab:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.menu-main-tab.active {
  background: var(--primary);
  color: var(--secondary);
  opacity: 1;
}

@media (max-width:900px){
  .menu-switch-wrapper {
    width: 100%;
    margin-left: 0;
  }

  .menu-switch-inner {
    padding: 0 5vw;
    flex-direction: column;
    gap: 15px;
  }

  .menu-main-tab {
    width: 100%;
  }
}


/* ============================================================
   PDF BOX (consecutio visiva dei tab)
============================================================ */
.menupage-pdf-box {
  width: 70vw;
  margin: 30px auto 50px;
  padding: 22px 0 28px;
  text-align: center;
}

.menupage-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 10px;
  width: 35vw;
  border-radius: 0; /* nessun arrotondamento */
  border: 1px solid var(--primary);
  background: var(--secondary);
  color: var(--primary);
  font-family: 'Cormorant', serif;
  font-size: 1.15rem;
  text-decoration: none;
  transition:.3s ease;
}

.menupage-pdf-btn:hover {
  background: var(--primary);
  color: var(--secondary);
}

@media (max-width:900px){
  .menupage-pdf-btn {
    width: 100%;
  }
}


/* ============================================================
   MENU BLOCKS (Bistrot / Ristorante)
============================================================ */
.menu-block { display:none; }
.menu-block.active { display:block; }

.menu-bistrot-empty {
  width: 90vw;
  margin: 0 auto 60px;
  text-align: center;
  font-size: 1.2rem;
  opacity: .85;
  font-family: 'Cormorant', serif;
}


/* ============================================================
   DUE COLONNE — SISTEMA RISTORANTE
============================================================ */
.menupage-menu-wrapper {
  width: 90vw;
  margin: 0 auto 40px;
}

.menupage-columns {
  display:flex;
  gap:40px;
}

.menupage-col {
  flex:1;
}

@media(max-width:900px){
  .menupage-columns {
    flex-direction: column;
  }
}


/* ============================================================
   CATEGORIE E PIATTI
============================================================ */
.menupage-category {
  text-align:center;
  margin-bottom: 60px;
}

.menupage-category h2 {
  font-family: "Chopard", serif;
  font-size: 2.4rem;
      letter-spacing: -0.2rem;        /* niente spacing */

  color: var(--primary);
  margin-bottom: 28px;
}

.menupage-list {
  list-style:none;
  padding:0;
  margin:0;
}


/* ============================================================
   PIATTO (desktop)
============================================================ */
.menupage-item {
  margin: 22px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(114,35,39,0.25);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.menupage-item > span {
  font-size: 1.3rem;
  color: var(--primary);
  line-height:1.55rem;
  font-weight:400;
}

.menupage-item small {
  font-size: 1.1rem !important;
  opacity:.65;
  line-height:1.3rem;
}

.menupage-price {
  font-size:1.3rem;
  font-weight:600;
  margin-left:25px;
  white-space:nowrap;
  color:var(--primary);
}


/* ============================================================
   MOBILE <768px
============================================================ */
@media(max-width:768px){

  .menupage-item {
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    padding-bottom:22px;
  }

  .menupage-price {
    margin:4px 0 0 0;
  }

  .menupage-category h2 {
    font-size:2rem;
  }

  .animate {
    transform:none !important;
    opacity:1 !important;
  }
}


/* ============================================================
   EXTRA MOBILE <480
============================================================ */
@media(max-width:480px){
  .menupage-item > span {
    font-size:1.15rem;
  }

  .menupage-price {
    font-size:1.2rem;
  }

  .menupage-category h2 {
    font-size:1.8rem;
  }
}

/* ============================================================
   TABELLA ALLERGENI (3 colonne)
============================================================ */

.allergeni-wrapper {
  width: 90vw;
  margin: 40px auto 100px;
  padding-top: 40px;
  border-top: 1px solid rgba(114,35,39,0.35);
}

.allergeni-title {
  font-family: "Chopard", serif;
  font-size: 2.2rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 35px;
        letter-spacing: -0.2rem;        /* niente spacing */

}

.allergeni-columns {
  display: flex;
  gap: 40px;
}

.allergeni-col {
  flex: 1;
}

.allergene-item {
  margin-bottom: 22px;
}

.allergene-item strong {
  color: var(--primary);
  font-size: 1.15rem;
  display: block;
  margin-bottom: 4px;
}

.allergene-item p {
  font-size: 0.95rem;
  opacity: .75;
  line-height: 1.35rem;
}

/* Mobile */
@media (max-width:900px){
  .allergeni-columns {
    flex-direction: column;
  }
}