/* css/style.css */

/* Reset básico para remover margens e preenchimentos padrão do navegador,
   garantindo uma base consistente em diferentes navegadores. */
body {
    margin: 0;
    font-family: Arial, sans-serif; /* Define uma família de fontes padrão */
    background-color: #f4f4f4; /* Cor de fundo geral da página */
    color: #333; /* Cor padrão do texto */
}

/* Estilos para o cabeçalho, onde o menu de navegação estará contido. */
header {
    background-color: #E0F2F7; /* Um tom de azul bem claro para o fundo do cabeçalho */
    padding: 10px 0; /* Espaçamento interno superior e inferior, sem espaçamento lateral */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra sutil para dar profundidade */
}

/* Contêiner principal da navegação. */
.main-nav {
    max-width: 960px; /* Define a largura máxima do menu para controlar seu layout */
    margin: 0 auto; /* Centraliza o menu horizontalmente na página */
    padding: 0 20px; /* Espaçamento interno lateral para que o conteúdo não cole nas bordas da tela */
}

/* Estilos para a lista não ordenada que contém os itens do menu principal. */
.nav-list {
    list-style: none; /* Remove os marcadores de lista padrão (bolinhas) */
    margin: 0; /* Remove a margem padrão da lista */
    padding: 0; /* Remove o preenchimento padrão da lista */
    display: flex; /* Transforma os itens da lista em flex-items, permitindo que se alinhem horizontalmente */
    justify-content: flex-start; /* Alinha os itens ao início do contêiner flex (esquerda) */
    align-items: center; /* Centraliza os itens verticalmente na altura da linha do menu */
}

/* Estilos para cada item individual da lista de navegação. */
.nav-item {
    position: relative; /* Essencial para que o submenu (posicionado absolutamente)
                            se posicione em relação a este item pai. */
}

/* Estilos gerais para os links dentro dos itens de navegação.
   Aplicado a todos os links, incluindo o ícone Home e os itens de texto. */
.nav-item a {
    display: block; /* Faz com que o link ocupe todo o espaço do seu item de lista,
                       tornando a área clicável maior e mais fácil de interagir. */
    padding: 15px 20px; /* Espaçamento interno padrão para os links de texto */
    color: #333; /* Cor do texto do link (um cinza escuro para bom contraste) */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    white-space: nowrap; /* Impede que o texto do link quebre a linha, mantendo-o em uma única linha */
    transition: background-color 0.3s ease; /* Adiciona uma transição suave de 0.3 segundos
                                                para a mudança de cor de fundo ao passar o mouse. */
}

/* Estilos específicos para o item do ícone Home, sobrescrevendo alguns dos estilos gerais de .nav-item a. */
.nav-item.home-icon-item a {
    font-size: 1.8em; /* Aumenta o tamanho do emoji para que ele seja mais visível e representativo */
    padding: 10px 15px; /* Ajusta o padding especificamente para o ícone, tornando-o mais compacto */
    line-height: 1; /* Ajuda a alinhar o emoji verticalmente dentro do seu contêiner */
    display: flex; /* Transforma o link em um flex-container para centralizar o emoji */
    align-items: center; /* Centraliza verticalmente o emoji dentro do link */
    justify-content: center; /* Centraliza horizontalmente o emoji dentro do link */
}

/* Estilos para os links ao passar o mouse (hover). */
.nav-item a:hover {
    background-color: #B2EBF2; /* Um azul um pouco mais escuro para o hover, dando feedback visual */
}

/* Estilos para o submenu que aparece sob o item "Udemy". */
.submenu {
    list-style: none; /* Remove os marcadores de lista padrão */
    margin: 0; /* Remove margem padrão */
    padding: 0; /* Remove preenchimento padrão */
    background-color: #B2EBF2; /* Fundo do submenu, combinando com o cabeçalho principal */
    position: absolute; /* Posiciona o submenu absolutamente em relação ao seu item pai (.nav-item) */
    top: 100%; /* Posiciona o topo do submenu exatamente na parte inferior do seu item pai */
    left: 0; /* Alinha o submenu com a borda esquerda do seu item pai */
    min-width: 150px; /* Define uma largura mínima para o submenu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para o submenu */
    
    /* Propriedades iniciais para a animação de exibição, controlada via JavaScript. */
    opacity: 0; /* Começa totalmente transparente (invisível) */
    visibility: hidden; /* Oculta o submenu para que ele não seja interativo ou ocupe espaço quando invisível */
    transform: translateY(10px); /* Move o submenu 10px para baixo, preparando para a animação de "slide-up" */
    /* Define transições suaves para opacidade, transformação e visibilidade, criando a animação. */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000; /* Garante que o submenu apareça sobre outros conteúdos da página */
}

/* Estilos para os itens (links) dentro do submenu. */
.submenu li a {
    padding: 10px 20px; /* Espaçamento interno menor para os itens do submenu */
    color: #333; /* Cor do texto no submenu */
}

/* Estilos para os itens do submenu ao passar o mouse (hover). */
.submenu li a:hover {
    background-color: #80DEEA; /* Cor de fundo mais escura para o hover dos itens do submenu */
}

/* ESTILO APLICADO PELO JAVASCRIPT:
   Esta classe é adicionada ao submenu quando o mouse está sobre o item pai ("Udemy").
   Ela inverte as propriedades iniciais para exibir o submenu com animação. */
.nav-item.has-submenu .submenu.show {
    opacity: 1; /* Torna o submenu totalmente visível */
    visibility: visible; /* Torna o submenu interativo e visível */
    transform: translateY(0); /* Move o submenu de volta para sua posição original, completando a animação de "slide-up" */
}

/* Estilos para a área de conteúdo principal da página. */
main {
    max-width: 960px; /* Largura máxima do conteúdo principal */
    margin: 20px auto; /* Margem superior/inferior de 20px e centralização horizontal */
    padding: 20px; /* Espaçamento interno */
    background-color: #fff; /* Fundo branco para o contêiner de conteúdo */
    border-radius: 8px; /* Cantos levemente arredondados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave para o contêiner principal */
}

/* Estilos para o título principal dentro da área de conteúdo. */
h1 {
    color: #222; /* Cor escura para o título */
}