/* ==================== ARTICLE MODULE STYLES ==================== */
/*
    Estilos específicos do módulo Article (Index, Section, Study).
    Complementa classes Tailwind com animações e comportamentos customizados.
    
    Páginas que usam este arquivo:
    - article-index.html: Listagem de artigos
    - article-section.html: Exibição de seção individual
    - article-study.html: Recursos de estudo (flashcards, chat)
    
    Organização:
    1. Card animations (Article Index)
    2. Prose/typography (Article Section)
    3. Navigation components (breadcrumb, sidebar, mobile menu)
    4. Study resources (Article Study)
    
    Nota: Maioria dos estilos usa Tailwind diretamente no HTML.
    Este arquivo contém apenas o que não pode ser feito com Tailwind utilities.
*/

/* ==================== ARTICLE INDEX: CARD ANIMATIONS ==================== */
/*
    Animação de Entrada dos Cards
    
    Aplicada a: Todos os <article> dentro de .article-index-page
    Gerenciada por: article.js (Intersection Observer)
    
    Estado inicial (antes de .animated):
    - opacity: 0 → Invisível
    - transform: translateY(20px) → 20px abaixo da posição final
    
    Estado final (após .animated):
    - opacity: 1 → Totalmente visível
    - transform: translateY(0) → Posição original
    
    Efeito visual:
    - Cards "aparecem" suavemente ao entrar na viewport
    - Efeito staggered (cada card com delay diferente)
*/
.article-index-page article {
    transition: transform 0.3s ease, opacity 0.6s ease-out, transform 0.6s ease-out;
    opacity: 0; /* Estado inicial: invisível */
    transform: translateY(20px); /* Estado inicial: 20px abaixo */
}

/*
    Efeito Hover em Cards
    
    Hover: Card "flutua" 4px para cima
    !important: Sobrescreve transform da animação (garante que hover funcione após .animated)
    
    Combinado com transition-shadow do Tailwind:
    - shadow-md (padrão) → shadow-xl (hover)
*/
.article-index-page article:hover {
    transform: translateY(-4px) !important; /* Elevação no hover */
}

/*
    Classe Aplicada via JavaScript
    
    Adicionada quando card entra na viewport (Intersection Observer).
    Dispara transição de opacity e transform.
*/
.article-index-page article.animated {
    opacity: 1; /* Estado final: visível */
    transform: translateY(0); /* Estado final: posição original */
}

/* ==================== ARTICLE INDEX: STAGGERED DELAYS ==================== */
/*
    Delays Escalonados para Efeito Sequencial
    
    Cards aparecem um após o outro (0.1s de intervalo).
    Suporta até 10 cards (expandir se necessário).
    
    Efeito visual:
    - Card 1 aparece em 0.1s
    - Card 2 aparece em 0.2s
    - Card 3 aparece em 0.3s
    - ...
    
    Limitação: Aplica-se apenas aos primeiros 10 cards.
    Cards além do 10º aparecem sem delay (ainda animam, mas simultaneamente).
*/
.article-index-page article:nth-child(1) { transition-delay: 0.1s; }
.article-index-page article:nth-child(2) { transition-delay: 0.2s; }
.article-index-page article:nth-child(3) { transition-delay: 0.3s; }
.article-index-page article:nth-child(4) { transition-delay: 0.4s; }
.article-index-page article:nth-child(5) { transition-delay: 0.5s; }
.article-index-page article:nth-child(6) { transition-delay: 0.6s; }
.article-index-page article:nth-child(7) { transition-delay: 0.7s; }
.article-index-page article:nth-child(8) { transition-delay: 0.8s; }
.article-index-page article:nth-child(9) { transition-delay: 0.9s; }
.article-index-page article:nth-child(10) { transition-delay: 1.0s; }

/* ==================== ARTICLE SECTION: PROSE/TYPOGRAPHY ==================== */
/*
    Estilos de Tipografia para Conteúdo Markdown
    
    Aplicado em: <article class="prose"> em article-section.html
    
    Markdown renderizado (CommonMark → HTML) usa elementos padrão (h1, h2, p, code, etc).
    Tailwind Typography (@tailwindcss/typography) fornece base, mas customizamos:
    - Cores consistentes com design system
    - Tamanhos responsivos
    - Espaçamentos ajustados
    - Code blocks com syntax highlight placeholder
*/

