/* Importa a fonte 'Quicksand' do Google Fonts com pesos de 300 a 700 */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/* Seletor universal para aplicar estilos a todos os elementos */
* {
    padding: 0; /* Remove o preenchimento de todos os elementos */
    box-sizing: border-box; /* Garante que padding e border não afetem o tamanho final do elemento */
}

/* Define variáveis de cor globais para o tema escuro (padrão) */
:root {
    --primary-color: #4769a1; /* Cor primária, usada para destaques */
    --secondary-color: #e8eaed; /* Cor secundária, usada para texto principal */
    --tertiary-color: #9aa0a6; /* Cor terciária, usada para texto de apoio e bordas */
    --bg-color: #202124; /* Cor de fundo principal */
    --bg-gradient-start: #6541a3; /* Cor inicial do gradiente de fundo */
    --bg-gradient-end: #ebde8a; /* Cor final do gradiente de fundo */
    --header-bg-color: rgba(32, 33, 36, 0.85); /* Fundo do cabeçalho */
    --header-border-color: #0a14aa; /* Borda do cabeçalho e rodapé */
    --card-bg-color: #384864; /* Fundo do card */
    --card-border-color: #30415e; /* Borda do card */
    --shadow-color: rgba(0, 0, 0, 0.2); /* Cor da sombra */
}

/* Sobrescreve as variáveis de cor quando o body tem a classe 'light-mode' */
body.light-mode {
    --primary-color: #1a73e8; /* Cor primária para o tema claro */
    --secondary-color: #202124; /* Cor secundária para o tema claro */
    --tertiary-color: #5f6368; /* Cor terciária para o tema claro */
    --bg-color: #ffffff; /* Cor de fundo para o tema claro */
    --bg-gradient-start: #d2e3fc; /* Cor inicial do gradiente para o tema claro */
    --bg-gradient-end: #e8e8e8; /* Cor final do gradiente para o tema claro */
    --header-bg-color: rgba(
        255,
        255,
        255,
        0.85
    ); /* Fundo do cabeçalho no modo claro */
    --header-border-color: #dadce0; /* Borda do cabeçalho e rodapé no modo claro */
    --card-bg-color: #f8f9fa; /* Fundo do card no modo claro */
    --card-border-color: #dadce0; /* Borda do card no modo claro */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Cor da sombra no modo claro */
}

/* Estilos para o botão de alternância de tema */
.botao-tema {
    background: transparent; /* Fundo transparente */
    border: 1px solid var(--tertiary-color); /* Borda com a cor terciária */
    border-radius: 50%; /* Borda arredondada para formar um círculo */
    width: 40px; /* Largura do botão */
    height: 40px; /* Altura do botão */
    cursor: pointer; /* Cursor em formato de mão ao passar por cima */
    font-size: 1.2rem; /* Tamanho do ícone/texto dentro do botão */
    display: flex; /* Ativa o layout flexbox */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    transition: all 0.2s ease; /* Transição suave para todas as propriedades */
}

/* Estilos para o botão de tema quando o mouse está sobre ele */
.botao-tema:hover {
    background-color: rgba(
        154,
        160,
        166,
        0.1
    ); /* Cor de fundo levemente visível */
    border-color: var(
        --primary-color
    ); /* Cor da borda muda para a cor primária */
}

/* Estilos para o corpo da página */
body {
    margin: 0; /* Remove a margem padrão do body */
    background: linear-gradient(
        /* Define um fundo com gradiente linear */ 185deg,
        /* Ângulo do gradiente */ var(--bg-gradient-start),
        /* Cor inicial do gradiente */ var(--bg-gradient-end)
            /* Cor final do gradiente */
    );
    color: var(--secondary-color); /* Cor do texto padrão */
    font-family: 'Quicksand', sans-serif; /* Define a família da fonte */
    min-height: 100vh; /* Altura mínima de 100% da altura da viewport */
    display: flex; /* Ativa o layout flexbox */
    flex-direction: column; /* Organiza os filhos em coluna */
    transition: background-color 0.3s, color 0.3s; /* Adiciona transição suave na troca de tema */
}

/* Estilos para o cabeçalho */
header {
    padding: 1.5rem 1rem; /* Preenchimento interno */
    gap: 1rem; /* Espaçamento entre os elementos filhos */
    display: flex; /* Ativa o layout flexbox */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    justify-content: space-between; /* Distribui o espaço entre os itens */
    position: sticky; /* Fixa o cabeçalho no topo ao rolar */
    top: 0; /* Posição no topo da página */
    background: var(
        --header-bg-color
    ); /* Fundo semitransparente usando variável */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    z-index: 10; /* Garante que o cabeçalho fique sobre outros elementos */
    border-bottom: 2px solid var(--header-border-color); /* Borda inferior usando variável */
    box-shadow: 0 2px 10px var(--shadow-color); /* Sombra projetada usando variável */
    gap: 1rem; /* Espaçamento entre os elementos filhos */
}

