/* per impostare la larghezza dellla pagina compresa di padding, senza che vada in over-size*/
*, *::before, *::after {
    box-sizing: border-box;
}
/* LAYOUT COMUNE DI BASE */
/* Layout Generale per occupare tutta l'altezza */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
/* Fix per GLightbox: impedisce il salto laterale che sposta l'header */
body.glightbox-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}
/* Involucro del sito */	
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* consigliato per tenere il footer in fondo */
    font-family: Verdana, sans-serif;
}
/* Header generale */
.top-bar {
    height: 25px;  /* Forza l'altezza a restare fissa */
	min-height: 25px; 
	overflow: visible !important; /* IMPORTANTE: rimetti visible per evitare che si abbassi */
    box-sizing: border-box;
	width: 100%;
    display: flex;
    justify-content: space-between;
	line-height: 1; /* Allinea il testo verticalmente */
    align-items: center;
	font-family: Verdana, sans-serif;
	color: white;
    font-weight: bold;
    font-size: 12px;
	padding: 5px 8px 5px 2px;
}
    
/* Classi per elementi nella top-bar dell'header */
.brand { display: flex; align-items: center; }
.brand img { width: 25px; }
.brand span {
    margin-left: 4px; /* Sostituisce i vari   con uno spazio CSS pulito */
}
/* Classe per affiancare elementi (es. gallerie o box) */
.row-container {
    display: flex;          /* Attiva l'affiancamento */
    flex-direction: row;    /* Dispone gli elementi in linea */
    flex-wrap: wrap;        /* Se non ci stanno, vanno a capo automaticamente (fondamentale per cellulari) */
    justify-content: center; /* Centra gli elementi nella riga */
    align-items: center;    /* Allinea gli elementi verticalmente al centro tra loro */
    width: 100%;   			/* Occupa tutto lo spazio del Main */
	margin: 0;
	padding: 0;
    gap: 8px;              /* Crea un po' di spazio tra un elemento e l'altro senza usare padding complicati */
	border: 0;
}
.row-container a {
    display: flex;         /* Rende il link un contenitore flessibile */
    justify-content: center; 
    align-items: center;
}
/* Immagini senza spazi fantasma sotto, compatte al centro */
.img {
    display: block;        /* Toglie lo spazio "fantasma" sotto l'immagine */
    margin: 0;     /* Centra la foto e dà un po' di respiro sopra e sotto */
	max-width: 100%;  	/* Impedisce alla foto di uscire dai bordi sui cellulari */
	height: auto;          /* Mantiene le proporzioni corrette */
	vertical-align: middle; 
    border: 0; /* Qui puoi definire il bordo definitivo */
}
/* Immagini centrate all'interno della riga, automaticamente distanziate, non compatte al centro */
.img-center {
	display: block;        /* Toglie lo spazio "fantasma" sotto l'immagine */
	margin-left: auto;  /* per rendere immagine centrata nel div */
    margin-right: auto; /* per rendere immagine centrata nel div */
	margin: 0;     /* Centra la foto e dà un po' di respiro sopra e sotto */
	max-width: 100%;       /* Impedisce alla foto di uscire dai bordi sui cellulari */
    height: auto;          /* Mantiene le proporzioni corrette */
	vertical-align: middle; 
    border: 0; /* Qui puoi definire il bordo definitivo */
}
/* Specifica padding per alcune immagini */ 
.img-pad {
	padding: 5px;
}
/* Immagini link con bordino nero-grigio al passaggio del mouse; ingrandimento 1.05 */
    .img-bg {
        display: inline-block;     /* Fondamentale per far funzionare lo scale */
        max-width: 100%;
        height: auto;
        border: 2px solid black;   /* Bordo nero di base */
        transition: transform 0.3s ease, border-color 0.3s ease;
        vertical-align: middle;
    }
    /* Effetto quando passi il mouse sul link che contiene .img-bg */
    a:hover .img-bg {
        transform: scale(1.05);    /* Leggero ingrandimento */
        border-color: #aaaaaa;        /* Il bordo diventa blu */
    }
/* Immagini link con bordino bianco-grigio al passaggio del mouse; ingrandimento 1.03 */
    .img-wg {
        display: inline-block;     /* Fondamentale per far funzionare lo scale */
        max-width: 100%;
        height: auto;
        border: 2px solid white;   /* Bordo nero di base */
        transition: transform 0.3s ease, border-color 0.3s ease;
        vertical-align: middle;
    }
    /* Effetto quando passi il mouse sul link che contiene .img-wg */
    a:hover .img-wg {
        transform: scale(1.03);    /* Leggero ingrandimento */
        border-color: #dddddd;        /* Il bordo diventa blu */
    }
