/**
 * single.css — página de post.
 *
 * Enfileirado apenas em posts (ver inc/enqueue.php). Camada sobre o Bootstrap e
 * os tokens --ee-*. Foco: leitura confortável e tipografia rica do conteúdo.
 *
 * Sumário:
 *   1. Cabeçalho do post
 *   2. Conteúdo (largura de leitura + tipografia rica)
 *   3. Anúncios no conteúdo
 *   4. Compartilhamento
 *   5. Caixa do autor
 *   6. Barra lateral
 *   7. Relacionados / navegação
 */

/* ==========================================================================
   1. Cabeçalho do post
   ========================================================================== */
/* Espaço acima do conteúdo: 20px fixos abaixo da faixa de breadcrumb. O
   container usa py-4/py-lg-5; zeramos esse padding-top e usamos a margem. */
.single-post-container {
	padding-top: 0;
}

.single-main {
	margin-top: 20px;
}

.single-title {
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
	line-height: 1.15;
	color: var(--ee-blue-dark);
	margin-bottom: var(--ee-space-3);
}

.single-subtitle {
	font-size: 1.2rem;
	line-height: 1.5;
}

/* Meta do topo: autor + data (esquerda) e ícones de compartilhar (direita). */
/* "Por" e "Em" num tom mais claro e peso normal (igual entre si). */
.single-meta-byline,
.single-meta-prefix {
	color: var(--ee-gray-500);
	font-weight: 400;
}

.single-meta-author {
	color: var(--ee-blue-dark);
	text-decoration: none;
	font-size: 1.05rem;
}

.single-meta-author:hover,
.single-meta-author:focus {
	color: var(--ee-blue);
	text-decoration: underline;
}

.single-meta-date {
	margin-top: 0.1rem;
	color: var(--ee-gray-700);
	font-weight: 600;
}

/* No modo compacto, o share fica só com os ícones (sem rótulo) e à direita. */
.single-share--compact {
	gap: 0;
}

/* Divisória abaixo do cabeçalho quando NÃO há imagem de destaque. */
.single-header-divider {
	border: 0;
	border-top: 1px solid var(--ee-border);
	opacity: 1;
}

.single-thumbnail img {
	width: 100%;
	height: auto;
}

.single-thumbnail-caption {
	text-align: center;
}

/* A caixa de material educativo (.ee-material-box) vive em materials.css. */

/* ==========================================================================
   2. Conteúdo — largura de leitura e tipografia rica
   ========================================================================== */
.single-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ee-text);
	/* O conteúdo ocupa toda a largura da coluna do artigo (col-lg-8), sem
	   limite de largura — evita espaço em branco à direita. */
}

.single-content > p {
	margin-bottom: var(--ee-space-5);
}

/* Headings internos */
.single-content h2,
.single-content h3,
.single-content h4 {
	color: var(--ee-blue-dark);
	margin-top: var(--ee-space-6);
	margin-bottom: var(--ee-space-3);
	line-height: 1.25;
}

.single-content h2 {
	font-size: 1.6rem;
	padding-bottom: var(--ee-space-2);
	border-bottom: 1px solid var(--ee-border);
}

.single-content h3 {
	font-size: 1.3rem;
}

/* Links no corpo */
.single-content a {
	color: var(--ee-blue);
	text-underline-offset: 0.15em;
}

.single-content a:hover,
.single-content a:focus {
	color: var(--ee-blue-dark);
}

/* Listas */
.single-content ul,
.single-content ol {
	margin-bottom: var(--ee-space-5);
	padding-left: var(--ee-space-5);
}

.single-content li {
	margin-bottom: var(--ee-space-2);
}

.single-content ul li::marker {
	color: var(--ee-orange);
}

/* Blockquote */
.single-content blockquote {
	margin: var(--ee-space-5) 0;
	padding: var(--ee-space-4) var(--ee-space-5);
	border-left: 4px solid var(--ee-orange);
	background: var(--ee-blue-light);
	border-radius: var(--ee-radius-sm);
	font-size: 1.1rem;
	color: var(--ee-text);
}

.single-content blockquote p:last-child {
	margin-bottom: 0;
}

.single-content blockquote cite {
	display: block;
	margin-top: var(--ee-space-2);
	font-size: 0.875rem;
	color: var(--ee-text-muted);
}

/* Imagens e legendas */
.single-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ee-radius-sm);
}

/* Anti-estouro: nenhuma imagem/figura/bloco do editor pode ultrapassar a coluna
   de leitura — comum no mobile com imagens que trazem width/height fixos no HTML
   ou wrappers do Gutenberg. NÃO esticamos imagens pequenas (sem width:100%); só
   limitamos a largura máxima e centralizamos. */
.single-content figure,
.single-content .wp-block-image,
.single-content .wp-caption,
.single-content img,
.single-content video,
.single-content iframe,
.single-content embed,
.single-content object {
	max-width: 100% !important;
	height: auto;
}

/* O wrapper interno do bloco de imagem do Gutenberg pode herdar width inline. */
.single-content .wp-block-image img,
.single-content figure img {
	max-width: 100%;
	height: auto;
}

