/*
 * Adaptações do design system ao markup do WordPress.
 * theme.css e extras.css são os mesmos do projeto Payload; tudo o que é
 * específico do WP (blocos nativos, barra de administração) fica aqui.
 */

/* ==========================================================================
   BARRA DE ADMINISTRAÇÃO (só para quem está logado)
   ========================================================================== */
.admin-bar .site-header { top: 32px; }
.admin-bar .mobile-panel,
.admin-bar .mobile-backdrop { inset-block-start: calc(var(--header-height) + 32px); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .mobile-panel,
  .admin-bar .mobile-backdrop { inset-block-start: calc(var(--header-height) + 46px); }
}
/* Abaixo de 600px a barra rola com a página: o header volta ao topo. */
@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

/* ==========================================================================
   CORPO DO POST — blocos nativos
   ========================================================================== */
.prose .wp-block-image { margin-inline: 0; }
.prose .wp-block-image img { display: block; }
.prose figcaption,
.prose .wp-element-caption {
  margin-top: var(--space-2);
  font-size: var(--font-body-small);
  color: var(--text-muted);
  text-align: left;
}

/* Imagem "larga" (alignwide) avança sobre as margens da coluna de texto. */
@media (min-width: 1024px) {
  .prose .alignwide { margin-inline: calc((760px - 100%) / 2 - 80px); max-width: none; }
}
.prose .alignwide img { width: 100%; }
.prose .aligncenter { margin-inline: auto; }

.prose .wp-block-separator {
  margin: var(--space-12) 0;
  border: 0;
  border-top: 1px solid var(--neutral-200);
  opacity: 1;
}

.prose .wp-block-quote { margin-inline: 0; }
.prose .wp-block-quote p { margin: 0; }
.prose .wp-block-quote cite { display: block; margin-top: var(--space-2); font-size: var(--font-body-small); font-style: normal; }

.prose .wp-block-embed { margin-inline: 0; }

/* Tabela — mesmo visual do bloco "tabela" do Payload. */
.prose .wp-block-table { margin: var(--space-8) 0; overflow-x: auto; }
.prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-body);
}
.prose .wp-block-table th,
.prose .wp-block-table td {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--neutral-200);
  text-align: left;
  vertical-align: top;
}
.prose .wp-block-table thead { border-bottom: 0; }
.prose .wp-block-table thead th {
  background: var(--surface-subtle);
  font-family: var(--font-display-family);
  font-size: var(--font-body-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.prose .wp-block-table tbody tr:hover { background: var(--surface-subtle); }
.prose .wp-block-table figcaption { font-family: var(--font-display-family); font-weight: 700; color: var(--text-primary); }

/* Botões nativos com a cara do .btn do tema. */
.prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-small);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-family: var(--font-display-family);
  font-weight: 600;
  text-decoration: none;
}
.prose .wp-block-button__link:hover { background: var(--brand-primary-hover); color: var(--text-inverse); }

/* ==========================================================================
   ESTILOS DE BLOCO (equivalentes aos blocos customizados do Payload)
   ========================================================================== */

/* Ícones desenhados via máscara: o editor não precisa inserir SVG. */
.is-style-callout-dica::before,
.is-style-callout-atencao::before,
.is-style-callout-info::before,
.is-style-resumo-rapido li::before,
.is-style-checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--gpv-icone) center / contain no-repeat;
          mask: var(--gpv-icone) center / contain no-repeat;
}

/* Caixas de destaque: grupo com ícone à esquerda. */
.prose .is-style-callout-dica,
.prose .is-style-callout-atencao,
.prose .is-style-callout-info,
.is-style-callout-dica,
.is-style-callout-atencao,
.is-style-callout-info {
  --gpv-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  position: relative;
  display: block;
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) * 2 + 22px);
  border-radius: var(--radius-large);
  border: 1px solid var(--neutral-200);
  background: var(--surface-subtle);
  font-size: var(--font-body);
  color: var(--text-secondary);
}
.is-style-callout-dica::before,
.is-style-callout-atencao::before,
.is-style-callout-info::before {
  position: absolute;
  left: var(--space-5);
  top: calc(var(--space-5) + 2px);
}
.prose .is-style-callout-dica,
.is-style-callout-dica {
  --gpv-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  border-color: var(--primary-200);
  background: var(--surface-hover);
}
.is-style-callout-dica::before { color: var(--primary-600); }
.prose .is-style-callout-atencao,
.is-style-callout-atencao { border-color: var(--accent-200); background: var(--surface-highlight); }
.is-style-callout-atencao::before { color: var(--accent-600); }
.prose .is-style-callout-info,
.is-style-callout-info { border-color: #CBDCEF; background: #F1F6FB; }
.is-style-callout-info::before { color: var(--information); }

.prose [class*="is-style-callout"] > * + * { margin-top: var(--space-2); }
.prose [class*="is-style-callout"] p { margin: 0; }
/* O primeiro parágrafo em negrito funciona como título da caixa. */
.prose [class*="is-style-callout"] > p:first-child:has(> strong:only-child) {
  font-family: var(--font-display-family);
  font-size: var(--font-h5);
  color: var(--text-primary);
}

/* Resumo rápido: grupo com título + lista em checklist. */
.prose .is-style-resumo-rapido,
.is-style-resumo-rapido {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border-radius: var(--radius-large);
  border: 1px solid var(--primary-200);
  background: var(--surface-hover);
}
.is-style-resumo-rapido > :is(h2, h3, h4, p):first-child {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display-family);
  font-size: var(--font-h4);
  font-weight: 700;
}
.prose .is-style-resumo-rapido ul,
.prose ul.is-style-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.is-style-resumo-rapido li,
.is-style-checklist li {
  --gpv-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-body);
  color: var(--text-secondary);
}
.is-style-resumo-rapido li::before,
.is-style-checklist li::before { width: 20px; height: 20px; margin-top: 3px; color: var(--primary-600); }

/* Passo a passo: lista numerada com contador em círculo. */
.prose ol.is-style-passos { counter-reset: passo; margin: var(--space-8) 0; padding: 0; list-style: none; }
.prose ol.is-style-passos > li {
  counter-increment: passo;
  position: relative;
  margin: 0;
  padding: var(--space-4) 0 var(--space-4) calc(34px + var(--space-4));
  border-bottom: 1px dashed var(--neutral-200);
  font-size: var(--font-body);
  color: var(--text-secondary);
}
.prose ol.is-style-passos > li:last-child { border-bottom: 0; }
.prose ol.is-style-passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: var(--space-4);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-display-family);
  font-weight: 700;
  font-size: var(--font-body-small);
}
.prose ol.is-style-passos > li > strong:first-child {
  display: block;
  font-family: var(--font-display-family);
  font-size: var(--font-h5);
  color: var(--text-primary);
}

/* ==========================================================================
   AJUSTES DIVERSOS
   ========================================================================== */

/* O ícone do eyebrow de assunto fica alinhado ao texto. */
.eyebrow .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* Atalho "Destinos" do menu mobile: seta na mesma linha do texto
   (.mobile-nav a, mais específico, anulava o display:flex). */
.mobile-nav a.mobile-nav__destaque { display: flex; }

/* Campo-armadilha da newsletter, fora da tela para humanos. */
.newsletter .screen-reader-text input { display: none; }

/* Legenda da imagem destacada: sem margem extra do WP. */
.guia__figura img { margin: 0; }