/* ==========================================================================
   TEXTO DO ARTIGO — tudo o que é escrito no editor
   ==========================================================================

   O QUE CONTROLA (dentro de .conteudo-artigo)
   - Parágrafos, intertítulos (H2, H3, H4), links, listas, citações,
     imagens e legendas, vídeos e embeds, separadores, código.
   - Blocos "largos" e "largura total" do editor.

   PRINCÍPIOS
   - Nada do conteúdo é escondido ou cortado.
   - Largura da coluna de leitura: --largura-leitura (variaveis.css).
   - Tamanho do texto: --texto-artigo (variaveis.css).

   Caixas (resumo, dica, atenção): components/caixas-editoriais.css
   Tabelas: components/tabelas.css
   ========================================================================== */

.conteudo-artigo {
	font-size: var(--texto-artigo);
	line-height: var(--altura-linha-texto);
	color: var(--cor-texto);
	overflow-wrap: break-word;
}

/* Espaço entre os blocos do texto. */
.conteudo-artigo > * + * {
	margin-top: 1.35em;
}

.conteudo-artigo > *:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   INTERTÍTULOS
   -------------------------------------------------------------------------- */
.conteudo-artigo h2 {
	margin-top: 2.1em;
	font-size: var(--intertitulo-h2);
	font-weight: var(--peso-extra);
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.conteudo-artigo h3 {
	margin-top: 1.8em;
	font-size: var(--intertitulo-h3);
	font-weight: var(--peso-negrito);
	line-height: 1.3;
}

.conteudo-artigo h4,
.conteudo-artigo h5,
.conteudo-artigo h6 {
	margin-top: 1.6em;
	font-size: var(--intertitulo-h4);
	font-weight: var(--peso-negrito);
	line-height: 1.35;
	letter-spacing: 0;
}

.conteudo-artigo :is(h2, h3, h4, h5, h6) + * {
	margin-top: 0.6em;
}

/* --------------------------------------------------------------------------
   LINKS (sublinhado dourado: assinatura do tema)
   -------------------------------------------------------------------------- */
.conteudo-artigo a:not(.botao):not(.wp-block-button__link) {
	color: var(--cor-primaria);
	font-weight: var(--peso-medio);
	text-decoration-line: underline;
	text-decoration-color: var(--cor-destaque);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--transicao), color var(--transicao);
}

.conteudo-artigo a:not(.botao):not(.wp-block-button__link):hover {
	color: var(--cor-primaria-hover);
	text-decoration-color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   LISTAS
   -------------------------------------------------------------------------- */
.conteudo-artigo ul,
.conteudo-artigo ol {
	padding-left: 1.4em;
}

.conteudo-artigo li + li {
	margin-top: 0.45em;
}

.conteudo-artigo li > ul,
.conteudo-artigo li > ol {
	margin-top: 0.45em;
}

.conteudo-artigo ul li::marker {
	color: var(--cor-destaque);
}

.conteudo-artigo ol li::marker {
	color: var(--cor-primaria);
	font-weight: var(--peso-semi);
}

/* --------------------------------------------------------------------------
   CITAÇÕES
   -------------------------------------------------------------------------- */
.conteudo-artigo blockquote,
.conteudo-artigo .wp-block-quote {
	margin-inline: 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--cor-destaque);
	font-family: var(--fonte-titulos);
	font-size: 1.12em;
	font-weight: var(--peso-semi);
	line-height: 1.5;
	color: var(--cor-texto);
}

.conteudo-artigo blockquote p + p {
	margin-top: 0.8em;
}

.conteudo-artigo blockquote cite,
.conteudo-artigo .wp-block-quote cite {
	display: block;
	margin-top: 0.75em;
	font-family: var(--fonte-corpo);
	font-size: var(--texto-meta);
	font-style: normal;
	font-weight: var(--peso-medio);
	color: var(--cor-texto-suave);
}

.conteudo-artigo .wp-block-pullquote {
	padding: var(--espaco-6) 0;
	border-block: 2px solid var(--cor-destaque);
	text-align: center;
}

