/*
Theme Name: Candidato a Vereador
Theme URI: https://edronet.com
Author: Edvaldo Rodrigues
Author URI: https://edronet.com.br
Description: Tema WordPress para a campanha de um candidato a vereador.
Version: 4.6
Text Domain: candidato-vereador
*/

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5; /* Fundo mais claro */
    color: #333; /* Texto mais escuro */
    padding-top: 60px; /* Compensar a altura do header fixo */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Faz com que o conteúdo principal ocupe todo o espaço disponível */
}

header {
    background-color: #343a40; /* Cor de fundo do cabeçalho mais escura */
    color: #fff; /* Texto branco */
    display: flex;
    align-items: center;
    padding: 20px;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

header h1, header p {
    color: #fff; /* Garante que o texto do cabeçalho seja branco */
}
/* Estilo para o topo do site */
.site-header {
    background-color: #343a40; /* Cor de fundo do topo */
    padding: 20px 0; /* Espaçamento interno no topo e na base */
    color: #ffffff; /* Cor do texto */
}

/* Contêiner principal do conteúdo do cabeçalho */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espaço entre a foto e o texto */
}

/* Estilo da foto do candidato */
.candidate-photo {
    flex-basis: 35%; /* Reserva 35% da largura para a foto */
    max-width: 35%;
    margin-right: 20px; /* Espaçamento à direita da foto */
}

.candidate-photo-img {
    width: 100%; /* A foto ocupa toda a largura do contêiner da foto */
    height: auto; /* Mantém a proporção da foto */
    border-radius: 50%; /* Forma circular para a foto */
}

/* Estilo das informações do candidato */
.candidate-info {
    flex-basis: 65%; /* Reserva 65% da largura para o texto */
    max-width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente as informações */
}



/* Ajustes para telas menores */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column; /* Muda para layout vertical em telas menores */
        text-align: center; /* Centraliza o texto em telas menores */
    }

    .candidate-photo,
    .candidate-info {
        flex-basis: 100%; /* Ambos os blocos ocupam 100% da largura em telas menores */
        max-width: 100%;
        margin: 0 0 20px 0; /* Espaçamento entre os blocos no layout vertical */
    }

    .candidate-photo img {
        max-width: 200px; /* Limita a largura da foto em telas menores */
        margin: 0 auto; /* Centraliza a foto em telas menores */
    }
}
/*fim do topo do site*/
.navbar-nav .nav-link {
    color: #f8f9fa !important; /* Garante que os links do nav tenham contraste suficiente */
}

.navbar-nav {
    text-align: center;
    width: 100%;
}

.navbar-nav .nav-item {
    display: inline-block;
    margin: 0 10px;
}

@media (max-width: 768px) {
    .navbar-nav .nav-item {
        display: block;
        margin: 10px 0;
    }
}

.polaroid {
    width: 80%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.polaroid img {
    width: 100%;
    height: auto;
}

.proposal {
    margin-bottom: 30px;
    color: #0056b3;
}

.proposal-img {
    border: 2px solid #ddd;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.social-icon {
    width: 48px;
    height: 48px;
    margin: 0 10px; /* Adicionar margem entre ícones */
}

.contact-icon {
    width: 100px;
    height: 100px;
}

.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
}