/**
 * blog.css — RevisaCursos
 * Estilos para posts comuns do WordPress (single.php): layout com sidebar,
 * card de post, caixa de busca, posts relacionados, e a tipografia de
 * conteúdo (.entry-content) usada tanto em posts quanto em páginas — cobre
 * os blocos nativos do Gutenberg (parágrafo, títulos, listas, citação,
 * tabela, botão, colunas, imagem com legenda) para que o editor de blocos
 * funcione bem sem CSS extra por post.
 */

/* ==========================================================================
   Layout da página de post (single.php)
   ========================================================================== */

.single-post-layout {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 3rem 1.25rem;
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.single-post-layout { grid-template-columns: 1fr 320px; }
}

.single-post__header { margin-bottom: 1.5rem; }
.single-post__category {
	display: inline-block;
	border-radius: 9999px;
	background: hsl(var(--secondary));
	color: hsl(var(--primary));
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
}
.single-post__title {
	margin: 0.75rem 0 0.5rem;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.single-post__title { font-size: 2.5rem; }
}
.single-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}
.single-post__thumbnail {
	margin: 1.5rem 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16/9;
}
.single-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.single-post__tags {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid hsl(var(--border));
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.single-post__tags a {
	border-radius: 9999px;
	background: hsl(var(--secondary));
	padding: 0.25rem 0.875rem;
	font-size: 0.8125rem;
	color: hsl(var(--secondary-foreground));
}
.single-post__tags a:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* ==========================================================================
   Sidebar (busca + posts relacionados)
   ========================================================================== */

.post-sidebar { display: flex; flex-direction: column; gap: 2rem; }

.sidebar-box {
	position: sticky;
	top: 6rem;
}

.sidebar-box__title {
	margin: 0 0 1rem;
	font-family: "Sora", sans-serif;
	font-size: 1rem;
	font-weight: 700;
}

.sidebar-search-form { display: flex; gap: 0.5rem; }
.sidebar-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-md);
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
}
.sidebar-search-form input[type="search"]:focus {
	outline: 2px solid hsl(var(--primary) / 0.4);
	outline-offset: 1px;
}
.sidebar-search-form button {
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-md);
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding: 0 0.875rem;
}
.sidebar-search-form button:hover { opacity: 0.9; }

.related-posts-list { display: flex; flex-direction: column; gap: 1rem; }
.related-post-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}
.related-post-item__thumb {
	flex-shrink: 0;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: hsl(var(--secondary));
}
.related-post-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-post-item__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}
.related-post-item:hover .related-post-item__title { color: hsl(var(--primary)); }
.related-post-item__date { margin-top: 0.25rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.related-posts-empty { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Card de post comum (template-parts/card-post.php)
   ========================================================================== */

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	border: 1px solid hsl(var(--border) / 0.7);
	background: hsl(var(--card));
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px hsl(var(--primary) / 0.05); }
.post-card__media { aspect-ratio: 16/9; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.25rem; }
.post-card__date { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.post-card__title { margin: 0; font-family: "Sora", sans-serif; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.post-card:hover .post-card__title { color: hsl(var(--primary)); }
.post-card__excerpt { flex: 1; margin: 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Tipografia de conteúdo (.entry-content) — posts, páginas e blocos nativos
   do Gutenberg. Compartilhado entre single.php e page.php.
   ========================================================================== */

.entry-content { font-size: 0.9375rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: 1.5rem; margin-top: 2rem; }
.entry-content h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.entry-content h4 { font-size: 1.0625rem; margin-top: 1.5rem; }
.entry-content p { line-height: 1.75; }
.entry-content a { color: hsl(var(--primary)); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.375rem; }
.entry-content li > ul, .entry-content li > ol { margin-top: 0.375rem; }
.entry-content img { border-radius: var(--radius-md); }
.entry-content figure { margin: 0; }
.entry-content figcaption {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	text-align: center;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	border-left: 3px solid hsl(var(--primary));
	padding: 0.25rem 0 0.25rem 1.25rem;
	font-style: italic;
	color: hsl(var(--foreground));
}
.entry-content .wp-block-pullquote {
	border-top: 2px solid hsl(var(--border));
	border-bottom: 2px solid hsl(var(--border));
	padding: 1.5rem 0;
	text-align: center;
	font-family: "Sora", sans-serif;
	font-size: 1.25rem;
}

.entry-content table,
.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.entry-content th, .entry-content td {
	border: 1px solid hsl(var(--border));
	padding: 0.625rem 0.875rem;
	text-align: left;
}
.entry-content th { background: hsl(var(--secondary)); font-weight: 600; }

.entry-content code {
	background: hsl(var(--secondary));
	border-radius: 0.25rem;
	padding: 0.125rem 0.375rem;
	font-size: 0.85em;
}
.entry-content pre {
	background: hsl(var(--brand-dark));
	color: #fff;
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
	overflow-x: auto;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }

.entry-content .wp-block-button__link {
	display: inline-flex;
	border-radius: var(--radius-md);
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
}
.entry-content .wp-block-button__link:hover { opacity: 0.9; }
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: hsl(var(--primary));
	border: 2px solid hsl(var(--primary));
}

.entry-content .wp-block-columns { display: flex; gap: 2rem; flex-wrap: wrap; }
.entry-content .wp-block-column { flex: 1; min-width: 240px; }

.entry-content hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 2rem 0; }