/*
 * CENAE_ARTICLE_INDEX_V1_2
 *
 * Presentación editorial del Índice de artículos.
 * La lógica y el contenido permanecen en PHP/JS.
 */

.cenae-article-index {
    box-sizing: border-box;
    width: 100%;

    margin:
        2.25em
        0
        2.5em;

    padding:
        1.35em
        1.5em
        1.45em;

    border-top:
        1px solid
        rgba(52, 49, 45, .18);

    border-bottom:
        1px solid
        rgba(52, 49, 45, .18);

    background:
        rgba(52, 49, 45, .025);

    font-family: inherit;
    color: inherit;
}


/*
 * Título editorial.
 */
.cenae-article-index__title {
    display: flex;
    align-items: center;
    gap: .9em;

    margin:
        0
        0
        1em;

    font-size:
        1.05em;

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        .01em;
}

.cenae-article-index__title::after {
    content: "";

    flex:
        1
        1
        auto;

    height:
        1px;

    background:
        rgba(52, 49, 45, .18);
}


/*
 * Lista.
 */
.cenae-article-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
}


/*
 * Cada profundidad editorial produce una sangría.
 *
 * El mismo markup funciona en:
 * - Gutenberg: número + texto directamente dentro del LI.
 * - Frontend: número + texto dentro del enlace.
 */
.cenae-article-index__item {
    display: flex;

    margin:
        .24em
        0;

    padding-left:
        calc(
            var(
                --cenae-index-depth,
                0
            ) * 1.2em
        );

    line-height:
        1.5;
}


/*
 * En frontend el enlace ocupa toda la fila.
 * Se aumenta la especificidad para que no herede
 * el rojo general de los enlaces del artículo.
 */
.cenae-article-index
.cenae-article-index__item
> a {
    display: flex;

    width: 100%;

    color: inherit;

    text-decoration:
        none;
}


/*
 * Columna numérica estable.
 */
.cenae-article-index__number {
    flex:
        0
        0
        3.25em;

    min-width:
        0;

    font-weight:
        600;

    font-variant-numeric:
        tabular-nums;

    opacity:
        .72;
}


/*
 * Texto del encabezado.
 */
.cenae-article-index__text {
    flex:
        1
        1
        auto;

    min-width:
        0;
}


/*
 * Interacción sin convertir el índice
 * en una lista de enlaces visualmente dominante.
 */
.cenae-article-index
.cenae-article-index__item
> a:hover
.cenae-article-index__text {
    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}

.cenae-article-index
.cenae-article-index__item
> a:focus-visible {
    outline:
        2px solid
        currentColor;

    outline-offset:
        3px;
}


/*
 * Los anchors creados por el índice deben quedar
 * por debajo del header sticky.
 *
 * Header medido: 57 px.
 * Aire editorial adicional: 15 px.
 */
body.cenae-v4-native-post
.cenae-v4-native-content
.wp-block-heading[id] {
    scroll-margin-top:
        72px;
}


/*
 * Ajuste para pantallas estrechas.
 */
@media (max-width: 782px) {

    .cenae-article-index {
        margin:
            1.8em
            0
            2em;

        padding:
            1.15em
            1em
            1.2em;
    }

    .cenae-article-index__item {
        padding-left:
            calc(
                var(
                    --cenae-index-depth,
                    0
                ) * .8em
            );
    }

    .cenae-article-index__number {
        flex-basis:
            3em;
    }
}