/* Stili per contenuti Markdown */

/* Contenitore principale */
.markdown-content {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Titoli */
.md-heading {
    font-family: 'Signika', sans-serif;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    font-weight: 600;
}

.md-heading-1 {
    font-size: 2.2em;
    color: #1a3c5e;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.3em;
}

.md-heading-2 {
    font-size: 1.8em;
    color: #2a5a8e;
}

h3.md-heading {
    font-size: 1.5em;
    color: #3a6a9e;
}

h4.md-heading {
    font-size: 1.2em;
    color: #4a7aae;
}

/* Paragrafi */
.markdown-content p {
    margin-bottom: 1.2em;
}

/* Link */
.md-link {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.md-link:hover {
    border-bottom-color: #0066cc;
}

/* Liste */
.md-list {
    margin-bottom: 1.2em;
    padding-left: 2em;
}

.md-list li {
    margin-bottom: 0.5em;
}

/* Immagini */
.md-image-container {
    margin: 1.5em 0;
    text-align: center;
    img {
        width: auto;
    }
}

.md-image {
    max-width: 100%;
    max-height: 500px; /* Altezza massima per le immagini */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: contain; /* Mantiene le proporzioni dell'immagine */
}

/* Responsive per immagini su dispositivi più piccoli */
@media screen and (max-width: 768px) {
    .md-image {
        max-height: 350px; /* Altezza massima ridotta per dispositivi mobili */
    }
}

/* Immagini con contenuto importante che necessitano di più spazio */
.md-image.md-image-large {
    max-height: 700px;
}

/* Immagini decorative o icone che possono essere più piccole */
.md-image.md-image-small {
    max-height: 250px;
}

/* Blocchi di codice */
.md-code-container {
    background-color: #f5f7fa;
    border-radius: 4px;
    margin: 1.5em 0;
    overflow: auto;
}

.md-code {
    display: block;
    padding: 1em;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
    color: #333;
}

/* Codice inline */
code:not(.md-code) {
    background-color: #f0f2f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

/* Citazioni */
.md-blockquote {
    margin: 1.5em 0;
    padding: 0.8em 1.2em;
    border-left: 4px solid #3a6a9e;
    background-color: #f9f9f9;
    font-style: italic;
    color: #555;
}

/* Linee orizzontali */
.markdown-content hr {
    height: 2px;
    background-color: #eee;
    border: none;
    margin: 2em 0;
}

/* Tabelle */
.md-table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
}

.md-table-header {
    background-color: #f0f2f5;
    font-weight: 600;
    text-align: left;
    padding: 0.8em;
    border-bottom: 2px solid #ddd;
}

.md-table-cell {
    padding: 0.8em;
    border-bottom: 1px solid #eee;
}

.md-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Evidenziazione */
.markdown-content strong {
    font-weight: 600;
    color: #2a5a8e;
}

.markdown-content em {
    font-style: italic;
}

/* Messaggio di errore */
.error-message {
    padding: 1em;
    background-color: #fff0f0;
    color: #d32f2f;
    border-left: 4px solid #d32f2f;
    margin: 1.5em 0;
}