/* -------------------------
   Tipografia di base
-------------------------- */

html {
    font-size: 18px;
}

body {
    max-width: clamp(320px, 60ch, 640px);
    width: 100%;
    margin: auto;
    padding: 1.5rem;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #000;    
/* Barre laterali */
    box-shadow:
        -1px 0 0 #555,   /* barra sinistra */
         1px 0 0 #555;   /* barra destra */
}

/* -------------------------
   Titoli
-------------------------- */

h1, h2, h3 {
    color: #228b22;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
}

h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h2 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }

.titolo {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    margin: 0;
}

hr {
    border: 0;
    border-top: 1px solid #b8b2a6;
    margin: 1rem auto;
}

/* -------------------------
   Paragrafi e liste
-------------------------- */
p {
    margin: 0;
}

ul, ol {
    list-style-position: inside;
    margin: 0.5em 0;
    padding-left: 1.2rem;
}

/* -------------------------
   Immagini
-------------------------- */

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
}

/* -------------------------
   Citazioni
-------------------------- */

blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #111;
}

/* -------------------------
   Codice
-------------------------- */

pre, code {
    font-family: "DejaVu Sans Mono", monospace;
}

pre {
    background: #f5f5f5;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
}

code {
    background: #eee;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* -------------------------
   Link
-------------------------- */

a {
    color: #0055cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* -------------------------
   Tabelle (semplici e adattive)
-------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

th, td {
    border-bottom: 1px solid #ddd;
    padding: 0.6rem;
    text-align: left;
}

thead th {
    border-bottom: 2px solid #000;
}