/*
..:: VARIABILI GLOBALI CSS ::..             
*/
:root {
  --sfondoChiaro:                 #f4f4f4;
  --sfondoEvidenza:               #EDE7DA;
  --sfondoScuro:                  #523232;
  --testoChiaro:                  #F5EDE4;
  --testoScuro:                   #523232;
  --testoLink:                    #D4AF37 ;
  --testoLink-Hover:              #B8860B ;
  
  --body-font-family:             'Mona Sans', sans-serif;

  --h1-font-size:                 68px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  20px;
  --btn-font-size:                16px;
  --menu-font-size:               16px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  
  --font-weight-normal:           400;
  --font-weight-bold:             700;
}
  
/*
..:: IMPOSTAZIONI GENERALI ::..
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Altezza della navbar */
}

body {
  background-color: var(--sfondoChiaro);
  font-family: var(--body-font-family); 
}
    
h2,
h3,
h4,
h5,
h6 {
  color: var(--testoScuro);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}       
  
h4 {
  font-size: var(--h4-font-size);
}
  
h5 {
  font-size: var(--h5-font-size);
}  

h6 {
  font-size: var(--h6-font-size);
}

p {
  color: var(--testoScuro);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}
  
ul li {
  color: var(--testoChiaro);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}
  
a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}
  
a {
  display: inline-block;
  color: var(--testoChiaro);
  text-decoration: none;
}
  
a:hover {
  color: var(--testoLink-Hover);
}
  
b,
strong {
  font-weight: var(--font-weight-bold);
}

.btn-custom{
  background-color: var(--testoLink);
  color: var(--testoChiaro);
  border: none;
  padding: 10px 20px;
  font-weight: bold;

  font-size: 16px;
  cursor: pointer;
  border-radius: 5px; /* Angoli arrotondati */
  transition: background-color 0.3s, transform 0.2s;
}

.btn-custom:hover {
  background-color: var(--testoLink-Hover); 
  transform: scale(1.05);
}

.btn-custom:active {
  background-color: #A67C00 !important; /* Ancora più scuro per clic */
  transform: scale(0.95); /* Effetto pressione */
  transition: none; 
}

/*
..:: IMPOSTAZIONI NAVBAR ::.. 
*/
.sticky-wrapper {
  position: fixed;
  z-index: 999999;
  top: 0;
  right: 0;
  left: 0;
}

.navbar {
  /*background-color: rgba(140, 123, 117, 0.7); */
  background: rgba(0, 0, 0, 0.6);
  background: transparent;
  z-index: 999999;
  padding-top: 15px;
  padding-bottom: 30px;
}

.navbar .container {
  /*background: rgba(140, 123, 117, 0.7);*/
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--border-radius-medium);
  padding: 5px 15px;
  max-width: 100%;
  margin-left: 15px;
  margin-right: 15px;
}

/*.navbar .container:hover{
  background: rgba(0, 0, 0, 0.6);
}*/

.navbar .navbar-nav .nav-link {
  color: var(--testoChiaro);
}
  
.navbar .navbar-nav .nav-link:hover {
  color: var(--testoLink); 
}
  
.navbar-brand {
  color: var(--testoChiaro);
}

.navbar-brand:hover {
  color: var(--testoChiaro);
}

.navbar-toggler-icon {
  background-color:transparent; /* Rimuove il colore di base */
  background-image:  url('../img/Icohamburger.svg');
}

.navbar-toggler {
  border: var(--bs-border-width) solid rgba(255, 255, 255, 0.55);
  position: absolute; /* Ritorna alla posizione assoluta per evitare che vada a capo */
  top: 45px; 
  right: 30px;
}  

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
  
.menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
  
.menu li {
  margin-right: 20px; /* Spazio tra le voci del menù */
}
  
.lang-links {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 10px;
  display: flex;
  flex-direction: column; /* Imposta i link della lingua in colonna */
  align-items: flex-end; /* Allinea a destra */
}
  
