@charset "UTF-8";

/* Font self-hosted (solo Gudea: e' l'unico Google font usato nel CSS).
   Il file e' in assets/fonts/ ed e' precaricato in <head> (rel=preload) da
   partials/head.php -> pronto al primo paint, nessuno scatto e nessuna
   dipendenza dai tempi di Google. Niente piu' @import http (mixed content). */
@font-face {
	font-family: 'Gudea';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gudea-400.woff2') format('woff2');
}

/* Testo per SEO/accessibilita': presente nel DOM (letto da Google e screen reader)
   ma invisibile e senza ingombro nel layout. NON usare display:none. */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link (partials/layout-top.php): fuori schermo finche' non riceve il focus da
   tastiera, poi compare in alto. Fuori schermo con position, NON con display:none:
   un elemento display:none non e' focusabile e il link non servirebbe a niente. */
.skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 10;
	font-family: 'Gudea', sans-serif;
	font-size: 14px;
	padding: 10px 16px;
	background-color: #FFF;
	border: 2px solid #881F08;
	color: #881F08;
}
.skip-link:focus {
	left: 8px;
}

/* Focus da tastiera sempre visibile: i link del sito non sono sottolineati e si
   distinguono solo per colore, quindi senza outline non si capisce dove sei.
   :focus-visible = solo navigazione da tastiera, il click col mouse resta pulito. */
a:focus-visible,
area:focus-visible {
	outline: 2px solid #881F08;
	outline-offset: 2px;
	text-decoration: underline;
}
/* Bersaglio dello skip link: prende il focus (tabindex="-1") solo per spostare il
   punto di lettura di screen reader e tastiera. Non e' interattivo: niente outline. */
[tabindex="-1"]:focus {
	outline: none;
}

/* Logo di home/contatti (partials/header.php): altezza fissa, larghezza in proporzione. */
.logo {
	width: auto;
	height: 93px;
}

/* Menu nav semantico: <nav class="contenitore-menu"><ul><li>. L'ul non genera box
   (display:contents), cosi' i <li> floattano come i vecchi <div> -> layout invariato. */
.contenitore-menu ul {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}

.contenitore-menu {
	background-color: #FFF;
	height: 20px;
	/*width: 610px;*//*netgloo*/
	padding-top: 8px;
	padding-bottom: 4px;
	margin: 15px auto;
	/*padding-left: 320px;*//*netgloo*/
	display: inline-block; /*netgloo*/
}
/* Voce di menu: base + due modificatori.
   .menu-voce--home  = prima voce (niente divisore a sinistra, padding suo, sempre rossa)
   .menu-voce--attiva = pagina corrente (solo il colore cambia) */
.menu-voce {
	font-family: 'Gudea', sans-serif;
	font-size: 13px;
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #B4AA9E;
	text-align: center;
	width: auto;
	padding-bottom: 0;
}

.menu-voce--home {
	padding-left: 12px;
	padding-right: 10px;
	border-left: 0;
	color: #881F08;
}

.menu-voce--attiva {
	color: #881F08;
}

body {
	padding: 0;
	margin: 0 auto;
	text-align: center;
}
.contenitore-home {
	padding: 0;
	width: 950px;
	margin: 20px auto 0;
}
.contenitore-schede {
	padding: 0;
	width: 980px;
	margin: 20px auto 0;
}
.contenitore-titolo {
	width: 980px;
	height: 100px;
}
.colonna-titolo {
	padding: 0;
	float: left;
	width: 370px;
	margin: 30px 0 0;
}
.colonna-cartina {
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
	height: auto;
}
.colonna-back {
	margin: 0;
	float: right;
	width: auto;
	height: auto;
	padding: 40px 0 0;
}
.contenitore-titolo h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 19px;
	color: #911325;
	margin: 0;
	padding: 0;
	text-align: center;
}
/* Il produttore e' il sottotitolo dell'h1, non una sezione: e' un <p>, non un <h2>.
   Cosi' le sezioni della scheda (LA STORIA / IL TERRITORIO / IL PRODOTTO) sono h2 e
   dipendono dal prodotto (h1), non dal produttore. Regole identiche al vecchio h2. */
.contenitore-titolo p.produttore {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	color: #333;
	margin: 0;
	padding: 0;
	text-align: center;
	font-weight: normal;
	line-height: normal; /* annulla il line-height:16px della regola globale p */
}
.colonna-sinistra {
	padding: 0;
	float: left;
	height: auto;
	width: 435px;
	margin: 0;
}
.colonna-destra .immagine {
	padding-top: 10px;
	padding-bottom: 10px;
}
.colonna-destra .spazio-sotto {
	padding-top: 0;
	padding-bottom: 10px;
}

