/* ==================== HEADER COMPONENT ==================== */
/*
    Estilos do componente Header (navegação fixa superior).
    Organização: Desktop Navigation → Mobile Menu → Responsividade.
    Usa classes CSS customizadas (não Tailwind) para componentes específicos.
*/

/* ==================== HEADER CONTAINER ==================== */
/*
    Container principal do header que centraliza o conteúdo.
    
    - max-width: 1280px → Limita largura máxima (evita linhas muito longas em telas grandes)
    - margin: 0 auto → Centraliza horizontalmente (auto nas laterais = espaço igual dos lados)
    - padding: 1rem 1.5rem → Espaçamento interno (1rem=16px cima/baixo, 1.5rem=24px laterais)
    - display: flex → Layout flexível para alinhar logo e navegação
    - justify-content: space-between → Logo à esquerda, menu à direita (espaço máximo entre)
    - align-items: center → Centraliza verticalmente (logo e menu na mesma linha)
    
    Impacto visual: Header responsivo que se adapta de mobile (320px) até 4K (3840px+)
*/
.header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==================== DESKTOP NAVIGATION ==================== */
/*
    Menu de navegação horizontal para telas desktop (≥768px).
    Visível apenas quando o Tailwind 'md:block' ativa (veja header.html).
*/

/*
    Lista de navegação usando Flexbox
    
    - display: flex → Itens lado a lado (horizontal)
    - list-style: none → Remove bullets (bolinhas) padrão da lista
    - margin/padding: 0 → Remove espaçamentos padrão do navegador
    - gap: 2rem → Espaço de 32px entre cada item do menu
    
    Impacto: Menu limpo, sem marcadores, com espaçamento uniforme
*/
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

/*
    Itens individuais da lista
    
    - display: inline-block → Permite aplicar padding/margin como bloco, mas flui como inline
    
    Nota: Redundante com flex do pai, mas mantém compatibilidade
*/
.nav-menu li {
    display: inline-block;
}

/*
    Links de navegação (estado padrão)
    
    - color: #64748b → Cinza médio (slate-500 do Tailwind)
    - text-decoration: none → Remove sublinhado padrão dos links
    - font-weight: 500 → Peso médio (semi-bold)
    - padding: 0.5rem 1rem → Área clicável maior (UX: facilita clicar)
    - transition: all 0.3s ease → Animação suave de 0.3s em mudanças (cor, transform, etc)
    - position: relative → Necessário para o ::after (linha de destaque) funcionar
    
    Impacto: Links sutis, área de clique confortável, feedback visual suave
*/
.nav-menu a {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    position: relative;
}

/*
    Links ao passar o mouse (hover)
    
    - color: #6366f1 → Roxo vibrante (indigo-500) para feedback visual
    
    Impacto: Usuário sabe que pode clicar (affordance)
*/
.nav-menu a:hover {
    color: #6366f1;
}

/*
    Link da página atual (classe 'active' aplicada via Thymeleaf)
    
    - color: #6366f1 → Mesma cor do hover (indica "você está aqui")
    
    Impacto: Orientação visual clara de qual página está ativa
*/
.nav-menu a.active {
    color: #6366f1;
}

/*
    Linha de destaque abaixo do link ativo (pseudo-elemento)
    
    - content: '' → Necessário para ::after aparecer (vazio = só estilização)
    - position: absolute → Posiciona relativo ao 'a' (que tem position: relative)
    - bottom: -4px → 4px abaixo do link (fora do padding)
    - left/right: 0 → Ocupa largura total do link
    - height: 2px → Linha fina de 2px
    - background: linear-gradient(...) → Gradiente roxo→violeta→dourado (estilo premium)
    
    Impacto: Indicador visual sofisticado de página ativa (não apenas cor)
*/
.nav-menu a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #D4AF37 100%);
}

/* ==================== MOBILE MENU ==================== */
/*
    Menu lateral deslizante para telas pequenas (<768px).
    Componentes: Botão hamburguer → Overlay (fundo escuro) → Painel lateral.
*/

/*
    Botão hamburguer (ícone de 3 linhas)
    
    - display: flex → Centraliza o ícone FontAwesome
    - align-items/justify-content: center → Centralização perfeita
    - width/height: 40px → Área de toque adequada (mínimo recomendado: 44x44px)
    - background: none → Sem fundo (apenas ícone)
    - border: none → Remove borda padrão de button
    - color: #6366f1 → Roxo para consistência visual
    - font-size: 1.5rem → Ícone de 24px (legível)
    - cursor: pointer → Indica que é clicável
    - transition: transform 0.3s ease → Anima transformações (escala)
    
    Impacto: Botão minimalista, confortável para toque, feedback visual
*/
.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: #6366f1;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/*
    Botão hamburguer ao passar o mouse
    
    - transform: scale(1.1) → Aumenta 10% (feedback que pode ser clicado)
    
    Impacto: Micro-interação que melhora UX (o botão "responde" ao mouse)
*/
.mobile-menu-btn:hover {
    transform: scale(1.1);
}