.conteudo-artigo .wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	font-size: 1.3em;
}

/* --------------------------------------------------------------------------
   IMAGENS, LEGENDAS, GALERIAS
   -------------------------------------------------------------------------- */
.conteudo-artigo img {
	border-radius: var(--raio-medio);
}

.conteudo-artigo figure {
	margin-inline: 0;
}

.conteudo-artigo figcaption,
.conteudo-artigo .wp-caption-text,
.conteudo-artigo .wp-element-caption {
	margin-top: var(--espaco-2);
	font-size: var(--texto-meta);
	line-height: 1.5;
	color: var(--cor-texto-suave);
	text-align: left;
}

.conteudo-artigo .wp-caption {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   VÍDEOS E EMBEDS (YouTube, X/Twitter, Instagram...)
   -------------------------------------------------------------------------- */
.conteudo-artigo iframe,
.conteudo-artigo embed,
.conteudo-artigo object,
.conteudo-artigo video {
	max-width: 100%;
}

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

.conteudo-artigo .wp-block-embed__wrapper > * {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   SEPARADOR, CÓDIGO, BOTÕES DO EDITOR
   -------------------------------------------------------------------------- */
.conteudo-artigo hr,
.conteudo-artigo .wp-block-separator {
	width: 64px;
	height: 0;
	margin-block: 2.5em;
	margin-inline: auto;
	border: 0;
	border-top: 3px solid var(--cor-destaque);
	opacity: 1;
}

.conteudo-artigo .wp-block-separator.is-style-wide {
	width: 100%;
	border-top-width: 1px;
	border-top-color: var(--cor-linha);
}

.conteudo-artigo code,
.conteudo-artigo kbd {
	padding: 0.1em 0.35em;
	border-radius: var(--raio-pequeno);
	background: var(--cor-superficie);
	font-size: 0.88em;
}

.conteudo-artigo pre {
	padding: var(--espaco-4);
	overflow-x: auto;
	border-radius: var(--raio-medio);
	background: var(--cor-superficie);
	font-size: 0.9em;
	line-height: 1.6;
}

.conteudo-artigo pre code {
	padding: 0;
	background: none;
}

.conteudo-artigo .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.625rem 1.375rem;
	border-radius: var(--raio-pilula);
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
	font-size: 0.9375rem;
	font-weight: var(--peso-semi);
	text-decoration: none;
}

.conteudo-artigo .wp-block-button__link:hover {
	background: var(--cor-primaria-hover);
	color: var(--cor-sobre-primaria);
}

.conteudo-artigo .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--cor-primaria);
	color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   BLOCOS LARGOS E DE LARGURA TOTAL
   O texto fica na coluna de leitura; blocos "largos" se expandem até
   --largura-larga, e "largura total" ocupa a tela inteira.
   -------------------------------------------------------------------------- */
.conteudo-artigo .alignwide {
	width: min(var(--largura-larga), 100vw - 2 * var(--margem-lateral));
	max-width: none;
	margin-inline: calc(50% - min(var(--largura-larga), 100vw - 2 * var(--margem-lateral)) / 2);
}

.conteudo-artigo .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.conteudo-artigo .alignfull img,
.conteudo-artigo .alignwide img {
	width: 100%;
}

.conteudo-artigo .alignfull img {
	border-radius: 0;
}

/* Parágrafos e títulos do editor com fundo colorido (opção do editor). */
.conteudo-artigo .has-background {
	padding: 1.25em 1.5em;
	border-radius: var(--raio-medio);
}

/* Paginação interna do artigo (<!--nextpage-->). */
.paginas-do-artigo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espaco-2);
	margin-top: var(--espaco-6);
	font-weight: var(--peso-semi);
}

.paginas-do-artigo a,
.paginas-do-artigo > .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--raio-pilula);
	background: var(--cor-superficie);
	text-decoration: none;
}

.paginas-do-artigo .current {
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
}