/* Cola técnica Django/Alpine — NÃO é design novo (bundle 8cnb7ENR).
   Mecanismos que o protótipo React resolvia em JS, resolvidos em CSS:
   - troca da logo por tema (o JSX trocava o src);
   - ícone sol/lua do toggle (o JSX renderizava um OU outro);
   - x-cloak do Alpine (estado pré-hidratação). */

[x-cloak] {
  display: none !important;
}

/* Especificidade .logo .logo-img-* para vencer `.logo .logo-img` do design. */
.logo .logo-img-dark {
  display: none;
}
[data-theme="dark"] .logo .logo-img-light {
  display: none;
}
[data-theme="dark"] .logo .logo-img-dark {
  display: block;
}

.theme-toggle .theme-icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: block;
}

/* "Carregar mais" da listagem — paginação não existe no protótipo (que
   lista tudo de uma vez); estilizado com os tokens do bundle. */
.listing-load-more {
  display: block;
  width: max-content;
  margin: 28px auto 0;
  padding: 9px 22px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-stretch: semi-expanded;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.listing-load-more:hover {
  border-color: var(--green-600);
  color: var(--green-600);
}

/* Mídia embutida no corpo do artigo (CMS insere img/video/audio/iframe). */
.article-prose figure {
  margin: 1.4rem 0;
}
.article-prose img,
.article-prose video,
.article-prose audio {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}
.article-prose figure img,
.article-prose video {
  width: 100%;
}
.article-prose audio {
  width: 100%;
}
.article-prose .ns-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  margin: 1.4rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.article-prose .ns-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}