/*
 * Ajustes de convivência com o WordPress.
 *
 * O site foi desenhado como uma página solta, em que .page-shell é filha direta
 * do body. Dentro do WordPress ele passa a viver alguns níveis mais fundo, dentro
 * de .wp-site-blocks e do conteúdo do post, e esses invólucros trazem largura
 * máxima, margem e padding próprios. Sem o que está aqui, as faixas de largura
 * total (hero, manifesto, segurança, matrículas) ficariam presas numa coluna
 * central e o layout quebraria.
 *
 * Este arquivo é carregado depois de site.css. Não coloque regras de identidade
 * visual aqui: elas moram em site.css.
 */

.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-post-content,
.entry-content {
  max-width: none;
  margin-block: 0;
  padding: 0;
}

/* O conteúdo do post não deve criar coluna central nem espaçamento vertical. */
.wp-block-post-content > .page-shell {
  margin: 0;
}

/*
 * O layout "flow" do WordPress acrescenta 24px entre os filhos diretos.
 * Nas páginas completas do tema, isso aparecia como uma faixa entre as dobras.
 * A faixa dourada não entra nesta regra e mantém seu margin-top de -4px.
 */
.wp-block-post-content > .page-shell.wp-block-group-is-layout-flow > .wp-block-group,
.wp-block-post-content > .page-shell.wp-block-group-is-layout-flow > .site-footer {
  margin-block-start: 0;
}

/* Grupos usados como estrutura não podem herdar largura do editor. */
.page-shell .wp-block-group {
  max-width: none;
}

/*
 * O WordPress acrescenta as classes wp-block-group, wp-block-heading e
 * wp-element-caption ao lado das classes do projeto. Elas não têm estilo próprio
 * aqui, mas as legendas de imagem do editor precisam herdar o tipo do site.
 */
.page-shell figcaption.wp-element-caption {
  color: inherit;
  font-size: inherit;
  text-align: inherit;
}

/* A barra de administração desloca o topo da página e atrapalha o hero. */
body.admin-bar .hero {
  scroll-margin-top: 32px;
}

/* Páginas internas ainda não têm design próprio: um respiro mínimo e legível. */
.inner-page {
  padding: 140px 0 120px;
}

.inner-header {
  position: relative;
  padding-top: 26px;
  background: var(--forest, #1c3a22);
}

.inner-page .wrap > h1 {
  margin-bottom: 28px;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.inner-page .wrap > p {
  max-width: 720px;
  margin-bottom: 18px;
  color: #5c6b5e;
  font-size: 17px;
  line-height: 1.7;
}