/*
	Consorzio PLUS — navigazione e ritocchi alle pagine interne.

	Caricato dopo main.css: sta in un file separato perché il compilatore SASS non è
	configurato in questa directory (vedi CLAUDE.md), e tenere queste regole fuori da
	main.css/main.scss evita che i due file vadano fuori sincrono.

	La barra è sticky dentro #main (la colonna destra). I margini negativi annullano il
	padding di #main così la barra ne copre l'intera larghezza: vanno quindi riallineati
	in ogni breakpoint in cui main.css cambia quel padding.
*/

	#nav {
		background-color: #ffffff;
		border-bottom: solid 2px #efefef;
		margin: -2em -4em 2em -4em;
		padding: 0.75em 4em;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1000;
	}

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

			#nav li {
				display: inline-block;
				margin: 0 1.75em 0 0;
				padding: 0;
			}

				#nav li:last-child {
					margin-right: 0;
				}

			#nav a {
				border-bottom: solid 2px transparent;
				color: #787878;
				display: inline-block;
				font-size: 0.9em;
				letter-spacing: 0.075em;
				padding: 0.25em 0;
				text-decoration: none;
				text-transform: uppercase;
			}

				#nav a:hover {
					border-bottom-color: #efefef;
					color: #2E6EA7;
				}

				#nav a.attiva {
					border-bottom-color: #2E6EA7;
					color: #2E6EA7;
				}

	/* La nav ha preso il posto del primo figlio di #main: il bordo va tolto alla sezione che segue. */
	#nav + section {
		border-top: 0 !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

/* Footer

	Colori invertiti rispetto al resto della pagina (fondo viola, testo bianco) per
	staccarlo visivamente dai contenuti.

	Sta FUORI da #main, come fratello: dentro si sarebbe fermato a 54em (il max-width
	di #main), lasciando una fascia bianca a destra. Da fuori arriva al bordo della
	finestra e basta scansare la sidebar con un margin-left, che segue la larghezza
	della sidebar stessa nei vari breakpoint (35% -> 30% -> 0). */

	/* Sticky footer: quando la pagina ha poco contenuto la colonna destra è più corta
	   della sidebar, e senza questo il footer resterebbe appeso a metà schermo con il
	   bianco sotto. Il body diventa una colonna flex alta almeno quanto la finestra e
	   #main si espande a occupare lo spazio che avanza, spingendo il footer in fondo.
	   Con contenuti lunghi non cambia nulla: il footer torna a seguire il testo.
	   La sidebar #header è position:fixed, quindi non entra nel calcolo — tranne sotto
	   i 980px, dove diventa relative e fa correttamente da prima riga della colonna. */

	body {
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		min-height: 100vh;
	}

	#main {
		-webkit-flex: 1 0 auto;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
	}

	#footer-contatti {
		background-color: #2E6EA7;
		color: rgba(255, 255, 255, 0.75);
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		margin-left: 35%;
		padding: 3em 4em;
	}

		#footer-contatti h2 {
			color: #ffffff;
			margin: 0 0 0.75em 0;
		}

		#footer-contatti p {
			margin: 0;
		}

		#footer-contatti strong,
		#footer-contatti b {
			color: #ffffff;
		}

		#footer-contatti a {
			border-bottom-color: rgba(255, 255, 255, 0.5);
			color: #ffffff;
		}

			#footer-contatti a:hover {
				border-bottom-color: transparent;
				color: rgba(255, 255, 255, 0.75);
			}

/* Intestazioni di sezione */

	/* Il template usa lo stesso peso per testo e grassetto (weight-bold: 400 in
	   assets/sass/libs/_vars.scss), quindi h3 e h4 si distinguono a stento. Il blu è
	   quello già in uso altrove nel sito. */
	#accreditamenti h3 {
		color: #2E6EA7;
		margin-bottom: 0.75em;
	}

/* Large — #main: padding 6em 3em 3em 3em */

	@media screen and (max-width: 1280px) {

		#nav {
			margin: -6em -3em 2em -3em;
			padding: 0.75em 3em;
		}

		#footer-contatti {
			margin-left: 30%;
			padding: 3em 3em;
		}

	}

/* Medium — #main: padding 6em 4em */

	@media screen and (max-width: 980px) {

		#nav {
			margin: -6em -4em 2em -4em;
			padding: 0.75em 4em;
		}

		#footer-contatti {
			margin-left: 0;
			padding: 3em 4em;
		}

	}

/* Small — #main: padding 2.25em 1.5em 0.25em 1.5em */

	@media screen and (max-width: 736px) {

		#nav {
			margin: -2.25em -1.5em 1.5em -1.5em;
			padding: 0.5em 1.5em;
		}

			#nav li {
				margin: 0 1.25em 0 0;
			}

			#nav a {
				font-size: 0.8em;
			}

		#footer-contatti {
			padding: 2.25em 1.5em;
		}

	}