/* ========================================================= */
/* Configurações Globais e Scroll Suave */
/* ========================================================= */
html {
    scroll-behavior: smooth; /* Habilita a rolagem suave */
    scroll-padding-top: 20px; /* Adiciona um preenchimento no topo ao rolar para um ID */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Define a fonte padrão */
    background-color: #1e1e1e; /* Define a cor de fundo do corpo */
    color: #d4d4d4; /* Define a cor do texto */
    line-height: 1.6; /* Define a altura da linha */
    margin: 0; /* Remove as margens padrão */
    padding: 20px; /* Adiciona preenchimento ao redor do conteúdo */
}

/* ========================================================= */
/* Estilos do Container Principal */
/* ========================================================= */
.container {
    max-width: 1200px; /* Define a largura máxima do container */
    margin: 0 auto; /* Centraliza o container na página */
    padding: 20px; /* Adiciona preenchimento interno */
}

/* ========================================================= */
/* Estilos do Header */
/* ========================================================= */
header {
    text-align: center; /* Centraliza o texto no header */
    border-bottom: 1px solid #444; /* Adiciona uma borda abaixo do header */
    margin-bottom: 40px; /* Adiciona margem abaixo do header */
    padding-bottom: 20px; /* Adiciona preenchimento abaixo do header */
}

h1 {
    color: #9cdcfe; /* Define a cor do título */
    font-size: 2.5em; /* Define o tamanho da fonte do título */
    margin: 0; /* Remove as margens padrão */
}

p {
    font-size: 1.1em; /* Define o tamanho da fonte dos parágrafos */
}

/* ========================================================= */
/* Estilos de Links */
/* ========================================================= */
a {
    color: #4ec9b0; /* Define a cor do link */
    text-decoration: none; /* Remove o sublinhado padrão */
}
a:hover {
    text-decoration: underline; /* Adiciona um sublinhado no hover */
}

/* ========================================================= */
/* Estilo da Lista de Navegação (index.html) */
/* ========================================================= */
nav ul {
    list-style: none; /* Remove os marcadores de lista */
    padding: 0; /* Remove o preenchimento padrão */
    display: grid; /* Usa o display grid para o layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Cria colunas responsivas */
    gap: 15px; /* Adiciona espaçamento entre os itens */
}

/* Garante que o link ocupe todo o espaço do <li> */
nav ul li {
    display: flex; /* Isso transforma o <li> em um container flex, o que força seu filho <a> a ocupar 100% da altura. */
}

/* Em vez de 'block', usamos 'flex' para poder centralizar o texto */
nav a {
    display: flex;         /* Em vez de 'block', usamos 'flex' para poder centralizar o texto */
    flex-grow: 1;          /* Garante que o link ocupe todo o espaço do <li> */
    align-items: center;   /* Centraliza o texto verticalmente */
    justify-content: center; /* Centraliza o texto horizontalmente */
    text-align: center;      /* Garante o alinhamento do texto caso ele quebre a linha */
    padding: 15px; /* Adiciona preenchimento interno */
    background-color: #2d2d2d; /* Define a cor de fundo */
    color: #d4d4d4; /* Define a cor do texto */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    transition: background-color 0.2s; /* Adiciona uma transição suave na cor de fundo */
}

nav a:hover {
    background-color: #3e3e3e; /* Define a cor de fundo no hover */
    color: #ffffff; /* Define a cor do texto no hover */
}

/* ========================================================= */
/* Estilos do Grid de Cards (componentes.html) */
/* ========================================================= */
.card-grid {
    display: grid; /* Usa o display grid para o layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Cria colunas responsivas */
    gap: 25px; /* Adiciona espaçamento entre os cards */
}

/* ========================================================= */
/* Estilos dos Cards */
/* ========================================================= */
.card {
    background-color: #252526; /* Define a cor de fundo do card */
    border: 1px solid #3c3c3c; /* Adiciona uma borda */
    border-radius: 8px; /* Adiciona bordas arredondadas */
    padding: 20px; /* Adiciona preenchimento interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Adiciona transições suaves */
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px); /* Move o card para cima no hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Aumenta a sombra no hover */
}

.card img {
    width: 100%; /* Garante que a imagem ocupe toda a largura do card */
    height: 180px; /* Define uma altura fixa para a imagem */
    object-fit: contain; /* Garante que a imagem caiba dentro do container sem distorcer */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    margin-bottom: 15px; /* Adiciona margem abaixo da imagem */
    background-color: #333;
}

.card h2 {
    color: #4ec9b0; /* Define a cor do título do card */
    font-size: 1.4em; /* Define o tamanho da fonte do título */
    margin-top: 0; /* Remove a margem superior */
    margin-bottom: 10px; /* Adiciona margem abaixo do título */
    border: none; /* Remove a borda */
    padding: 0; /* Remove o preenchimento */
}

.card dl {
    margin: 0; /* Remove as margens padrão */
    flex-grow: 1;
}

.card dt {
    font-weight: bold; /* Define o texto como negrito */
    color: #c586c0; /* Define a cor do texto */
    font-size: 0.9em; /* Define o tamanho da fonte */
}

.card dd {
    margin-left: 0; /* Remove a margem esquerda */
    margin-bottom: 10px; /* Adiciona margem abaixo da descrição */
    font-size: 1em; /* Define o tamanho da fonte */
}

/* ========================================================= */
/* Estilos do Link "Voltar ao Topo" */
/* ========================================================= */
.back-to-top {
    display: block; /* Define como um elemento de bloco */
    margin-top: auto; /* Empurra o link para a parte inferior do card */
    padding-top: 15px; /* Adiciona preenchimento acima do link */
    text-align: right; /* Alinha o texto à direita */
    font-size: 0.9em; /* Define o tamanho da fonte */
    border-top: 1px solid #3c3c3c; /* Adiciona uma borda acima do link */
}