/* Reset Globa */
*{
  margin: 0;
  padding: 0;
    box-sizing: border-box; 
}

/* ===================== Fontawesome Family =============== */

html {
  scroll-behavior: smooth;
}

/* ==================== Body & Navbar ======================== */

body{
  font-family: 'Segoe UI', sans-serif; 
  background: #F5F5F5; 
  color: #333; 
  transition: 0.3s;
}

/* Ajustes para o Modo Escuro */
/* MODO ESCURO */
body.dark-mode { 
  background: #121212; 
  color: #e4e6eb; 
}
body.dark-mode .post, body.dark-mode .sidebar-widget { 
  background: #1e1e1e !important; 
  color: #e4e6eb; 
  border: 1px solid #333; 
}
body.dark-mode h1, body.dark-mode h2 a, body.dark-mode h3 { 
  color: #fff !important; 
}
body.dark-mode #btnTop { 
  background-color: #444; 
}
body.dark-mode .whatsapp-msg { 
  background-color: #242526; 
  color: white; 
}
 /* Ajuste para o Modo Escuro */
body.dark-mode #typewriter {
  border-right-color: #fff !important;
  color: #fff;
}

/* Ajuste para o Modo Escuro */
body.dark-mode .rel-card {
  background: #242526 !important;
  border-color: #3a3b3c !important;
  color: #fff !important;
}

a.excluir{ 
  text-decoration:none; 
  font-size: 16px; 
  font-weight:bold; 
}

/* ================ Navegação =============== */
/* Estilo para Computador */
.navbar-principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
    background: #333;
}

.nav-links {
    display: flex;
    gap: 50px; /* Seu espaço de 100px aqui */
    align-items: center;
}

