/*
Theme Name: Quadrinhopédia
Description: Tema próprio da Quadrinhopédia, construído do zero (sem depender de um tema de terceiros). Identidade visual com o novo logo balão de fala, cores #2B2118/#D9622B e tipografia Bree Serif + Lora.
Version: 1.0.0
Author: Lucio Luiz
Text Domain: quadrinhopedia
*/

/* --------------------------------------------------------
   1. Variáveis
   -------------------------------------------------------- */
:root {
  --qp-tinta: #2B2118;
  --qp-laranja: #D9622B;
  --qp-fundo-claro: #FFFBF5;
  --qp-borda: #E8DFD3;
  --qp-cinza-texto: #5A4A3A;

  --qp-fonte-titulo: "Bree Serif", Georgia, serif;
  --qp-fonte-corpo: "Lora", Georgia, serif;

  --qp-largura-maxima: 1140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--qp-fonte-corpo);
  color: var(--qp-tinta);
  background: #fff;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--qp-fonte-titulo);
  line-height: 1.25;
}

a {
  color: var(--qp-laranja);
  text-decoration: none;
}
a:hover { color: var(--qp-tinta); text-decoration: underline; }

img { max-width: 100%; height: auto; }

.qp-container {
  max-width: var(--qp-largura-maxima);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 600px) {
  .qp-container {
    padding: 0 1.75rem;
  }
}

/* --------------------------------------------------------
   2. Cabeçalho
   -------------------------------------------------------- */
.qp-header {
  border-bottom: 3px solid var(--qp-laranja);
  padding: 1.2rem 0;
}

.qp-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.qp-logo img {
  max-height: 56px;
  width: auto;
  display: block;
}

.qp-logo-texto {
  font-family: var(--qp-fonte-titulo);
  font-size: 1.6rem;
  color: var(--qp-tinta);
  text-decoration: none;
}

.qp-menu-principal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

.qp-menu-principal li {
  position: relative;
}

.qp-menu-principal a {
  color: var(--qp-tinta);
  text-decoration: none;
  font-weight: 600;
  display: block;
  padding: 0.3rem 0;
}

.qp-menu-principal a:hover { color: var(--qp-laranja); }

/* Submenus (dropdown ao passar o mouse ou navegar por teclado) */
.qp-menu-principal ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--qp-borda);
  border-radius: 8px;
  padding: 0.5rem 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  z-index: 100;
}

.qp-menu-principal li:hover > ul,
.qp-menu-principal li:focus-within > ul {
  display: flex;
}

.qp-menu-principal ul ul a {
  padding: 0.5rem 1.2rem;
  white-space: nowrap;
}

.qp-menu-principal ul ul a:hover {
  background: var(--qp-fundo-claro);
}

/* --------------------------------------------------------
   3. Layout de conteúdo (com ou sem barra lateral)
   -------------------------------------------------------- */
.qp-layout {
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 2.5rem;
  padding: 2.5rem 0;
}

@media (max-width: 780px) {
  .qp-layout { grid-template-columns: 1fr; }
}

.qp-conteudo-principal { min-width: 0; }