/* HR come meno spazio sopra e sotto */
hr { 
	margin-block-start: 5px; /* è lo spazio sopra */
    margin-block-end: 5px; /* è lo spazio sotto */
}
/* Footer */
.bottom-area {
    width: 100%;
    text-align: center;
	border: 0;
}
.webmaster {
    padding: 0;
	padding-bottom: 3px;
	font-size: 12px;
	font-weight: bold;
}
.copyright-bar {
    background-color: #333333;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size: 10px;
	color: white;
	font-weight: bold;
}

/* LAYOUT MODERN: SFONDO BLU INTENSO - HEADER GRIGIO */
/* Header Grigio */
.top-bar-mod {
    background-color: #333333;
}
/* Sfondo blu intenso  */ 
.bg-blue {
    background-color: #023d85; /* Il mio blu intenso */
    /* color: white;
    font-family: verdana; */
}
/* Main, parte centrale con padding*/
.main-content-mod {
    flex: 1; /* Spinge il footer in basso */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5px;
	border: 0; /* di default è sempre 0 */
	font-family: Verdana, Geneva, sans-serif;
	color: white;
	width: 100%;
}
/* Footer */
.wb-modern {
    color: #aaaaaa; 
}

/* LAYOUT PAGINA VIDEO */
.video-container { 
	text-align: center; /* Centra i testi (H1, H2, p) */
	width: 80%; 
	}
.video-container h1 { font-size: 2em; margin-bottom: 20px; }
.video-container video { 
	display: block;  
	width: 100%; 
	max-width: 720px; 
	height: auto; 
	margin: 0 auto;
	border: 2px solid black; 
}
/* Testi */
.text-vid h2 { font-size: 2em; margin: 0; margin-top: 15px; } /* signifca il doppio della misura base */
.text-vid p { font-size: 1em; margin: 0; font-weight: bold; }
/* Testo data */
.text-date { 
	margin-top: 15px !important; 
	margin-bottom: 15px !important;
	font-weight: bold !important; 
	font-size: 1.2em !important; 
}

/* LAYOUT OLD STYLE - SFONDO ARANCIONE - HEADER BLU */
/* Header Blu originale */
.top-bar-old {
	background-color: #333399;
}
/* Sfondo arancione */
.bg-old {
    background-color: #FF9922; /* il mio arancione */
    /* color: white;
    font-family: verdana; */
}
/* Main, parte centrale */
.main-content-old {
	flex: 1; /* Spinge il footer in basso */
	display: flex; /* elementi elastici */
	flex-direction: column; /* allineamento in colonna */
	align-items: center; /* centra tutto orizzontalmente, img e div */
	text-align: center; /* allinea al centro il testo */
	/* justify-content: center; centra verticalmente ma per ora non serve */
    margin: 0;
	border: 0;
    padding: 0;
	font-family: Verdana, Geneva, sans-serif;
    color: black;
    width: 100%; /* Occupa tutta la larghezza disponibile */
}

/* Footer */
.wb-black {
	color: black !important;
}
/* Font H2 titoli Comic Sans*/
h2.main-title {
	border: 0;
    margin: 0;
    padding: 0;
    font-size: 1.8em;
    font-family: "Comic Sans MS", "Comic Sans", cursive; /* Font principale e fallback */
    font-weight: bold;
	font-style: italic;
}

/* HR definita come da default ma con meno spazio sopra e sotto */
hr.old {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 5px; /* è lo spazio sopra */
    margin-block-end: 5px; /* è lo spazio sotto */
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset; /* Questo crea l'effetto "scavato" 3D */
    border-width: 1px;
    border-color: #dddddd; /* Grigio medio classico */
}

/* Testo Comic Sans nero 
.font-comic {
	font-family: Verdana, sans-serif;
    color: black;
} */

/* COLLEGAMENTI IPERTESTUALI */
/* link grigino-giallo */
.yegrelink, 
.yegrelink:visited, 
.yegrelink:active {
    font-weight: bold;
    font-size: 12px;
    color: #eeeeee;
    font-family: Verdana, sans-serif;
    text-decoration: none; }
.yegrelink:hover {
    color: #ffff22;
}
/* Link di default del sito old aggiornato */
.deflink, 			/* la virgola è obbligatoria */
.deflink:visited,
.deflink:active {  
    font-weight: bold;
    font-size: 12px;
    color: #315a8c;
    font-family: Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none; }
.deflink:hover {
    color: #09a2ec;
    text-decoration: none; /* Opzionale: assicura che non appaia la sottolineatura al passaggio */
}



/* link bianco-giallo - non ancora usato */
/*
/* link bianco-giallo ottimizzato */
/*
.yelink,
.yelink:visited, 
.yelink:active {
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none; }
.yelink:hover {
    color: #ffff22;
    text-decoration: none;
} */