/* --- 1. STRISCIA TRICOLORE E HEADER --- */
.md-header::before {
    content: "";
    display: block;
    height: 10px;
    width: 100%;
    background: linear-gradient(to right, 
        #008C45 33.3%, 
        #F4F5F0 33.3%, #F4F5F0 66.6%, 
        #CD212A 66.6%);
}

/* --- 2. ANNOUNCEMENT BAR --- */
.md-banner {
    background: linear-gradient(to right, 
        #008C45 33.3%, 
        #F4F5F0 33.3%, #F4F5F0 66.6%, 
        #CD212A 66.6%);
    color: #080808;
    text-align: center;
    font-weight: 500;
    padding: 3px 0; 
}

.md-banner a {
    color: #080808;
    text-decoration: underline;
    font-weight: bold;
}

/* --- 3. SEPARATORI NEL MENU --- */
.md-nav__link[href*="separator"] {
    display: none;
}

.md-nav__item:has(> a[href*="separator"]) {
    border-top: 1px solid var(--md-default-fg-color--lightest);
    margin: 10px 0;
}

/* --- 4. ALLINEAMENTO TESTO (JUSTIFY) --- */
.md-typeset {
    text-align: justify;
    hyphens: auto;
    word-break: break-word;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-typeset li,
.md-typeset blockquote {
    text-align: left;
    hyphens: none;
}

/* --- 5. DIAGRAMMI MERMAID (Ottimizzati) --- */
.mermaid {
    text-align: center;
    width: 100%;
}

.mermaid svg {
    font-size: 16px !important;
    max-width: 100% !important;
    height: auto !important;
}

/* --- 6. PERSONALIZZAZIONE COLORI TEMA SLATE --- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0c1322;          
  --md-default-bg-color--light: #131b2e;   
  --md-paper-bg-color: #0c1322;            
  --md-primary-fg-color: #070b14;          
  --md-primary-fg-color--light: #0c1322;   
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #070b14 !important;
}

[data-md-color-scheme="slate"] .md-search__inner {
  background-color: #0c1322 !important;
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #070b14 !important;
}