.qp-sidebar .widget {
  background: var(--qp-fundo-claro);
  border: 1px solid var(--qp-borda);
  border-radius: 10px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

.qp-sidebar .widget-title {
  font-family: var(--qp-fonte-titulo);
  font-size: 1.1rem;
  margin-top: 0;
}

/* --------------------------------------------------------
   4. Página inicial
   -------------------------------------------------------- */
.qp-home-bloco { margin: 2.5rem 0; }

.qp-home-titulo-bloco {
  color: var(--qp-tinta);
  border-bottom: 3px solid var(--qp-laranja);
  padding-bottom: 0.4rem;
  margin-bottom: 1.2rem;
}

.qp-topicos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

.qp-topico-card {
  display: block;
  background: var(--qp-fundo-claro);
  border: 1px solid var(--qp-borda);
  border-radius: 10px;
  padding: 1.4rem;
  text-decoration: none;
  color: var(--qp-tinta);
  transition: border-color 0.15s ease;
}
.qp-topico-card:hover { border-color: var(--qp-laranja); color: var(--qp-tinta); }
.qp-topico-card h3 { margin: 0 0 0.3rem 0; font-size: 1.3rem; }
.qp-topico-card .qp-contador { color: var(--qp-laranja); font-weight: bold; display: block; margin-top: 0.4rem; }

.qp-busca-abas { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.qp-busca-abas button {
  font-family: var(--qp-fonte-corpo);
  background: none;
  border: 1px solid var(--qp-tinta);
  border-radius: 6px;
  padding: 0.4rem 1rem;
  cursor: pointer;
}
.qp-busca-abas button.ativa { background: var(--qp-tinta); color: #fff; }

.qp-form-busca { display: flex; gap: 0.5rem; }
.qp-form-busca input[type="search"] {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--qp-borda);
  border-radius: 6px;
  font-family: var(--qp-fonte-corpo);
}
.qp-form-busca button[type="submit"] {
  background: var(--qp-laranja);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}

.qp-novidades-lista { list-style: none; margin: 0; padding: 0; }
.qp-novidades-lista li { padding: 0.6rem 0; border-bottom: 1px solid var(--qp-borda); }
.qp-novidades-resumo { margin: 0.3rem 0 0 0; color: var(--qp-cinza-texto); font-size: 0.95rem; }

.qp-home-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 780px) {
  .qp-home-grid { grid-template-columns: 1fr; }
}

.qp-verbete-aleatorio {
  background: var(--qp-fundo-claro);
  border: 1px solid var(--qp-borda);
  border-radius: 10px;
  padding: 1.2rem;
}
.qp-verbete-aleatorio h3 { margin-top: 0; }
.qp-saiba-mais { display: inline-block; margin-top: 0.5rem; font-weight: bold; }

/* --------------------------------------------------------
   5. Conteúdo de post/página/verbete
   -------------------------------------------------------- */
.qp-entry-title { margin-top: 0; }
.qp-entry-meta { color: var(--qp-cinza-texto); font-size: 0.9rem; margin-bottom: 1.5rem; }

.qp-infobox {
  background: var(--qp-fundo-claro);
  border: 1px solid var(--qp-borda);
  border-radius: 10px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}
.qp-foto-verbete {
  float: right;
  margin: 0 0 1rem 1.2rem;
  max-width: 180px;
}
.qp-foto-verbete img { border-radius: 8px; display: block; width: 100%; height: auto; margin-bottom: 0; }
.qp-infobox-foto-legenda { font-size: 0.8rem; color: var(--qp-cinza-texto); font-style: italic; margin: 0.3rem 0 0 0; }
.qp-infobox p { margin: 0.3rem 0; }
.qp-infobox-nome-completo { color: var(--qp-laranja); }
.qp-infobox-funcao { font-family: var(--qp-fonte-corpo); font-weight: normal; color: var(--qp-tinta); }
.qp-infobox-atualizacao { color: var(--qp-cinza-texto); font-size: 0.85rem; margin-top: 1rem; }

.qp-lista-premios,
.qp-lista-referencias,
.qp-lista-bibliografia {
  padding-left: 1.2rem;
}
.qp-lista-premios li,
.qp-lista-referencias li,
.qp-lista-bibliografia li {
  margin-bottom: 0.5rem;
}

.qp-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.2rem 0;
}
.qp-az-nav a {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--qp-borda);
  border-radius: 6px;
  text-decoration: none;
  color: var(--qp-tinta);
  font-weight: 600;
}
.qp-az-nav a:hover { border-color: var(--qp-laranja); color: var(--qp-laranja); }
.qp-az-nav a.ativa { background: var(--qp-laranja); border-color: var(--qp-laranja); color: #fff; }

.qp-az-lista {
  columns: 3;
  column-gap: 2rem;
  list-style: none;
  padding: 0;
}
.qp-az-lista li { padding: 0.3rem 0; break-inside: avoid; }

@media (max-width: 600px) {
  .qp-az-lista { columns: 1; }
}

/* --------------------------------------------------------
   6. Rodapé
   -------------------------------------------------------- */
.qp-footer {
  border-top: 3px solid var(--qp-laranja);
  margin-top: 3rem;
  padding: 1.5rem 0;
  color: var(--qp-cinza-texto);
  font-size: 0.9rem;
  text-align: center;
}