@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Quicksand:wght@300;400;500;600;700&display=swap');
:root{
    /*COLORS*/
    --light-bg: #FDF7EC;
    --dark-bg: #003F29;
    --light-text:#003F29;
    --dark-text:#FDF7EC;
    --light-accent: #C74319;
    --dark-accent: #C69347;
    --light-white: #FEF1D3;
    --dark-green: #CDCA9F;
    /*FONT*/
    --ff-serif: 'Abrilfatface';
    --ff-sanserif: 'Quicksand'
}

li>a:hover{color: var(--light-accent)}

::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: var(--light-bg);
 }
 
::-webkit-scrollbar
 {
     width: 10px;
     background-color: #F5F5F5;
 }
 
 ::-webkit-scrollbar-thumb
 {
     background-color: #333;
     border-radius: 10px;
 }

.dark-mode li>a:hover{color: var(--dark-accent)}
.body-home::before {

    background-color: rgba(253, 247, 236, 0.6); /* Cambia il colore e l'opacità desiderati */
    z-index: -1; /* Assicura che l'overlay sia dietro il contenuto */
}

.body-home.dark-mode::before {
    background-color: rgba(0, 51, 0, 0.6) !important; /* Cambia il colore e l'opacità desiderati per la modalità dark */
}

.body-home{
    margin: 0;
    font-family: var(--ff-sanserif), sans-serif;
    transition: background-color 0.4s, color 0.4s;
    background-color: var(--light-bg);
    
}



.light-mode {
    background-color: var(--light-bg);
    color: var(--light-text);
}

.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

.fixed-header {
    display: flex;
    justify-content: space-between ;                                        
    align-items: center;
    padding: 30px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: var(--light-bg);
    position: fixed; /* Aggiunto posizionamento relativo */
}

.dark-mode .fixed-header{
    background-color: var(--dark-bg);
}

