/*
Theme Name: Tema Didacus
Theme URI: http://example.com/meu-tema/
Author: Seu Diego Dias Gomes
Author URI: http://example.com
Description: Um tema customizado para meu site.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom, etc
Text Domain: meu-tema
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffffec;
    color: #252422;
  }

  h1 {
    font-size: 1.6rem;
  }

  h2 {
    font-size: 1.2rem;
    color: #613DC1;
  }

  p {
    font-size: 1.15rem;
  }

  h3 {
    color: #2C0735;
  }

 


  .banner-top {
    background-image: url('https://cdn.midjourney.com/2fcbd4a8-9a28-43e8-a28b-0f2f96f0d313/0_0.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
  }

  /* Estilos do navbar */
  @keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  /* Estilos básicos para o cabeçalho */

  header {
    position: -webkit-sticky; /* Para compatibilidade com Safari */
    position: fixed;
    background-color: transparent;
    width: 100%;
    top: 0;
    z-index: 1000; /* Garante que o header fique acima de outros conteúdos */
  }

.navbar {
  display: flex; /* Flexbox para alinhamento dos itens */
  justify-content: space-between; /* Espaço entre os itens */
  align-items: center; /* Centraliza verticalmente */
  padding: 20px  30px; /* Algum espaço interno */
  background-color: transparent; /* Fundo branco ou qualquer cor que você queira */
  transition: background-color 0.5s ease;
  
  }


.logo, .social-media {
  flex: 1; /* Dá aos elementos uma proporção igual no flex container */
}

.menu-icon {
  position: absolute; /* Posicionamento absoluto para centralizar */
  left: 50%; /* Centraliza no eixo x */
  transform: translateX(-50%); /* Desloca para a esquerda por metade da sua largura */
  cursor: pointer; /* Muda o cursor para indicar a capacidade de clicar */
  z-index: 20; /* Garante que esteja acima do overlay */
}

.linkedin-icon {
  width: 15px;
}

.linkedin-icon:hover {
  color:#4E148C;
}

.logo-img {
  width: 30px;
}

.social-media {
  text-align: right; /* Alinha o ícone do LinkedIn à direita */
}

.menu-overlay {
  visibility: hidden; /* Esconde o overlay, mas permite a transição */
  display: flex;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear; /* A visibilidade irá atrasar a transição para desaparecer */
  position: fixed; /* Fixo na tela */
  top: 0; left: 0; right: 0; bottom: 0; /* Cobertura total */
  background-color: #f1f1f1; /* Cor de fundo do overlay */
  z-index: 15; /* Sobre o conteúdo da página, mas sob o botão do menu */
  align-items: center; /* Centraliza os itens do menu verticalmente */
  justify-content: center; /* Centraliza os itens do menu horizontalmente */
  
}

.menu-overlay.show {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0s, opacity 0.5s linear; /* A visibilidade deve mudar imediatamente ao aparecer */
}

.menu {
  width: 100%; /* O menu usa toda a largura do overlay */
  animation: slideDown ease-in-out 1s;
}

.menu-overlay ::marker{
  color: transparent;
  display: none;
}

.menu a {
  display: block; /* Faz cada link aparecer em sua própria linha */
  text-align: center; /* Centraliza o texto dos links */
  padding: 20px; /* Espaçamento */
  border-bottom: 1px solid #FFFFFF; /* Linhas entre os links */
  background: none; /* Sem fundo para os links */
  color: #000000; /* Cor do texto dos links */
  text-decoration: none; /* Sem sublinhado nos links */
  font-size: 1.5em; /* Tamanho da fonte dos links */
}

.menu a:last-child {
  border-bottom: none; /* Remove a borda do último item */
}


