/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #8f54a0 #ffffff;
    box-sizing: border-box;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #8f54a0;
    border-radius: 10px;
    border: 3px solid #ffffff;
}



body {
    margin: 0;
    padding: 0;
	font-family: "Bellota Text", sans-serif;
	color: #333;
	background-color: #f0f0f0;
	letter-spacing: 0.2px;
}

:root {
	--brand-dark: #6e2a3c;
	--brand-warm: #d67d07;
	--brand-warm-hover: #a15e06;
	--ink: #333;
	--paper: #ffffff;
	--soft: #f0f0f0;
	--accent: #8f54a0;
}

main {
	max-width: 1024px;
	width: 100%;
	margin: 0 auto;
	background-color: var(--paper);
	background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(4) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M37.657 10.343l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243m-20.686 0l-4.243 4.243m-2.828 2.828l-4.243 4.243m11.314 0l-4.243-4.243m-2.828-2.828l-4.243-4.243'  stroke-linecap='square' stroke-width='0.5' stroke='hsla(344, 38%, 92%, 1)' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linecap='square' stroke-width='0.5' stroke='hsla(34, 100%, 94%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
}

header {
    background-color: var(--soft);
    padding: 24px 20px;
    text-align: center;
	border-bottom: 1px solid #e1e1e1;
}

h1 {
    margin: 0;
}

h2 {
	background-color: var(--brand-warm);
	color: white;
	padding: 10px 14px;
	border-radius: 8px;
	letter-spacing: 0.4px;
	box-shadow: 0 6px 16px rgba(214, 125, 7, 0.25);
}

h3 {
	color: var(--brand-dark);
	font-weight: bolder;
	font-family: "Poetsen One", sans-serif;
}

nav {
    background-color: #333;
    color: #fff;
    padding: 12px 0;
    text-align: center;
	line-height: 35px;
	position: sticky;
	top: 0;
	z-index: 5;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin-right: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: var(--brand-warm);
	border-radius: 999px;
	margin-top: 5px !important;
	font-weight: bold;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

nav li:hover {
	background-color: var(--brand-warm-hover);
	box-shadow: 0 4px 10px rgba(161, 94, 6, 0.35);
	transform: translateY(-1px);
}

nav a {
    color: #fff;
    text-decoration: none;
}

.sezione {
    padding: 26px 24px;
}

.piatto {
    margin-bottom: 18px;
    padding: 14px 16px;
	border-left: 3px solid var(--brand-dark);
	padding-left: 14px;
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 10px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

.piatto h3 {
    margin: 0;
}

.prezzo {
    float: right;
	font-family: "Sriracha", cursive;
	font-weight: 400;
	font-style: normal;
	color: var(--brand-warm);
}

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

footer {
    background-color: var(--soft);
    text-align: center;
    padding: 10px;
	border-top: 1px solid #e1e1e1;
}

/* Media query per il responsive design */

@media (max-width: 768px) {
    nav ul {
        text-align: left;
        padding: 10px;
	}
	
    nav li {
        margin: 0 10px;
	}
	
    .sezione {
        padding: 10px;
	}
	
	.menunavigazione{
	overflow-x: scroll;
	white-space: nowrap;
	}
}


.btn {
  background: rgb(110,42,62);
  background: linear-gradient(90deg, rgba(110,42,62,1) 0%, rgba(110,42,60,1) 100%);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 8px;
  border: 0px;
  -webkit-box-shadow: 0px 2px 5px #666666;
  -moz-box-shadow: 0px 2px 5px #666666;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.18);
  font-family: "Poetsen One", sans-serif;
  color: #ffffff;
  font-size: 18px;
  padding: 8px 20px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  background: #8a4658;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.2);
}

.allergenith{
	background: rgb(110,42,62);
	color: white;
	text-align: left;
	font-weight: bolder;
	font-size: 22px;
	padding:5px;
}

.titoloallergene{
	font-family: sans-serif;
	font-weight: bold;
	padding:5px;
	border-bottom: 1px solid #a6a6a6;
}

.descrizioneallergene{
	font-family: sans-serif;
	padding:5px;
	border-bottom: 1px solid #a6a6a6;
}