/* Custom CSS for MII Chronicles — complementos do tema TFT */

/* Accent color para toggle de tema (usado pelo Gokarna JS) */
:root {
    --accent-color: #2563eb;
}

/* Smooth transitions for theme toggle */
.theme-toggle-icon {
    transition: all 0.3s ease;
}

/* TOC label */
.toc-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    margin: 0;
    position: fixed;
    top: 80px;
    z-index: 1;
    max-width: 240px;
    padding-right: 0.75rem;
}

/* TOC: largura fixa, espaçamento da scrollbar e indentação em cascata */
#toc {
    max-width: 240px;
    padding-right: 0.75rem;
    top: calc(80px + 2rem) !important;
    bottom: 120px !important;
}

#toc ul ul {
    padding-left: 0.75rem;
}

#toc ul ul ul {
    padding-left: 1.5rem;
}

/* TOC links: herdam cor do texto, hover/active usam mesmo azul dos demais links */
#toc ul li a {
    color: inherit;
    display: block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

#toc ul li a:visited {
    color: inherit;
}

#toc ul li a:hover,
#toc ul li a:active,
#toc ul li a.active {
    color: var(--sketch-accent) !important;
}

/* Avatar hover effect (não conflita com TFT) */
.avatar img:hover {
    transform: scale(1.05);
}

/* =============================================
   Mobile Responsive (≤ 820px)
   ============================================= */
@media only screen and (max-width: 820px) {

    /* Oculta ToC e label no mobile */
    .toc-label,
    #toc {
        display: none;
    }

    /* Reduz padding dos cards na lista e post individual */
    .list-posts,
    .post.container {
        padding: 1.25rem;
    }

    /* Reduz margem do post individual */
    .post.container {
        margin: 1.25rem auto;
    }

    /* Reduz tamanho do título do post */
    .post-header-section h1 {
        font-size: 1.5rem;
    }

    /* Reduz título da lista */
    .list-posts .list-title {
        font-size: 1.5rem;
    }

    /* Imagens responsivas */
    .post-content img {
        max-width: 100%;
        height: auto;
    }

    /* Touch targets maiores para navegação entre posts */
    .prev-link, .next-link {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Empilha navegação prev/next verticalmente */
    .sketch-nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .prev-link, .next-link {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Item de lista com touch target adequado */
    .post-item {
        padding: 0.5rem 0;
    }

    .post-item a {
        padding: 0.25rem 0;
        display: inline-block;
    }
}