/* Estilo para o ícone de 'X' */
.close-icon {
  display: none; /* Escondido por padrão */
  font-size: 2em; /* Tamanho do ícone 'X' */
  position: absolute;
  top: 10px; /* Posicionado no topo */
  left: 50%; /* Centralizado no eixo x */
  transform: translateX(-50%); /* Centralizado corretamente */
  z-index: 25; /* Assegura que está acima do overlay */
}

  .body-content {
    padding: 30px 0;
  }

  .cont-form {
  
    padding: 0 30px; /* Para um pouco de espaço nas laterais */
  }

  .contact-form {
    width: 100%;
  }

  .container {
    max-width: 1800px; /* ou a largura que você achar melhor */
    
    padding: 0 45px; /* Para um pouco de espaço nas laterais */
  }

  .container p {
    font-size: 1.15rem;
  }

  .container a, footer a {
    text-decoration: underline;
    text-decoration-color: #613DC1;
    text-decoration-thickness: 2px;
    font-weight: 400;
    color: black;
  }

  .container a:hover, footer a:hover {
    color: #613DC1; /* Fundo ao passar o mouse */
    transition: color 0.3s; /* Transição suave */
  }

  .card {
    padding: 15px 0;
  }

  .hero-content {
    display: flex;
    flex-wrap: wrap; /* Isso ajuda na responsividade */
  align-items: center; /* Alinha verticalmente */
  justify-content: space-between;
   
  }

  .hero-content-blog {
    flex-wrap: wrap; /* Isso ajuda na responsividade */
  align-items: center; /* Alinha verticalmente */
  justify-content: space-between;
   
  }
  
  .hero {
    background-color: #fffffff6;
    padding-top: 60px;
    min-height: calc(100vh - 50px);
    

  }

  .intern {
    padding-top: 100px;
    padding-bottom: 60px;
    min-height: auto;

  }


  .hero, .profile {
    
    display: flex; 
    flex-direction: column; 
    justify-content: center;
  }

  .hero .text-content h1{
    padding: 0 0 15px 0;
  }

  .newsletter-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px; /* Ajuste conforme necessário */
  }

  .profile .hero{
    margin-top: 20px;

  }

  .profile h2{
    margin-bottom: 30px;
  }
  
  .profile p {
    font-size: 1.1rem;
  }

  .quote {
    font-style: italic;
    font-weight: 200;
    padding: 15px;
    margin: 45px 0;
    border-left: 5px solid #613DC1;
    
  }
  
  .input-group,
.button-group {
  width: 100%; /* Ocupa 100% por padrão */
  margin-bottom: 15px; /* Espaço entre o campo de entrada e o botão no mobile */
}
  
  .input-group {
    flex-basis: 65%; /* Ajuste a largura conforme necessário */
    margin-right: 10px; /* Espaço entre o campo de entrada e o botão */
  }
  
  .button-group {
    flex-basis: 30%; /* Ajuste a largura conforme necessário */
  }
  
  .newsletter-form input[type="email"] {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #040F0F;
    background-color: #FCFFFC;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil */
  }

  .side-formnews input[type="email"] {
    margin-top: 15px;
    width: 100%;
    padding: 8px 13px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: #040F0F;
    background-color: #FCFFFC;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra sutil */
  }
  
  .newsletter-form button, .contact-form button {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #FCFFFC;
    background-color: #613DC1;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .buttonnews {
    width: 100%;
    padding: 9px 13px;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: #FCFFFC;
    background-color: #613DC1;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .newsletter-form button:hover, .contact-form button:hover, .post-card button:hover, .buttonnews:hover {
    background-color: #4E148C; /* Uma versão mais escura do verde para o hover */
  }

.post-card button {
    margin: 30px 0;
    width: 30%;
    padding: 5px 7px;
    border: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    color: #FCFFFC;
    background-color: #613DC1;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .contact-form-container {
  margin: 20px 0;
  width: 100%;
  padding: 40px 20px;
  background: #f1f1f1;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; /* Para garantir que o padding não afete a largura total */
}

.form-group textarea {
  resize: vertical; /* Permite que o usuário redimensione verticalmente */
}

.btn-submit {
  background-color: #0056b3;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-submit:hover {
  background-color: #003d82;
}

.post-grid {
  display: grid;
  grid-template-columns: 1fr; /* Uma coluna por linha */
  gap: 20px;
  margin: 15px 0;
}

.last, .sidebar {
  grid-column: 1; /* Todos os itens ocupam a única coluna disponível */
}


.post-card {
  border: 1px solid #dadada;
  padding: 15px;
}

.post-card:hover {
  transform: scale(1.025);
  transition: transform 0.3s;
}


.card-top {
  width: 100%; /* Faz o contêiner ocupar 100% da largura do seu contêiner pai */
  height: 0;
  padding-top: 50%; /* Exemplo para manter a proporção, ajuste conforme necessário */
  position: relative; /* Posicionamento relativo para o posicionamento absoluto da imagem */
  overflow: hidden; /* Garante que qualquer parte da imagem fora do contêiner seja oculta */
  max-height: 320px; /* Altura máxima para o contêiner */
}

.card-top img {
  width: 100%; /* Faz a imagem ocupar 100% da largura do contêiner */
  height: 100%; /* Faz a imagem ocupar 100% da altura do contêiner */
  object-fit: cover; /* Garante que a imagem cubra todo o espaço disponível, sendo cortada se necessário */
  position: absolute; /* Posiciona a imagem de forma absoluta em relação ao seu contêiner pai */
  top: 0;
  left: 0;
}

