/**
 * ============================================================================
 * SITE IMEP - ARQUIVO DE ESTILOS CSS
 * ============================================================================
 * 
 * Arquivo: style.css
 * Descrição: Contém todos os estilos customizados do Site IMEP.
 *            Trabalha em conjunto com Bootstrap 5 para criar um design
 *            responsivo, moderno e profissional.
 * 
 * Autor: Lailson Azevedo
 * Data: Dezembro de 2025
 * Versão: 1.0
 * 
 * ESTRUTURA DO ARQUIVO:
 * 1. Variáveis CSS (cores, espaçamentos)
 * 2. Reset e estilos globais
 * 3. Header (cabeçalho)
 * 4. Banner de busca
 * 5. Abas de categoria
 * 6. Formulário de busca
 * 7. Seção de resultados
 * 8. Cards de cursos
 * 9. Responsividade (media queries)
 * 10. Utilitários
 * 
 * ============================================================================
 */

/* ============================================================================
   SEÇÃO 1: VARIÁVEIS CSS (CUSTOM PROPERTIES)
   ============================================================================
   
   As variáveis CSS permitem reutilizar valores em todo o arquivo.
   Para alterar a cor primária, por exemplo, mude apenas aqui e
   todas as referências serão atualizadas automaticamente.
   
   Uso: var(--primary-color)
*/

