:root {
    /*--font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,sans-serif;*/
	--font: "PT Sans Narrow", sans-serif;
	--font-menu: "Google Sans", sans-serif;
	--width-prima-mobile: 94%;
	--width-prima-tablet: 92%;
	--width-prima-laptop: 86%;
	--div-cat-width-mobile: calc(var(--width-prima-mobile)); /* = --width-prima-mobile */ 
	--div-cat-width-tablet: calc(var(--width-prima-tablet)*0.7);/* 0.7 is the width of .div-news-single */ 
	--div-cat-width-laptop: calc(var(--width-prima-laptop)*0.7); /* 0.7 is the width of .div-news-single */ 
	--div-cat-margin-mobile: calc((100% - var(--width-prima-mobile))/2);
	--div-cat-margin-tablet: calc((100% - var(--width-prima-tablet))/2);
	--div-cat-margin-laptop: calc((100% - var(--width-prima-laptop))/2);	
    --menu-height: ;    
    --color-prima: SlateBlue;
    --color-seconda: ;
    --color-terza: ;
    --color-quarta: ;
    --color-quinta: ;
    --color-sesta: ;
    --color-settima: ;
    --color-ottava: ;
    --color-nona: ;
    --color-decima: ;
}
/* - primo, secondo, terzo, quarto, quinto, sesto, settimo, ottavo, nono, decimo -*/


.hg {
  position: -webkit-sticky; /* Support for Safari */
  position: sticky;
  top: 0; /* Tells the menu to stick at the very top */
  z-index: 1000; /* Keeps it above other content */
}
/*
.navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}
*/

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

body {
    margin: 0;
    padding:0;
	font-family: var(--font);
}

.navbar {
	font-family: var(--font-menu);
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
  }
button:hover {cursor: pointer;}

.div-prima.logo {
	text-align:center;
	padding: 20px 0;
}
.div-prima.logo img{
	width:240px;
}
.div-footer {
	width:100%;
	text-align:center;
	padding: 30px 0;
	background-color:Aqua;
	margin:60px 0 0;
}
.div-footer img {
	width:240px;
}


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-prima);
  padding: 0rem 2rem;
  color: white;
  height:50px;
}

.nav-links {
  display: flex;
  list-style: none;
}
.div-footer-links {
	width: fit-content;
	margin: 56px auto;
	list-style: none;
	overflow:hidden;
}
.copyright {
	font-family: var(--font-menu);
}
.div-footer-links a{
	text-decoration:none; color:white; font-weight:bold; background-color:red;
	margin-bottom:8px; padding:10px; display:inline-block;
}
.div-footer-links a:hover {
	background-color:#b00;
}

.nav-links li { padding:0 12px; position: relative; }

.main-menu-link {line-height:50px}

.nav-links .dropdown-content li {
	  padding:20px;
  }

.nav-links a {
  color: white;
  text-decoration: none;
  transition: 0.3s;
  display:inline-block;
}

/* Dropdown Logic */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444;
  min-width: 160px;
  top: 100%;
  left: 0;
  z-index: 1;
}

.dropdown-content li { width: 100%; padding: 10px; }

/*.dropdown:hover .dropdown-content { display: block; }*/

/* Responsive Mobile Menu */
.menu-toggle { display: none; flex-direction: column; cursor: pointer; background: none; border: none; }
.bar { height: 3px; width: 25px; background-color: white; margin: 4px 0; }



.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 20; /* Ensure button stays on top */
}

.bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
  transition: all 0.3s ease-in-out; /* Smooth movement */
}

@media (max-width: 1023px) {
	.main-menu-link {line-height:50px;}	
	.menu-toggle { display: flex; }
	
	.navbar {
		position: -webkit-sticky; 
		position: sticky;
		top: 0;
		z-index: 1000;
	}
	
	.nav-links.active {
    display: flex;
    max-height: calc(100vh - 50px); /* Screen height minus navbar height */
    overflow-y: auto; /* Adds a scrollbar inside the menu if it's too long */
  }

	/* ANIMATION: Transform to X */
	/* Top bar rotates 45 degrees down */
	.menu-toggle.is-active .bar:nth-child(1) {
	transform: translateY(11px) rotate(45deg);
	}

	/* Middle bar disappears */
	.menu-toggle.is-active .bar:nth-child(2) {
	opacity: 0;
	}

	/* Bottom bar rotates 45 degrees up */
	.menu-toggle.is-active .bar:nth-child(3) {
	transform: translateY(-11px) rotate(-45deg);
	}

	/* Menu Visibility */
	.menu-toggle { display: flex; }

	/*.navbar {position: relative;}*/

	.nav-links {
	display: none; /* Hidden by default on mobile */
	flex-direction: column;
	width: 100%;
	position: absolute;
	top: 50px;
	left: 0;
	background-color: #333;
	}
	.nav-links.active { display: flex; }
	.nav-links li { padding: 5px 15px; text-align: center;}

	.dropdown-content { position: relative; background-color: #555; display:none;}
  
	.navbar {
		padding: 0rem 2rem;
	}
	
	.nav-links.active {
		display: flex;
	  }
}