/* ===========================================================================
   Blog do PodPec — a mesma linguagem visual do site.

   Isto não substitui o tema: ele já é todo por variáveis CSS, então aqui só
   trocamos as variáveis e ajustamos o que a marca exige (tipografia condensada
   nos títulos, dourado como único destaque, linhas finas em vez de caixas).
   Fica no "código de cabeçalho" do CMS, que sobrevive à atualização dele.
   =========================================================================== */

:root {
  --vr-font-primary: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  --vr-font-secondary: "Big Shoulders", "Archivo", system-ui, sans-serif !important;
  --vr-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;

  --vr-theme-color: #e3b24a !important;
  --vr-block-color: #0a1410 !important;
  --vr-mega-menu-color: #0f1d16 !important;
  --vr-subscribe-button-color: #e3b24a !important;
  --vr-topbar-text-color: #8fa096 !important;
  --vr-topbar-text-color-hover: #f2efe6 !important;

  --pp-noite: #0a1410;
  --pp-noite-2: #0f1d16;
  --pp-creme: #f2efe6;
  --pp-cinza: #8fa096;
  --pp-ouro: #e3b24a;
  --pp-linha: rgba(242, 239, 230, 0.16);
}

/* --- fundo e texto ------------------------------------------------------- */

body,
.bg-body,
.bg-white,
[data-bs-theme="dark"] body {
  background-color: var(--pp-noite) !important;
  color: var(--pp-creme);
}

.card,
.bg-light,
.bg-body-tertiary,
.bg-body-secondary,
[data-bs-theme="dark"] .card {
  background-color: var(--pp-noite-2) !important;
  border-color: var(--pp-linha) !important;
}

hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--pp-linha) !important;
}

/* --- tipografia ---------------------------------------------------------- */

h1, h2, h3, h4, h5,
.post-title,
.card-title,
.section-title,
.navbar-brand {
  font-family: var(--vr-font-secondary) !important;
  font-weight: 900 !important;
  letter-spacing: -0.005em;
  line-height: 1.02;
  text-transform: uppercase;
}

/* o corpo da matéria continua em caixa alta e baixa, senão vira grito */
.post-content h2,
.post-content h3,
.post-content h4,
article h2,
article h3 {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.12;
}

.post-content,
.post-content p,
article p {
  font-family: var(--vr-font-content) !important;
  color: rgba(242, 239, 230, 0.9);
}

/* categoria, data, tempo de leitura: o mesmo tratamento do site */
.post-meta,
.post-meta *,
.text-muted,
small,
.badge-category,
time {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-cinza) !important;
}

/* --- destaques e links --------------------------------------------------- */

a { color: var(--pp-creme); }
a:hover { color: var(--pp-ouro); }

.text-primary,
.category-name,
.badge-category a { color: var(--pp-ouro) !important; }

.btn-primary,
.btn-theme,
.btn-subscribe {
  background-color: var(--pp-ouro) !important;
  border-color: transparent !important;
  color: var(--pp-noite) !important;
  border-radius: 999px !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-theme:hover { background-color: var(--pp-creme) !important; }

.btn-outline-primary,
.btn-outline-secondary,
.btn-light {
  border-radius: 999px !important;
  border-color: rgba(242, 239, 230, 0.34) !important;
  color: var(--pp-creme) !important;
  background: transparent !important;
}
.btn-outline-primary:hover { border-color: var(--pp-ouro) !important; color: var(--pp-ouro) !important; }

/* --- barra de cima e menu ------------------------------------------------ */

.navbar,
#sticky-menu-wrapper,
.header-brand,
footer {
  background-color: var(--pp-noite) !important;
  border-color: var(--pp-linha) !important;
}

.navbar-nav .nav-link {
  font-family: var(--vr-font-primary) !important;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pp-creme) !important;
}
.navbar-nav .nav-link:hover { color: var(--pp-ouro) !important; }

/* --- cartões de matéria -------------------------------------------------- */

.card { border-radius: 3px !important; }
.card img,
.post-image img { border-radius: 3px !important; }

.card:hover .card-title,
.post-item:hover .post-title { color: var(--pp-ouro) !important; }

/* --- avisos e formulários ------------------------------------------------ */

.cookie-warning,
.modal-content,
.dropdown-menu {
  background-color: var(--pp-noite-2) !important;
  border-color: var(--pp-linha) !important;
  color: var(--pp-creme);
}

input, textarea, select {
  background-color: transparent !important;
  border-color: rgba(242, 239, 230, 0.28) !important;
  color: var(--pp-creme) !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--pp-ouro) !important; box-shadow: none !important; }

/* --- faixa de volta para o site ------------------------------------------ */

.pp-volta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--pp-noite-2);
  border-bottom: 1px solid var(--pp-linha);
  padding: 9px 16px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pp-volta a { color: var(--pp-cinza); text-decoration: none; }
.pp-volta a:hover { color: var(--pp-ouro); }
.pp-volta b { color: var(--pp-ouro); font-weight: 600; }