/* ==========================================
   TOC Navigation Style
   Supporta sia il blocco TOC standard che il nuovo blocco personalizzato
   ========================================== */

/* ==========================================
   BLOCCO TOC STANDARD
   ========================================== */

.wp-block-table-of-contents {
    position: relative;
}

.wp-block-table-of-contents .toc-mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
    z-index: 100001;
}

.wp-block-table-of-contents .toc-mobile-toggle svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.wp-block-table-of-contents ol,
.wp-block-table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-block-table-of-contents li {
    margin: 0;
}

.wp-block-table-of-contents a {
    display: block;
    padding: 0.5rem 0.7rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

.wp-block-table-of-contents a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.wp-block-table-of-contents ol ol,
.wp-block-table-of-contents ul ul {
    padding-left: 1rem;
}

/* ==========================================
   BLOCCO TOC PERSONALIZZATO
   ========================================== */

.wp-block-toc-navigation-style {
    position: relative;
}

.wp-block-toc-navigation-style .wp-block-navigation__container {
    display: block;
}

.wp-block-toc-navigation-style .wp-block-navigation__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-block-toc-navigation-style .wp-block-navigation-item {
    margin: 0;
}

.wp-block-toc-navigation-style .wp-block-navigation-item__content {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

.wp-block-toc-navigation-style .wp-block-navigation-item__content:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.wp-block-toc-navigation-style .wp-block-navigation__submenu-container {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
}

/* Pulsante responsive del blocco TOC personalizzato - SPECIFICO SOLO PER TOC */
.wp-block-toc-navigation-style .wp-block-navigation__responsive-container-open {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
    z-index: 100001;
}

.wp-block-toc-navigation-style .wp-block-navigation__responsive-container-open svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Mostra sempre il pulsante quando overlay-menu è "always" */
.wp-block-toc-navigation-style[data-overlay-menu="always"] .wp-block-navigation__responsive-container-open {
    display: block;
}

.wp-block-toc-navigation-style[data-overlay-menu="always"] .wp-block-navigation__container {
    display: none;
}

.wp-block-toc-navigation-style[data-overlay-menu="always"].has-modal-open .wp-block-navigation__container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FF3821;
    z-index: 100000;
    overflow-y: auto;
    padding: 4rem 2rem 2rem;
    animation: slideIn 0.3s ease;
}

.wp-block-toc-navigation-style[data-overlay-menu="always"].has-modal-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    animation: fadeIn 0.3s ease;
}

.wp-block-toc-navigation-style[data-overlay-menu="always"].has-modal-open .wp-block-navigation__responsive-container-open {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100001;
}

.wp-block-toc-navigation-style[data-overlay-menu="always"].has-modal-open .wp-block-navigation-item__content {
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.1rem;
}

.wp-block-toc-navigation-style[data-overlay-menu="always"].has-modal-open .wp-block-navigation__submenu-container {
    padding-left: 1.5rem;
    position: static;
    background: transparent;
}

/* ==========================================
   MOBILE STYLES - TOC STANDARD
   ========================================== */

@media (max-width: 781px) {
    
    .wp-block-table-of-contents .toc-mobile-toggle {
        display: block;
    }
    
    .wp-block-table-of-contents ol,
    .wp-block-table-of-contents ul {
        display: none;
    }
    
    .wp-block-table-of-contents.toc-nav-open ol,
    .wp-block-table-of-contents.toc-nav-open ul,
    .wp-block-table-of-contents.toc-nav-open ol ol,
    .wp-block-table-of-contents.toc-nav-open ul ul,
    .wp-block-table-of-contents.toc-nav-open ol ul,
    .wp-block-table-of-contents.toc-nav-open ul ol {
        display: block !important;
    }
    
    .wp-block-table-of-contents.toc-nav-open > ol,
    .wp-block-table-of-contents.toc-nav-open > ul {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 100000;
        overflow-y: auto;
        padding: 4rem 2rem 2rem;
        margin: 0;
        animation: slideIn 0.3s ease;
    }
    
    .wp-block-table-of-contents.toc-nav-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        animation: fadeIn 0.3s ease;
    }
    
    .wp-block-table-of-contents.toc-nav-open .toc-mobile-toggle {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 100001;
    }
    
    .wp-block-table-of-contents.toc-nav-open .toc-hamburger {
        display: none;
    }
    
    .wp-block-table-of-contents .toc-close {
        display: none;
    }
    
    .wp-block-table-of-contents.toc-nav-open .toc-close {
        display: block;
    }
    
    .wp-block-table-of-contents.toc-nav-open ol a,
    .wp-block-table-of-contents.toc-nav-open ul a {
        padding: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 1.1rem;
        pointer-events: auto;
        cursor: pointer;
    }
    
    .wp-block-table-of-contents.toc-nav-open ol ol,
    .wp-block-table-of-contents.toc-nav-open ul ul,
    .wp-block-table-of-contents.toc-nav-open ol ul,
    .wp-block-table-of-contents.toc-nav-open ul ol {
        padding-left: 1.5rem;
        position: static;
        background: transparent;
    }
}

/* ==========================================
   MOBILE/RESPONSIVE - BLOCCO PERSONALIZZATO
   ========================================== */

@media (max-width: 781px) {
    
    .wp-block-toc-navigation-style.is-responsive .wp-block-navigation__responsive-container-open {
        display: block;
    }
    
    .wp-block-toc-navigation-style.is-responsive .wp-block-navigation__container {
        display: none;
    }
    
    .wp-block-toc-navigation-style.is-responsive.has-modal-open .wp-block-navigation__container {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FF3821;
        z-index: 100000;
        overflow-y: auto;
        padding: 4rem 2rem 2rem;
        animation: slideIn 0.3s ease;
    }
    
    .wp-block-toc-navigation-style.has-modal-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FF3821;
        z-index: 99999;
        animation: fadeIn 0.3s ease;
    }
    
    .wp-block-toc-navigation-style.has-modal-open .wp-block-navigation__responsive-container-open {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 100001;
    }
    
    .wp-block-toc-navigation-style.has-modal-open .wp-block-navigation-item__content {
        padding: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 1.1rem;
    }
    
    .wp-block-toc-navigation-style.has-modal-open .wp-block-navigation__submenu-container {
        padding-left: 1.5rem;
        position: static;
        background: transparent;
    }
}

/* ==========================================
   ANIMAZIONI
   ========================================== */

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Blocca lo scroll quando il menu è aperto - SPECIFICO PER TOC */
body.toc-nav-open,
body.has-modal-open {
    overflow: hidden;
}

/* ==========================================
   TEMA SCURO
   ========================================== */

@media (prefers-color-scheme: dark) {
    .wp-block-table-of-contents.toc-nav-open ol,
    .wp-block-table-of-contents.toc-nav-open ul,
    .wp-block-toc-navigation-style.has-modal-open .wp-block-navigation__container {
        background: #1a1a1a;
        color: #fff;
    }
    
    .wp-block-table-of-contents a:hover,
    .wp-block-toc-navigation-style .wp-block-navigation-item__content:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}