/**
 * Comece Imperfeito — article.css
 *
 * Template de artigo (posts). Carregado apenas em posts e consome somente
 * tokens de tokens.css.
 *
 * Estrutura:
 *   cabeçalho (680) → imagem destacada (880) → corpo com sumário (1140/680)
 *   → termos → [ci_after_article] → Continue lendo (880) → comentários (680)
 *
 * Índice
 *  1. Estrutura
 *  2. Cabeçalho
 *  3. Imagem destacada
 *  4. Corpo e sumário
 *  5. Conteúdo
 *  6. Termos
 *  7. Continue lendo
 *  8. Comentários
 */

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

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

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

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

.ci-article__category {
	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-article__category a {
	color: inherit;
}

.ci-article__category a:hover {
	text-decoration-line: underline;
}

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

.ci-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--ci-space-2);
	margin: 0;
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-xs);
	line-height: var(--ci-leading-normal);
}

/* 3. Imagem destacada ---------------------------------------------------- */

.ci-article__media {
	margin-block: 0 var(--ci-space-7);
}

/* 4. Corpo e sumário ----------------------------------------------------- */

/*
 * Abaixo de 1280px: coluna única; o sumário é recolhível no topo do texto.
 * A partir de 1280px: três colunas; o sumário fica fixo na margem esquerda
 * e o texto permanece centralizado, alinhado ao cabeçalho.
 */
.ci-article__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.ci-article__column {
	width: 100%;
	max-width: var(--ci-container-reading);
	margin-inline: auto;
}

.ci-toc--side {
	display: none;
}

.ci-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ci-toc__list li + li {
	margin-block-start: var(--ci-space-2);
}

.ci-toc__list a {
	display: block;
	padding-block: var(--ci-space-1);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-snug);
}

.ci-toc__list a:hover {
	color: var(--ci-color-text);
	text-decoration-line: underline;
}

/* Sumário recolhível */
.ci-toc--inline {
	margin-block: 0 var(--ci-space-7);
	border-block: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ci-space-4);
	min-height: var(--ci-control-height);
	padding-block: var(--ci-space-2);
	color: var(--ci-color-text);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-medium);
	list-style: none;
	cursor: pointer;
}

.ci-toc__summary::-webkit-details-marker {
	display: none;
}

.ci-toc__summary::after {
	content: "+";
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-lg);
	font-weight: var(--ci-weight-regular);
	line-height: 1;
}

.ci-toc--inline[open] .ci-toc__summary::after {
	content: "\2212";
}

.ci-toc--inline nav {
	padding-block: var(--ci-space-1) var(--ci-space-5);
}

/* Sumário lateral fixo */
.ci-toc__title {
	margin-block: 0 var(--ci-space-3);
	color: var(--ci-color-text-tertiary);
	font-size: var(--ci-text-xs);
	font-weight: var(--ci-weight-medium);
	line-height: var(--ci-leading-snug);
}

.ci-toc--side .ci-toc__list {
	padding-inline-start: var(--ci-space-4);
	border-inline-start: var(--ci-border-width) solid var(--ci-color-border);
}

@media (min-width: 1280px) {
	.ci-article__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--ci-container-reading)) minmax(0, 1fr);
		column-gap: var(--ci-space-6);
	}

	.ci-toc--side {
		display: block;
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		position: sticky;
		top: var(--ci-space-6);
		max-width: 13.5rem;
		max-height: calc(100vh - (2 * var(--ci-space-6)));
		overflow-y: auto;
	}

	.ci-article__column {
		grid-column: 2;
		grid-row: 1;
	}

	.ci-toc--inline {
		display: none;
	}
}

/* 5. Conteúdo ------------------------------------------------------------ */

.ci-article__content h2 {
	scroll-margin-block-start: var(--ci-space-6);
}

.ci-article__content .wp-block-image {
	margin-inline: 0;
}

.ci-article__content .wp-block-image img {
	border-radius: var(--ci-radius-md);
	outline: var(--ci-border-width) solid var(--ci-color-media-outline);
	outline-offset: calc(var(--ci-border-width) * -1);
}

/* 6. Termos -------------------------------------------------------------- */

.ci-article__terms {
	margin-block-start: var(--ci-space-7);
	padding-block-start: var(--ci-space-5);
	border-block-start: var(--ci-border-width) solid var(--ci-color-border);
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
	line-height: var(--ci-leading-normal);
}

.ci-article__terms-label {
	margin-inline-end: var(--ci-space-2);
	color: var(--ci-color-text-tertiary);
}

.ci-article__terms a {
	color: var(--ci-color-text);
	text-decoration-line: underline;
}

.ci-article__terms a:hover {
	text-decoration-color: currentColor;
}

.ci-article__terms-sep {
	color: var(--ci-color-text-tertiary);
}

/* 7. Continue lendo ------------------------------------------------------ */

.ci-related {
	margin-block-start: var(--ci-space-section);
}

.ci-related__title {
	margin-block: 0 var(--ci-space-6);
	font-size: var(--ci-text-xl);
}

/* 8. Comentários --------------------------------------------------------- */

.ci-article__comments {
	margin-block-start: var(--ci-space-section);
}

.ci-article__comments :is(.title-comments, .comment-reply-title) {
	margin-block: 0 var(--ci-space-5);
	font-size: var(--ci-text-xl);
}

.ci-article__comments .comment-reply-title small {
	margin-inline-start: var(--ci-space-3);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-regular);
}

.ci-article__comments .comment-list {
	margin-block-end: var(--ci-space-8);
}

#comments .comment-metadata,
#comments .reply {
	font-size: var(--ci-text-xs);
	line-height: var(--ci-leading-normal);
}

#comments .comment-metadata a {
	color: var(--ci-color-text-tertiary);
}

.ci-article__comments .comment-form {
	display: grid;
	gap: var(--ci-space-5);
}

.ci-article__comments .comment-form > p {
	margin: 0;
}

.ci-article__comments .comment-notes,
.ci-article__comments .logged-in-as {
	color: var(--ci-color-text-secondary);
	font-size: var(--ci-text-sm);
}

.ci-article__comments .comment-form label {
	display: block;
	margin-block-end: var(--ci-space-2);
	font-size: var(--ci-text-sm);
	font-weight: var(--ci-weight-medium);
	line-height: var(--ci-leading-snug);
}

.ci-article__comments .comment-form .required {
	color: var(--ci-color-text-tertiary);
}

.ci-article__comments .comment-form textarea {
	min-height: 9rem;
}

.ci-article__comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ci-space-3);
}

.ci-article__comments .comment-form-cookies-consent input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-block-start: 0.15em;
}

.ci-article__comments .comment-form-cookies-consent label {
	margin: 0;
	color: var(--ci-color-text-secondary);
	font-weight: var(--ci-weight-regular);
	line-height: var(--ci-leading-normal);
}

.ci-article__comments .form-submit {
	margin: 0;
}