/*
    Overlay: camada escura semi-transparente (backdrop)
    
    - position: fixed → Fixo na viewport (não rola com a página)
    - top/left/right/bottom: 0 → Cobre tela inteira
    - background: rgba(0,0,0,0.5) → Preto com 50% opacidade (escurece fundo)
    - z-index: 1998 → Acima do conteúdo (1000), abaixo do menu (1999)
    - opacity: 0 → Invisível por padrão
    - visibility: hidden → Remove do fluxo (não bloqueia cliques quando oculto)
    - transition: all 0.3s ease → Fade in/out suave
    
    Impacto: Foco no menu (escurece resto da tela), fecha menu ao clicar fora
*/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/*
    Overlay visível (classe 'active' aplicada via JS)
    
    - opacity: 1 → Totalmente visível
    - visibility: visible → Retorna ao fluxo (bloqueia cliques no conteúdo)
    
    Impacto: Fade in animado quando menu abre
*/
.overlay.active {
    opacity: 1;
    visibility: visible;
}

/*
    Painel do menu mobile (sidebar)
    
    - position: fixed → Fixo na viewport
    - top: 0 → Alinhado ao topo
    - right: -100% → FORA da tela à direita (posição inicial)
    - width: 80% / max-width: 400px → 80% da tela, mas no máximo 400px
    - height: 100vh → Altura total da viewport (100% da altura visível)
    - background: white → Fundo branco sólido
    - z-index: 1999 → Acima do overlay (1998) e conteúdo (1000)
    - transition: right 0.3s ease → Anima deslizamento horizontal
    - box-shadow: -5px 0 15px rgba(0,0,0,0.1) → Sombra à esquerda (profundidade)
    
    Impacto: Menu desliza suavemente da direita quando ativado
*/
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: white;
    z-index: 1999;
    transition: right 0.3s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

/*
    Menu visível (classe 'active' aplicada via JS)
    
    - right: 0 → Posição final (visível na tela)
    
    Impacto: Slide-in da direita (animado via transition acima)
*/
.mobile-menu.active {
    right: 0;
}

/*
    Cabeçalho do menu mobile (logo + botão X)
    
    - display: flex → Layout flexível
    - justify-content: space-between → Logo à esquerda, X à direita
    - align-items: center → Alinhamento vertical
    - padding: 1.5rem → Espaçamento interno (24px)
    - border-bottom: 1px solid #f1f5f9 → Linha divisória sutil (cinza claro)
    
    Impacto: Header interno do menu com separação visual do conteúdo
*/
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

/*
    Botão X (fechar menu)
    
    - background: none / border: none → Sem estilização de button
    - font-size: 1.5rem → Ícone de 24px (legível)
    - color: #64748b → Cinza médio (neutro)
    - cursor: pointer → Indica interatividade
    - width/height: 40px → Área de toque adequada
    - display: flex + align/justify center → Centraliza ícone
    - transition: all 0.3s ease → Anima cor e rotação
    
    Impacto: Botão limpo, confortável para fechar menu
*/
.mobile-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/*
    Botão X ao passar o mouse
    
    - color: #6366f1 → Roxo (consistência com tema)
    - transform: rotate(90deg) → Gira 90° (feedback divertido)
    
    Impacto: Micro-interação que torna o fechar mais agradável
*/
.mobile-menu-close:hover {
    color: #6366f1;
    transform: rotate(90deg);
}

/*
    Lista de links do menu mobile
    
    - list-style: none → Remove bullets
    - padding: 2rem 0 → Espaço vertical (32px cima/baixo)
    - margin: 0 → Remove espaçamentos padrão
    
    Impacto: Lista limpa, pronta para estilização customizada
*/
.mobile-nav-menu {
    list-style: none;
    padding: 2rem 0;
    margin: 0;
}

/*
    Itens individuais da lista mobile
    
    - margin: 0 → Remove espaçamentos (gap controlado nos links)
*/
.mobile-nav-menu li {
    margin: 0;
}

/*
    Links de navegação mobile
    
    - display: block → Ocupa linha inteira (área clicável máxima)
    - padding: 1rem 1.5rem → Espaçamento generoso (16px cima/baixo, 24px laterais)
    - color: #64748b → Cinza médio
    - text-decoration: none → Sem sublinhado
    - font-weight: 500 → Semi-bold
    - transition: all 0.3s ease → Anima mudanças
    - border-left: 3px solid transparent → Borda invisível (preparação para hover)
    
    Impacto: Links grandes, fáceis de tocar em mobile
*/
.mobile-nav-menu a {
    display: block;
    padding: 1rem 1.5rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

/*
    Links mobile ao passar o mouse/toque
    
    - color: #6366f1 → Roxo (destaque)
    - background: #f1f5f9 → Fundo cinza claro (área ativa visível)
    - border-left-color: #6366f1 → Barra roxa à esquerda (indicador visual)
    
    Impacto: Feedback visual completo (cor + fundo + borda = item ativo óbvio)
*/
.mobile-nav-menu a:hover {
    color: #6366f1;
    background: #f1f5f9;
    border-left-color: #6366f1;
}

/*
    Link mobile da página atual (classe 'active' aplicada via Thymeleaf)
    
    - color: #6366f1 → Roxo (indica "você está aqui")
    - background: #f1f5f9 → Fundo cinza claro (destaque permanente)
    - border-left-color: #6366f1 → Barra roxa à esquerda (consistência visual)
    - font-weight: 600 → Semi-bold reforçado (diferencia de outros links)
    
    Impacto: Página ativa visualmente óbvia no menu mobile, mesmo sem hover
    Similar ao desktop, mas adaptado para área de toque maior
*/
.mobile-nav-menu a.active {
    color: #6366f1;
    background: #f1f5f9;
    border-left-color: #6366f1;
    font-weight: 600;
}