/**
 * Dix - Table of Contents avec numérotation
 * Style Option B : cercles numérotés (01, 02...) pour H2, sous-numéros (1.1, 1.2...) pour H3
 * Utilise les variables CSS du theme Dix
 *
 * @package Dix
 * @since 1.0.0
 */

/* ==========================================================================
   BADGE TEMPS DE LECTURE - Style gélule/pill comme la catégorie
   ========================================================================== */

.ifp-toc-reading-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
}

.ifp-toc-reading-badge .ifp-toc-clock {
    flex-shrink: 0;
}

/* ==========================================================================
   TOC DESKTOP - Numérotation sticky à gauche
   Affiche uniquement sur grands écrans (>= 1200px)
   ========================================================================== */

.ifp-toc-timeline {
    display: none;
}

@media (min-width: 1200px) {
    .ifp-toc-timeline {
        display: block;
        position: fixed;
        /* Positionne par rapport au contenu : bord droit du TOC aligné avec bord gauche du contenu */
        left: calc((100vw - var(--content-width, 800px)) / 2 - 20px);
        transform: translateX(-100%);
        top: 200px;
        width: 280px;
        max-width: calc((100vw - var(--content-width, 800px)) / 2 - 40px);
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        z-index: 100;
        padding: 0 var(--spacing-4);
        transition: opacity 0.3s ease;
    }

    .ifp-toc-inner {
        padding: 0;
    }

    /* Temps de lecture - aligné à droite */
    .ifp-toc-reading-time {
        margin-bottom: var(--spacing-4);
        padding-bottom: var(--spacing-4);
        border-bottom: 1px solid var(--color-border);
        text-align: right;
    }

    /* Titre - aligné à droite */
    .ifp-toc-title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-4);
        text-align: right;
    }

    /* Liste */
    .ifp-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* Item */
    .ifp-toc-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        margin-bottom: var(--spacing-3);
        flex-direction: row-reverse; /* Numéro à droite, texte à gauche */
    }

    .ifp-toc-item:last-child {
        margin-bottom: 0;
    }

    /* Cercle numéroté pour H2 - même taille que le badge temps de lecture */
    .ifp-toc-number {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 var(--spacing-2);
        background: var(--color-bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        transition: all 0.3s ease;
    }

    /* Lien - aligné à droite */
    .ifp-toc-link {
        display: -webkit-box;
        flex: 1;
        font-size: var(--font-size-sm);
        line-height: 1.5;
        color: var(--color-text-secondary);
        text-decoration: none;
        text-align: right;
        transition: color 0.2s ease;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ifp-toc-link:hover {
        color: var(--color-primary);
    }

    /* Item actif */
    .ifp-toc-item.is-active .ifp-toc-number {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

    .ifp-toc-item.is-active .ifp-toc-link {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    /* Items passés (déjà lus) */
    .ifp-toc-item.is-passed .ifp-toc-number {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
        opacity: 0.6;
    }

    .ifp-toc-item.is-passed .ifp-toc-link {
        color: var(--color-text-muted);
    }

    /* H3 - sous-sections */
    .ifp-toc-item--h3 {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-bottom: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
    }

    /* H3 visibles quand le H2 parent est actif */
    .ifp-toc-item--h3.is-visible {
        max-height: 60px;
        opacity: 1;
        margin-bottom: var(--spacing-2);
    }

    .ifp-toc-item--h3 .ifp-toc-number {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
        border-radius: var(--radius-md);
        background: transparent;
        border: 1px solid var(--color-border);
    }

    .ifp-toc-item--h3 .ifp-toc-link {
        font-size: var(--font-size-xs);
    }

    .ifp-toc-item--h3.is-active .ifp-toc-number {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

    /* Scrollbar personnalisée */
    .ifp-toc-timeline::-webkit-scrollbar {
        width: 4px;
    }

    .ifp-toc-timeline::-webkit-scrollbar-track {
        background: transparent;
    }

    .ifp-toc-timeline::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 2px;
    }

    .ifp-toc-timeline::-webkit-scrollbar-thumb:hover {
        background: var(--color-text-muted);
    }

    /* Masquer le TOC mobile sur desktop */
    .ifp-toc-mobile {
        display: none;
    }
}

/* Écrans moyens - largeur augmentée */
@media (min-width: 1400px) {
    .ifp-toc-timeline {
        width: 320px;
    }
}

/* Écrans ultra-larges */
@media (min-width: 1600px) {
    .ifp-toc-timeline {
        width: 380px;
        max-width: calc((100vw - var(--content-width, 800px)) / 2 - 60px);
    }
}

/* ==========================================================================
   TOC MOBILE - Au début du contenu
   Affiche uniquement sur écrans < 1200px
   ========================================================================== */

@media (max-width: 1199px) {
    .ifp-toc-mobile {
        margin-bottom: var(--spacing-6);
        padding: var(--spacing-4);
        background-color: var(--color-bg-muted);
        border-radius: var(--radius-lg);
    }

    .ifp-toc-mobile .ifp-toc-inner {
        padding: 0;
    }

    /* Temps de lecture mobile */
    .ifp-toc-mobile .ifp-toc-reading-time {
        margin-bottom: var(--spacing-3);
        padding-bottom: var(--spacing-3);
        border-bottom: 1px solid var(--color-border);
    }

    .ifp-toc-mobile .ifp-toc-title {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-wider);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-3);
    }

    .ifp-toc-mobile .ifp-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ifp-toc-mobile .ifp-toc-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }

    .ifp-toc-mobile .ifp-toc-item:last-child {
        margin-bottom: 0;
    }

    /* Badge numéroté mobile - même taille que le badge temps de lecture */
    .ifp-toc-mobile .ifp-toc-number {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 var(--spacing-2);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        transition: all 0.3s ease;
    }

    /* Lien mobile */
    .ifp-toc-mobile .ifp-toc-link {
        display: block;
        flex: 1;
        font-size: var(--font-size-sm);
        line-height: 1.5;
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .ifp-toc-mobile .ifp-toc-link:hover {
        color: var(--color-primary);
    }

    /* Item actif mobile */
    .ifp-toc-mobile .ifp-toc-item.is-active .ifp-toc-number {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

    .ifp-toc-mobile .ifp-toc-item.is-active .ifp-toc-link {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    /* H3 indentés mobile */
    .ifp-toc-mobile .ifp-toc-item--h3 {
        padding-left: var(--spacing-6);
    }

    .ifp-toc-mobile .ifp-toc-item--h3 .ifp-toc-number {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
        border-radius: var(--radius-md);
        background: transparent;
        border: 1px solid var(--color-border);
    }

    .ifp-toc-mobile .ifp-toc-item--h3 .ifp-toc-link {
        font-size: var(--font-size-xs);
    }

    .ifp-toc-mobile .ifp-toc-item--h3.is-active .ifp-toc-number {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-inverse);
    }

    /* Items cachés par défaut */
    .ifp-toc-mobile .ifp-toc-item--hidden {
        display: none;
    }

    /* Afficher les items quand ouvert */
    .ifp-toc-mobile.is-open .ifp-toc-item--hidden {
        display: flex;
    }

    /* Bouton "Voir le sommaire complet" */
    .ifp-toc-more {
        display: block;
        width: 100%;
        margin-top: var(--spacing-3);
        padding: var(--spacing-2) var(--spacing-4);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        cursor: pointer;
        text-align: center;
        transition: border-color 0.2s ease, color 0.2s ease;
    }

    .ifp-toc-more:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* Masquer le bouton quand ouvert */
    .ifp-toc-mobile.is-open .ifp-toc-more {
        display: none;
    }
}

/* ==========================================================================
   PDF BUTTON IN TOC
   ========================================================================== */

.ifp-toc-pdf-btn {
    display: none;
}

@media (min-width: 1200px) {
    .ifp-toc-pdf-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);
        margin-top: var(--spacing-5);
        padding: var(--spacing-3) var(--spacing-4);
        width: 100%;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary);
        text-decoration: none;
        background: var(--color-bg);
        border: 2px solid var(--color-primary);
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
    }

    .ifp-toc-pdf-btn:hover {
        background: var(--color-primary);
        color: var(--color-text-inverse);
    }

    .ifp-toc-pdf-btn:hover svg {
        transform: translateY(2px);
    }

    .ifp-toc-pdf-btn svg {
        flex-shrink: 0;
        transition: transform var(--transition-fast);
    }
}