.hamburger {
    display: flex;
    order: -1;
    cursor: pointer;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    z-index: 1000;
    
    overflow: visible; }

    .dark-mode .hamburger-inner{
        background-color: var(--dark-accent); /* Cambia il colore in modalità dark */
        color: var(--dark-accent);
    }
    .dark-mode .hamburger-inner:before{
        background-color: var(--dark-accent); /* Cambia il colore in modalità dark */
        color: var(--dark-accent);
    }
    .dark-mode .hamburger-inner:after{
        background-color: var(--dark-accent); /* Cambia il colore in modalità dark */
        color: var(--dark-accent);
    }
  
  
    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
      background-color: var(--light-accent); }

    .dark-mode  .hamburger.is-active .hamburger-inner{
        background-color: var(--dark-accent); 
    }
    .dark-mode  .hamburger.is-active .hamburger-inner::before{
        background-color: var(--dark-accent); 
    }
    .dark-mode  .hamburger.is-active .hamburger-inner::after{
        background-color: var(--dark-accent); 
    }
  
  
  .hamburger-box {
    width: 0px;
    height: 24px;
    display: inline-block;
    position: relative; }
  
  .hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
      width: 40px;
      height: 4px;
      background-color: var(--light-accent);
      border-radius: 4px;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.2s;
      transition-timing-function: ease; }
    .hamburger-inner::before, .hamburger-inner::after {
      content: "";
      display: block; }
    .hamburger-inner::before {
      top: -10px; }
    .hamburger-inner::after {
      bottom: -10px; }
  
  
     /* Collapse
     */
  .hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.2s;
    transition-delay: 0.2s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    .hamburger--collapse .hamburger-inner::after {
      top: -20px;
      transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
    .hamburger--collapse .hamburger-inner::before {
      transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  
  .hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    .hamburger--collapse.is-active .hamburger-inner::after {
      top: 0;
      opacity: 0;
      transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
    .hamburger--collapse.is-active .hamburger-inner::before {
      top: 0;
      transform: rotate(-90deg);
      transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
  
  

      .menu {
        position: absolute;
        width: 100%;
        top: 80px;
        left: 0;
        background-color: var(--light-bg);
        border-radius: 0 0 24px 24px;
        z-index: 999;
        transition: height 0.4s ease-in-out;
        overflow-x: hidden;
        border-radius: 0 0 24px 24px;
        height: 0;
    }

    .dark-mode .menu {
        background-color: var(--dark-bg);
    }

    .menu.active {
        height: calc(100vh - 190px);
    }

.menu ul {
    list-style: none;
    padding: 0;
    margin: 30px 20px;
    display: flex;
    flex-direction: column;
    font-family: var(--ff-serif);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    
}

.menu li {
    padding: 10px;
}

.menu a {
    text-decoration: none;
    color: var(--light-accent);
}

.dark-mode .menu a {
    text-decoration: none;
    color: var(--dark-accent);
}

.logo {
    width: 75%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    
}

.logo img {
    max-width: 75px;
    height: auto;
}

.light-mode-toggle {
    cursor: pointer;
}

.theme-switch {
    display: inline-block;
    height: 27px;
    position: relative;
    width: 54px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: var(--light-accent);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: var(--light-bg);
    bottom: 4px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 20px;
}

input:checked + .slider {
    background-color: var(--dark-accent);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.slider.round {
    border-radius: 12px;
}

.slider.round:before {
    border-radius: 50%;
}

.light-icon {

    width: 15px;
    height: 15px;
    color: var(--dark-text);
    /* Altri stili desiderati per l'icona di modalità light */
}

.dark-icon {

    width: 15px;
    height: 15px;
    color: var(--dark-text);
    /* Altri stili desiderati per l'icona di modalità dark */
}

/* Nascondi le icone inizialmente */
.light-icon,
.dark-icon {
    display: none;
}

/* Posiziona le icone in modo che siano centrate orizzontalmente rispetto allo slider */
.slider ion-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Mostra l'icona light quando la modalità light è attiva */
input:checked + .slider.round .dark-icon {
    display: block;
    left: 6px; /* Regola la distanza tra l'icona light e il bordo destro */
}

/* Mostra l'icona dark quando la modalità dark è attiva */
input:not(:checked) + .slider.round .light-icon {
    display: block;
    right: 6px; /* Regola la distanza tra l'icona dark e il bordo sinistro */
}



/* Media query per mostrare/nascondere il toggle del menu a seconda della larghezza dello schermo */
@media only screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .logo {
        text-align: center; /* Mantieni il logo centrato anche in modalità mobile */
    }

    .logo img{
        max-width: 20%;
    }

    .light-mode-toggle {
        order: 1; /* Muovi il toggle della modalità chiara/tema scuro alla fine della riga */
    }

    .mobile-menu {
        display: none;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        z-index: 999;
    }

    .mobile-menu.active {
        display: flex;
    }

    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}

@media screen and (max-width: 600px) {
    .hero-image {
        margin-top: 8em;
    }
    .social {
        margin: auto;
    }
}

@media screen and (min-width: 600px) {
    .hero-image {
        margin-top: 8em;
    }
}

.hero-image {
    box-sizing: border-box;
    margin-top: 10em;
    width: 100%;
    max-width: 500px;
}
																						  
.tcsCR{
	width:80%;
	margin: 0 auto;
}
																						  

#main-home{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.welcome{font-size: 50px; font-weight:700; font-family:  var(--ff-serif); color: var(--light-accent);}
.dark-mode .welcome {color: var(--dark-accent);}



/* Stili per il footer */
footer {
    background-color: var(--light-accent);
    color: var(--dark-text);
    padding: 20px;
    border-radius: 24px 24px 0 0;
    font-family: var(--ff-sanserif);

    /* Fissa il footer in basso della pagina */
    margin-top: 3em;
    bottom: 0;
    width: 100%;
}

.dark-mode footer {
    background-color: var(--dark-accent);
    color: var(--dark-text);
}
.footer-hr{color: var(--dark-text)}
footer .credit{display: flex; justify-content: space-between;}
footer a{text-decoration: none; color: var(--dark-text);}
footer a:hover{text-decoration: none; color: var(--light-text);}
ion-icon{font-size: 30px; color: var(--light-bg);}


.dark-mode .tcsrestaurant{color: var(--light-text);}
.dark-mode .visiva{color: var(--light-text);}




/*-----------LIST MENU CSS-----------*/



hr {
    border: 1.5px solid var(--secondary-color);
    border-radius: 10px;
    color: var(--secondary-color);
    margin-top: -.5em;
    opacity: 1;
    margin: 0 10px;
}



#category {
    text-align: left;
    font-family: var(--ff-serif);
    color: var(--light-accent);
    font-weight:700;
    font-size: 2em;
    margin-top: 5em;
    padding: 0 5px;
}

.sub-heading{font-family: var(--ff-sanserif); color: var(--light-accent); text-align: left; }
.def-category{font-weight: 700; font-family: var(--ff-sanserif); color: var(--light-text); text-align: left;}
#sub-category{font-family: var(--ff-sanserif); color: var(--dark-text); background-color:var(--light-accent); padding: 4px 8px;border-radius: 4px;}

.dark-mode #sub-category{color: var(--light-text); background-color: var(--dark-accent);}

.dark-mode .sub-heading{color: var(--dark-accent);}
.dark-mode #category {
    color: var(--dark-accent);
}

.dark-mode .def-category {
    color: var(--dark-text);
}


.allergens-notify, .notify {
    font-size: 0.9em;
    margin-top: 2.5em;
    padding: 0 10px;
    text-align: justify;
    font-family: var(--ff-sanserif);
    color: #333;
    font-style: italic;
}


/* CSS per la griglia */

.food-grid {
    
    padding: 10px 5px;
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    
}


.food{
    margin: 0;
    padding: 10px 5px;
    border-bottom: .5px solid var(--dark-green);
}

.food-name-spec {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.price-icon {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    
}


.price-icon2 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
}

          

.food-spec {
    color: var(--light-text);
    font-size: 1em;
    font-family: var(--ff-sanserif);
}

.dark-mode .food-spec {
    color: var(--dark-green);
}

#food {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#food-name,
#food-price {
    flex: 1;
    font-weight: 500;
    font-family: var(--ff-sanserif);
    color: var(--light-accent);
    font-size: 1em;
    margin-bottom: .3em;
}

.dark-mode #food-name{
    color: var(--dark-accent);
}

