/* === Mobile e accessibilità (27/10/2026) ===
   Collegato in pagina DOPO style.css. In cima le regole di accessibilità valide a ogni
   larghezza; in fondo, dentro la media query, quelle solo per telefono e tablet.
   Sopra 1024 px (63.99rem) la pagina resta com'era. */

/* 2.4.1 Salto di blocchi: link "Salta al contenuto", fuori schermo finché non riceve il focus */
.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -10rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: #000033;
	color: #ffffff;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	line-height: 1.25rem; /* con il padding fa 44 px di altezza */
	font-weight: bold;
}
.skip-link:focus {
	top: 0.5rem;
}

/* 2.4.7 Focus visibile: anello bianco + contorno blu notte, si vede sul chiaro e sullo scuro */
a:focus-visible,
button:focus-visible {
	outline: 0.1875rem solid #000033;
	outline-offset: 0.125rem;
	box-shadow: 0 0 0 0.125rem #ffffff;
}

/* 1.4.3 Contrasto: le voci del menu erano bianche su grigio #999999 (2,85:1, insufficiente).
   Con il grigio #767676 il rapporto è 4,54:1. Al passaggio resta il blu notte di style.css. */
.navmenu a {
	background-color: #767676;
}

/* Pulsante del menu: compare solo sotto i 1024 px e solo se il JavaScript è partito */
.menu-toggle {
	display: none;
}

@media (max-width: 63.99rem) {

	/* Testi leggibili: 16 px invece di 10-11 px */
	.main,
	.navmenu,
	.title,
	.title a,
	.title a:hover {
		font-size: 1rem;
	}

	/* Le tabelle di impaginazione si "sciolgono": i blocchi vanno uno sotto l'altro */
	.testata,
	.testata tbody,
	.impaginazione,
	.impaginazione table,
	.impaginazione tbody,
	.impaginazione tr,
	.impaginazione td {
		display: block;
		width: auto;
	}
	.testata,
	.impaginazione {
		max-width: 46.875rem; /* 750 px, la larghezza originale del sito */
		margin: 0 auto;
	}

	/* Testata: la striscia grigia resta una striscia; le 5 foto vanno a capo se non c'è posto */
	.testata tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.testata tr:first-child td {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
	.testata a,
	.testata img {
		display: block;
	}

	/* Immagini che si adattano alla larghezza */
	.testata img,
	.impaginazione img {
		max-width: 100%;
		height: auto;
	}

	/* Menu: voci alte almeno 44 px, larghe quanto lo schermo */
	.navmenu a {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: auto;
		height: auto;
		min-height: 2.75rem;
		padding: 0 0.75rem;
	}
	.navmenu li {
		text-indent: 0;
	}

	/* Pulsante "Menu" (lo attiva js/menu-mobile.js) */
	.js-menu .menu-toggle {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		box-sizing: border-box;
		width: 100%;
		min-height: 2.75rem;
		margin: 0 0 0.0625rem;
		padding: 0 0.75rem;
		border: 0;
		background: #000033;
		color: #ffffff;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 1rem;
		font-weight: bold;
		text-align: left;
		cursor: pointer;
	}
	/* icona a tre linee, solo decorativa */
	.js-menu .menu-toggle::before {
		content: "";
		width: 1.25rem;
		height: 0.125rem;
		background: currentColor;
		box-shadow: 0 -0.375rem 0 currentColor, 0 0.375rem 0 currentColor;
	}
	/* menu chiuso: le voci si nascondono solo se il JavaScript è partito */
	.js-menu .menu-toggle[aria-expanded="false"] + .navmenu #menu-principale {
		display: none;
	}

	/* Link-immagine (Facebook) e link "Credits": bersagli di almeno 44x44 px */
	.impaginazione a:has(> img),
	.title a,
	.title a:hover {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		vertical-align: middle;
	}
	.title a,
	.title a:hover {
		padding: 0 0.75rem;
	}
	/* icona Twitter allineata al link Facebook che le sta accanto */
	.colonna-sinistra img {
		vertical-align: middle;
	}

	/* Colonna centrale: un po' di margine ai lati, testo allineato a sinistra (più leggibile) */
	.impaginazione .colonna-centrale {
		padding: 0 0.625rem;
	}
	.colonna-centrale p[align="justify"] {
		text-align: left;
	}

	/* Colonna destra: i 4 riquadri affiancati se c'è posto, altrimenti uno sotto l'altro */
	.impaginazione .colonna-destra {
		display: flex;
		flex-wrap: wrap;
		gap: 0.625rem;
		padding: 0.625rem;
	}
	.colonna-destra table {
		flex: 1 1 10rem;
	}
}