/* Spaziature delle immagini nelle schede: prima erano style="" inline, ripetuti a mano
   scheda per scheda. Si combinano: class="sopra-30 sotto-10". I valori sono quelli che
   c'erano (non normalizzati): la resa non cambia. */
.colonna-destra .sopra-10 { margin-top: 10px; }
.colonna-destra .sopra-12 { margin-top: 12px; }
.colonna-destra .sopra-15 { margin-top: 15px; }
.colonna-destra .sopra-20 { margin-top: 20px; }
.colonna-destra .sopra-30 { margin-top: 30px; }
.colonna-destra .sopra-40 { margin-top: 40px; }
.colonna-destra .sopra-60 { margin-top: 60px; }
.colonna-destra .sotto-10 { margin-bottom: 10px; }
.colonna-destra .sotto-15 { margin-bottom: 15px; }
.colonna-destra .sotto-25 { margin-bottom: 25px; }
.colonna-destra .sotto-30 { margin-bottom: 30px; }

/* Divetti vuoti usati come stacco verticale fra due blocchi (erano height:3px inline). */
.colonna-destra .alto-3 { height: 3px; }

/* Casi singoli, uno per scheda. */
.colonna-destra .centrata { text-align: center; }        /* annulla il justify di .colonna-destra p */
.colonna-destra .foto-90 { max-width: 90%; }             /* prosciutto-crudo-36-mesi-maiale-nero */
.colonna-destra .fondo-rosso { background-color: #990000; } /* speck: il PNG e' trasparente */
/* Le due vaschette affiancate di salumi-della-valle-d-aosta: stessa .immagine, ma una
   allineata a sinistra e una a destra, senza il padding che le separerebbe. */
.colonna-destra .immagine-sx { text-align: left; padding-bottom: 0; }
.colonna-destra .immagine-dx { text-align: right; padding-top: 0; }
.colonna-destra {
	float: right;
	width: 522px;
}
.colonna-destra p {
	font-family: "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: normal;
	color: #000;
	text-align: justify;
}
.colonna-destra h2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	font-weight: normal;
	color: #000;
	text-align: left;
	margin: 0;
	padding: 0;
}
/* Stesso box di un <h3> di colonna, senza esserlo. Dove il markup usava un <h3> solo
   per spaziare (<h3>&nbsp;</h3>) o per contenere un'immagine: heading vuoti o senza
   testo confondono Google e gli screen reader, ma la spaziatura va conservata. */
.colonna-destra .spaziatore,
.colonna-destra .blocco-immagine {
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	font-weight: normal;
	color: #000;
	text-align: left;
	margin: 0;
	padding: 0;
}
.colonna01 {
	margin: 0;
	padding: 0;
	width: 230px;
	float: left;
}
.colonna02 {
	margin: 0;
	padding: 0;
	width: 280px;
	float: right;
}
.colonna01_280 {
	margin: 0;
	padding: 0;
	width: 280px;
	float: left;
}
.colonna02_230 {
	margin: 0;
	padding: 0;
	width: 230px;
	float: right;
}
.colonna01_256 {
	margin: 0;
	padding: 0;
	width: 252px;
	float: left;
}
.colonna02_256 {
	margin: 0;
	padding: 0;
	width: 252px;
	float: right;
}
.indirizzo {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 35px;
	font-style: normal; /* e' un <address>: annulla il corsivo di default del browser */
}
.indirizzo p.contatti {
	font-family: 'Gudea', sans-serif;
	font-size: 14px;
	color: #333;
}
p  {
	font-family: 'Gudea', sans-serif;
	font-size: 12px;
	color: #333;
	letter-spacing: normal;
	font-weight: normal;
	text-align: center;
	padding: 0;
	margin: 0 0 3px;
	line-height: 16px;
	font-style: normal;
}
/* Riga email dentro <address> (partials/footer.php). */
.email {
	letter-spacing: 0;
	text-align: center;
}
a:hover {
	color: #86264F;
	text-decoration: none;
}
a.contatti {
	text-decoration: none;
	color: #881F08;
}
a {
	text-decoration: none;
	color: #333;
}

/* Pagina 404 (partials/404.php). Il messaggio e' l'unico contenuto della pagina,
   quindi va piu' grande del testo delle schede (che e' 12px, tarato su due colonne
   strette). Non e' un <address>: quello sono i contatti, non un messaggio d'errore. */
.messaggio-404 {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
}
.messaggio-404 p {
	font-family: 'Gudea', sans-serif;
	font-size: 22px;
	line-height: 1.6;
	color: #333;
}
.messaggio-404 a {
	color: #881F08;
}
.messaggio-404 a:hover {
	color: #86264F;
}