/* 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*/
}

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

.nav > ul#nav-links {
    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 */
}

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

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

.nav > ul#nav-links > 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;
}

/*submenu*/
.has-submenu { position: relative; }

.has-submenu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 10px;      /* aumenta a área de hover */
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  /* left: 0; */
  left: 0;
  transform: translateX(+8%);
  min-width: 220px;
  /*padding: 8px 0; */
  padding-top: 8px;   
 
  margin: 0; 
  list-style: none;

  background: #333;           
  border: 1px solid #111;
  border-radius: 10px;
  z-index: 9999;
}

@media (max-width: 767px) {
  .submenu {
    left: 0;
    right: 0;
    transform: none;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.submenu li a {
  display: block;
  padding: 10px 12px;
  color: #fff;               
  text-decoration: none;
  text-align: left;
}

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


.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu > .submenu:hover {
  display: block;
}

/*FIM DO SUBMENU*/

/*ABRIR E RECOLHER O HAMBURGER*/
/* Esconde o checkbox */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Hamburger só aparece no mobile */
@media (max-width: 767px) {
  .hamburger {
    display: block;      /* agora é label */
    font-size: 30px;
    color: white;
    padding: 14px 16px;
    cursor: pointer;
  }

  /* menu fechado por padrão no mobile */
  .nav > ul#nav-links {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* quando checkbox marcado, abre */
  .nav-toggle:checked ~ ul#nav-links {
    display: flex;
  }

  .nav > ul#nav-links > li {
    flex: none;
  }
}

/* Desktop: hamburger escondido e menu normal */
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }

  .nav > ul#nav-links {
    display: flex; /* como já estava */
  }
}
/*FIM DO MENU*/

/* ===== Submenu toggle: desktop normal, mobile por seta ===== */

/* some com o checkbox SEMPRE (remove o quadradinho) */
.has-submenu > .submenu-toggle{
  display: none;
}

/* seta escondida no desktop */
.has-submenu > .submenu-caret{
  display: none;
}

@media (max-width: 767px){

  /* mostra a seta no mobile, no canto direito */
  .has-submenu{
    position: relative;
  }

  .has-submenu > .submenu-caret{
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    cursor: pointer;
    user-select: none;
  }

  /* no mobile, submenu empilha (não flutua) */
  .has-submenu > .submenu{
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* no mobile NÃO abre por hover/focus (evita sumir/flicker) */
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu,
  .has-submenu > .submenu:hover{
    display: none;
  }

  /* abre SOMENTE quando marcar o checkbox via label */
  .has-submenu > .submenu-toggle:checked ~ .submenu{
    display: block;
  }
}

/* ===== Submenu toggle: desktop normal, mobile por seta ===== */

/* some com o checkbox SEMPRE (remove o quadradinho) */
.has-submenu > .submenu-toggle{
  display: none;
}

/* seta escondida no desktop */
.has-submenu > .submenu-caret{
  display: none;
}

@media (max-width: 767px){

  /* mostra a seta no mobile, no canto direito */
  .has-submenu{
    position: relative;
  }

  .has-submenu > .submenu-caret{
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    cursor: pointer;
    user-select: none;
  }

  /* no mobile, submenu empilha (não flutua) */
  .has-submenu > .submenu{
    position: static;
    transform: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* no mobile NÃO abre por hover/focus (evita sumir/flicker) */
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu,
  .has-submenu > .submenu:hover{
    display: none;
  }

  /* abre SOMENTE quando marcar o checkbox via label */
  .has-submenu > .submenu-toggle:checked ~ .submenu{
    display: block;
  }
}

/*VOLTAR AO TOPO*/
.voltar-topo{
    display: inline-block;
    margin: 30px auto 10px;
    padding: 10px 18px;
    border: 1px solid #c9c9c9;
    border-radius: 20px;
    background: #f8f8f8;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.voltar-topo:hover{
    background: #e9e9e9;
    color: #000;
    border-color: #999;
}
/**/

/* 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;
    /*1º valor = distância ENTRE LINHAS  | 2º = entre colunas*/
    /* gap:.5rem; */
    gap: 1.2rem .5rem;   /* 1.2 rem acima/abaixo - 0.5 rem lado a lado */
    justify-content:center;             
    padding:0;
    /*margin:0; */
    margin-block: 1.0rem;     /* .8 rem em cima + .8 rem embaixo         */ 
    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}

@media (max-width: 600px){          /* celulares e pequenos tablets */
    .post_page_tags ul{
        /* espaço VERTICAL ligeiramente maior que o horizontal        */
        gap: 1.3rem .5rem;           /* 1º = entre linhas | 2º = entre colunas */
        margin-block: .9rem;        /* folga extra acima/abaixo do grupo      */
    }

    /* opcional: chips um pouco mais “gordinhos” no polegar           */
    .post_page_tags li a{
        padding: .5rem .8rem;
        font-size: .95rem;
    }
}
/*FIM DO CSS DAS TAGS DOS ARTIGOS*/