/* Estilos para o título principal no cabeçalho */
header h1 {
    font-size: 1.5rem; /* Tamanho da fonte */
    margin: 0; /* Remove a margem */
    font-weight: 500; /* Peso da fonte */
    white-space: nowrap; /* Impede a quebra de linha do texto */
}

/* Estilos para o container de busca */
div.search-container {
    display: flex; /* Ativa o layout flexbox */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    gap: 1.5rem; /* Espaçamento entre o input e o botão */
}

/* Estilos para o campo de input */
div input {
    padding: 0.375rem 0.75rem; /* Preenchimento interno */
    border-radius: 1rem; /* Bordas arredondadas */
    border: 1px solid var(--tertiary-color); /* Borda com a cor terciária */
    background: var(--bg-color); /* Cor de fundo usando variável */
    font-family: inherit; /* Herda a fonte do elemento pai */
    font-size: 1.1rem; /* Tamanho da fonte */
    transition: all 0.2s ease; /* Transição suave para todas as propriedades */
    width: 22rem; /* Largura do campo */
    color: var(--secondary-color); /* Cor do texto digitado usando variável */
}

.botao-tema {
    border: none;
}

/* Estilos para o placeholder do input */
div input::placeholder {
    font-size: 1rem; /* Tamanho da fonte do placeholder */
    font-weight: 300; /* Peso da fonte do placeholder */
    color: var(
        --tertiary-color
    ); /* Cor do texto do placeholder usando variável */
}

/* Estilos para o input quando está em foco */
div input:focus {
    outline: none; /* Remove a borda de foco padrão */
    border-color: var(
        --primary-color
    ); /* Cor da borda muda para a cor primária */
    box-shadow: 0 0 0 0.1rem var(--primary-color); /* Adiciona uma sombra de foco */
}

/* Estilos para o botão de busca */
#botao-busca {
    padding: 0.5rem 1rem; /* Preenchimento interno */
    border-radius: 1rem; /* Bordas arredondadas */
    border: none; /* Remove a borda */
    cursor: pointer; /* Cursor em formato de mão */
    font-family: inherit; /* Herda a fonte do pai */
    font-weight: 500; /* Peso da fonte */
    font-size: 1rem; /* Tamanho da fonte */
    white-space: nowrap; /* Impede a quebra de linha */
    transition: background-color 0.2s ease, color 0.2s ease; /* Transições suaves */
    background-color: var(
        --primary-color
    ); /* Cor de fundo primária usando variável */
    color: var(--bg-color); /* Cor do texto usando variável */
    border: 1px solid var(--primary-color); /* Borda com a cor primária usando variável */
}

/* Estilos para o botão de busca ao passar o mouse */
#botao-busca:hover {
    background-color: var(
        --bg-gradient-end
    ); /* Inverte a cor de fundo usando variável */
    border: none; /* Remove a borda */
    color: var(
        --bg-gradient-start
    ); /* Inverte a cor do texto usando variável */
}

/* Estilos para o botão de busca quando está sendo clicado */
#botao-busca:active {
    transform: scale(0.98); /* Efeito de clique (leve redução de tamanho) */
}

/* Estilos para a seção principal do conteúdo */
main {
    max-width: 80rem; /* Largura máxima */
    margin: 0 auto; /* Centraliza na página */
    padding: 2rem 1rem; /* Preenchimento interno */
    flex: 1; /* Faz com que o main ocupe o espaço restante */
}

/* Estilos para o container dos cards */
.card-container {
    display: grid; /* Ativa o layout de grade */
    grid-template-columns: repeat(
        auto-fill,
        minmax(20rem, 1fr)
    ); /* Colunas responsivas */
    gap: 1.5rem; /* Espaçamento entre os cards */
}

.erro {
    color: #ff6b6b;
    text-align: center;
    padding: 1rem;
}

/* Estilos para cada card */
.card {
    background: var(--card-bg-color); /* Cor de fundo do card usando variável */
    border-radius: 0.5rem; /* Bordas arredondadas */
    padding: 1.5rem; /* Preenchimento interno */
    box-shadow: 0 4px 6px var(--shadow-color), 0 1px 3px var(--shadow-color); /* Sombra usando variável */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transições suaves */
    border: 1px solid var(--card-border-color); /* Borda do card usando variável */
}

/* Estilos para o card ao passar o mouse */
.card:hover {
    transform: translateY(-5px); /* Move o card para cima */
    box-shadow: 0 10px 15px var(--shadow-color), 0 4px 6px var(--shadow-color); /* Aumenta a sombra */
}