.dark-mode #food-price{
    color: var(--dark-accent);
}

.allergens{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    margin-bottom: .3em;
}

.allergen-item{
    width: 1.5rem;
    height: auto;
}



/* Finestra Modale */

.info-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--dark-bg);
    border-radius: 12px;
    padding: 10px;
    line-height: 1.1em;
    margin-top: 3em;
}

.dark-mode .info-container {
    background-color: var(--dark-green);
}

.info-icon-footer {
    display: flex;
    align-items: center;
}

.info-icon {/* Aggiungi spazio tra l'icona e il testo se necessario */
    background-color: transparent; /* Imposta lo sfondo del bottone come trasparente */
    border: none; 
    font-size: 28px;
    color: var(--light-bg);/* Rimuovi il bordo del bottone, se presente */
}

.allergens-notify {
    margin: 0;
    color: var(--dark-text);
    text-align: justify /* Rimuovi il margine predefinito dal paragrafo */
}

.dark-mode .allergens-notify{color: var(--dark-bg);}

.dark-mode .info-icon{
    color: var(--dark-bg);}

.dark-mode .notify{
    color: var(--dark-green);
}


.modal {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    padding: 5em 10px 10px ;
    z-index: 10;
    
}

.modal-content {
    background-color: var(--light-bg)!important;
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 800px;
    height: 500px;
    position: relative;
    overflow-y: auto;
    padding: 0 20px 20px 20px;
    margin: 10% auto;

}
.modal-content h1{margin-top: 1em; font-weight: 700;}
.modal-content h1,h4{font-family: var(--ff-serif); color: var(--light-accent);text-align: center;}
.modal-content p{font-family: var(--ff-sanserif); text-align: center;}
.dark-mode .modal-content p{color: var(--light-text) !important;}