.card-bottom {
  padding: 15px;
  width: 100%;
}

.category-post {
  position: relative;
  z-index: 2;
  margin: -50px 0 0 15px;
  
}

.post-info p {
  font-size: 0.7rem;
}

.post-description p {
  font-size: 1rem;
}

.category-post a {
  
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 0.7rem;
  padding: 3px 7px;
  width: fit-content;
  background-color: #613DC1;
}

.category-post a:hover, .single-category a:hover {
  color: rgb(243, 243, 243);
  transition: color 0.3s;
}

.single-category {
  margin: 15px 0;
}

.single-category a {
  
  color: white;
  margin: 10px 0;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.7rem;
  padding: 3px 7px;
  width: fit-content;
  background-color: #613DC1;
}

.single-description p {
  margin: 15px 0;
  font-size: 1.25rem;
}

.single-info p {
  margin: 15px 0;
  font-size: 1rem;
}

.single-thumbnail {
  width: 100%; /* Faz o contêiner ocupar 100% da largura do seu contêiner pai */
  height: 0;
  padding-top: 50%; /* Exemplo para manter a proporção, ajuste conforme necessário */
  position: relative; /* Posicionamento relativo para o posicionamento absoluto da imagem */
  overflow: hidden; /* Garante que qualquer parte da imagem fora do contêiner seja oculta */
  max-height: 320px; /* Altura máxima para o contêiner */
}

.single-thumbnail img {
  width: 100%; /* Faz a imagem ocupar 100% da largura do contêiner */
  height: 100%; /* Faz a imagem ocupar 100% da altura do contêiner */
  object-fit: cover; /* Garante que a imagem cubra todo o espaço disponível, sendo cortada se necessário */
  position: absolute; /* Posiciona a imagem de forma absoluta em relação ao seu contêiner pai */
  top: 0;
  left: 0;
}


.component {
  margin-top: 10px;
}

.sidebar {
  padding: 30px;
  background-color: rgb(246 246 246);
}

.form-search{
  position: relative;
  width: 300px;
}

.form-search input[type="text"] {
  width: 100%;
  padding: 10px 20px 10px 10px; /* Espaço extra à direita para o botão */
  border: 1px solid #ccc;
  border-radius: 20px; /* Bordas arredondadas */
  outline: none; /* Remove o contorno ao focar */
}

.form-search button {
  margin: 0px;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px; /* Tamanho do botão */
  height: 40px; /* Tamanho do botão */
  border-radius: 50%; /* Faz o botão ser um círculo */
  border: none; /* Remove a borda padrão do botão */
  background: none;
  color: white; /* Cor do ícone da lupa */
  cursor: pointer; /* Muda o cursor para indicar clicabilidade */
  outline: none; /* Remove o contorno ao focar */
}

.sidebar h3 {
  padding: 20px 0;
}

.sidebar p{
  font-size: 0.8rem;
}

.tag-cloud-link {
  padding: 4px 6px;
  background-color:#2C0735;
}

.side-formnews {
    flex-direction: row;  /* Mudança para linha no desktop */
    justify-content: space-between;
    align-items: center;
}

.tag-cloud {
  padding: 15px 0;
}

.tag-cloud a {
  color: white;
  text-decoration: none;
}

.searchform {
  margin: 90px;
  background-color: #2C0735;
}

.single-content p, h1, h2 {
  padding: 10px 0;
}

