/* 1. Importando uma fonte moderna do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    
    /* Essa transição é fundamental para que, ao clicarmos no botão de tema (JS), 
       a tela não mude de cor de forma brusca, mas sim com um "fade" suave */
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* 2. Efeitos para os Cards (Formação e Projetos) */
.card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Quando o mouse passar por cima do card, ele vai dar uma leve "levantada" */
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

/* 3. Destaque e animação para a foto de perfil no cabeçalho */
header img {
    border: 4px solid #dee2e6; /* Uma borda sutil ao redor da imagem */
    transition: transform 0.4s ease;
}

header img:hover {
    transform: scale(1.05); /* Pequeno zoom na foto */
}

/* 4. Garantindo que a transição de cor do tema afete todos os componentes suavemente */
.navbar, .btn, .list-group-item, .card-body, .bg-body-tertiary {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* 5. Ajuste de contraste dos botões de contato no Tema Escuro */
[data-bs-theme="dark"] .btn-outline-dark {
    color: #f8f9fa;
    border-color: #f8f9fa;
}

[data-bs-theme="dark"] .btn-outline-dark:hover {
    background-color: #f8f9fa;
    color: #212529;
}

[data-bs-theme="dark"] .btn-dark {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #f8f9fa;
}

[data-bs-theme="dark"] .btn-dark:hover {
    background-color: #e2e6ea;
}

/* 6. Suporte ao Tema Escuro para a versão Bulma (versao2.html) */
[data-bs-theme="dark"] .section, 
[data-bs-theme="dark"] .box, 
[data-bs-theme="dark"] .card, 
[data-bs-theme="dark"] .navbar {
    background-color: #212529 !important;
    border-color: #495057;
}

[data-bs-theme="dark"] .title, 
[data-bs-theme="dark"] .subtitle,
[data-bs-theme="dark"] .content,
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] strong {
    color: #f8f9fa !important;
}

/* Fazendo todos os cards terem a mesma altura */
.h-100 { height: 100%; }