/* ============= ESTILOS ESPECÍFICO DO BLOG ===== */

/* Header do blog - mais espaçado */
.blog-header {
   margin-top: 60px; /* espaço para o menu fixo */
}

.menu {
   position: fixed;    /*Fica grudado no topo */
   top: 0;
   left: 0;
   width: 100%;
   background-color: #0096c7;
   padding: 12px 0;
   text-align: center;
   box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
   z-index: 1000;      /* Fica por cima de tudo */

}

.menu a {
   color: white;
   text-decoration: none;
   font-weight: bold;
   margin: 0 20px;
   font-size: 1.1em;
   transition: 0.3s ease;
}

.menu a:hover {
   color: #caf0f8;
   text-shadow: 0px 0px 5px rgba(255,255,255,0.7);
   transform: scale(1.1);
}

/* Conteúdo principal do blog */
.blog-main {
   padding: 25px;
   max-width: 900px;
   margin: auto;
   line-height: 1.7em;
   text-align: left; /* Diferente do index.html */
}

/* Box do código */
.code-box {
   background: #eefaff;
   border-left: 5px solid #0096c7;
   padding: 10px 15px;
   border-radius: 10px;
   font-family: monospace;
   white-space: pre-wrap;
   overflow-x: auto;
}

/* Links específicos do blog */
.blog-main a {
  background-color: #0096c7;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  transition: 0.3s;
}

.blog-main a:hover {
   background-color: #023e8a;
   transform: scale(1.05);
}

/* ====== DARK MODE BLOG ======== */
body.dark-mode .code-box {
   background: linear-gradient(135deg, #2c2c2c, #444); /* gradiente cinza */
   border-left: 5px solid #fff; /* borda branca para destacar */
   color: #f1f1f1;    /* texto claro */
}