.single-content ul {
  margin: 5px 45px;
}

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .hero * { /* Aplica a animação a todos os elementos dentro da seção hero */
    animation: fadeIn 1s ease-in-out;
  }

  .profile h1, p, .quote{
    animation: fadeIn 1s ease-in-out;
}

  .profile h2{
    animation: slideDown ease-in-out 2s;
  }

  span {
    color: #613DC1;
  }
  

  .separador {
    border-top: 5px solid #613DC1;
    width: 20%;
    margin: 50px auto;
    justify-content: center;
  }

  .experiência h1 {
    font-size: 1.6rem;
  }

  .job {
    margin: 30px 0;
  }
  
  .also {
    padding: 30px 0;
    background-color: rgb(246 246 246);
  }
  
  /* Estilos para mobile first */
  @media (min-width: 768px) {

    .post-grid {
      grid-template-columns: repeat(3, 1fr); /* Cria uma grade com 3 colunas de tamanho igual */
    gap: 10px; /* Espaçamento entre os itens da grade */
    }
  
    .last {
      grid-column: 1 / span 2; /* O último post ocupa as duas primeiras colunas */
    }
    
    .sidebar {
      grid-column: 3; /* A sidebar ocupa a terceira coluna */
    }


    .hero {
      min-height: calc(100vh - 50px);
    }

    .intern {
      min-height: auto;
    }
    .menu-icon, .close-icon {
      display: none; /* Esconde os ícones de menu e fechar */
    }
  
    .logo, .social-media {
      flex: 0; /* Ajusta para que não cresçam com o flex-grow */
    }
  
    .logo {
      margin-right: 20px; /* Espaço entre o logo e o menu */
    }

    .navbar{
    display: flex; /* Flexbox para alinhamento dos itens */
    justify-content: space-between; /* Espaço entre os itens */
    align-items: center; /* Centraliza verticalmente */
    background-color: #ff000000; /* Fundo branco ou qualquer cor que você queira */
    }
  
  
  .social-media {
    flex: 1; /* Dá aos elementos uma proporção igual no flex container */
  }
  
    .menu-overlay {
      visibility: visible; /* Torna o menu sempre visível */
      opacity: 1; /* Define a opacidade para 1 para que o menu seja totalmente visível */
      transition: none; /* Remove qualquer transição para dispositivos maiores */
      position: relative; /* Posicionamento relativo dentro da barra de navegação */
      background-color: transparent; /* Fundo transparente para não sobrepor outros elementos */
      z-index: auto; /* O z-index pode ser auto, pois não precisamos que o menu esteja sobre outros elementos */
      align-items: flex-start; /* Não é necessário para um menu horizontal */
      justify-content: flex-start; /* Alinha os itens do menu à esquerda */
      flex-direction: row; /* Alinha os itens do menu em linha */
      flex-grow: 1;
    }
  
    .menu {
      display: flex; /* Itens do menu em linha */
      justify-content: flex-start; /* Alinha itens à esquerda */
      position: relative; /* Posicionamento relativo */
      
    }

    .menu a:active {
      color: #613DC1;
    }
  
    .menu a {
      display: inline-block; /* Links do menu em linha */
      font-size: 15px;
      padding: 10px 15px; /* Espaçamento */
      color: #000; /* Cor do texto */
      text-decoration: none; /* Sem sublinhado */
    }
  
    .menu a:hover {
      color: #613DC1; /* Fundo ao passar o mouse */
      transition: color 0.3s; /* Transição suave */
    }
  
    .navbar .menu, .navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


    h1 {
        font-size: 2.5rem;
      }

    p {
        font-size: 22px;
    }

    
    }

      
  @media (min-width: 992px) {

    .navbar{
      padding: 15px 120px;
    }
    .container, .cont-form {
        padding: 0 120px;
    }

    .cont-form p{
      font-size: 1.2rem;
      padding-bottom: 10px;
    }
    
    h1 {
      font-size: 2.7rem;
    }

  p {
      font-size: 1.7rem;
  }

    
    
    
      .social-media {
        margin-left: auto; /* Isso empurra o ícone do LinkedIn para a direita */
      }

      .text-content {
        flex-basis: 85%; /* 75% da largura do contêiner para o conteúdo do texto */
        max-width: 85%; /* Para garantir que não exceda a porção designada */
      }

      .contact-info {
        flex-basis: 50%; /* 75% da largura do contêiner para o conteúdo do texto */
        max-width: 50%; /* Para garantir que não exceda a porção designada */
      }

      .contact-form {
        flex-basis: 50%; /* 75% da largura do contêiner para o conteúdo do texto */
        max-width: 50%; /* Para garantir que não exceda a porção designada */
      }

      .newsletter-form {
        flex-direction: row;  /* Mudança para linha no desktop */
        justify-content: space-between;
        align-items: center;
      }
    
      .input-group {
        flex-basis: 65%; /* Ajuste a largura conforme necessário no desktop */
        margin-right: 10px; /* Espaço entre o campo de entrada e o botão no desktop */
      }
    
      .button-group {
        flex-basis: 30%; /* Ajuste a largura conforme necessário no desktop */
      }

      .profile-content {
        flex-basis: 100%; /* 75% da largura do contêiner para o conteúdo do texto */
        max-width: 100%; /* Para garantir que não exceda a porção designada */
        justify-content: center;
        align-items: center;
      }

      .profile .container{
        max-width: 100%;
        padding: 50px 300px;
      }

      .blog .container{
        max-width: 100%;
        padding-top: 50px;
      }

      .cont-form h2{
        font-size: 1.4rem;
      }

    }

    
    
    
  
  
  /* Footer */
  footer {
    text-align: center;
    padding: 1rem;
    background-color: #fffff6;
    color: #1d241d;
  }

  footer p{
    font-size: 1rem;
  }  
  
  /* ... Você adicionará mais estilos conforme desenvolve o site ... */