/* Estilos para o título do card */
.card h2 {
    margin-top: 0; /* Remove a margem superior */
    font-weight: 600; /* Peso da fonte */
    font-size: 1.4rem; /* Tamanho da fonte */
    color: var(--primary-color); /* Cor do título usando variável */
    margin-bottom: 0.5rem; /* Margem inferior */
}

/* Estilos para os parágrafos dentro do card */
.card p {
    margin: 0.5rem 0; /* Margem vertical */
    line-height: 1.6; /* Altura da linha para melhor legibilidade */
    font-size: 1rem; /* Tamanho da fonte */
    color: var(--secondary-color); /* Cor do texto usando variável */
}

/* Estilos para os links dentro do card */
.card a {
    color: var(--primary-color); /* Cor do link usando variável */
    text-decoration: none; /* Remove o sublinhado */
    font-weight: 500; /* Peso da fonte */
    display: inline-block; /* Permite aplicar margem superior */
    height: 2.5rem; /* Altura fixa */
    margin-top: 1rem; /* Margem superior */
}

/* Estilos para o link do card ao passar o mouse */
.card a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Estilos para o rodapé */
footer {
    margin-top: 2rem; /* Adiciona espaço acima do rodapé */
    width: 100%; /* Largura total */
    text-align: center; /* Centraliza o texto */
    color: var(--tertiary-color); /* Cor do texto usando variável */
    background-color: var(--bg-color); /* Cor de fundo usando variável */
    padding: 1.4rem; /* Preenchimento interno */
    border-top: 1px solid var(--header-border-color); /* Borda superior usando variável */
    font-size: 1rem; /* Tamanho da fonte */
    box-shadow: 0 -2px 10px var(--shadow-color); /* Sombra na parte superior usando variável */
}

/* Estilos para a lista de links no rodapé */
.footer-links {
    list-style: none; /* Remove os marcadores da lista */
    display: flex; /* Ativa o layout flexbox */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: center; /* Centraliza os links horizontalmente */
    gap: 2rem; /* Espaçamento entre os links */
}

/* Estilos para os links no rodapé */
.footer-links a {
    color: var(--secondary-color); /* Cor do texto do link usando variável */
    text-decoration: none; /* Remove o sublinhado */
    transition: color 0.2s; /* Transição suave da cor */
}

/* Estilos para os links do rodapé ao passar o mouse */
.footer-links a:hover {
    color: var(--primary-color); /* Muda a cor do texto para a cor primária */
    font-weight: bold; /* Deixa o texto em negrito */
}

/* Media query para telas com largura máxima de 768px (tablets) */
@media (max-width: 768px) {
    /* Estilos para o cabeçalho em telas menores */
    header {
        flex-direction: column; /* Organiza os itens em coluna */
        padding: 1rem; /* Reduz o preenchimento */
    }

    /* Estilos para o título principal em telas menores */
    header h1 {
        text-align: center; /* Centraliza o texto */
        margin-bottom: 1rem; /* Adiciona margem inferior */
        font-size: 1.3rem; /* Reduz o tamanho da fonte */
    }

    /* Estilos para o container de busca em telas menores */
    div.search-container {
        width: 100%; /* Ocupa a largura total */
    }

    /* Estilos para o input em telas menores */
    div input {
        width: 100%; /* Ocupa a largura total */
        font-size: 1.1rem; /* Mantém o tamanho da fonte */
    }
}

/* Media query para telas com largura máxima de 480px (celulares) */
@media (max-width: 480px) {
    /* Estilos para o título principal em telas muito pequenas */
    header h1 {
        font-size: 1.1rem; /* Reduz ainda mais o tamanho da fonte */
    }

    /* Estilos para o input e seu placeholder em telas muito pequenas */
    div input,
    div input::placeholder {
        font-size: 1rem; /* Reduz o tamanho da fonte */
    }

    /* Estilos para o título do card em telas muito pequenas */
    .card h2 {
        font-size: 1.2rem; /* Reduz o tamanho da fonte */
    }

    /* Estilos para parágrafos e links do card em telas muito pequenas */
    .card p,
    .card a {
        font-size: 0.9rem; /* Reduz o tamanho da fonte */
    }

    /* Estilos para o container de busca em telas muito pequenas */
    div.search-container {
        flex-direction: column; /* Itens em coluna */
        gap: 0.5rem; /* Espaçamento entre os itens */
    }

    /* Estilos para o botão de busca em telas muito pequenas */
    #botao-busca {
        margin-top: 0.5rem; /* Adiciona margem superior */
        width: 100%; /* Ocupa a largura total */
    }
}