/* ========================================
   ROBOTICA DO ZERO AO EXPERT
   Custom Styles
   Sistema Compact Topics ATIA
   ======================================== */

/* ========================================
   GLOBAL STYLES
   ======================================== */

* {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================
   CUSTOM COLORS (Complementing Tailwind)
   ======================================== */

:root {
    --cor-fundamentos: #10b981;
    --cor-autonomo: #f59e0b;
    --cor-expert: #ef4444;
    --cor-robo-primary: #2196F3;
    --cor-robo-secondary: #FF9800;
}

/* ========================================
   TOPIC EXPANSION SYSTEM - COMPACT TOPICS
   ======================================== */

/* Container da lista de tópicos */
.topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Espaçamento ultra-compacto entre botões (2px) */
.space-y-0\.5 > * + * {
    margin-top: 0.125rem; /* 2px */
}

/* Botão do tópico */
.topic-button {
    cursor: pointer;
    transition: all 0.2s ease;
}

.topic-button:focus {
    outline: 2px solid var(--cor-robo-primary);
    outline-offset: 2px;
}

.topic-button:active {
    transform: scale(0.98);
}

/* Conteúdo expansível */
.topic-explanation {
    animation: slideDown 0.3s ease-out;
}

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

/* Classe para ocultar */
.hidden {
    display: none;
}

/* ========================================
   CHAPTER CARDS
   ======================================== */

.chapter-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chapter-card:hover {
    transform: translateY(-2px);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Ajustes para mobile */
    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-section p {
        font-size: 1rem;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Gradientes customizados */
.gradient-fundamentos {
    background: linear-gradient(135deg, var(--cor-fundamentos) 0%, #059669 100%);
}

.gradient-autonomo {
    background: linear-gradient(135deg, var(--cor-autonomo) 0%, #d97706 100%);
}

.gradient-expert {
    background: linear-gradient(135deg, var(--cor-expert) 0%, #dc2626 100%);
}

/* Text colors */
.text-fundamentos {
    color: var(--cor-fundamentos);
}

.text-autonomo {
    color: var(--cor-autonomo);
}

.text-expert {
    color: var(--cor-expert);
}

.text-robo-primary {
    color: var(--cor-robo-primary);
}

.text-robo-secondary {
    color: var(--cor-robo-secondary);
}

/* Border colors */
.border-fundamentos {
    border-color: var(--cor-fundamentos);
}

.border-autonomo {
    border-color: var(--cor-autonomo);
}

.border-expert {
    border-color: var(--cor-expert);
}

/* Background colors */
.bg-fundamentos {
    background-color: var(--cor-fundamentos);
}

.bg-autonomo {
    background-color: var(--cor-autonomo);
}

.bg-expert {
    background-color: var(--cor-expert);
}

.bg-robo-primary {
    background-color: var(--cor-robo-primary);
}

.bg-robo-secondary {
    background-color: var(--cor-robo-secondary);
}

/* Hover states */
.hover\:bg-green-600:hover {
    background-color: #059669;
}

.hover\:bg-yellow-600:hover {
    background-color: #d97706;
}

.hover\:bg-red-600:hover {
    background-color: #dc2626;
}

.hover\:text-robo-primary:hover {
    color: var(--cor-robo-primary);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    header, footer, .scroll-to-top {
        display: none;
    }

    .chapter-card {
        page-break-inside: avoid;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus visible para navegação por teclado */
*:focus-visible {
    outline: 2px solid var(--cor-robo-primary);
    outline-offset: 2px;
}

/* Reduced motion para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}