/**
 * Comece Imperfeito — page.css
 *
 * Páginas feitas no editor do WordPress e página 404. Consome somente tokens.
 * A tipografia de leitura vem da regra de prosa de base.css.
 *
 * Índice
 *  1. Estrutura
 *  2. Cabeçalho
 *  3. Conteúdo
 *  4. Ação e temas
 */

/* 1. Estrutura ----------------------------------------------------------- */

/* Substitui as larguras em degraus e o padding de 10px do theme.css do Hello. */
body:is(.page, .error404) .site-main.ci-page {
	width: 100%;
	max-width: none;
	padding-inline: 0;
	padding-block: var(--ci-space-8) var(--ci-space-section);
}

/* 2. Cabeçalho ----------------------------------------------------------- */

.ci-page__header {
	margin-block-end: var(--ci-space-7);
}

.ci-page__mark {
	display: block;
	width: 4rem;
	height: 4rem;
	margin-block-end: var(--ci-space-5);
}

.ci-page__eyebrow {
	margin-block: 0 var(--ci-space-3);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-medium);
	line-height: var(--ci-leading-snug);
}

.ci-page__title {
	margin-block: 0 var(--ci-space-4);
}

.ci-page__meta {
	margin: 0;
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-xs);
	line-height: var(--ci-leading-normal);
}

.ci-page__lead {
	margin: 0;
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-lg);
	line-height: var(--ci-leading-normal);
}

/* 3. Conteúdo ------------------------------------------------------------ */

/*
 * Os textos institucionais foram salvos inteiramente em negrito; na exibição,
 * o negrito volta ao peso do elemento (o conteúdo salvo não é alterado).
 */
.ci-page__content :is(strong, b) {
	font-weight: inherit;
}

.ci-page__content p:empty {
	display: none;
}

/* Separador no início do texto duplicaria o espaço do cabeçalho. */
.ci-page__content > :is(hr, .wp-block-separator):first-child {
	display: none;
}

/* Mesma especificidade da regra de prosa de base.css (carregada antes). */
body:is(.page, .error404) .ci-page__content.page-content :is(hr, .wp-block-separator) {
	margin-block: var(--ci-space-7);
}

/* 4. Ação e temas -------------------------------------------------------- */

.ci-page__action {
	margin-block-start: var(--ci-space-7);
}

.ci-page__action .ci-button {
	white-space: normal;
	overflow-wrap: anywhere;
}

.ci-page__topics {
	margin-block-start: var(--ci-space-section);
	padding-block-start: var(--ci-space-6);
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-page__topics-title {
	margin-block: 0 var(--ci-space-5);
	font-size: var(--ci-text-xl);
}