/* Estilo base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;*/
}

/* Estilo para o header */
.header {
    font-family: Georgia;
    background-color: #fcffff;
    color: rgb(13, 13, 13);
    padding: 1% 10%; /* Reduzir o espaço horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center; /* Centralizar texto no celular */
}

.header img {
    max-height: 70px; /* Mantendo a altura máxima do logo */
    margin-right: 10px; /* Espaço entre o logo e o nome */
}

.header h1 {
    margin: 0;
    font-weight: normal;
    font-size: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Colocar texto abaixo do logo */
        padding: 1% 5%;
    }

    .header img {
        margin-right: 0;
        margin-bottom: 10px; /* Espaço entre logo e texto */
    }

    .header h1 {
        font-size: 2em; /* Ajustar tamanho da fonte no celular */
        text-align: center;
    }
}

/* Ao clicar no logo redireciona para home */
.logo-link {
    display: inline-block;
}

.logo-link img {
    cursor: pointer;
}

/* Estilo para o menu de navegação */
.nav {
    background-color: #333;
    /* max-height: 51px; o menu hamburger não abria se tivesse limitação, por isso tem que alterar conf. tela*/
}

/* Aplicar max-height apenas em telas maiores */
@media (min-width: 768px) {
    .nav {
        max-height: 51px;
    }
}

.hamburger {
    display: none;
    font-size: 30px;
    color: white;
    padding: 14px 16px;
    cursor: pointer;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0; /* Ajustar padding */
    overflow: hidden;
    display: flex;
    justify-content: space-around; /* Distribui os itens proporcionalmente */
    width: 100%; /* Garante que o menu ocupe toda a largura */
}

.nav ul li {
    flex: 1; /* Faz com que cada item ocupe o mesmo espaço */
}

.nav ul li a {
    display: flex; /* Flexbox para garantir que o link ocupe toda a altura do item */
    align-items: center; /* Centralizar verticalmente */
    justify-content: center; /* Centralizar horizontalmente */
    color: white;
    text-align: center;
    padding: 14px 0; /* Ajustar o padding para garantir que o background cubra toda a área do link */
    text-decoration: none;
}

.nav ul li a:hover {
    background-color: #111;
}

/* Estilo para o conteúdo principal */
.main {
    margin: 20px;
    padding: 20px;
    flex: 1; /* Garantir que o conteúdo principal cresça */
}

/* Estilo para o footer */
.footer {
    background-color: #333; /* Cor de fundo do rodapé */
    color: white; /* Cor do texto */
    padding: 20px 0;
    text-align: left; /* Alinhar o texto à esquerda */
    width: 100%;
    position: relative; /* Permitir que o rodapé seja rolável */
    margin-top: auto; /* Empurrar o rodapé para o final da página */
}

/* Contêiner das colunas */
.footer-columns {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start; /* Alinhar as colunas no topo */
}

/* Estilo das listas de ícones */
.footer ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

/* Estilo dos itens de lista */
.footer li {
    margin: 10px 0;
}

/* Estilo dos links e ícones */
.footer a {
    text-decoration: none;
    color: white;
}

/* Estilo dos links e ícones ao passar o mouse */
.footer a:hover {
    color: #007BFF;
}

/* Estilo dos parágrafos no rodapé */
.footer .p {
    margin-top: 20px;
    margin: 10px auto; /* Centralizar o texto */
    text-align: center; /* Centralizar o texto */
}

/* Estilo das colunas */
.footer .column {
    flex: 1;
    min-width: 200px; /* Para responsividade */
}

/* Estilo responsivo */
@media (max-width: 767px) {
    .footer-columns {
        flex-direction: column;
        align-items: flex-start; /* Alinhar as colunas à esquerda em dispositivos móveis */
        margin-left: 3mm; /* Margem esquerda em dispositivos móveis */
        margin-right: 3mm; /* Margem esquerda em dispositivos móveis */
    }

    .footer .column {
        width: 100%;
    }

    .footer li {
        margin: 5px 0;
    }
}

/* Estilo para a barra branca no rodapé */
.bar {
    width: 90%;
    height: 2px; /* Altura fina */
    background-color: white; /* Cor de fundo branca */
    margin: 10px auto; /* Centralizar e adicionar espaço */
}

/* Estilo responsivo para menu */
@media screen and (max-width: 768px) {
    .nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav ul.show {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .nav ul li {
        flex: none;
    }

    .nav ul li a {
        text-align: left;
        padding: 10px 20px;
    }
}

/* Garantir que o rodapé fique no final da página */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

body > * {
    flex: 1;
}

footer.footer {
    flex-shrink: 0;
    position: relative;
}

/* Estilos gerais da barra de pesquisa do Blog, e respectivo botão - responsivos*/
#searchForm {
    display: flex;
    width: 90%; /* Ajusta a largura para 90% */
    margin: 0 auto;
    padding: 10px 0;
}

#searchForm input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
}

#searchForm button {
    background-color: #0033a0;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 0 5px 5px 0;
    font-size: 16px;
    cursor: pointer;
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    #searchForm {
        width: calc(100% - 6mm); /* Subtrai 3mm de cada lado */
        margin: 0 auto; /* Centraliza o formulário */
    }

    #searchForm input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px;
    }

    #searchForm button {
        background-color: #0033a0;
        color: white;
        border: none;
        padding: 10px 15px; /* Ajusta o padding para que não fique muito grande em telas pequenas */
        border-radius: 0 5px 5px 0;
        font-size: 16px;
        cursor: pointer;
    }
}

/* Estilos para dispositivos ainda menores */
@media (max-width: 480px) {
    #searchForm {
        flex-direction: column;
        width: calc(100% - 6mm); /* Subtrai 3mm de cada lado */
        margin: 0 auto; /* Centraliza o formulário */
    }

    #searchForm input, #searchForm button {
        width: 100%;
        box-sizing: border-box; /* Garante que o padding e a borda sejam incluídos na largura total */
    }

    #searchForm input {
        border-radius: 5px 5px 0 0; /* Ajusta o raio da borda */
    }

    #searchForm button {
        border-radius: 0 0 5px 5px; /* Ajusta o raio da borda */
        margin-top: -1px; /* Remove a borda duplicada entre o input e o botão */
    }
}

/*CSS DAS TAGS DOS ARTIGOS*/
/* centralização definitiva */ /*
.post_page_tags{          
    display:flex;
    flex-direction:column;
    align-items:center;   
}

.post_page_tags h3{     
    text-align:center;
} 


.post_page_tags ul{
    margin:0;             
    justify-content:center;
}

.post_page_tags li{      
    display:inline-flex;
}

.post_page_tags li a:hover{background:#0033a0;color:#fff}
*/

.post_page_tags{
    margin:2rem auto 1rem;            
    font-size:.95rem;
    max-width:800px;                   
    text-align:center;               
}
.post_page_tags h3{
    font-size:1.05rem;
    margin-bottom:.5rem
} 
/* flex + centralização das tags */ 
.post_page_tags ul{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    justify-content:center;             
    padding:0;
    margin:0; 
    list-style:none;
}
.post_page_tags li a{
    background:#f1f1f1;padding:.4rem .7rem;border-radius:20px;
    font-size:.9rem;color:#333;text-decoration:none;
    transition:.2s;
}
.post_page_tags li a:hover{background:#0033a0;color:#fff}

/*FIM DO CSS DAS TAGS DOS ARTIGOS*/