@charset "utf-8";
/* CSS Document */

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

        body {
            font-family: Arial, sans-serif;
            background-color: #000;
            margin: 0;
            padding: 20px;
            text-align: center;;
            font-size: calc(16px + 0.5vw);
			display: flex;
    		flex-direction: column;
    		min-height: 100vh;
        }

		.wrapper {
 		   flex: 1;
		}
		
        .sfondo {
			/* background-color: #000; */
			background-image: url("img/sfondo_la_cambusa.jpg");
			background-repeat: no-repeat;
			background-position:bottom;
			background-size: cover;
			background-attachment: fixed; /* Rende lo sfondo fisso */
			width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .logo-container {
            text-align: center;
            margin-top: 5px;
        }

        .logo {
            margin-top: 5px;
            width: 250px;
			height: auto;
        }

        .menu-container {
            display:grid ;
            gap: 30px;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			justify-content: center; /* ✅ centra le colonne nella griglia */
            max-width: 900px;
            width: 100%;
            margin: 30px auto;
            padding: 20px;
        }

        .menu-button {
            position: relative;
            width: 100%;
            padding-bottom: 100%; /* Rende il pulsante quadrato */
    		border-radius: 20%;  /* angoli arrtondati */
			border: solid 3px #b8860b; /* oro scuro */
 			background-image: url('img/default-pulsanti.png'); /* Immagine predefinita */
            background-size: cover;
		    /* background: #f0f0f0; /* Colore di sfondo chiaro */ ^/
		    box-shadow: 5px 5px 10px rgba(200, 200, 200, 0.8), /* Ombra esterna scura */
               			 -5px -5px 10px rgba(255, 255, 255, 0.5); /* Luce esterna chiara */
            background-position: center;
            transition: transform 0.3s ease, background-image 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .menu-button:hover {
            transform: translateY(-5px); /* Solleva il pulsante al passaggio del mouse */
    		box-shadow: 8px 8px 20px rgba(200, 200, 200, 0.8), 
                -8px -8px 20px rgba(255, 255, 255, 0.3); /* Ombra più pronunciata */
			transition: all 0.5s ease-in-out;
			border-radius: 50%;
        }

        .menu-button span {
            position: absolute;
            top: 50%; 
    		left: 50%;
   		 	transform: translate(-50%, -50%); /* Centra esattamente sia orizzontalmente che verticalmente */
   			color: white;
            font-weight: bold;
            text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.7);
            font-size: 1.2em;
		    text-align: center;
        }
		
		.menu-button:active {
    		transform: translateY(2px); /* Rimpicciolisce leggermente */
    		box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3), 
                -2px -2px 10px rgba(255, 255, 255, 0.8);
		}

		/* Stile generale per il contenitore */
  		.flag-container {
    		text-align: center;
    		display: flex;
    		flex-wrap: wrap; /* Adatta le bandiere su più righe se necessario */
    		justify-content: center; /* Centra le bandiere orizzontalmente */
   	 		gap: 20px; /* Spazio tra le bandiere */
  		}

		/* Stile per le bandiere */
 		 .flag {
 		   width: 30%; /* Dimensione predefinita */
  		   height: auto; /* Mantiene le proporzioni */
    	   transition: transform 0.2s; /* Effetto al passaggio del mouse */
 		 }

		/* Aggiungi un effetto al passaggio del mouse */
 		 .flag:hover {
  		  transform: scale(1.1); /* Leggero ingrandimento */
  		}

        @media (max-width: 760px) {
            .menu-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
			
			.tipo { font-weight: 700; font-size: 3vw; padding: 10px; display: block; color: #fff; text-transform: uppercase; text-align: center; margin: auto; width: 60%; height: auto; background-repeat: no-repeat; background-size: cover; margin-top: 32px; margin-bottom: 24px; border-radius: 10%; border: solid 2px gold; -webkit-box-shadow: 2px 3px 3px 0px rgba(255,215,0,1); -moz-box-shadow: 5px 5px 5px 0px rgba(255,215,0,1); text-shadow: 2px 2px 1px rgba(0,0,0,0.7);  animation: pulse 2.5s infinite; /* Animazione continua */
			}

			@keyframes pulse {
 				 0%, 100% {
   				 transform: scale(1); /* Dimensione originale */
   				 box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Glow iniziale */
  			}
 			 50% {
   				 transform: scale(1.2); /* Leggera espansione */
   				 box-shadow: 0 0 10px rgba(255, 255, 255, 1); /* Glow più intenso */
  				}
			}
			
			.flag {width: 3%; margin: 0 auto; transition: all 0.5s linear;}

			.flag:hover {transform:translateY(-30px); transition: all 0.5s linear;}

			.cyberia {
				color: #fff; font-weight: 600;
				font-size: 1.3em; text-align: center;
				font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
			}

			.indirizzo {color: #fff; font-size: 1.6em; font-weight: 400;}
        }

        @media (min-width: 760px) {
            .menu-container {
                /* grid-template-columns: repeat(3, 1fr); */
				grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
				justify-content: center; /* ✅ centra le colonne nella griglia */
            }
			
			.tipo { font-weight: 700; font-size: 0.6vw; padding: 10px; display: block; color: #fff; text-transform: uppercase; text-align: center; margin: auto; width: 20%; height: auto; background-repeat: no-repeat; background-size: cover; margin-top: 32px; margin-bottom: 24px; border-radius: 10px; border: solid 2px gold; -webkit-box-shadow: 2px 3px 3px 0px rgba(255,215,0,1); -moz-box-shadow: 5px 5px 5px 0px rgba(255,215,0,1); text-shadow: 2px 2px 1px rgba(0,0,0,0.7);  animation: pulse 2.5s infinite; /* Animazione continua */
			}

			@keyframes pulse {
 				 0%, 100% {
   				 transform: scale(1); /* Dimensione originale */
   				 box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Glow iniziale */
  			}
 			 50% {
   				 transform: scale(1.2); /* Leggera espansione */
   				 box-shadow: 0 0 20px rgba(255, 255, 255, 1); /* Glow più intenso */
  				}
			}
		
			.flag {width: 70%; margin: 0 auto; transition: all 0.5s linear;}

			.flag:hover {transform:translateY(-30px); transition: all 0.5s linear;}

			.cyberia {
				color: #fff; font-weight: 600;
				font-size: 1.0em; text-align: center;
				font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, 'sans-serif';
			}

			.indirizzo {color: #fff; font-size: 1.2em; font-weight: 400;}

			
        }

		
	        .avviso {
            margin: 20px 0;
            font-size: 0.9em;
            color: #552239;
			font-weight: 700;
			background-color: #fff;
			padding: 5px;
        }

     	   .orario {
            margin: 20px 0;
            font-size: 0.9em;
            color: #fff;
			font-weight: 700;
        }

		.homelink {color: #fff; font-weight: 700; font-size: 27px;}
		
		a {text-decoration: none; color: #fff;}

		hr.linea {margin: auto; width: 100%;}


        @keyframes fall {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(calc(100vh + 2000px)); /* Caduta fino alla fine della pagina */
                opacity: 0.5;
            }
        }

		.pietanza { clear: both: float: none; display: block; width: 95%; max-width: 500px; margin: auto; margin-top: 8px; margin-bottom: 8px; height: auto; overflow: hidden; font-size: 0.8em; border-bottom: 1px solid #fff; color: #fff; font-family: "Montserrat";}

		.pietanza .prezzo { float: right; font-weight: bold; color: #fff; font-family: "Montserrat";}

		.pietanza .nome { float: left; color: #fff; font-family: "Montserrat"; text-transform: none;}
		
		details {color: #fff; padding-left: .5em; margin-top: .5em; margin-bottom: .5em; border: 1px solid #fff; border-radius: 4px; width: 40%;text-transform: none; font-style: italic; font-weight: 400;}
		summary {cursor: help; font-weight: 700; font-size: 0.9em; text-transform: none; font-style: italic; font-weight: 400;}
		details[open] {padding: .5em;  width: 80%;}
		details[open] summary {border-bottom: 1px solid #fff; margin-bottom: .5em;}

		#footer {
   			 color: #fff;
   			 text-align: center;
    		 height: 8vh;
  			 display: flex;
    		 align-items: center;
    		 justify-content: center;
		}

	#go_top { background: #333; color: #fff; font-weight: bold; font-size: 14px; position: fixed; bottom: 8px; right: 10px; padding-top: 6px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px;}
	#go_top a { text-decoration: none; color: #fff; }

	.noallergeni {
	color: #fff;
	}

  .category-button {
    background-color: #f9b300;
    color: #000;
    border: solid 3px gold;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    animation: pulse 2s infinite;
    margin: 10px;
  }

/*  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scaleX(3) scaleY(1.2);
    }
  }
*/
	.titolo {
  		background-color: rgba(46, 46, 46, 0.7);
 		 padding: 15px;
 		 line-height: 40px;
		  width: 300px; /* Larghezza fissa */
		  margin: 0 auto; /* Centrare orizzontalmente */
 		 text-align: center; /* Allineamento del testo */
 		 color: #fff; /* Colore del testo (opzionale) */
 		 border-radius: 10px; /* Angoli arrotondati (opzionale) */
 		 font-size: 18px; /* Dimensione del font (opzionale) */
}


.categorie {
	text-decoration: none;
	color: #b8860b; /* oro scuro */
	text-shadow: 0px 0px 20px #ffff00,
				 0px 0px 40px #ffea00,
				 0px 0px 80px #ffd700,
				 0px 0px 160px #ffcc00;
	font-size:20px;
}


.language-switcher {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

.language-switcher img {
  width: 45px;
  height: auto;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.language-switcher img:hover {
  opacity: 1;
}