.lang-links li {
  margin-bottom: 0px; 
  font-size: small;
}

.DivTitolo{
  color: var(--testoChiaro);
}

.TitoloHome{
  font-size: var(--h2-font-size);
  font-weight: var(--font-weight-bold);
  color: var(--testoScuro);
}   
/*
..:: IMPOSTAZIONI SEZIONI ::..
*/
  
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 50vh;
  height: 100vh;
  text-align: center;
}
    
.hero-section .container {
  position: relative;
  z-index: 9;
}
  
/* Slider container */
#hero-slider {
  position: relative;
  overflow: hidden;
  height: 100vh; /* Schermo intero */
}

/* Singola slide */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1); /* Nessun zoom iniziale */
  transition: transform 5s ease-in-out; /* Effetto zoom */
  opacity: 0; /* Nascondi per iniziare */
  transition: opacity 1s ease, transform 5s ease-in-out;
}

/* Slide visibile */
.slide.active {
  opacity: 1; /* Mostra */
  transform: scale(1.1); /* Zoom */
}

.slide-logo{
  background-color:  var(--sfondoEvidenza);
}

/* Pannello di benvenuto */
/*.welcome-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(140, 123, 117, 0.7);
  background-color: rgba(0, 0, 0, 0.6); 
  color: var(--testoChiaro);
  text-align: center;
  padding: 20px;
  border-radius: 20px;
  max-width: 80%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}*/
    
/* Contenitore per logo e nome */
/*.logo-and-name {
  display: flex;
  align-items: center;
  gap: 15px;  Spazio tra logo e testo 
  flex-wrap: wrap;  Permette di andare su più righe se lo spazio è insufficiente 
  justify-content: center;
}*/
  
  /* Logo */
.logo {
  min-width: 80px;
  opacity: 0.8; /* Trasparenza */
}
  
/* Nome azienda */
/*.company-name {
  font-size: 2rem;
  color: var(--testoLink);
  margin: 0;
}*/
  
/* Messaggio di benvenuto */
/*.welcome-message {
  color: var(--testoChiaro);
  font-size: 1.2rem;
  margin-top: 15px;
}*/
    
/* Sezione Chi siamo */
#SezioneChiSiamo {
  padding-top: 20px;
  padding-bottom: 20px;
}

#SezioneChiSiamo .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
  
#SezioneChiSiamo .text {
  max-width: 800px;
}
  
#SezioneChiSiamo .images {
  display: flex;
  gap: 15px;
  justify-content: center;
}
  
#SezioneChiSiamo .images img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
}

/*Sezione Vini*/
.highlight-section {
  background-color: var(--sfondoEvidenza); 
  padding: 60px 20px;
  text-align: center;
  border-top: 5px solid var(--testoLink);
  border-bottom: 5px solid var(--testoLink);
}