.nav-links a{
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.nav-links a:hover{
    color: #FFC107;
}

/* --- AJUSTE PARA CELULAR (Quando a tela for menor que 1024px) --- */
@media (max-width: 1024px) {
    .nav-links {
        gap: 20px; /* Diminui o espaço drasticamente para caber na tela */
    }
}

@media (max-width: 768px) {
    .navbar-principal {
        flex-direction: column; /* Logo em cima, links embaixo */
        padding: 15px;
    }
    .nav-links {
        margin-top: 15px;
        gap: 15px; /* Espaço pequeno entre os ícones */
        flex-wrap: wrap; /* Se não couber, os links pulam de linha */
        justify-content: center;
    }
}


/* Estilo comum para as bolinhas de notificação */
.badge-nav {
    background: #dc3545; 
    color: white; 
    font-size: 10px; 
    padding: 2px 5px; 
    border-radius: 10px; 
    position: absolute; 
    top: -5px; 
    right: -12px; 
    font-weight: bold; 
    border: 1px solid white; 
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Animação de entrada */
@keyframes bounce {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* =============== Conteúdo Container, Sections, Articles & aside ================= */
/* [[CONTAINER]] */
.container {
  background: #fff; 
  max-width: 1100px; 
  margin: 30px auto; 
  padding: 0 20px;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; 
}
        
/* LAYOUT EM COLUNAS */
.main-layout { 
  display: flex; 
  gap: 30px; 
  flex-wrap: wrap; 
  align-items: flex-start; 
}

.content-area { 
  flex: 2; 
  min-width: 300px; 
}

.content-area article{
    margin-bottom: 7px;
    border-radius: 5px;
}

/* Estilo do h2 com efeito Typewriter */
/* Animação do cursor piscando */
    @keyframes blink {
        50% { border-color: transparent; }
    }

/*  SEARCH  */
.search-container {
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    margin-bottom: 5px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.search-box { 
    display: flex; 
    gap: 10px; 
}

.search-box input { 
    flex: 1; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
}
.search-box button { 
    padding: 10px 20px; 
    background: #333; 
    color: white; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
}

/*   EDITOR    */
/* Isso cria um espaçamento automático entre os parágrafos */
#editor p, .post-content p {
  margin-bottom: 15px; 
  display: block;
}

/* POSTAGENS */
/* --- ESTILO DOS POSTS --- */
.post { 
    background: white; 
    padding: 0; 
    border-radius: 5px; 
    margin-bottom: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    overflow: hidden; 
}

.post-img { 
    width: 100%; 
    height: 350px; 
    object-fit: cover; 
    display: block; 
}

.post-body { 
    padding: 25px; 
}

.post h2 { 
    margin: 0 0 10px 0; 
    font-size: 26px; 
}

.post h2 a { 
    text-decoration: none; 
    color: #111; 
}

.date { 
    color: #888; 
    font-size: 0.85em; 
    margin-bottom: 15px; 
}

.post-content { 
    font-size: 17px; 
    line-height: 1.7; 
    color: #444; 
}

.post-content a {
    color: #007bff;
    text-decoration: underline;
    font-weight: bold;
}
.post-content a:hover {
    color: #0056b3;
}



/*  ================== MURAL ================= */

.mural-container {
    max-width: 960px;
    height: auto;
    margin: 40px auto;
    padding: 20px;
    background: #f5f5f5;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

h1 { text-align: center; margin-bottom: 30px; margin-top: 20px; color: #777; }

/* --- FORMULÁRIO DE ENVIO --- */
.form-mural {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-mural input, .form-mural textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho */
}

.form-mural button {
    background: #333;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.form-mural button:hover { background: #555; transform: scale(1.02); }

.form-mural textarea {
    width: 100%;
    height: 350px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    
    /* ISSO RESOLVE A ROLAGEM HORIZONTAL */
    resize: vertical;      /* Permite ao usuário puxar apenas para baixo */
    overflow-y: auto;      /* Barra de rolagem apenas vertical se necessário */
    white-space: pre-wrap; /* Garante que o texto quebre a linha automaticamente */
    word-wrap: break-word; /* Quebra palavras muito grandes */
}


/* --- CARDS DE RECADOS --- */
.recado-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 6px solid #333;
    transition: 0.3s;
}

.recado-card:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.recado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.recado-nome { font-weight: bold; font-size: 18px; color: #111; }
.recado-data { font-size: 0.8em; color: #888; }
.recado-msg { font-size: 16px; line-height: 1.6; color: #444; margin: 0; }

/* --- AJUSTES MODO ESCURO --- */
body.dark-mode .form-mural,
body.dark-mode .recado-card {
    background: #1e1e1e !important;
    border-color: #333;
    color: #eee;
}

body.dark-mode .recado-card { border-left-color: #007bff; }
body.dark-mode .recado-nome { color: #fff; }
body.dark-mode .recado-msg { color: #ccc; }
body.dark-mode .form-mural input, 
body.dark-mode .form-mural textarea {
    background: #2c2c2c;
    border-color: #444;
    color: white;
}
/* Garante que os recados da sidebar fiquem claros no modo escuro */
body.dark-mode .sidebar-widget div {
    border-bottom-color: #333 !important;
}
body.dark-mode .sidebar-widget strong {
    color: #007bff; /* Destaca o nome de quem enviou em azul */
}

/* Main Footer */
.main-footer {
    background-color: #222;
    color: white;
    padding: 40px 0 0 0;
    margin-top: 50px;
    width: 100%;
}

/* Container principal com Flexbox */
.footer-container {
    max-width: 950px;
    margin: 0 auto;
    display: flex; /* ATIVA O FLEXBOX */
    justify-content: space-between; /* Espaça as colunas igualmente */
    flex-wrap: wrap; /* Faz quebrar linha no celular */
    padding: 0 20px 30px 20px;
    gap: 20px;
}

.footer-box {
    flex: 1; /* Faz as colunas terem tamanhos iguais */
    min-width: 200px; /* Impede que fiquem espremidas */
}

.footer-box h4 {
    color: #25d366;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer-box p {
    font-size: 14px;
    color: #bbb;
    line-height: 1.5;
}

.footer-box a {
    color: #eee;
    text-decoration: none;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}

.footer-box a:hover { color: #25d366; }

.footer-copyright {
    background: #111;
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
    color: #666;
}

.svg-icon {
    width: 28px;
    height: 28px;
    fill: #eee; /* Cor inicial cinza claro */
    transition: 0.3s;
}

.icon-link:hover .svg-icon {
    fill: #25d366; /* Muda para a cor do seu blog ao passar o mouse */
    transform: scale(1.1);
}

/* Ajuste no Flexbox do footer para alinhar os itens no topo */
.footer-container {
    align-items: flex-start;
}


/* Ajuste para o Modo Escuro */
body.dark-mode .main-footer { background-color: #1a1a1a; }
body.dark-mode .footer-copyright { background-color: #000; }
body.dark-mode .mural-container div[style*="background: #f8f9fa"] {
    background: #2c2c2c !important;
    border-color: #444 !important;
    color: #eee !important;
}

.badge-nav {
    background: #dc3545; 
    color: white; 
    font-size: 10px; 
    padding: 2px 5px; 
    border-radius: 10px; 
    position: absolute; 
    top: -5px; 
    right: -12px; 
    font-weight: bold; 
    border: 1px solid white; 
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/*  RELACIONADOS  */

.relacionados {
    margin-top: 40px;
    padding-top: 20px;
}

.rel-card {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid #eee;
}

.rel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ============== SIDEBAR =============== */
.sidebar { 
  flex: 1; 
  min-width: 280px; 
  position: sticky; 
  top: 20px; 
}

/* WIDGETS DA SIDEBAR */
.sidebar-widget { 
  background: white; 
  padding: 20px; 
  border-radius: 12px; 
  margin-bottom: 25px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
}

.sidebar-widget h3 { 
  margin-top: 0; 
  font-size: 18px; 
  border-bottom: 2px solid #333; 
  padding-bottom: 10px; 
  margin-bottom: 15px; 
}

/*=============== POSTES NO FEED ==================== */
.post { 
  background: white; 
  border-radius: 12px; 
  margin-bottom: 30px; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
  overflow: hidden; 
}

.post-img { 
  width: 100%; 
  height: 250px; 
  object-fit: cover; 
}
post-body { 
  padding: 20px; 
}
        
.post h2 a { 
  text-decoration: none; 
  color: #111; 
}

.date { 
  color: #888; 
  font-size: 0.85em; 
  margin-bottom: 15px; 
}

.leia-mais { 
  display: inline-block; 
  margin-top: 15px; 
  color: #007bff; 
  text-decoration: none; 
  font-weight: bold; 
}

/* ========= PAGINAÇÃO ============= */
.pagination { 
  text-align: center; 
  margin: 30px 0; 
  display: flex; 
  justify-content: center; 
  gap: 8px; 
}

.pagination a, .pagination span { 
  padding: 10px 15px; 
  text-decoration: none; 
  background: white; 
  border: 1px solid #ddd; 
  border-radius: 5px; 
  color: #333; 
}

.pagination a.active { 
  background: #007bff; 
  color: white; 
  border-color: #007bff; 
}

/* ================ [[Footer]] ================== */
/* Main Footer */
.main-footer {
    background-color: #222;
    color: white;
    padding: 40px 0 0 0;
    margin-top: 50px;
    width: 100%;
}

/* Container principal com Flexbox */
.footer-container {
    min-width: 300px;
    margin: 0 auto;
    display: flex; /* ATIVA O FLEXBOX */
    justify-content: space-between; /* Espaça as colunas igualmente */
    flex-wrap: wrap; /* Faz quebrar linha no celular */
    padding: 0 20px 30px 20px;
    gap: 20px;
}

.footer-box {
    flex: 1; /* Faz as colunas terem tamanhos iguais */
    min-width: 200px; /* Impede que fiquem espremidas */
}

.footer-box h4 {
    color: #25d366;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer-box p {
    font-size: 16px;
    color: #bbb;
    line-height: 1.5;
}

.footer-box a {
    color: #eee;
    text-decoration: none;
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}

.footer-box a:hover { color: #25d366; }

.footer-copyright {
    background: #111;
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
    color: #666;
}

.svg-icon {
    width: 28px;
    height: 28px;
    fill: #eee; /* Cor inicial cinza claro */
    transition: 0.3s;
}

.icon-link:hover .svg-icon {
    fill: #25d366; /* Muda para a cor do seu blog ao passar o mouse */
    transform: scale(1.1);
}

/* Ajuste no Flexbox do footer para alinhar os itens no topo */
.footer-container {
    align-items: flex-start;
}

/* Ajuste para o Modo Escuro */
body.dark-mode .main-footer { background-color: #1a1a1a; }
body.dark-mode .footer-copyright { background-color: #000; }



/* ================ Voltar Topo ============= */
.btn-voltar {
  position: fixed;
  bottom: 10px !mportant;
  right: 10px;
  padding: 10px 17px;
  background: #555;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
}
.btn-voltar:hover{ 
  background-color: #106FFE; 
}

.btn-excluir { 
  display: inline-block; 
  margin-top: 15px; 
  color: #dc3545; 
  text-decoration: none; 
  font-size: 0.8em; 
  border: 1px solid #dc3545; 
  padding: 5px 10px; 
  border-radius: 4px; 
}