/* Stili CSS per il TOC */
#custom-toc-container {
    position: sticky;
    top: 20px;
    
    width: 100%; 
    margin-left: auto;
    margin-right: auto; 
    margin-bottom: 30px; 
    
    padding: 15px; 
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 100; 
    
    transition: background-color 0.3s ease-in-out;
}

/* Regole per sovrascrivere padding/margini dei genitori. */
.uk-margin-medium[property="text"],
.uk-margin-medium[property="text"] > p:first-child,
div.uk-margin-remove-last-child.custom {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    width: 100% !important; 
    display: block !important; 
}

/* Regole per lo sticky. */
.tm-page, 
main#tm-main, 
main#tm-main > div.uk-container, 
.uk-section, 
.uk-grid, 
.uk-width-2-3\@s, 
.uk-panel.uk-text-lead.uk-margin {
    overflow: visible !important; 
    transform: none !important;   
    position: static !important;  
}

/* Stile per il contenitore quando è sticky (UIkit aggiunge questa classe) */

#custom-toc-container h4 {
    margin-top: 0;
    font-size: 1.2em; 
    padding-bottom: 8px;
    margin-bottom: 10px;
    text-align: center;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding-left: 5px; 
    padding-right: 5px; 
}

#custom-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3;
    
    break-inside: avoid-column;
    -webkit-break-inside: avoid-column;
    page-break-inside: avoid; 

    counter-reset: toc-counter; 
}

#custom-toc-list li {
    margin-bottom: 3%; 
    box-sizing: border-box; 
    counter-increment: toc-counter; 
}

#custom-toc-list a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    display: block; 
    white-space: normal; 
    word-break: break-word; 
    line-height: 1.4; 
    box-sizing: border-box; 
    text-align: left; 
    padding-left: 0; 
}

/* Stile per la numerazione automatica */
#custom-toc-list li a::before {
    content: counter(toc-counter) ". "; 
    font-weight: bold; 
    margin-right: 5px; 
    min-width: 20px; 
    display: inline-block; 
    text-align: right; 
}

#custom-toc-list a:hover {
    color: #FFECB3; 
    text-decoration: underline;
}

/* Stili per l'indentazione dei vari livelli di heading (margin-left AZZERATI) */
#custom-toc-list li.h2-item a {
    font-weight: bold;
}

/* Media query per schermi più piccoli, per gestire il posizionamento e le colonne */
@media (max-width: 992px) {
    #custom-toc-container {
        position: static;
        width: auto;
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
        background-color: #000000;
    }
    #custom-toc-container h4 {
        white-space: normal; 
        font-size: 1.1em;
    }
    #custom-toc-list {
        column-count: 1; 
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-gap: 0; 
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
    }
    #custom-toc-list a {
        font-size: 1em; 
        margin-left: 0; 
    }
    #custom-toc-list li.h3-item a,
    #custom-toc-list li.h4-item a,
    #custom-toc-list li.h5-item a,
    #custom-toc-list li.h6-item a {
        margin-left: 0; 
    }
}

/* Media query aggiuntiva per schermi medi */
@media (max-width: 768px) {
    #custom-toc-list {
        column-count: 2; 
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-gap: 30px; 
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
    }
    #custom-toc-list a {
        font-size: 0.95em;
    }
}