/* Imagem centralizada na coluna (não estica as pequenas; só centraliza). */
.single-content .wp-block-image,
.single-content figure.aligncenter,
.single-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Larguras "wide"/"full" do editor não devem furar a coluna de leitura. */
.single-content .alignwide,
.single-content .alignfull {
	max-width: 100% !important;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

/* Conteúdo muito largo (ex.: tabela colada) ganha rolagem em vez de empurrar o
   layout para os lados no celular. */
.single-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.single-content figure {
	margin: var(--ee-space-5) 0;
}

.single-content figcaption,
.single-content .wp-caption-text {
	margin-top: var(--ee-space-2);
	font-size: 0.875rem;
	color: var(--ee-text-muted);
	text-align: center;
}

/* Embeds responsivos */
.single-content .wp-block-embed__wrapper,
.single-content iframe {
	max-width: 100%;
}

.single-content figure.wp-block-embed iframe {
	display: block;
	width: 100%;
}

/* Tabelas */
.single-content table {
	width: 100%;
	margin-bottom: var(--ee-space-5);
	border-collapse: collapse;
	font-size: 0.95rem;
}

.single-content th,
.single-content td {
	padding: var(--ee-space-2) var(--ee-space-3);
	border: 1px solid var(--ee-border);
	text-align: left;
}

.single-content thead th {
	background: var(--ee-blue-light);
	color: var(--ee-blue-dark);
	font-weight: 700;
}

.single-content tbody tr:nth-child(even) {
	background: var(--ee-bg-alt);
}

/* Botões do editor (core) */
.single-content .wp-block-button__link,
.single-content .wp-element-button {
	background-color: var(--ee-blue);
	color: var(--ee-text-invert);
	border-radius: var(--ee-radius-sm);
	padding: var(--ee-space-2) var(--ee-space-4);
	text-decoration: none;
}

.single-content .wp-block-button__link:hover,
.single-content .wp-block-button__link:focus {
	background-color: var(--ee-blue-dark);
	color: var(--ee-text-invert);
}

/* Código */
.single-content pre,
.single-content code {
	background: var(--ee-bg-alt);
	border-radius: var(--ee-radius-sm);
}

.single-content pre {
	padding: var(--ee-space-4);
	overflow-x: auto;
}

/* Tags do post */
.single-tags .entry-tags a {
	display: inline-block;
	margin: 0 var(--ee-space-1) var(--ee-space-1) 0;
	padding: 0.15rem 0.6rem;
	background: var(--ee-bg-alt);
	border-radius: var(--ee-radius-pill);
	color: var(--ee-text);
	text-decoration: none;
}

.single-tags .entry-tags a:hover,
.single-tags .entry-tags a:focus {
	background: var(--ee-blue-light);
	color: var(--ee-blue-dark);
}

.page-links {
	font-weight: 600;
}

.page-links .page-link-number {
	display: inline-block;
	min-width: 2rem;
	padding: 0.15rem 0.5rem;
	margin: 0 0.15rem;
	text-align: center;
	border: 1px solid var(--ee-border);
	border-radius: var(--ee-radius-sm);
}

/* --------------------------------------------------------------------------
   2b. Galeria nativa ([gallery]) — marcação HTML5 do WordPress.
   O tema declara suporte a html5 'gallery', então o WP NÃO injeta o CSS antigo
   de galeria; diagramamos aqui com grid, lendo o nº de colunas das classes
   gallery-columns-N que o WP já gera. Mobile: no máximo 3 colunas para não
   espremer as miniaturas.
   -------------------------------------------------------------------------- */
.single-content .gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* fallback: gallery padrão = 3, mas 2 é seguro */
	gap: var(--ee-space-3);
	margin: 0 0 var(--ee-space-4);
}

.single-content .gallery-columns-1 { grid-template-columns: 1fr; }
.single-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.single-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.single-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.single-content .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.single-content .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.single-content .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.single-content .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.single-content .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

/* Cada item ocupa a célula inteira (zera margem/largura herdadas). */
.single-content .gallery-item {
	margin: 0;
	width: auto;
	text-align: center;
}

.single-content .gallery-icon {
	margin: 0;
}

.single-content .gallery-icon img {
	width: 100%;
	height: auto;
	border-radius: var(--ee-radius-sm);
	border: 1px solid var(--ee-border);
}

/* Legenda de cada imagem (quando houver). */
.single-content .gallery-caption {
	display: block;
	margin-top: var(--ee-space-1);
	font-size: 0.85rem;
	line-height: 1.3;
	color: var(--ee-gray-500);
}

/* Mobile: limita a 3 colunas máximas, independentemente do gallery-columns-N,
   para as miniaturas não ficarem minúsculas. */
@media (max-width: 575.98px) {
	.single-content .gallery-columns-4,
	.single-content .gallery-columns-5,
	.single-content .gallery-columns-6,
	.single-content .gallery-columns-7,
	.single-content .gallery-columns-8,
	.single-content .gallery-columns-9 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   3. Anúncios no conteúdo
   ========================================================================== */
.single-content .ee-ad-slot {
	margin-block: var(--ee-space-6);
}

/* ==========================================================================
   4. Compartilhamento
   ========================================================================== */
.single-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ee-space-3);
}