.article-section-page .prose {
    color: #374151; /* text-gray-700 */
}

/* Headings: Hierarquia visual clara */
.article-section-page .prose h1 {
    color: #111827; /* text-gray-900 */
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.875rem; /* text-3xl */
}

@media (min-width: 640px) {
    .article-section-page .prose h1 {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

.article-section-page .prose h2 {
    color: #1f2937; /* text-gray-800 */
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb; /* border-gray-200 */
    font-size: 1.5rem; /* text-2xl */
}

@media (min-width: 640px) {
    .article-section-page .prose h2 {
        font-size: 1.875rem; /* sm:text-3xl */
    }
}

.article-section-page .prose h3 {
    color: #374151; /* text-gray-700 */
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem; /* text-xl */
}

@media (min-width: 640px) {
    .article-section-page .prose h3 {
        font-size: 1.5rem; /* sm:text-2xl */
    }
}

.article-section-page .prose h4 {
    color: #4b5563; /* text-gray-600 */
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.125rem; /* text-lg */
}

/* Text content */
.article-section-page .prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.article-section-page .prose ul,
.article-section-page .prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.article-section-page .prose li {
    margin-bottom: 0.5rem;
}

/* Code: Inline e blocks */
.article-section-page .prose code {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #be185d; /* text-pink-700 */
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
    word-wrap: break-word;
}

.article-section-page .prose pre {
    background-color: #1f2937; /* bg-gray-800 */
    color: #f9fafb; /* text-gray-50 */
    padding: 0.75rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

@media (min-width: 640px) {
    .article-section-page .prose pre {
        padding: 1rem;
        font-size: 1rem;
    }
}

.article-section-page .prose pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Blockquotes */
.article-section-page .prose blockquote {
    border-left: 4px solid #8b5cf6; /* border-primary */
    padding-left: 1rem;
    margin-left: 0;
    font-style: italic;
    color: #6b7280; /* text-gray-500 */
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

/* Text emphasis */
.article-section-page .prose strong {
    color: #111827; /* text-gray-900 */
    font-weight: 600;
}

.article-section-page .prose em {
    font-style: italic;
    color: #4b5563; /* text-gray-600 */
}

.article-section-page .prose a {
    color: #8b5cf6; /* text-primary */
    text-decoration: underline;
    transition: color 0.2s;
}

.article-section-page .prose a:hover {
    color: #7c3aed; /* hover:text-purple-700 */
}

/* ==================== ARTICLE SECTION: NAVIGATION ==================== */
/*
    Breadcrumb Navigation
    
    Usado em: article-section.html, article-study.html
    Efeito: Links mudam de cor no hover
*/
.breadcrumb-nav a:hover {
    color: #8b5cf6; /* hover:text-primary */
}

/*
    Sticky Sidebar (Desktop)
    
    Aplicado em: aside em article-section.html/article-study.html
    Limita altura para permitir scroll interno sem esconder navegação
*/
.article-section-page aside > div,
.article-study-page aside > div {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

/* Remove sticky em mobile (sidebar vira dropdown) */
@media (max-width: 1024px) {
    .article-section-page aside,
    .article-study-page aside {
        position: relative;
    }
    
    .article-section-page aside > div,
    .article-study-page aside > div {
        position: relative;
        max-height: none;
    }
}

/*
    Mobile Sections Menu
    
    Dropdown fixo no topo com lista de seções.
    Animação de slide-down ao abrir.
*/
#mobile-sections-icon {
    transition: transform 0.3s ease;
}

#mobile-sections-icon.rotate-180 {
    transform: rotate(180deg);
}

#mobile-sections-menu {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth transitions para links de navegação */
.article-section-page aside nav a,
.article-study-page aside nav a {
    transition: all 0.2s ease;
}

/* ==================== ARTICLE STUDY: RESOURCES ==================== */
/*
    Animações de Entrada para Recursos de Estudo
    
    Usado em: article-study.html
    - .flashcards-section: Card de flashcards
    - .chat-llm-section: Card de chat com IA
    
    Efeito: Fade-in + slide-up com delays diferentes
*/
.flashcards-section {
    animation: fadeInUp 0.6s ease-out;
}

.chat-llm-section {
    animation: fadeInUp 0.8s ease-out; /* Delay maior para sequência */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}