.highlight-section .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.highlight-section .text {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.highlight-section h2 {
  color: var(--testoScuro);
  font-size: 2rem;
  margin-bottom: 10px;
}

.highlight-section .separator img {
  width: 50px;
  margin: 10px auto;
  display: block;
}

.highlight-section p {
  color: var(--testoScuro);
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.highlight-section .btn {
  display: inline-block;
  background-color: var(--testoLink);
  color: var(--testoScuro);
  padding: 10px 20px;
  margin-bottom: 10px;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.highlight-section .btn:hover {
  background-color: var(--testoLink-Hover);
}

.highlight-section .image {
  flex: 1;
  min-width: 300px;
}

.highlight-section .image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Stile della sezione "Storia" */
.simple-section.decorated {
  position: relative;
  background-color: var(--sfondoChiaro); /* Colore chiaro */
  padding: 60px 20px;
  text-align: center;
  overflow: hidden;
}

.simple-section.decorated .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/storia.webp') center/cover no-repeat;
  opacity: 0.3; /* Sfondo semi-trasparente */
  z-index: 1;
}

.simple-section.decorated .container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  background-color: rgba(245, 237, 228, 0.9); /* Box semi-opaco */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.simple-section h2 {
  color: var(--testoScuro);
  font-size: 2rem;
  margin-bottom: 15px;
}

.simple-section .separator img {
  width: 50px;
  margin: 10px auto;
  display: block;
}

.simple-section p {
  color: var(--testoScuro);
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.simple-section .btn-light {
  display: inline-block;
  background-color: rgba(140, 123, 117, 0.7); /* Colore semi-trasparente del menu */
  color: var(--sfondoChiaro);
  padding: 10px 20px;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.simple-section .btn-light:hover {
  background-color: rgba(140, 123, 117, 1);
}

/* Stile per la sezione Contatti */
.contact-section {
  background-color: var(--sfondoChiaro);
  padding: 60px 20px;
  text-align: center;
}

.contact-section .container {
  max-width: 1000px;
  margin: 0 auto;
  background-color: rgba(245, 237, 228, 0.9); /* Box semi-opaco */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-section h2 {
  color: var(--testoScuro);
  font-size: 2rem;
  margin-bottom: 15px;
}

.contact-section p {
  color: var(--testoScuro);
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.contact-section .map-container iframe {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 
..:: FOOTER ::..
*/  
.site-footer {
  background-color: var(--sfondoScuro);
  padding-top: 60px;
  padding-bottom: 20px;
}
  
.site-footer strong {
  color: var(--testoChiaro);
}
  
.site-footer p,
.site-footer-link {
  color: rgba(245, 237, 228, 0.75);
  font-size: var(--btn-font-size);
}
  
.site-footer-link {
  color: rgba(245, 237, 228, 0.75);
  font-size: var(--btn-font-size);
  transition: all 0.3s;
}

.site-footer-link:hover {
  color: var(--testoLink);
  text-decoration: none;
}

/* Icone Social */
.social-icon {
  margin: 0;
  padding: 0;
}
  
.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}
  
.social-icon-link {
  background: var(--testoChiaro);
  border-radius: var(--border-radius-large);
  color: var(--testoScuro);
  font-size: var(--menu-font-size);
  display: block;
  margin: 0 5px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 35px;
  transition: background 0.2s, color 0.2s;
}
  
.social-icon-link:hover {
  background: var(--testoChiaro);
  color: var(--testoLink-Hover);
}
  
.social-icon-link span {
  display: block;
}  

/*
..:: STILI PER PAGINE ::.. 
*/

/* Intestazione */
.header-image {
  background-size: cover;
  background-position: center;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--testoChiaro);
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding-top: 15px;
}

.imgStoria{
  background-image: url('../img/storia.webp'); 
}
.imgVini{
  background-image: url('../img/Bottiglie.webp'); 
}
.imgDegustazione{
  background-image: url('../img/Bottiglie.webp'); 
}

/* Immagini */
.img-fluid {
  max-width: 90%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Stili pagina dei vini*/
.wine-card {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.wine-card:hover {
  transform: scale(1.05);
}

.wine-card img {
  width: 150px; 
  height: auto;
  margin: 0 auto;
  display: block;
}

.wine-card-inner {
  padding:5px;
  width: 100%; 
  height: 400px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Spaziatura uniforme */
  text-align: center;
}

.details-box {
  border: 1px solid var(--sfondoChiaro);
  padding: 20px;
  margin-top: 20px;
  display: none;
}

.details-box img {
  /*min-width: 300px;
  width: 25%;
  margin-right: 20px;*/
  width: 100%;        
  height: auto;
  margin-right: 0;
  min-width: unset;    
}

.zoom-container {
  position: relative;
  overflow: hidden;
  /*min-width: 300px; 
  width: 25%;*/
  width: 100%;
  /*height: 400px;*/
  height: auto;
  max-height: 480px;
  /*margin-right: 20px;*/
  border-radius: 8px;
}

.zoom-image {
  width: 100%;
  /*height: 100%;*/
  height: auto;
  /*object-fit: cover;*/
  object-fit: contain; /* non taglia la bottiglia */
  /*transition: transform 0.2s ease-in-out;*/
  transition: transform 0.25s ease-in-out;
  cursor: zoom-in;
  display: block;
  margin: 0 auto;
}

.zoom-container:hover .zoom-image {
  /*transform: scale(1.5);*/ /* Zoom all'interno del contenitore */
  transform: scale(1.4);
  cursor: zoom-out;
}

.modal-dialog {
  margin-top: 150px; 
}

.TestoElencoVini{
  font-size: 18px;   
  display: -webkit-box;
  -webkit-line-clamp: 4;/* Limita a 4 righe */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-outline-custom {
  color:var(--testoLink-Hover);
  border-color:var(--testoLink-Hover);
}

.btn-outline-custom:hover {
  background-color: var(--testoScuro);
  color: var(--testoChiaro);
}


/* Smartphone piccoli (ritratto) */
@media (max-width: 576px) {
  /* Stili per schermi molto piccoli, tipo telefoni vecchi o compatti */
  /*
  ..:: IMPOSTAZIONI NAVBAR ::.. 
  */

  .navbar-toggler {
    right: 15px;
  }  

  .lang-links{
    padding-right: 10px;
  }

  .navbar {
    background: rgba(0, 0, 0, 0.6);
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .navbar .container {
    border-radius: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px
  }

  /*
  ..:: IMPOSTAZIONI SEZIONI ::..
  */
  .hero-section {
    height: 50vh;
  }

  /* Singola slide */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 200%;
  background-position: top;
  transform: scale(1); /* Nessun zoom iniziale */
  transition: transform 5s ease-in-out; /* Effetto zoom */
  opacity: 0; /* Nascondi per iniziare */
  transition: opacity 1s ease, transform 5s ease-in-out;
}
  /*.welcome-panel {
      top: 30%;
  }*/
  /*.logo-and-name {
      display: none;
  }*/
  #SezioneChiSiamo .images img {
    max-width: 300px !important;
  }
  .header-image {
    height: 30vh;
  }
  .titoloStoria{
    font-size: 40px;
    margin-top: 90px;
  }
  .titoloPrenotazioni{
    font-size: 40px;
    margin-top: 90px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #SchedaDettagli .row {
    align-items: center;     /* centra verticalmente */
  }
  .zoom-container {
    max-width: 100%;
    text-align: center;
  }
}

/* Smartphone moderni e piccoli tablet in verticale */
@media (max-width: 768px) {
  /* Ottimo per la stragrande maggioranza dei telefoni */
  /*
  ..:: IMPOSTAZIONI SEZIONI ::..
  */
  .section {
    padding: 40px 10px;
  }

  h2 {
    font-size: 2rem;
  }

  p {
    font-size: 1rem;
  }

  #SezioneChiSiamo .content {
    flex-direction: column;
    gap: 30px;
  }
  
  #SezioneChiSiamo .images {
    flex-direction: column;
  }

  #SezioneChiSiamo .images img {
    max-width: 100%;
  }
}

/* Tablet (portrait) e smartphone grandi in orizzontale */
@media (max-width: 992px) {
  /* Qui ci stanno anche molti tablet, tipo iPad */
  /*
  ..:: IMPOSTAZIONI NAVBAR ::.. 
  */
  .navbar-brand {
    white-space: normal; /* Permette di andare a capo */
    word-wrap: break-word; /* Forza la rottura del testo */
    display: block; /* Rende il contenitore della navbar più flessibile */
    text-align: center; /* Centra il testo quando va a capo */
  }
  
  /*
  ..:: IMPOSTAZIONI SEZIONI ::..
  */
  #SezioneChiSiamo .images img {
    max-width: 250px;
  }
}