.language-button{
    background-color: var(--light-bg);
    border-radius: 12px;
    color: var(--dark-bg);
    font-family: var(--ff-sanserif);
    font-weight:500;
}

.language-button.selected {
    border: 1px solid var(--dark-bg);
}

button{border: none;}



.modal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
    position: sticky;
    top: 0;
    background-color: var(--light-bg);
    z-index: 2;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--dark-bg);
}

.modal-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Modifica il numero di colonne secondo le tue preferenze */
    gap: 10px; /* Spazio tra le icone e i testi */
    margin-top: 20px; /* Aggiunto margine superiore per separare dalla sezione precedente */
}

.modal-text>p{text-align: justify!important;}
.dark-mode .modal-text{color: var(--dark-bg)!important;}
.modal-icon {
    text-align: center;
}

.modal-icon img {
    width: 50px; /* Personalizza la larghezza dell'icona */
    height: 50px; /* Personalizza l'altezza dell'icona */
    margin-bottom: 5px; /* Aggiunto margine inferiore tra l'icona e il testo */
}

.modal-icon-text {
    font-size: 14px; /* Personalizza la dimensione del testo */
    color: var(--light-text); /* Personalizza il colore del testo */
    text-align: center!important;
}


#language-selector-fr,
#language-selector-en {
    display: flex;
    gap: 1em;
}

.close-btn {
    cursor: pointer;
    font-size: 24px;
    border: none;
    background: none;
    padding: 0;
    color: var(--dark-bg); /* colore del testo */
}

.close-btn:hover {
    color: var(--light-accent); /* colore del testo al passaggio del mouse, personalizzalo secondo le tue preferenze */
}



.food-2{
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: .5px solid var(--dark-green);
    margin-bottom: 1em;
    margin-top: 1em             ;
}

.food-details {
    display: flex;
    gap: 1em;
    align-items: center;
    text-align: center;
}


.header-food {
    font-family: var(--ff-sanserif)!important;
    font-weight: 700;
    color: var(--light-text);
}

.dark-mode .header-food{
    color: var(--dark-text);
}

.dark-mode .wine-tipology{
    background-color: var(--dark-bg);
}


.food-header {
    display: flex;
    justify-content: space-between;
    align-items: center!important;


}

.food-header {
    display: flex;
    justify-content: space-between;
    align-items:baseline!important;
    padding: 4px 8px;
    z-index: 3;
    background-color: var(--light-bg);
    font-family: var(--ff-sanserif);
    font-weight: 700;
    margin-top: 0;
}

.dark-mode .food-header{background-color: var(--dark-bg);}

.header-food{font-family: var(--ff-sanserif)!important; font-weight: 700; color: var(--light-text);}

.food-details2{
    display: flex;
    gap: 2em;
    text-align: center;
    color: var(--light-accent);
}

.dark-mode .food-details2{
    color: var(--dark-accent);
}

.food-container {
    margin-top: 2em;
    position: sticky;
    top: 93px;
    display: flex;
    flex-direction: column;
    background-color: var(--light-bg);
    border-bottom: .1px solid var(--dark-bg);
									
}
																																																																																												  
.dark-mode .food-container{border-bottom: .1px solid var(--dark-green);}

.denom {margin-bottom: 0!important; color: var(--light-accent);}

.drink{color: var(--light-text)!important;}

.dark-mode .drink{color: var(--dark-text)!important;}