/*
Theme Name: Sereno
Theme URI: https://example.com/sereno
Author: Rafael Marques
Author URI: https://example.com
Description: Tema clássico, minimalista e editorial para blogs pessoais. Coluna única centrada, tipografia como protagonista, paleta neutra em CSS custom properties, modo escuro automático, zero dependências externas e painel de opções completo no Customizer.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sereno
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, translation-ready, block-styles, wide-blocks

Sereno é distribuído sob os termos da GNU GPL v2 ou posterior.

*/

/* 1. TOKENS
   As variáveis --sereno-user-* são injetadas pelo Customizer via
   wp_add_inline_style() e servem apenas como *entrada*: cada token real
   usa var(--sereno-user-x, padrão). É isso que mantém o modo escuro
   funcionando mesmo com cores personalizadas — o inline style define
   outra variável, nunca o token final. */
:root {
	/* Cores (esquema claro) */
	--sereno-color-accent: var(--sereno-user-accent, #1a73e8);
	--sereno-color-accent-contrast: #ffffff;
	/* Tom mais fechado do destaque, usado em etiquetas e tags. Deriva da
	   cor escolhida, então acompanha qualquer paleta; o primeiro valor é
	   o fallback para navegadores sem color-mix(). */
	--sereno-color-accent-dark: var(--sereno-color-accent);
	--sereno-color-accent-dark: color-mix(in srgb, var(--sereno-color-accent) 82%, #000000);
	--sereno-color-text: var(--sereno-user-text, #111827);
	--sereno-color-background: var(--sereno-user-bg, #ffffff);
	--sereno-color-footer: var(--sereno-user-footer-bg, #0a0a14);
	--sereno-color-muted: #6b7280;
	--sereno-color-border: #e5e7eb;
	--sereno-color-surface: #f9fafb;
	--sereno-color-selection: #dbeafe;
	/* Links herdam a cor do texto e ganham o destaque no sublinhado/hover.
	   Como o valor é resolvido no momento do cálculo, este token acompanha
	   automaticamente a troca de --sereno-color-text no modo escuro. */
	--sereno-color-link: var(--sereno-color-text);
	/* Realce de passagem do mouse: um véu da cor de destaque, quase
	   imperceptível, usado em menus, categorias, cards e paginação.
	   O rgba é o fallback para navegadores sem color-mix(). */
	--sereno-color-hover: rgba(0, 0, 0, 0.045);
	--sereno-color-hover: color-mix(in srgb, var(--sereno-color-accent) 9%, transparent);

	/* Cabeçalho e barra superior: vazios por padrão, e aí herdam o fundo
	   e o texto normais do tema. Preenchidos no Customizer, viram faixas
	   coloridas — e os links dentro delas seguem a cor do texto. */
	--sereno-color-header-bg: var(--sereno-user-header-bg, transparent);
	--sereno-color-header-text: var(--sereno-user-header-text, var(--sereno-color-text));
	--sereno-color-topbar-bg: var(--sereno-user-topbar-bg, var(--sereno-color-surface));
	--sereno-color-topbar-text: var(--sereno-user-topbar-text, var(--sereno-color-muted));
	--sereno-color-footer-text: var(--sereno-user-footer-text, var(--sereno-color-text));

	/* Tipografia: stack do sistema, sem requisições externas */
	--sereno-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--sereno-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* Títulos de post: família e tamanhos vindos do Customizer. */
	--sereno-title-font: var(--sereno-font);
	--sereno-title-size-list: 18px;
	--sereno-title-size-single: 34px;
	--sereno-title-size-page: 30px;
	--sereno-font-size-body: 1.0625rem;

	/* Escala tipográfica */
	--sereno-step--1: 0.875rem;
	--sereno-step-0: 1.0625rem;
	--sereno-step-1: 1.1875rem;
	--sereno-step-2: 1.4375rem;
	--sereno-step-3: 1.75rem;
	--sereno-step-4: 2.25rem;
	--sereno-lh: 1.7;
	--sereno-lh-tight: 1.25;

	/* Métrica */
	--sereno-content: 720px;
	--sereno-wide: 1100px;
	--sereno-gutter: 1.25rem;
	--sereno-flow: 1.5rem;
	--sereno-radius: 4px;
	--sereno-logo-height: 48px;
	--sereno-footer-logo-height: 40px;
}

@media (min-width: 48em) {

	:root {
		--sereno-step-0: 1.125rem;
		--sereno-step-3: 2rem;
		--sereno-step-4: 2.75rem;
		--sereno-gutter: 2rem;
		--sereno-flow: 1.75rem;
	}
}

/* Modo escuro: só entra quando o Customizer está em "Seguir a preferência
   do visitante", que é o que coloca data-sereno-scheme="auto" no <html>.
   No padrão ("Sempre claro") este bloco inteiro é ignorado.
   A cor de destaque é clareada para manter contraste sobre fundo escuro;
   navegadores sem color-mix() ignoram a segunda declaração. */
@media (prefers-color-scheme: dark) {

	:root[data-sereno-scheme="auto"] {
		--sereno-color-accent: var(--sereno-user-accent, #7fc4b3);
		--sereno-color-accent: color-mix(in srgb, var(--sereno-user-accent, #2f6f62) 55%, #ffffff);
		--sereno-color-accent-contrast: #101010;
		--sereno-color-text: var(--sereno-user-text-dark, #e8e7e3);
		--sereno-color-background: var(--sereno-user-bg-dark, #121211);
		--sereno-color-footer: var(--sereno-user-footer-bg-dark, #191918);
		--sereno-color-muted: #a6a59f;
		--sereno-color-border: #2d2d2a;
		--sereno-color-surface: #1b1b19;
		--sereno-color-selection: #22322e;
	}
}

/* 2. RESET E BASE */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background-color: var(--sereno-color-background);
	color: var(--sereno-color-text);
	font-family: var(--sereno-font);
	font-size: var(--sereno-font-size-body);
	line-height: var(--sereno-lh);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background-color: var(--sereno-color-selection);
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
}

/* Iframes ficam fora da regra acima de propósito. "height: auto" num
   iframe sobrescreve o atributo height do HTML e, como iframe não tem
   proporção intrínseca, a altura cai para o padrão do CSS: 150px. Isso
   cortava anúncios (336x280 virava 336x150), mapas e players. Aqui só
   limitamos a largura; a altura declarada é respeitada. */
iframe {
	max-width: 100%;
}

/* Embeds do WordPress têm proporção própria e devem preencher o quadro. */
.wp-block-embed__wrapper iframe,
.wp-has-aspect-ratio iframe {
	width: 100%;
	height: 100%;
}

/* Ícones do tema: traço fino, herdam a cor do texto.
   Como os SVG já trazem fill/stroke como atributos, aqui só definimos
   a caixa — evitando que uma regra global de fill quebre os desenhos. */
.sereno-icon {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
}

hr {
	height: 1px;
	margin: calc(var(--sereno-flow) * 2) 0;
	border: 0;
	background-color: var(--sereno-color-border);
}

/* 3. TIPOGRAFIA */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-family: var(--sereno-title-font);
	font-weight: 700;
	line-height: var(--sereno-lh-tight);
	letter-spacing: -0.011em;
}

h1 {
	font-size: var(--sereno-step-4);
}

h2 {
	font-size: var(--sereno-step-3);
}

h3 {
	font-size: var(--sereno-step-2);
}

h4 {
	font-size: var(--sereno-step-1);
}

h5,
h6 {
	font-size: var(--sereno-step-0);
}

/* Rótulos discretos usados como título de seção em vários blocos. */
.sereno-share__title,
.sereno-related__title,
.sereno-section__title,
.widget-title,
.sereno-nav-label {
	font-weight: 700;
	letter-spacing: 0.01em;
}

p,
ul,
ol,
dl,
table,
pre,
blockquote,
figure {
	margin: 0 0 var(--sereno-flow);
}

a {
	color: var(--sereno-color-link);
	text-decoration-color: var(--sereno-color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--sereno-color-accent);
}

blockquote {
	padding-left: 1.25rem;
	border-left: 2px solid var(--sereno-color-accent);
	color: var(--sereno-color-muted);
	font-style: italic;
}

blockquote > :last-child {
	margin-bottom: 0;
}

code,
kbd,
samp,
pre {
	font-family: var(--sereno-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.35em;
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-surface);
}

pre {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-surface);
	line-height: 1.55;
}

pre code {
	padding: 0;
	background: none;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sereno-step--1);
}

th,
td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--sereno-color-border);
	text-align: left;
}

th {
	font-weight: 600;
}

/* 4. ACESSIBILIDADE */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal;
}

.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-background);
	box-shadow: 0 0 0 2px var(--sereno-color-accent);
	color: var(--sereno-color-text);
	font-size: var(--sereno-step--1);
	text-decoration: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sereno-color-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 5. LAYOUT E CONTAINERS */
.sereno-container {
	width: 100%;
	max-width: calc(var(--sereno-content) + var(--sereno-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sereno-gutter);
}

.sereno-container--wide {
	max-width: calc(var(--sereno-wide) + var(--sereno-gutter) * 2);
}

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-content {
	flex: 1 0 auto;
	padding-block: 2.5rem 4rem;
}

@media (min-width: 48em) {

	.site-content {
		padding-block: 4rem 5.5rem;
	}
}

/* Template "Largura total": o container solta a largura, mas o texto
   comum segue centralizado na coluna de leitura. Só blocos alinhados
   como largo/total é que ocupam a tela inteira. */
.sereno-full {
	width: 100%;
}

.sereno-full .entry-content > :not(.alignfull):not(.alignwide) {
	max-width: var(--sereno-content);
	margin-inline: auto;
	padding-inline: var(--sereno-gutter);
}

.sereno-full .entry-content > .alignwide {
	margin-left: auto;
	transform: none;
}

/* Layout com sidebar (opcional, desligado por padrão) */
@media (min-width: 62em) {

	.sereno-has-sidebar .site-content > .sereno-container {
		display: grid;
		max-width: calc(var(--sereno-wide) + var(--sereno-gutter) * 2);
		align-items: start;
		gap: 3rem;
		grid-template-columns: minmax(0, 1fr) 18.75rem;
	}
}

/* 6. CABEÇALHO E NAVEGAÇÃO */
.site-header {
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--sereno-color-border);
	background-color: var(--sereno-color-header-bg);
	color: var(--sereno-color-header-text);
}

/* Com fundo colorido, tudo dentro do cabeçalho acompanha a cor do texto
   escolhida — inclusive links do menu e a descrição do site. */
.site-header a,
.site-header .site-description {
	color: inherit;
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.site-branding {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.15rem;
}

.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

/* O logotipo é reduzido por CSS a partir dos controles do Customizer:
   a altura manda e a largura acompanha, a menos que um limite seja dado. */
.custom-logo {
	width: auto;
	max-width: var(--sereno-logo-width, none);
	height: auto;
	max-height: var(--sereno-logo-height);
	object-fit: contain;
}

.site-title {
	margin: 0;
	font-weight: 700;
	font-size: var(--sereno-step-2);
	letter-spacing: -0.02em;
}

.site-title a {
	text-decoration: none;
}

.site-description {
	margin: 0;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

/* Botão do menu — visível apenas no mobile */
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: var(--sereno-step--1);
}

.menu-toggle__icon {
	display: block;
	width: 1rem;
	height: 1rem;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open,
.menu-toggle[aria-expanded="false"] .menu-toggle__icon--close {
	display: none;
}

.main-navigation {
	display: none;
	flex-basis: 100%;
}

.main-navigation.is-open,
.no-js .main-navigation {
	display: block;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation > div > ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	/* A margem negativa compensa o respiro interno dos itens, para o
	   texto do menu continuar alinhado com o logotipo. */
	margin-inline: -0.6rem;
	padding-block: 0.75rem;
}

.main-navigation a {
	display: block;
	padding: 0.4rem 0.6rem;
	font-weight: 600;
	border-radius: var(--sereno-radius);
	font-size: var(--sereno-step--1);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Realce de passagem do mouse e de foco pelo teclado. */
.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	background-color: var(--sereno-color-hover);
}

/* O item da página atual é marcado por peso e pelo realce de fundo, e
   não por cor: com cabeçalho colorido, pintá-lo com a cor de destaque
   deixaria o texto invisível (azul sobre azul). */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: inherit;
	font-weight: 700;
}

/* Submenus: recuados no mobile, dropdown no desktop.
   O item que tem filhos ganha uma seta, para o visitante saber que há
   mais coisa ali antes de tentar. */
.main-navigation .sub-menu {
	padding-left: 0.9rem;
}

.main-navigation .menu-item-has-children > a::after {
	display: inline-block;
	margin-left: 0.35rem;
	content: "›";
	font-size: 1.1em;
	line-height: 1;
	transform: rotate(90deg);
}

/* Alinhamento do menu no mobile (o desktop redefine abaixo). */
.main-navigation--m-center > div > ul {
	align-items: center;
}

.main-navigation--m-right > div > ul {
	align-items: flex-end;
}

.site-header--toggle-left .menu-toggle {
	order: -1;
}

/* Barra superior: links legais (LGPD, termos, cookies). */
.sereno-topbar {
	border-bottom: 1px solid var(--sereno-color-border);
	background-color: var(--sereno-color-topbar-bg);
	color: var(--sereno-color-topbar-text);
	font-size: 0.8125rem;
}

.sereno-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	min-height: 2.4rem;
	align-items: center;
	gap: 0.5rem 1rem;
	padding-block: 0.3rem;
}

/* Seletor de idiomas: fica sempre na ponta direita da barra. */
.sereno-langs {
	margin-left: auto;
}

.sereno-langs ul {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sereno-langs a {
	display: inline-block;
	padding: 0.1rem 0.4rem;
	border-radius: var(--sereno-radius);
	color: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.sereno-langs a:hover,
.sereno-langs a:focus-visible {
	background-color: var(--sereno-color-hover);
}

.sereno-topbar--left .sereno-topbar__inner {
	justify-content: flex-start;
}

.sereno-topbar--center .sereno-topbar__inner {
	justify-content: center;
}

.sereno-topbar--right .sereno-topbar__inner {
	justify-content: flex-end;
}

/* Barra superior e menu do rodapé compartilham a mesma lista horizontal. */
.sereno-topbar ul,
.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sereno-topbar a,
.footer-navigation a {
	display: inline-block;
	/* Altura de toque confortável no celular; no computador o respiro
	   extra é imperceptível. */
	padding: 0.4rem 0.45rem;
	font-weight: 600;
	border-radius: var(--sereno-radius);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.footer-navigation a {
	color: var(--sereno-color-muted);
}

.sereno-topbar a:hover,
.sereno-topbar a:focus-visible,
.footer-navigation a:hover,
.footer-navigation a:focus-visible {
	background-color: var(--sereno-color-hover);
}

.sereno-topbar a:hover,
.sereno-topbar a:focus,
.footer-navigation a:hover,
.footer-navigation a:focus {
	color: var(--sereno-color-accent);
	text-decoration: underline;
}

@media (min-width: 48em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation {
		display: block;
		flex: 1 1 auto;
	}

	.main-navigation > div > ul {
		flex-direction: row;
		align-items: center;
		/* Menor que no mobile porque cada item já tem respiro próprio. */
		gap: 0.75rem;
		padding-block: 0;
	}

	.main-navigation--left > div > ul {
		justify-content: flex-start;
	}

	.main-navigation--center > div > ul {
		justify-content: center;
	}

	.main-navigation--right > div > ul {
		justify-content: flex-end;
	}

	/* Logotipo centralizado e menu na linha de baixo. */
	.site-header--stacked .site-header__inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.site-header--stacked .site-branding {
		align-items: center;
	}

	.site-header--stacked .main-navigation {
		width: 100%;
		flex: 0 0 auto;
	}

	.site-header--stacked .main-navigation > div > ul {
		justify-content: center;
	}

	.main-navigation li {
		position: relative;
	}

	.main-navigation .menu-item-has-children > a::after {
		transform: none;
	}

	.main-navigation .sub-menu {
		position: absolute;
		z-index: 20;
		top: 100%;
		left: 0;
		min-width: 12rem;
		padding: 0.5rem 0.9rem;
		border: 1px solid var(--sereno-color-border);
		border-radius: var(--sereno-radius);
		background-color: var(--sereno-color-background);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
		opacity: 0;
		visibility: hidden;
	}

	/* Dentro do dropdown o fundo é sempre o do site, então o texto volta
	   à cor normal mesmo com cabeçalho colorido. */
	.site-header .main-navigation .sub-menu a {
		color: var(--sereno-color-text);
	}

	/* Nos últimos itens o submenu abre para a esquerda, para não sair
	   pela borda da tela. */
	.main-navigation > div > ul > li:last-child > .sub-menu,
	.main-navigation > div > ul > li:nth-last-child(2) > .sub-menu {
		right: 0;
		left: auto;
	}

	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}
}

/* Busca opcional no cabeçalho */
.site-header__search {
	flex-basis: 100%;
}

@media (min-width: 48em) {

	.site-header__search {
		max-width: 18rem;
		flex-basis: auto;
	}
}

/* Faixa de assuntos, acima do conteúdo.
   Uma caixa com borda e, dentro, os botões de assunto centralizados —
   todos com a mesma altura, para as fileiras não virarem escadinha.
   Os botões são compactos de propósito: a faixa é um atalho, não pode
   empurrar o conteúdo para baixo da dobra. */
.sereno-cats-band {
	padding-block: 0.875rem 0;
}

/* Se um plugin injetar qualquer coisa dentro da faixa (banner, script),
   ela fica centralizada e separada, em vez de colar nos botões. */
.sereno-cats-band > .sereno-container > *:not(.sereno-cats-band__inner) {
	margin-top: 0.875rem;
	text-align: center;
}

.sereno-cats-band__inner {
	padding: 0.75rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: 10px;
	background-color: var(--sereno-color-background);
	text-align: center;
}

.sereno-cats-band__title {
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.sereno-cats-band .sereno-categories__list {
	justify-content: center;
	gap: 0.375rem;
}

/* No celular, duas colunas exatas: é o que mantém a grade alinhada
   sem deixar um botão órfão ocupando a linha inteira. */
.sereno-cats-band .sereno-categories__list > li {
	flex: 1 1 calc(50% - 0.1875rem);
	max-width: calc(50% - 0.1875rem);
}

/* Em tela pequena a faixa para em três fileiras. Os itens restantes
   continuam no HTML (e no sorteio, portanto aparecem em outra visita),
   mas não empurram o conteúdo para fora da primeira tela. */
.sereno-cats-band .sereno-categories__list > li:nth-child(n+7) {
	display: none;
}

.sereno-cats-band .sereno-categories__list a {
	display: flex;
	min-height: 2rem;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: 6px;
	color: var(--sereno-color-accent-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

@media (min-width: 48em) {

	.sereno-cats-band {
		padding-block: 1.25rem 0;
	}

	.sereno-cats-band__inner {
		padding: 1rem 1.25rem;
	}

	/* Do tablet para cima cabe tudo, então nada fica escondido. */
	.sereno-cats-band .sereno-categories__list > li:nth-child(n+7) {
		display: block;
	}

	/* No computador cada botão tem a largura do próprio texto, com um
	   mínimo comum — assim os oito costumam caber em uma única linha. */
	.sereno-cats-band .sereno-categories__list > li {
		flex: 0 0 auto;
		max-width: none;
	}

	.sereno-cats-band .sereno-categories__list a {
		min-height: 2.25rem;
		min-width: 6.5rem;
		padding: 0.45rem 0.9rem;
		font-size: 0.85rem;
	}
}

/* 7. LISTAGEM DE POSTS */
.page-header {
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sereno-color-border);
}

.page-title {
	margin-bottom: 0.25rem;
	font-size: var(--sereno-title-size-page);
}

.archive-description {
	margin: 0;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

.sereno-posts {
	display: grid;
	gap: 3rem;
}

@media (max-width: 39.99em) {

	.sereno-posts--rows {
		padding-inline: 1rem;
	}

	/* No celular o cabeçalho empilha marca, botão e busca: sem apertar
	   o respiro, ele come metade da primeira tela. */
	.site-header__inner {
		gap: 0.6rem;
	}

	.site-header__search .search-form {
		gap: 0.4rem;
	}
}

.sereno-posts--grid,
.sereno-posts--cards {
	gap: 2.25rem;
}

/* Grid: 1 coluna no celular, 2 no tablet e o total escolhido no desktop. */
@media (min-width: 40em) {

	.sereno-posts--grid,
	.sereno-posts--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {

	.sereno-posts--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sereno-posts--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Em 3 ou 4 colunas o título encolhe um pouco para caber melhor. */
.sereno-posts--cols-3 .entry-title,
.sereno-posts--cols-4 .entry-title {
	font-size: calc(var(--sereno-title-size-list) * 0.85);
}

.entry-summary p:last-child,
.entry-content > :last-child {
	margin-bottom: 0;
}

/* O corpo do card empilha categoria, título, resumo e data. */
.sereno-entry__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.sereno-entry__body .entry-title,
.sereno-entry__body .entry-summary,
.sereno-entry__body .entry-meta {
	margin: 0;
}

.sereno-entry__body .entry-title {
	line-height: 1.35;
}

/* O resumo é texto de apoio: menor e mais claro que o título. */
.sereno-entry__body .entry-summary {
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

/* Post de abertura: ocupa a linha inteira da grade. */
.sereno-entry--featured {
	grid-column: 1 / -1;
}

.sereno-entry--featured .entry-title {
	font-size: calc(var(--sereno-title-size-list) * 1.55);
}

/* =========================================================================
   LISTA HORIZONTAL (formato padrão)
   Um painel único com uma linha por post: miniatura de tamanho fixo à
   esquerda, texto à direita, divisória entre as linhas. As medidas
   (200x120 na linha, 350x240 no destaque) seguem o layout de referência.
   No celular tudo empilha.
   ========================================================================= */
.sereno-posts--rows {
	display: block;
	padding: 0.25rem 1.5rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-background);
}

.sereno-posts--rows .sereno-entry {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--sereno-color-border);
}

.sereno-posts--rows .sereno-entry:last-child {
	border-bottom: 0;
}

.sereno-posts--rows .post-thumbnail {
	margin-bottom: 0;
}

/* Título e resumo com corte por linhas: é o que mantém todas as linhas
   da lista com a mesma altura, independente do tamanho do texto. */
.sereno-posts--rows .entry-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.sereno-posts--rows .entry-summary {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.sereno-posts--rows .sereno-entry--featured .entry-title {
	-webkit-line-clamp: 3;
}

@media (min-width: 40em) {

	.sereno-posts--rows .sereno-entry {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.sereno-posts--rows .post-thumbnail {
		flex: 0 0 12.5rem;
	}

	.sereno-posts--rows .post-thumbnail img {
		width: 12.5rem;
		height: 7.5rem;
		object-fit: cover;
	}

	.sereno-posts--rows .sereno-entry__body {
		min-width: 0;
		flex: 1 1 auto;
	}

	/* Destaque: mesma linha, em escala maior. */
	.sereno-posts--rows .sereno-entry--featured {
		gap: 2.25rem;
		padding-block: 1.5rem 1.75rem;
	}

	.sereno-posts--rows .sereno-entry--featured .post-thumbnail {
		flex: 0 0 21.875rem;
	}

	.sereno-posts--rows .sereno-entry--featured .post-thumbnail img {
		width: 21.875rem;
		height: 15rem;
	}
}

.entry-header {
	margin-bottom: 0.75rem;
}

/* Tamanho e família dos títulos vêm do Customizer. */
.entry-title {
	margin-bottom: 0.4rem;
	font-family: var(--sereno-title-font);
	font-size: var(--sereno-title-size-list);
	font-weight: 700;
}

.entry-title a {
	text-decoration: none;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

.entry-meta a {
	text-decoration: none;
}

.entry-meta a:hover {
	text-decoration: underline;
}

.entry-meta__sep {
	opacity: 0.5;
}

.post-thumbnail {
	display: block;
	margin-bottom: 1.25rem;
	line-height: 0;
}

/* Padrão: a imagem respeita a proporção real do arquivo e nunca é
   ampliada acima do tamanho original — só reduzida quando não cabe. */
.post-thumbnail img {
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--sereno-radius);
}

/* Modo recorte: todos os cards com a mesma proporção. */
.sereno-thumbs-cover .post-thumbnail img {
	width: 100%;
	aspect-ratio: var(--sereno-thumb-ratio, 16 / 9);
	object-fit: cover;
}

/* Imagem destacada em largura estendida — só sem barra lateral, pelo
   mesmo motivo dos blocos largos. */
@media (min-width: 62em) {

	.sereno-no-sidebar .post-thumbnail--wide {
		width: var(--sereno-wide);
		max-width: calc(100vw - var(--sereno-gutter) * 2);
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

.sereno-read-more {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--sereno-color-accent);
	font-size: var(--sereno-step--1);
	font-weight: 600;
	text-decoration: none;
}

.sereno-read-more:hover,
.sereno-read-more:focus {
	text-decoration: underline;
}

/* Variante "cards" */
.sereno-posts--cards .sereno-entry {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-surface);
	transition: border-color 0.15s ease;
}

.sereno-posts--cards .sereno-entry:hover,
.sereno-posts--cards .sereno-entry:focus-within {
	border-color: var(--sereno-color-accent);
}

.sereno-posts--cards .post-thumbnail {
	margin: -1.5rem -1.5rem 1.25rem;
}

.sereno-posts--cards .post-thumbnail img {
	border-radius: var(--sereno-radius) var(--sereno-radius) 0 0;
}

/* Post fixado */
.sereno-entry.sticky .entry-title::before {
	content: "\2605";
	margin-right: 0.4rem;
	color: var(--sereno-color-accent);
}

/* 8. POST INDIVIDUAL E PÁGINAS */
/* Trilha de navegação acima do título. */
.sereno-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

.sereno-breadcrumb a {
	text-decoration: none;
}

.sereno-breadcrumb a:hover {
	text-decoration: underline;
}

.sereno-breadcrumb__sep {
	opacity: 0.4;
}

/* Categoria dentro da linha de metadados do post individual. */
.sereno-meta-cat {
	color: var(--sereno-color-accent);
	font-weight: 700;
	text-decoration: none;
}

/* Etiqueta da categoria, acima do título nas listagens. */
.sereno-cat-label {
	display: inline-block;
	margin-bottom: 0.75rem;
	color: var(--sereno-color-accent-dark);
	font-size: var(--sereno-step--1);
	font-weight: 600;
	text-decoration: none;
}

.sereno-single .entry-header {
	margin-bottom: 2rem;
}

.sereno-single .entry-title {
	font-size: var(--sereno-title-size-single);
}

.sereno-single .post-thumbnail {
	margin-bottom: 2.5rem;
}

.entry-content > * + * {
	margin-top: var(--sereno-flow);
}

/* Imagens do post: tamanho real, reduzidas apenas quando não cabem.
   Com "esticar imagens pequenas" ligado, elas passam a ocupar a coluna. */
.entry-content img {
	width: auto;
	max-width: 100%;
	height: auto;
}

.sereno-content-img-full .entry-content .wp-block-image img,
.sereno-content-img-full .entry-content > figure img {
	width: 100%;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: calc(var(--sereno-flow) * 1.6);
}

.entry-footer {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sereno-color-border);
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

.sereno-tags a {
	display: inline-block;
	margin: 0 0.35rem 0.35rem 0;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: 999px;
	text-decoration: none;
}

/* Compartilhar (links simples, sem scripts de terceiros) */
.sereno-share {
	margin-top: 2rem;
}

.sereno-share__title {
	margin-bottom: 0.6rem;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

/* Mesma pastilha redonda serve para compartilhar e para as redes do rodapé. */
.sereno-share__list,
.sereno-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sereno-share__list a,
.sereno-social a {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sereno-color-border);
	border-radius: 50%;
	color: var(--sereno-color-muted);
}

.sereno-share__list a,
.sereno-social a {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sereno-share__list a:hover,
.sereno-share__list a:focus-visible,
.sereno-social a:hover,
.sereno-social a:focus-visible {
	border-color: var(--sereno-color-accent);
	background-color: var(--sereno-color-hover);
	color: var(--sereno-color-accent);
}

/* Caixa do autor */
.sereno-author-box {
	display: flex;
	gap: 1.25rem;
	margin-top: 3rem;
	padding: 1.5rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-surface);
}

.sereno-author-box img {
	border-radius: 50%;
}

.sereno-author-box__label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
	letter-spacing: 0.01em;
}

.sereno-author-box__name {
	margin-bottom: 0.25rem;
	font-size: var(--sereno-step-1);
}

.sereno-author-box p {
	margin: 0;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

/* Posts relacionados */
.sereno-related {
	margin-top: 3.5rem;
}

.sereno-related__title,
.sereno-section__title {
	margin-bottom: 1.5rem;
	font-size: var(--sereno-step-1);
}

.sereno-related__list {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {

	.sereno-related__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sereno-related__item h3 {
	margin-bottom: 0.25rem;
	font-size: var(--sereno-step-0);
}

.sereno-related__item a {
	text-decoration: none;
}

.sereno-related__item time {
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

/* Paginação interna do post (<!--nextpage-->) */
.page-links {
	margin-top: var(--sereno-flow);
	font-size: var(--sereno-step--1);
}

.page-links a {
	padding: 0 0.35rem;
}

/* 10. FORMULÁRIOS E BOTÕES */
label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--sereno-step--1);
	font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-background);
	/* Cor própria, e não herdada: dentro de um cabeçalho ou rodapé
	   colorido, "inherit" deixaria o texto digitado branco sobre o
	   fundo branco do campo. */
	color: var(--sereno-color-text);
	font: inherit;
	font-size: var(--sereno-step--1);
}

::placeholder {
	color: var(--sereno-color-muted);
	opacity: 1;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

button,
input[type="submit"],
input[type="button"],
.sereno-button {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border: 1px solid var(--sereno-color-accent);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-accent);
	color: var(--sereno-color-accent-contrast);
	cursor: pointer;
	font: inherit;
	font-size: var(--sereno-step--1);
	font-weight: 600;
	text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.sereno-button:hover,
.sereno-button:focus {
	color: var(--sereno-color-accent-contrast);
	opacity: 0.88;
}

.search-form {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.search-form label {
	flex: 1 1 auto;
	margin: 0;
}

.search-form .search-submit {
	flex: 0 0 auto;
}

/* 11. PAGINAÇÃO E NAVEGAÇÃO DE POSTS */
.navigation.pagination,
.posts-navigation {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sereno-color-border);
	font-size: var(--sereno-step--1);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

.page-numbers {
	display: inline-flex;
	min-width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	padding: 0 0.5rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.page-numbers:hover,
a.page-numbers:focus-visible {
	border-color: var(--sereno-color-accent);
	background-color: var(--sereno-color-hover);
}

.page-numbers.current {
	border-color: var(--sereno-color-accent);
	background-color: var(--sereno-color-accent);
	color: var(--sereno-color-accent-contrast);
}

.page-numbers.dots {
	border-color: transparent;
}

.post-navigation {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sereno-color-border);
}

.post-navigation .nav-links {
	display: grid;
	justify-content: stretch;
	gap: 1.5rem;
}

@media (min-width: 40em) {

	.post-navigation .nav-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-navigation .nav-next {
		text-align: right;
	}
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.sereno-nav-label {
	display: block;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

.sereno-nav-title {
	font-weight: 600;
}

/* 12. WIDGETS E SIDEBAR */
.widget-area .widget,
.footer-widgets .widget {
	margin-bottom: 2.25rem;
	font-size: var(--sereno-step--1);
}

/* Cartões automáticos da barra lateral (quando não há widgets). */
.widget-area .sereno-card {
	margin-bottom: 1.25rem;
	padding: 1.375rem 1.25rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: 10px;
	background-color: var(--sereno-color-background);
}

/* O título de cada cartão é separado do conteúdo por uma divisória —
   é o detalhe que dá o acabamento de "caixa" ao bloco. */
.widget-area .sereno-card .widget-title {
	margin-bottom: 0.125rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--sereno-color-border);
	font-size: 1.05rem;
}

/* Categorias: nome à esquerda, contagem à direita, uma linha por item. */
.widget-area .sereno-card__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0;
	border-bottom: 1px solid var(--sereno-color-border);
}

.widget-area .sereno-card__list li:last-child {
	border-bottom: 0;
}

.widget-area .sereno-card__list li a {
	flex: 1 1 auto;
	padding: 0.7rem 0;
	font-size: 0.88rem;
}

.widget-area .sereno-card__count {
	color: var(--sereno-color-muted);
	font-size: 0.8rem;
}

.sereno-card__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.sereno-card__count {
	color: var(--sereno-color-muted);
	font-variant-numeric: tabular-nums;
}

/* Lista numerada de posts, no espírito de "mais lidos". */
.sereno-card__posts {
	margin: 0;
	padding-top: 0.375rem;
	padding-inline: 0;
	list-style: none;
	counter-reset: sereno-card;
}

/* Item da lista de recentes: número em círculo, miniatura 80x64 e o
   texto à direita — as medidas seguem o layout de referência.
   Flex (e não grid) para o item se ajustar quando o post não tem imagem. */
.sereno-card__posts li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.65rem 0 0.9rem;
	counter-increment: sereno-card;
}

.sereno-card__posts li + li {
	border-top: 1px solid var(--sereno-color-border);
}

.sereno-card__thumb {
	display: block;
	flex: 0 0 5rem;
	line-height: 0;
}

.sereno-card__thumb img {
	width: 5rem;
	height: 4rem;
	border-radius: 8px;
	object-fit: cover;
}

.sereno-card__body {
	min-width: 0;
	flex: 1 1 auto;
}

.sereno-card__posts li:last-child {
	border-bottom: 0;
}

/* O número fica sobre o canto da miniatura, e não em coluna própria:
   é o que devolve largura ao título. Sem miniatura ele volta para o
   fluxo normal, para não cobrir o texto. */
.sereno-card__posts li::before {
	position: absolute;
	z-index: 1;
	top: 0.65rem;
	left: 0;
	display: flex;
	width: 1.625rem;
	height: 1.625rem;
	flex: 0 0 1.625rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--sereno-color-accent);
	color: var(--sereno-color-accent-contrast);
	content: counter(sereno-card);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.sereno-card__posts li:not(:has(.sereno-card__thumb))::before {
	position: static;
}

.sereno-card__posts .sereno-card__body a {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.845rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.sereno-card__posts time {
	display: block;
	margin-top: 0.15rem;
	color: var(--sereno-color-muted);
	font-size: 0.72rem;
}

.sereno-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 0.875rem;
}

.sereno-card__tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	color: var(--sereno-color-accent-dark);
	border: 1px solid var(--sereno-color-border);
	border-radius: 20px;
	background-color: var(--sereno-color-background);
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sereno-card__tags a:hover,
.sereno-card__tags a:focus-visible {
	border-color: var(--sereno-color-accent);
	background-color: var(--sereno-color-hover);
}

.widget-title {
	margin-bottom: 0.75rem;
	font-size: var(--sereno-step--1);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--sereno-color-border);
}

.widget li:last-child {
	border-bottom: 0;
}

.widget a {
	text-decoration: none;
}

.widget a:hover {
	text-decoration: underline;
}

/* 13. RODAPÉ */
.site-footer__brand {
	margin-bottom: 2rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--sereno-color-border);
	text-align: center;
}

.site-footer__brand .custom-logo {
	max-height: var(--sereno-footer-logo-height);
	margin-bottom: 0.5rem;
}

.site-footer__name {
	margin: 0;
	font-family: var(--sereno-title-font);
	font-size: var(--sereno-step-1);
	font-weight: 700;
}

.site-footer__name a {
	text-decoration: none;
}

.site-footer__tagline {
	margin: 0.25rem 0 0;
	font-size: var(--sereno-step--1);
	opacity: 0.75;
}

/* Alinhamento do menu do rodapé. */
.footer-navigation--left ul {
	justify-content: flex-start;
}

.footer-navigation--right ul {
	justify-content: flex-end;
}

.footer-navigation--left,
.footer-navigation--right {
	width: 100%;
}

.site-footer {
	flex-shrink: 0;
	padding-block: 3rem 2rem;
	border-top: 1px solid var(--sereno-color-border);
	background-color: var(--sereno-color-footer);
	color: var(--sereno-color-footer-text);
}

/* Com fundo escuro no rodapé, tudo lá dentro acompanha a cor do texto
   escolhida — widgets, menu, ícones sociais e copyright. */
.site-footer a,
.site-footer .site-info,
.site-footer .footer-navigation a,
.site-footer .sereno-social a {
	color: inherit;
}

/* As divisórias claras do tema ficariam berrantes sobre fundo escuro:
   dentro do rodapé elas derivam da própria cor do texto. */
.site-footer,
.site-footer .site-footer__brand,
.site-footer .site-footer__bottom,
.site-footer .widget li,
.site-footer .sereno-social a {
	border-color: rgba(127, 127, 127, 0.35);
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.footer-widgets {
	display: grid;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 40em) {

	.footer-widgets--2,
	.footer-widgets--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-widgets--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {

	.footer-widgets--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--sereno-color-border);
	text-align: center;
}

.footer-navigation ul {
	font-size: var(--sereno-step--1);
}

.sereno-social {
	justify-content: center;
}

.site-info {
	margin: 0;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
}

/* 14. HOME CONFIGURÁVEL */
.sereno-section {
	margin-bottom: 4rem;
}

.sereno-section:last-child {
	margin-bottom: 0;
}

.sereno-hero {
	padding-block: 1rem 2rem;
	text-align: center;
}

.sereno-hero__title {
	margin-bottom: 0.5rem;
	font-size: var(--sereno-step-4);
}

.sereno-hero__text {
	max-width: 34rem;
	margin-inline: auto;
	color: var(--sereno-color-muted);
}

/* Post em destaque da home: usa conteúdo real do WordPress. */
.sereno-hero__post {
	margin-top: 2.5rem;
	text-align: left;
}

.sereno-hero__post .entry-title {
	font-size: calc(var(--sereno-title-size-list) * 1.25);
}

.sereno-hero__post .entry-meta {
	justify-content: flex-start;
}

/* Sem imagem, o card não deixa buraco: o texto simplesmente sobe. */
.sereno-hero__post .post-thumbnail {
	margin-bottom: 1.5rem;
}

.sereno-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sereno-categories__list a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.35rem 0.9rem;
	color: var(--sereno-color-accent-dark);
	border: 1px solid var(--sereno-color-border);
	border-radius: 999px;
	font-size: var(--sereno-step--1);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sereno-categories__list a:hover,
.sereno-categories__list a:focus-visible {
	border-color: var(--sereno-color-accent);
	background-color: var(--sereno-color-hover);
	color: var(--sereno-color-accent);
}

.sereno-categories__count {
	color: var(--sereno-color-muted);
	font-variant-numeric: tabular-nums;
}

/* Variante em cartões: nome à esquerda, contagem à direita. */
.sereno-categories--grid .sereno-categories__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48em) {

	.sereno-categories--grid .sereno-categories__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sereno-categories--grid .sereno-categories__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-surface);
}

/* Bloco por categoria: nome à esquerda, "Ver todos" à direita. */
.sereno-catsec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--sereno-color-accent);
}

.sereno-catsec__head .sereno-section__title {
	margin-bottom: 0;
	color: var(--sereno-color-accent);
}

.sereno-catsec__more {
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sereno-catsec__more:hover,
.sereno-catsec__more:focus-visible {
	color: var(--sereno-color-accent);
}

.sereno-catsec__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 40em) {

	.sereno-catsec__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Miniatura pequena + título, sem resumo: bloco de leitura rápida. */
.sereno-compact {
	display: flex;
	height: 100%;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.6rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-background);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sereno-compact:hover,
.sereno-compact:focus-visible {
	border-color: var(--sereno-color-accent);
	background-color: var(--sereno-color-hover);
}

.sereno-compact__thumb {
	display: block;
	line-height: 0;
}

.sereno-compact__thumb img {
	width: 100%;
	height: 7rem;
	border-radius: var(--sereno-radius);
	object-fit: cover;
}

.sereno-compact__title {
	font-family: var(--sereno-title-font);
	font-size: var(--sereno-step--1);
	font-weight: 600;
	line-height: 1.35;
}

.sereno-cta {
	padding: 2.5rem 1.5rem;
	border: 1px solid var(--sereno-color-border);
	border-radius: var(--sereno-radius);
	background-color: var(--sereno-color-surface);
	text-align: center;
}

.sereno-cta__text {
	max-width: 32rem;
	margin-inline: auto;
	color: var(--sereno-color-muted);
}

/* 15. CLASSES DO CORE E BLOCOS */
.alignleft {
	float: left;
	margin: 0.35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

/* Blocos largos só "estouram" a coluna quando o texto ocupa a página
   inteira. Com barra lateral, esticar via 100vw jogaria o bloco por
   cima da sidebar e criaria rolagem horizontal — então ali eles ficam
   contidos na própria coluna. */
.sereno-no-sidebar .alignwide,
.sereno-no-sidebar .alignfull {
	margin-left: 50%;
	transform: translateX(-50%);
}

.sereno-no-sidebar .alignwide {
	width: min(var(--sereno-wide), calc(100vw - var(--sereno-gutter) * 2));
	max-width: none;
}

.sereno-no-sidebar .alignfull {
	width: 100vw;
	max-width: 100vw;
}

.sereno-has-sidebar .alignwide,
.sereno-has-sidebar .alignfull {
	width: auto;
	max-width: 100%;
	margin-inline: 0;
	transform: none;
}

.wp-caption,
figure.wp-block-image {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	margin-top: 0.5rem;
	color: var(--sereno-color-muted);
	font-size: var(--sereno-step--1);
	text-align: center;
}

.wp-block-button__link {
	border-radius: var(--sereno-radius);
}

.wp-block-separator {
	border-top: 1px solid var(--sereno-color-border);
	border-bottom: 0;
}

.wp-block-pullquote,
.wp-block-quote {
	border-left: 2px solid var(--sereno-color-accent);
}

.gallery {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-item {
	margin: 0;
}