:root {
    /* Cores principais do IMEP */
    --primary-color: #FE760F;      /* Laranja principal (IMEP) */
    --secondary-color: #FF5722;    /* Laranja secundário (para botões/destaques) */
    --hover-color: #FFD180;        /* Cor de destaque para hover */
    
    /* Cores de contraste */
    --success-color: #28a745;      /* Verde para preços/sucesso */
    --danger-color: #dc3545;       /* Vermelho para erros */
    
    /* Cores de fundo */
    --background-light: #f8f9fa;   /* Cinza claro para fundo geral */
    --background-white: #ffffff;   /* Branco para cards */
    
    /* Cores de texto */
    --text-dark: #333;             /* Texto escuro principal */
    --text-light: #fff;            /* Texto claro */
    --text-muted: #666666;         /* Texto cinzento (secundário) */
    
    /* Cores de borda */
    --card-border: #e9ecef;        /* Borda clara para cards */
    
    /* Espaçamentos (opcional, para manutenção futura) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

/* ============================================================================
   SEÇÃO 2: RESET E ESTILOS GLOBAIS
   ============================================================================
   
   Remove estilos padrão do navegador e define estilos base para
   todos os elementos.
*/

* {
    /* Remove margens e preenchimentos padrão */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Estilos base para todos os elementos */
body {
    /* Cor de fundo geral */
    background-color: var(--background-light);
    
    /* Cor do texto principal */
    color: var(--text-dark);
    
    /* Fonte padrão: Roboto (com fallback para fontes sem serifa) */
    font-family: 'Roboto', sans-serif;
    
    /* Altura de linha para melhor legibilidade */
    line-height: 1.6;
}


/* ============================================================================
   SEÇÃO 3: HEADER (CABEÇALHO)
   ============================================================================
   
   Estilos do cabeçalho que contém o logo do IMEP.
*/

header {
    /* Fundo branco para contraste */
    background-color: var(--background-white);
    
    /* Espaçamento interno */
    padding: 20px 0;
    
    /* Sombra sutil para separação visual */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    
    /* Fixar no topo ao fazer scroll */
    position: sticky;
    top: 0;
    
    /* Garantir que fique acima de outros elementos */
    z-index: 100;
}

/* Estilo do logo */
.logo {
    /* Tamanho da fonte */
    font-size: 28px;
    
    /* Peso da fonte (negrito) */
    font-weight: bold;
    
    /* Cor do logo (laranja IMEP) */
    color: var(--primary-color);
    
    /* Remover sublinhado padrão de links */
    text-decoration: none;
    
    /* Alinhar ícone e texto lado a lado */
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* Transição suave ao passar o mouse */
    transition: color 0.3s ease;
}

/* Efeito ao passar o mouse sobre o logo */
.logo:hover {
    color: #e06800; /* Laranja mais escuro */
}

/* ============================================================================
   SEÇÃO 3.1: AJUSTES NO HEADER (CONTATOS E PORTAL DO ALUNO)
   ============================================================================ */

/* Container flexível para alinhar logo, contatos e botão */
.header-content {
    display: flex;
    justify-content: space-between; /* Espaço entre os elementos */
    align-items: center; /* Alinhar verticalmente */
    flex-wrap: wrap; /* Quebrar em telas pequenas */
}

/* Links de Contato (WhatsApp e Fale Conosco) */
.contact-links {
    display: flex;
    gap: 40px; /* Espaço entre os links */
    align-items: center;
    font-size: 18px;
    color: var(--text-dark);
}

.contact-link {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
    font-weight: 500;
}

.contact-link:hover {
    color: var(--primary-color); /* Cor de destaque ao passar o mouse */
}

.contact-link i {
    margin-right: 5px;
    font-size: 18px;
}

/* Botão Portal do Aluno (Botão de Destaque) */
.btn-portal {
    background-color: var(--primary-color); /* Cor Primária do IMEP */
    color: var(--text-light); /* Texto branco */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
    white-space: nowrap; /* Evita quebra de linha */
}

.btn-portal:hover {
    background-color: var(--secondary-color); /* Cor Secundária ao passar o mouse */
    transform: translateY(-1px);
    color: var(--text-light);
}

/* ============================================================================
   AJUSTES DE RESPONSIVIDADE PARA O HEADER
   ============================================================================ */

@media (max-width: 768px) {
    .header-content {
        flex-direction: column; /* Empilhar elementos */
        gap: 25px;
    }

    .contact-links {
        order: 3; /* Mover para baixo */
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    .btn-portal {
        order: 2; /* Mover para o meio */
        width: 100%;
        text-align: center;
    }

    .logo {
        order: 1; /* Manter no topo */
    }
}


/* ============================================================================
   SEÇÃO 4: BANNER DE BUSCA
   ============================================================================ */

.search-banner {
    /* Altura fixa de 420px */
    height: 420px;
    
    /* Imagem de fundo (Substitua 'banner-default.jpg' pelo nome do seu arquivo) */
    background-image: url('pix/banner-default.jpg');
    
    /* Garantir que a imagem cubra toda a área */
    background-size: cover;
    
    /* Centralizar a imagem */
    background-position: center center;
    
    /* Não repetir a imagem */
    background-repeat: no-repeat;
    
    /* Transição suave para alternância */
    transition: background-image 0.5s ease-in-out;
    
    /* Texto em branco (se houver) */
    color: var(--text-light);
    
    /* Usar flexbox para alinhar o conteúdo */
    display: flex;
    align-items: center;
    justify-content: center; /* Centralizar o conteúdo (que agora está vazio) */
    
    /* Remover padding superior e inferior */
    padding: 0;
}

/* ============================================================================
   AJUSTES DE RESPONSIVIDADE PARA O BANNER
   ============================================================================ */

@media (max-width: 992px) {
    .search-banner {
        height: 300px; /* Altura menor em mobile */
        background-size: cover;
    }
}

/* ============================================================================
   SEÇÃO 5: ABAS DE CATEGORIA
   ============================================================================
   
   Estilos das abas que permitem filtrar por tipo de curso.
*/

.category-tabs {
    /* Fundo branco */
    background-color: var(--background-white);
    
    /* Sombra para profundidade */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    /* Cantos arredondados */
    border-radius: 8px;
    
    /* Espaçamento interno */
    padding: 20px;
    
    /* Largura máxima */
    max-width: 1000px;
    
    /* Centralizar na página */
    margin: -100px auto 40px auto;
    
    /* Distribuir abas horizontalmente */
    display: flex;
    justify-content: space-around;
    
    /* Quebrar para próxima linha se necessário */
    flex-wrap: wrap;
    
    /* Espaço entre abas */
    gap: 10px;
}

/* Estilo individual de cada aba */
.category-tab {
    /* Centralizar conteúdo */
    text-align: center;
    
    /* Espaçamento interno */
    padding: 10px 15px;
    
    /* Cursor de mão ao passar o mouse */
    cursor: pointer;
    
    /* Cantos arredondados */
    border-radius: 5px;
    
    /* Transição suave para efeitos */
    transition: all 0.3s ease;
    
    /* Fundo cinzento claro */
    background-color: #f0f0f0;
    
    /* Borda transparente (para não pular ao ativar) */
    border: 2px solid transparent;
    
    /* Fonte um pouco mais pesada */
    font-weight: 500;
}

/* Efeito ao passar o mouse sobre a aba */
.category-tab:hover {
    background-color: #e8e8e8;
    transform: translateY(-2px); /* Levanta levemente */
}

/* Estilo da aba ativa (selecionada) */
.category-tab.active {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: bold;
    border-color: #e06800;
}

/* Ícone dentro da aba */
.category-tab i {
    display: block;
    font-size: 24px;
    margin-bottom: 5px;
}

/* ============================================================================
   SEÇÃO 6: FORMULÁRIO DE BUSCA
   ============================================================================
   
   Estilos do formulário onde o usuário digita e busca cursos.
*/

.search-form {
    /* Distribuir campos horizontalmente */
    display: flex;
    
    /* Espaço entre campos */
    gap: 10px;
    
    /* Espaçamento interno */
    padding: 20px;
    
    /* Fundo branco */
    background-color: var(--background-white);
    
    /* Cantos arredondados */
    border-radius: 8px;
    
    /* Sombra sutil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    /* Espaçamento superior */
    margin-top: 20px;
    
    /* Quebrar para próxima linha em telas pequenas */
    flex-wrap: wrap;
}

/* Grupo de formulário (label + input) */
.form-group {
    /* Crescer para preencher espaço disponível */
    flex: 1;
    
    /* Largura mínima */
    min-width: 200px;
    
    /* Organizar label e input verticalmente */
    display: flex;
    flex-direction: column;
}

/* Label do formulário */
.form-group label {
    /* Negrito para destaque */
    font-weight: 600;
    
    /* Espaço entre label e input */
    margin-bottom: 5px;
    
    /* Cor do texto */
    color: var(--text-dark);
    
    /* Tamanho pequeno */
    font-size: 14px;
}

/* Inputs e selects do formulário */
.search-form input,
.search-form select {
    /* Espaçamento interno */
    padding: 10px;
    
    /* Borda clara */
    border: 1px solid var(--card-border);
    
    /* Cantos arredondados */
    border-radius: 4px;
    
    /* Tamanho da fonte */
    font-size: 16px;
    
    /* Transição suave para o efeito de foco */
    transition: border-color 0.3s;
}

/* Efeito ao focar no input (clicar) */
.search-form input:focus,
.search-form select:focus {
    /* Remover outline padrão */
    outline: none;
    
    /* Borda com cor primária */
    border-color: var(--primary-color);
    
    /* Sombra colorida ao redor */
    box-shadow: 0 0 5px rgba(250, 120, 10, 0.2);
}

/* Botão de busca */
.search-form button {
    /* Espaçamento interno */
    padding: 10px 30px;
    
    /* Cor de fundo (laranja) */
    background-color: var(--primary-color);
    
    /* Texto branco */
    color: #fff;
    
    /* Negrito */
    font-weight: bold;
    
    /* Cursor de mão */
    cursor: pointer;
    
    /* Sem borda padrão */
    border: none;
    
    /* Cantos arredondados */
    border-radius: 4px;
    
    /* Transição suave */
    transition: background-color 0.3s;
    
    /* Tamanho da fonte */
    font-size: 16px;
    
    /* Alinhar ao final (direita) */
    align-self: flex-end;
}

/* Efeito ao passar o mouse sobre o botão */
.search-form button:hover {
    background-color: #e06800; /* Laranja mais escuro */
}

/* Efeito ao clicar no botão */
.search-form button:active {
    transform: scale(0.98); /* Diminui levemente */
}

/* ============================================================================
   SEÇÃO 7: SEÇÃO DE RESULTADOS
   ============================================================================
   
   Estilos da área onde os cursos encontrados são exibidos.
*/

.course-results {
    /* Espaçamento vertical */
    padding: 40px 0;
}

/* Título da seção de resultados */
.course-results h2 {
    /* Tamanho grande */
    font-size: 24px;
    
    /* Espaçamento inferior */
    margin-bottom: 20px;
    
    /* Borda inferior colorida */
    border-bottom: 3px solid var(--primary-color);
    
    /* Mostrar apenas o texto, não expandir */
    display: inline-block;
    
    /* Espaçamento interno inferior */
    padding-bottom: 10px;
    
    /* Negrito */
    font-weight: bold;
}

/* Mensagem quando nenhum resultado é encontrado */
.no-results {
    /* Centralizar texto */
    text-align: center;
    
    /* Espaçamento interno */
    padding: 40px;
    
    /* Fundo branco */
    background-color: var(--background-white);
    
    /* Cantos arredondados */
    border-radius: 8px;
    
    /* Cor do texto (cinzento) */
    color: #666;
}

.no-results p {
    /* Tamanho da fonte */
    font-size: 18px;
    
    /* Espaçamento inferior */
    margin-bottom: 10px;
}

/* ============================================================================
   SEÇÃO 8: GRID DE CARDS
   ============================================================================
   
   Estilos do layout em grade que exibe os cursos.
*/

.card-grid {
    /* Layout em grade responsivo */
    display: grid;
    
    /* 3 colunas em desktop, 1 em mobile (auto-fill) */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    
    /* Espaço entre cards */
    gap: 20px;
    
    /* Espaçamento superior */
    margin-top: 30px;
}

/* ============================================================================
   SEÇÃO 9: CARDS DE CURSOS
   ============================================================================
   
   Estilos dos cards individuais que mostram informações dos cursos.
*/

.course-card {
    /* Fundo branco */
    background-color: var(--background-white);
    
    /* Borda clara */
    border: 1px solid var(--card-border);
    
    /* Cantos arredondados */
    border-radius: 8px;
    
    /* Ocultar conteúdo que ultrapassa as bordas */
    overflow: hidden;
    
    /* Sombra sutil */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    
    /* Transição suave para efeitos */
    transition: all 0.3s ease;
    
    /* Organizar conteúdo verticalmente */
    display: flex;
    flex-direction: column;
}

/* Efeito ao passar o mouse sobre o card */
.course-card:hover {
    /* Levanta o card */
    transform: translateY(-8px);
    
    /* Aumenta a sombra */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Cabeçalho do card (azul) */
.card-header {
    /* Gradiente de azul */
    background: linear-gradient(135deg, var(--secondary-color) 0%, #0056b3 100%);
    
    /* Texto branco */
    color: #fff;
    
    /* Espaçamento interno */
    padding: 15px;
    
    /* Negrito */
    font-weight: bold;
    
    /* Tamanho pequeno */
    font-size: 14px;
}

/* Corpo do card (informações principais) */
.card-body {
    /* Espaçamento interno */
    padding: 15px;
    
    /* Crescer para preencher espaço */
    flex-grow: 1;
}

/* Título do curso dentro do card */
.card-body h3 {
    /* Tamanho da fonte */
    font-size: 18px;
    
    /* Espaçamento inferior */
    margin-bottom: 10px;
    
    /* Cor laranja (primária) */
    color: var(--primary-color);
    
    /* Negrito */
    font-weight: bold;
}

/* Parágrafos com informações do curso */
.card-body p {
    /* Espaçamento inferior */
    margin-bottom: 8px;
    
    /* Tamanho pequeno */
    font-size: 14px;
    
    /* Cor cinzenta */
    color: #555;
}

/* Texto em negrito dentro dos parágrafos */
.card-body strong {
    color: var(--text-dark);
}

/* Rodapé do card (preço e botão) */
.card-footer {
    /* Espaçamento interno */
    padding: 15px;
    
    /* Borda superior para separação */
    border-top: 1px solid var(--card-border);
    
    /* Organizar preço e botão lado a lado */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Fundo cinzento claro */
    background-color: #fafafa;
}

/* Preço do curso */
.price {
    /* Tamanho grande */
    font-size: 20px;
    
    /* Negrito */
    font-weight: bold;
    
    /* Cor verde (sucesso) */
    color: var(--success-color);
}

/* Botão "Ver Detalhes" */
.details-button {
    /* Cor de fundo (azul) */
    background-color: var(--secondary-color);
    
    /* Texto branco */
    color: #fff;
    
    /* Espaçamento interno */
    padding: 8px 15px;
    
    /* Remover sublinhado de link */
    text-decoration: none;
    
    /* Cantos arredondados */
    border-radius: 4px;
    
    /* Tamanho pequeno */
    font-size: 14px;
    
    /* Transição suave */
    transition: background-color 0.3s;
    
    /* Sem borda */
    border: none;
    
    /* Cursor de mão */
    cursor: pointer;
    
    /* Negrito */
    font-weight: 600;
}

/* Efeito ao passar o mouse sobre o botão */
.details-button:hover {
    background-color: #0056b3; /* Azul mais escuro */
}

/* ============================================================================
   SEÇÃO 10: CONTAINER (LARGURA MÁXIMA)
   ============================================================================
   
   Classe utilitária para centralizar conteúdo com largura máxima.
*/

.container {
    /* Largura máxima */
    max-width: 1200px;
    
    /* Centralizar na página */
    margin: 0 auto;
    
    /* Espaçamento lateral (padding) */
    padding: 0 15px;
}

/* ============================================================================
   SEÇÃO 11: RESPONSIVIDADE (MEDIA QUERIES)
   ============================================================================
   
   Ajustes de estilo para diferentes tamanhos de tela.
   Breakpoints: 768px (tablet), 480px (mobile)
*/

/* Tablets e telas médias (até 768px) */
@media (max-width: 768px) {
    /* Formulário em coluna (um campo por linha) */
    .search-form {
        flex-direction: column;
    }

    /* Botão ocupar largura total */
    .search-form button {
        align-self: stretch;
    }

    /* Abas com espaçamento reduzido */
    .category-tabs {
        margin-top: -120px;
        padding: 15px;
    }

    /* Título menor */
    .search-banner h1 {
        font-size: 28px;
    }

    /* Subtítulo menor */
    .search-banner p {
        font-size: 16px;
    }

    /* Grid com uma coluna */
    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Rodapé do card em coluna */
    .card-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    /* Botão ocupar largura total */
    .details-button {
        width: 100%;
        text-align: center;
    }
}

/* Smartphones (até 480px) */
@media (max-width: 480px) {
    /* Logo menor */
    .logo {
        font-size: 22px;
    }

    /* Título ainda menor */
    .search-banner h1 {
        font-size: 24px;
    }

    /* Subtítulo menor */
    .search-banner p {
        font-size: 14px;
    }

    /* Abas mais compactas */
    .category-tabs {
        margin-top: -100px;
        gap: 5px;
    }

    .category-tab {
        padding: 8px 10px;
        font-size: 12px;
    }

    .category-tab i {
        font-size: 20px;
    }
}

/* ============================================================================
   SEÇÃO 12: CLASSES UTILITÁRIAS
   ============================================================================
   
   Classes auxiliares para uso rápido em HTML.
*/

/* Centralizar texto */
.text-center {
    text-align: center;
}

/* Margem superior (4 = 2rem = 32px) */
.mt-4 {
    margin-top: 2rem;
}

/* Margem inferior (4 = 2rem = 32px) */
.mb-4 {
    margin-bottom: 2rem;
}

/* Animação de carregamento (spinner) */
.loading {
    /* Tamanho */
    display: inline-block;
    width: 20px;
    height: 20px;
    
    /* Borda com cor primária */
    border: 3px solid rgba(250, 120, 10, 0.3);
    
    /* Forma circular */
    border-radius: 50%;
    
    /* Topo com cor mais forte */
    border-top-color: var(--primary-color);
    
    /* Animação de rotação */
    animation: spin 1s ease-in-out infinite;
}

/* Keyframe para animação de rotação */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   FIM DO ARQUIVO DE ESTILOS
   ============================================================================
   
   Para adicionar novos estilos:
   1. Identifique a seção apropriada
   2. Adicione comentários explicativos
   3. Mantenha a organização do arquivo
   4. Teste em diferentes resoluções de tela
   
   ============================================================================
*/