.single-share-label {
	color: var(--ee-text);
}

/* Botões só de ícone: quadrados e uniformes, ícone centralizado. */
.single-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--ee-text-invert);
	border: 0;
	border-radius: var(--ee-radius-sm);
}

.single-share-btn svg {
	display: block;
}

/* No topo do post (modo compacto), os botões/ícones são menores; o
   compartilhamento do rodapé permanece no tamanho padrão. */
.single-share--compact .single-share-btn {
	width: 32px;
	height: 32px;
}

.single-share--compact .single-share-btn svg {
	width: 16px;
	height: 16px;
}

.single-share-btn:hover,
.single-share-btn:focus {
	color: var(--ee-text-invert);
}

.single-share-whatsapp {
	background-color: #25d366;
}

.single-share-whatsapp:hover,
.single-share-whatsapp:focus {
	background-color: #1da851;
	color: var(--ee-text-invert);
}

.single-share-facebook {
	background-color: #1877f2;
}

.single-share-facebook:hover,
.single-share-facebook:focus {
	background-color: #0d5fce;
	color: var(--ee-text-invert);
}

.single-share-twitter {
	background-color: #111;
}

.single-share-twitter:hover,
.single-share-twitter:focus {
	background-color: #000;
	color: var(--ee-text-invert);
}

.single-share-copy {
	background-color: var(--ee-blue);
}

.single-share-copy:hover,
.single-share-copy:focus {
	background-color: var(--ee-blue-dark);
	color: var(--ee-text-invert);
}

.single-share-copy.is-copied {
	background-color: var(--ee-green);
}

/* ==========================================================================
   5. Caixa do autor — discreta, integrada aos cards do site
   --------------------------------------------------------------------------
   Fundo branco + borda fina (como os demais cards), sem o azul que destoava.
   ========================================================================== */
.single-author {
	background: var(--ee-white);
	border: 1px solid var(--ee-border);
	border-radius: var(--ee-radius-md);
}

.single-author-kicker {
	display: block;
	margin-bottom: 0.15rem;
}

.single-author .single-author-name {
	margin-bottom: 0.1rem;
}

.single-author .single-author-name a {
	color: var(--ee-blue-dark);
}

.single-author-bio {
	font-size: 0.925rem;
	line-height: 1.5;
}

.single-author-more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--ee-blue);
	text-decoration: none;
}

.single-author-more::after {
	content: "\2192"; /* seta → reforça o "ver todos" */
}

.single-author-more:hover,
.single-author-more:focus {
	color: var(--ee-blue-dark);
	text-decoration: underline;
}

/* ==========================================================================
   6. Barra lateral
   --------------------------------------------------------------------------
   O comportamento da coluna lateral (sticky no desktop, empilhada no mobile) e
   os blocos editoriais vivem agora em sidebar.css (.ee-sidebar). Mantemos aqui
   apenas o estilo base dos widgets, reutilizado também por widgets do admin.
   ========================================================================== */
.single-widget + .single-widget,
.ee-ad-slot + .single-widget {
	margin-top: var(--ee-space-4);
}

.single-widget-title {
	padding-bottom: var(--ee-space-2);
	border-bottom: 2px solid var(--ee-orange);
	margin-bottom: var(--ee-space-3);
}

/* ==========================================================================
   7. Relacionados / navegação
   ========================================================================== */
.single-related-header .ee-section-title {
	color: var(--ee-blue-dark);
}

/* Navegação entre posts: duas boxes lado a lado (50/50), só borda clean,
   sem fundo. Margem própria (o my-4 saiu do template por causa da classe). */
.post-navigation {
	margin-block: var(--ee-space-5);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ee-space-3);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	max-width: none;
}

/* Cada lado é uma box clicável: apenas borda fina, fundo transparente. */
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--ee-space-3) var(--ee-space-4);
	background: transparent;
	border: 1px solid var(--ee-border);
	border-radius: var(--ee-radius-md);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover,
.post-navigation .nav-previous a:focus,
.post-navigation .nav-next a:focus {
	border-color: var(--ee-blue);
}

.post-navigation .nav-next a {
	text-align: right;
	align-items: flex-end;
}

/* Rótulo "Anterior/Próximo": pequeno, maiúsculas, cor de destaque. */
.post-navigation .nav-subtitle {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ee-orange);
	margin-bottom: 0.25rem;
}

.post-navigation .nav-title {
	color: var(--ee-blue-dark);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* No celular, empilha em coluna única e alinha tudo à esquerda. */
@media (max-width: 575.98px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next a {
		text-align: left;
		align-items: flex-start;
	}
}

/* ==========================================================================
   8. Box de taxonomias do post (temas relacionados)
   --------------------------------------------------------------------------
   Movido para assets/css/taxonomies.css — estilo compartilhado entre o single e
   a página de anexo (attachment.php), que reaproveita o mesmo partial. Os dois
   contextos enfileiram taxonomies.css (ver inc/enqueue.php).
   ========================================================================== */