* {
  box-sizing: border-box !important;
  padding: 0;
  margin: 0;
  font-family: Roboto;
}

:root {
  --primary-color: #6179ff; /* Declara a cor global */
  --secondary-color: #0f1d5f;
  --secondary-background: #f5f7fd;
  --text-color: #7A7A7A;
}



.nav-title {
  color: var(--secondary-color);
  font-weight: 500;
}

.nav-title:hover {
  color: var(--primary-color);
}

.secondary-bg {
  background: var(--secondary-background) !important;
}

.asideText {
  color: var(--secondary-color) !important;
  font-weight: bold;
}

#search-input {
  box-shadow: none; /* Remove a sombra padrão */
  outline: none; /* Remove o contorno padrão */
  border: 1px solid transparent; /* Borda inicial transparente */
  transition: border 0.9s ease; /* Anima a transição da borda */
  background: var(--secondary-background); /* Cor de fundo da variável */
}

#search-input:focus {
  border: 1px solid black; /* Borda preta no foco */
  outline: none; /* Remove o contorno padrão */
}

.articleTitle {
  color: var(--primary-color); /* Aplica a cor global ao h1 */
}

.attachment-thumbnail {
  object-fit: cover; /* Para garantir que a imagem se encaixe bem no tamanho especificado */
}

.sidebar .list-group {
  border: none; /* Remove qualquer borda do list-group */
  padding: 0; /* Remove o preenchimento padrão */
}

.sidebar .list-group-item {
  border: none; /* Remove a borda dos itens da lista */
}

.searchTitle {
  font-size: 1.5em;
  color: var(--secondary-color);
  font-weight: 600;
}

.footer {
  background: #0d1e67;
}

.btn-login {
  border: 2px solid var(--primary-color) !important;
  padding: 0.5em 1.5em !important;
  color: var(--secondary-color) !important;
}

.btn-trial {
  padding: 0.5em 1.5em !important;
  color: white !important;
}

/* Personalizando todos os <p> dentro de posts */
.post-content p {
  font-size: 1.2em;        /* Tamanho de fonte */
  line-height: 1.6;        /* Altura da linha */
  background-color: #f8f9fa; /* Cor de fundo */
  padding: 10px;           /* Espaçamento interno */
  border-radius: 5px;      /* Bordas arredondadas */
}



@media (min-width: 600px) and (max-width: 1000px) {
  body {
    margin: 0; /* Remove a margem do body */
  }

  .container {
    padding: 0; /* Remove o padding do container */
    width: 100%; /* Garante que o container ocupe toda a largura */
  }

  .navbar-toggler {
    margin-left: auto; /* Empurra o botão para a direita */
  }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 400px) {
  .navbar-brand img {
    max-width: 80px; /* Reduz o tamanho da logo */
    height: auto;    /* Mantém a proporção */
  }

  .btn-trial {
    font-size: 12px; /* Diminui o tamanho do texto do botão */
    padding: 8px 12px; /* Ajusta o espaçamento interno */
  }

  .navbar {
    flex-wrap: nowrap; /* Garante que os itens fiquem na mesma linha */
  }
}


.post a 
  font-weight: 400;
  color: var(--text-color);
}

/* Estilizando parágrafos dentro de posts */
.post p, .excerpt {
  font-weight: 400;
  color: var(--text-color);
}

.post u{
  font-weight: 400;
  text-decoration: none;
}

.post a{
  font-weight: 400;
  text-decoration: none;
}

/* Garantir que a imagem não ultrapasse o tamanho da div */
.post img {
  max-width: 100% !important; 
  height: auto;  
  object-fit: fit; 
  border-radius: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto; 
}


/* botoes paginacao */
/* Classe personalizada para os botões de paginação */
.pagBTN {
  background-color: white; /* Fundo branco */
  color: var(--primary-color);
  border: 2px solid var(--primary-color); /
  padding: 8px 16px; 
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer; 
  transition: background-color 0.3s, color 0.3s;
  padding: .5em;
  margin-bottom: .5em;
}

/* Quando o botão estiver ativo (selecionado), muda o fundo para azul e o texto para branco */
.pagBTN.active {
  background-color: var(--primary-color); /* Fundo azul */
  color: white; /* Texto branco */
  border-color: var(--primary-color); /* Borda azul */
}

/* Hover - Inverte as cores de fundo e texto */
.pagBTN:hover {
  background-color: var(--primary-color); /* Fundo azul */
  color: white; /* Texto branco */
  border-color: var(--primary-color); /* Borda azul */
}

/* Estado desabilitado (botões não clicáveis, como "..." ou páginas que não podem ser acessadas) */
.pagBTN:disabled {
  background-color: var(--primary-color) !important;
  color: white; /* Texto branco */
  border-color: var(--primary-color); /* Borda azul */
  cursor: not-allowed; /* Cursor de "não permitido" */
}

/* Para os números da página ao lado do "..." */
.pagBTN:not(.active):hover {
  background-color: var(--primary-color); /* Fundo azul */
  color: white; /* Texto branco */
}