/* --- RESET BASE E IMPOSTAZIONI GENERALI (PC) --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: monospace, Arial, sans-serif;
background-color: #000000;
color: #ff0000;
font-size: 20px; /* Testo grande e leggibile su PC */
word-break: break-all;
}

/* --- MENÙ LATERALE FISSO CON SCROLL (DESKTOP) --- */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 100vh;
background-color: #1e293b;
padding: 20px 10px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
overflow-y: auto; /* Scroll autonomo del menu se i link sono tanti */
}

.sidebar h2 {
color: #ffffff;
font-size: 1.2rem;
margin-bottom: 20px;
padding-left: 10px;
text-transform: uppercase;
}

.sidebar ul {
list-style-type: none;
}

.sidebar li {
margin-bottom: 8px;
}

/* Stile link del menù */
.sidebar a {
display: block;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar a:link,
.sidebar a:visited {
color: #38bdf8;
}

.sidebar a:hover {
background-color: #334155;
color: #ffffff;
}

.sidebar a:active,
.sidebar a.active {
background-color: #0284c7;
color: #ffffff;
}

/* --- CONTENUTO PRINCIPALE (DESKTOP) --- */
.content {
margin-left: 240px;
padding: 40px 20px;
}


/* ==========================================================
PROTEZIONE ANTI-SFONDAMENTO (Elementi, tabelle, codice)
========================================================== */

/* Immagini, video, canvas, svg e iframe fluidi (restano dentro lo schermo)
*/
img, video, canvas, svg, iframe {
max-width: 100%;
height: auto;
}

/* Tag pre (codice/testo preformattato): va a capo o scorre dentro il suo
box */
pre {
max-width: 100%;
overflow-x: auto; /* Scroll orizzontale circoscritto solo al blocco di
codice */
white-space: pre-wrap; /* Evita che il testo lunghissimo allarghi la pagina
*/
word-break: break-all;
padding: 10px;
background-color: #111;
border-radius: 4px;
}

/* Liste (elenchi puntati e numerati) ottimizzate */
ul, ol {
max-width: 100%;
padding-left: 20px; /* Rientro ridotto per non sbordare su mobile */
}

/* Tabelle responsive */
table {
max-width: 100%;
overflow-x: auto;
display: block;
}


/* ==========================================================
VERSIONE MOBILE / SMARTPHONE (<= 768px)
========================================================== */
@media (max-width: 768px) {
/* Riduce la dimensione del testo generale per adattarlo agli schermi
piccoli */
body {
font-size: 15px;
}

/* Il menù passa in alto, si dispone a blocchi ed è scrollabile */
.sidebar {
position: relative;
width: 100%;
height: auto;
max-height: 200px;
overflow-y: auto;
padding: 15px;
}

.sidebar h2 {
font-size: 1rem;
margin-bottom: 10px;
}

.sidebar ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.sidebar li {
margin-bottom: 0;
}

.sidebar a {
padding: 6px 10px;
font-size: 0.85rem;
}

/* Il contenuto torna a occupare tutta la larghezza dello schermo */
.content {
margin-left: 0;
padding: 20px 15px;
}
}