/*
Theme Name: Orações do Dia
Description: Tema filho do Blocksy com a identidade visual do Orações do Dia.
Author: Creative Themes
Template: blocksy
Text Domain: blocksy-child
Version: 1.0.0
*/

/* ==========================================================================
   SUMÁRIO

   1. Fontes
   2. Cores, medidas e variáveis do Blocksy
   3. Base e tipografia
   4. Links e botões
   5. Cabeçalho
   6. Lista de orações (home e arquivos)
   7. Página do artigo
   8. Rodapé
   9. Acessibilidade
  10. Busca e menu do celular
  11. Telas pequenas
  12. Abertura da home
  13. Rodapé completo
  14. Paginação
  15. Resultados da busca instantânea
  16. Página Sobre
  17. Caixa de compartilhar
  18. Posts relacionados
   ========================================================================== */


/* ==========================================================================
   1. FONTES
   Hospedadas dentro do tema, em assets/fonts/. Nenhuma chamada ao Google
   durante a visita. São fontes variáveis: um único arquivo cobre todos os
   pesos de 400 a 600, por isso são só dois downloads.
   ========================================================================== */

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/lora-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/lora-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. CORES, MEDIDAS E VARIÁVEIS DO BLOCKSY

   Mudar uma cor do site inteiro é mudar uma linha aqui.

   Sobre o dourado: o tom original (#a8977b) é bonito, mas não tem contraste
   suficiente para ser usado em texto — some para quem enxerga menos bem.
   Por isso ele ficou reservado para decoração (traços, ornamentos, bordas),
   e o texto usa os tons mais fechados, que passam no critério AA de
   acessibilidade sobre o fundo creme.
   ========================================================================== */

:root {
	/* Famílias */
	--odd-serifada: 'Lora', Georgia, 'Times New Roman', serif;
	--odd-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Fundos */
	--odd-fundo: #fbf8f3;
	--odd-cartao: #ffffff;
	--odd-cartao-quente: #fdfaf4;
	--odd-rodape: #f4eee4;

	/* Texto */
	--odd-tinta: #23272a;
	--odd-texto: #3a3f43;
	--odd-suave: #666c71;

	/* Dourado */
	--odd-ouro: #a8977b;
	--odd-ouro-medio: #7f715c;
	--odd-ouro-forte: #6b5d47;
	--odd-ouro-escuro: #55492f;
	--odd-ouro-claro: #f1e9db;

	/* Linhas e cantos */
	--odd-linha: #e7ded0;
	--odd-linha-suave: #f0e9de;
	--odd-raio: 12px;
	--odd-raio-g: 18px;

	/* Largura confortável de leitura: cerca de 68 caracteres por linha */
	--odd-coluna: 44rem;

	/* --- Variáveis do próprio Blocksy, redefinidas ---
	   Alterar estas faz os componentes do tema pai (botões, formulários,
	   paginação, busca) já nascerem com a nossa identidade, sem precisar
	   escrever CSS para cada um deles. */
	--theme-font-family: var(--odd-corpo);
	--theme-font-size: 19px;
	--theme-line-height: 1.75;
	--theme-text-color: var(--odd-texto);
	--theme-headings-color: var(--odd-tinta);
	--theme-border-color: var(--odd-linha);
	--theme-content-spacing: 1.6em;

	--theme-link-initial-color: var(--odd-ouro-forte);
	--theme-link-hover-color: var(--odd-tinta);

	--theme-button-font-size: 16px;
	--theme-button-font-weight: 500;
	--theme-button-min-height: 46px;
	--theme-button-padding: 11px 26px;
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-background-initial-color: var(--odd-ouro-forte);
	--theme-button-background-hover-color: var(--odd-ouro-escuro);

	--theme-selection-background-color: var(--odd-ouro-claro);
	--theme-selection-text-color: var(--odd-tinta);

	/* Vale para todos os campos: busca, comentários e o formulário de contato. */
	--theme-form-field-border-initial-color: var(--odd-linha);
	--theme-form-field-border-focus-color: var(--odd-ouro-forte);
}


/* ==========================================================================
   3. BASE E TIPOGRAFIA
   ========================================================================== */

body {
	background-color: var(--odd-fundo);
	font-family: var(--odd-corpo);
	color: var(--odd-texto);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
	font-family: var(--odd-serifada);
	font-weight: 600;
	color: var(--odd-tinta);
	letter-spacing: -0.01em;
	line-height: 1.25;

	/* "pretty" só evita palavra solta na última linha. Não usar "balance"
	   aqui: ele reparte o texto em linhas de comprimento parecido, e num
	   celular isso encurta TODAS as linhas do título — a caixa ocupa a
	   largura inteira, mas o texto para bem antes da borda. Em tela estreita
	   o efeito é justamente o contrário do desejado. */
	text-wrap: pretty;
}

/* Na tela larga o título tem no máximo duas linhas e equilibrá-las fica bem,
   sem desperdiçar largura. */
@media (min-width: 1000px) {
	h1, h2, h3, h4, h5, h6,
	.entry-title,
	.page-title {
		text-wrap: balance;
	}
}

h1, .page-title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 2.85rem);
	line-height: 1.18;
}

h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 1.95rem);
}

h3 {
	font-size: clamp(1.24rem, 1.1rem + 0.6vw, 1.42rem);
}

h4 {
	font-size: 1.14rem;
}

/* Texto sempre confortável, inclusive para quem lê com zoom aumentado. */
p {
	max-width: 100%;
}


/* ==========================================================================
   4. LINKS E BOTÕES

   Links dentro de texto corrido ficam sublinhados de propósito: cor sozinha
   não é sinal suficiente de que algo é clicável, principalmente para quem
   não distingue bem cores.
   ========================================================================== */

.entry-content a:not(.ct-button):not(.wp-element-button):not(.odd-botao),
.entry-excerpt a {
	color: var(--odd-ouro-forte);
	text-decoration: underline;
	text-decoration-color: var(--odd-ouro);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.entry-content a:not(.ct-button):not(.wp-element-button):not(.odd-botao):hover,
.entry-excerpt a:hover {
	color: var(--odd-tinta);
	text-decoration-color: var(--odd-tinta);
}

.ct-button,
.wp-element-button,
.entry-button {
	border-radius: 999px;
	font-family: var(--odd-corpo);
	letter-spacing: 0.01em;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.ct-button:hover,
.wp-element-button:hover,
.entry-button:hover {
	transform: translateY(-1px);
}


/* ==========================================================================
   5. CABEÇALHO
   ========================================================================== */

/* O Blocksy pinta o fundo do cabeçalho por um seletor bem específico, gerado
   pelo Personalizar. Acrescentar "body" iguala a especificidade e faz a nossa
   regra valer; sem isso ela seria simplesmente ignorada pelo navegador. */
body[data-header] .ct-header [data-row] {
	background-color: var(--odd-fundo);
}

body[data-header] .ct-header [data-row*="middle"] {
	border-bottom: 1px solid var(--odd-linha);
}

/* Enquanto não há logo configurado, o Blocksy ainda imprime o link vazio dele.
   Como o logo fica EMPILHADO acima do nome do site, esse link invisível
   empurrava o título para baixo do centro da barra — era esse o desalinhamento
   entre o nome do site e o menu.

   A regra vale só enquanto o link estiver de fato vazio: no dia em que você
   subir um logo pelo Personalizar, ela para de valer sozinha. */
.site-logo-container:empty {
	display: none;
}

body[data-header] .ct-header [data-id="logo"] .site-title {
	--theme-font-size: 1.7rem;
	--theme-font-weight: 600;
	--theme-line-height: 1.2;
}

.site-title,
.site-title a {
	font-family: var(--odd-serifada);
	font-weight: 600;
	color: var(--odd-tinta);
	letter-spacing: -0.015em;
}

/* Menu: caixa alta pequena com espaçamento entre letras, que é o que dá
   ar editorial sem precisar de fonte diferente.

   O seletor usa #header, e não .ct-header, de propósito: o painel lateral do
   celular também carrega a classe .ct-header, e com ela os itens do menu de
   lá herdavam este tamanho miúdo em caixa alta — difícil de ler e de acertar
   com o dedo numa tela pequena. */
#header .ct-menu-link {
	font-family: var(--odd-corpo);
	font-size: 0.83rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--odd-texto);
}

#header .ct-menu-link:hover,
#header .current-menu-item > .ct-menu-link {
	color: var(--odd-ouro-forte);
}

/* Sem traço embaixo do item ativo: a diferença de cor já basta. O Blocksy usa
   o ::after destes links para um indicador próprio, mantido invisível por
   "opacity: var(--menu-indicator-opacity, 0)" — nada aqui o acende. */


/* ==========================================================================
   6. LISTA DE ORAÇÕES (home e arquivos)

   Nenhum card depende de imagem: a hierarquia é feita só com tipografia e
   espaço. Um post sem foto fica exatamente igual aos outros.

   A coluna é estreita de propósito. Texto corrido ocupando 1290px de largura
   é cansativo de ler; centralizado em pouco mais de 800px, vira leitura.
   ========================================================================== */

/* Os cards do Blocksy são montados a partir de variáveis dele próprio.
   Definir as variáveis, em vez de sobrescrever cada propriedade, tem duas
   vantagens: o CSS de listagem do tema pai carrega DEPOIS do nosso e venceria
   qualquer disputa direta, e a customização continua de pé quando o Blocksy
   for atualizado. */
.entries[data-layout="simple"] {
	--grid-columns-gap: 1.75rem;
	max-width: 52rem;
	margin-inline: auto;
}

.entries .entry-card {
	--card-inner-spacing: clamp(1.5rem, 4vw, 2.25rem);
	--card-element-spacing: 1rem;
	--card-border: 1px solid var(--odd-linha);
	--theme-border-radius: var(--odd-raio-g);
	--theme-box-shadow: none;
	--entry-divider: none;
	background-color: var(--odd-cartao);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.entries .entry-card:hover {
	--card-border: 1px solid var(--odd-ouro);
	box-shadow: 0 10px 30px -18px rgba(85, 73, 47, 0.45);
	transform: translateY(-2px);
}

/* Etiqueta da categoria */
.entry-card .meta-categories a {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
	text-decoration: none;
}

.entry-card .meta-categories a:hover {
	color: var(--odd-tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-card .entry-title {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.72rem);
	line-height: 1.3;
}

.entry-card .entry-title a {
	color: var(--odd-tinta);
	text-decoration: none;
}

.entry-card .entry-title a:hover {
	color: var(--odd-ouro-forte);
}

.entry-card .entry-excerpt {
	color: var(--odd-texto);
	font-size: 1.02rem;
	line-height: 1.7;
}

/* O respiro entre os elementos do card vem de --card-element-spacing, lá em
   cima. Não defina margens soltas aqui: o CSS do tema pai carrega depois e
   venceria a disputa, e a regra pareceria não ter efeito nenhum. */

/* Data: discreta, embaixo, sem competir com o título. */
.entries .entry-card .entry-meta[data-id="meta_2"] {
	margin-top: 1.25rem;
	margin-bottom: 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--odd-linha-suave);
	font-size: 0.85rem;
	color: var(--odd-suave);
}


/* ==========================================================================
   7. PÁGINA DO ARTIGO

   Tudo aqui é estilizado por estrutura (h2, h3, citação, lista, link), nunca
   por texto específico. Você pode reescrever e reorganizar seus artigos à
   vontade que o visual continua de pé.
   ========================================================================== */

.entry-content {
	font-size: 1.06rem;
	line-height: 1.8;
	color: var(--odd-texto);
}

/* Parágrafo de abertura um pouco maior, como em revista. */
.entry-content > p:first-of-type {
	font-size: 1.14rem;
	line-height: 1.72;
	color: var(--odd-tinta);
}

/* Traço dourado acima de cada seção: marca a divisão sem precisar de
   linha cheia atravessando a página. */
.entry-content h2 {
	margin-top: 2.9em;
	margin-bottom: 0.7em;
}

.entry-content h2::before {
	content: '';
	display: block;
	width: 2.4rem;
	height: 2px;
	margin-bottom: 0.9rem;
	border-radius: 2px;
	background-color: var(--odd-ouro);
}

.entry-content h3 {
	margin-top: 2em;
	margin-bottom: 0.5em;
	color: var(--odd-tinta);
}

/* --- A citação em destaque ---
   Nos artigos de hoje é a oração; amanhã pode ser um salmo ou um trecho
   de leitura. Funciona para qualquer citação. */
.entry-content blockquote {
	position: relative;
	margin: 3rem 0;
	padding: clamp(2rem, 5vw, 2.75rem) clamp(1.4rem, 4vw, 2.5rem) clamp(1.6rem, 4vw, 2.25rem);
	background-color: var(--odd-cartao-quente);
	border: 1px solid var(--odd-linha);
	border-left: 1px solid var(--odd-linha);
	border-radius: var(--odd-raio-g);
	font-family: var(--odd-serifada);
	font-size: 1.14em;
	line-height: 1.85;
	color: var(--odd-tinta);
	quotes: none;
}

/* Cruz dourada apoiada na borda de cima. Desenho vetorial embutido no
   próprio CSS: não é imagem nem ícone de fonte, não pesa nada e não
   depende de emoji, que muda de aparência conforme o aparelho. */
.entry-content blockquote::before {
	content: '';
	position: absolute;
	top: -1.05rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background-color: var(--odd-fundo);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 2h2.8v5H19v2.8h-5.6V22h-2.8V9.8H5V7h5.6z' fill='%23a8977b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem;
	border: 1px solid var(--odd-linha);
}

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

.entry-content blockquote cite {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--odd-corpo);
	font-size: 0.85rem;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
}

/* Listas com marcador dourado.
   A classe wp-block-list entra na conta porque é o que o editor do WordPress
   coloca nas listas: sem ela, listas escritas pelo editor de blocos ficavam
   de fora e voltavam ao marcador cinza padrão do navegador. */
.entry-content ul:not([class]),
.entry-content ul.wp-block-list {
	list-style: none;
	padding-left: 0;
}

.entry-content ul:not([class]) > li,
.entry-content ul.wp-block-list > li {
	position: relative;
	padding-left: 1.65rem;
	margin-bottom: 0.7rem;
}

.entry-content ul:not([class]) > li::before,
.entry-content ul.wp-block-list > li::before {
	content: '';
	position: absolute;
	left: 0.15rem;
	top: 0.72em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: var(--odd-ouro);
}

.entry-content ol:not([class]) > li,
.entry-content ol.wp-block-list > li {
	margin-bottom: 0.7rem;
	padding-left: 0.3rem;
}

.entry-content ol:not([class]) > li::marker,
.entry-content ol.wp-block-list > li::marker {
	color: var(--odd-ouro-forte);
	font-weight: 600;
}

/* Imagem destacada e imagens dentro do texto. */
.ct-media-container img,
.entry-content img {
	border-radius: var(--odd-raio-g);
}

.entry-content figcaption,
.wp-caption-text {
	font-size: 0.88rem;
	color: var(--odd-suave);
	text-align: center;
	margin-top: 0.7rem;
}

/* Tabelas, caso você use um dia. */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--odd-linha);
	padding: 0.7rem 0.9rem;
	text-align: left;
}

.entry-content th {
	background-color: var(--odd-ouro-claro);
	font-family: var(--odd-corpo);
	font-weight: 600;
	color: var(--odd-tinta);
}

/* Navegação entre artigos e relacionados. */
.post-navigation .item-content,
.ct-related-posts-container {
	border-color: var(--odd-linha);
}

/* O Personalizar pinta este bloco com a paleta 6, um cinza frio que destoa de
   todo o resto do site. O seletor de lá tem duas classes, então este precisa
   de "body" na frente para vencer — sem isso o cinza continuava. */
body[data-prefix] .ct-related-posts-container {
	background-color: transparent;
	border-top: 1px solid var(--odd-linha);
	margin-top: 3rem;
	padding-top: 2.5rem;
}

.ct-related-posts-title {
	font-family: var(--odd-serifada);
	color: var(--odd-tinta);
}

.ct-related-posts .entry-title,
.ct-related-posts-items .entry-title {
	font-family: var(--odd-serifada);
}


/* ==========================================================================
   8. RODAPÉ

   O rodapé inteiro é montado pelo tema filho, na seção 13. O rodapé do próprio
   Blocksy é desligado aqui porque passou a ser uma duplicata: o menu dele já
   aparece, como lista vertical, na coluna "Navegar" do nosso rodapé.

   Usamos display:none de propósito, e não um filtro em PHP. Assim o rodapé
   continua configurável no Personalizar caso você queira voltar atrás um dia:
   basta apagar esta regra e a seção 13, e o rodapé do Blocksy reaparece como
   estava. Conteúdo com display:none também não é lido por leitores de tela,
   então não há navegação duplicada para quem depende deles.
   ========================================================================== */

body[data-footer] .ct-footer {
	display: none;
}


/* ==========================================================================
   9. ACESSIBILIDADE

   O site é lido por gente de todas as idades. Estas regras não são detalhe.
   ========================================================================== */

/* Contorno bem visível para quem navega pelo teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--odd-ouro-forte);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Alvo de toque grande o bastante para dedo, não só para mouse. Os botões
   já são cobertos por --theme-button-min-height, definido na seção 2. */
#header .ct-menu-link,
#offcanvas .ct-menu-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.entries[data-layout="simple"] .entry-card:hover,
	.ct-button:hover,
	.entry-button:hover {
		transform: none;
	}
}


/* ==========================================================================
   10. BUSCA E MENU DO CELULAR

   Os dois painéis vinham quase pretos, herdados do padrão do Blocksy. Num
   site que o resto do tempo é claro e quente, abrir a busca era como acender
   a luz na cara de quem lê. Agora eles são uma continuação do site.

   Os seletores começam com "body" de propósito. As regras originais são
   geradas pelo Personalizar com especificidade alta; sem igualar, nada aqui
   teria efeito — o navegador simplesmente ignoraria.
   ========================================================================== */

/* --- Painel da busca --- */

/* Opaco de propósito. Meio transparente, o texto da página aparecia por trás
   dos resultados e atrapalhava a leitura de quem está procurando algo. */
body[data-header] #search-modal {
	background-color: var(--odd-fundo);
}

body[data-header] #search-modal .modal-field {
	font-family: var(--odd-serifada);
	color: var(--odd-tinta);
}

/* O texto de dica precisa ser legível, não um cinza fantasma. */
body[data-header] #search-modal .modal-field::placeholder {
	color: var(--odd-suave);
	opacity: 1;
}

/* --- Menu do celular --- */

body[data-header] #offcanvas .ct-panel-inner {
	background-color: var(--odd-fundo);
	border-left: 1px solid var(--odd-linha);
}

body[data-header] [data-id="mobile-menu"] {
	--theme-link-initial-color: var(--odd-tinta);
	--theme-link-hover-color: var(--odd-ouro-forte);
	--theme-font-size: 1.15rem;
	--theme-font-weight: 500;
	--items-vertical-spacing: 14px;

	/* Sem divisórias. O Blocksy desenha uma linha acima da lista inteira e
	   outra embaixo de cada item; a de cima caía logo abaixo da caixa da
	   busca, e as duas juntas pareciam duas barras soltas. Com quatro itens
	   bem espaçados, a lista se lê sem precisar de fio nenhum. */
	--mobile-menu-divider: none;
}

/* --- Botão de fechar dos dois painéis ---
   Ele vinha branco translúcido, pensado para fundo escuro. Sobre creme
   ficaria praticamente invisível. */
#search-modal .ct-toggle-close,
#offcanvas .ct-toggle-close {
	--theme-icon-color: var(--odd-ouro-forte);
	--toggle-button-padding: 14px;
	--toggle-button-margin-end: -14px;
	--toggle-button-margin-block: -14px;
}


/* ==========================================================================
   11. TELAS PEQUENAS

   A maior parte das visitas vem do celular, então estas regras não são um
   remendo no fim do arquivo: são o caso principal. O que muda aqui é o
   respiro — no telefone, o espaço vazio que dá elegância no computador vira
   rolagem a mais para chegar no texto.
   ========================================================================== */

@media (max-width: 689.98px) {
	:root {
		--theme-content-vertical-spacing: 38px;
		--odd-raio-g: 14px;
	}

	/* O nome do site não pode quebrar em duas linhas na barra de cima. */
	body[data-header] .ct-header [data-id="logo"] .site-title {
		--theme-font-size: 1.28rem;
		--theme-line-height: 1.2;
	}

	/* Títulos grandes precisam de mais aperto entre as linhas em tela
	   estreita, senão ocupam altura demais antes do texto começar. */
	h1,
	.page-title {
		line-height: 1.22;
	}

	.entry-content h2 {
		margin-top: 2.2em;
	}

	.entry-content blockquote {
		margin: 2.25rem 0;
	}

	/* --- Botão do menu ---
	   Ele vinha com margem inferior de -52px, guardada no Personalizar em
	   Cabeçalho › Botão do menu › Margem. Margem negativa encurta a caixa do
	   elemento, e como os itens da barra são centralizados verticalmente, o
	   botão descia em relação ao nome do site. Era esse o desalinhamento.

	   O !important repete o da regra original, que também usa !important —
	   sem ele, a regra de lá continuaria vencendo. Se preferir resolver na
	   fonte, zere essa margem no Personalizar e apague este bloco. */
	body[data-header] [data-id="trigger"] {
		--margin: 0px !important;
	}

	/* --- Navegação entre artigos ---
	   Lado a lado, cada título fica com pouco mais de um dedo de largura, então
	   os dois vão empilhados. Empilhar exige desfazer três coisas que só fazem
	   sentido em duas colunas. */
	.post-navigation {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* 1. O tema desenha uma linha vertical no meio, a 50% da largura. Com os
	      itens empilhados ela deixava de separar nada e passava a cortar o
	      conteúdo pelo meio. */
	.post-navigation::after {
		display: none;
	}

	/* 2. No primeiro e no último artigo um dos lados vem vazio, mas o elemento
	      é impresso assim mesmo. Em duas colunas ele só reservava espaço; numa
	      coluna só, virava uma linha em branco. */
	.post-navigation .nav-item-prev:empty,
	.post-navigation .nav-item-next:empty {
		display: none;
	}

	/* 3. O item "próximo" nasce alinhado à direita para fechar o par. Um
	      embaixo do outro, cada um puxando para um lado parecia defeito. */
	.post-navigation .nav-item-next {
		text-align: start;
		justify-content: flex-start;
	}

	.post-navigation a[class*="nav-item"] {
		padding-block: 1rem;
	}

	.post-navigation a[class*="nav-item"] + a[class*="nav-item"] {
		border-top: 1px solid var(--odd-linha);
	}
}

/* Telas bem estreitas, de aparelho antigo ou com fonte aumentada no sistema. */
@media (max-width: 380px) {
	.entries .entry-card {
		--card-inner-spacing: 1.25rem;
	}

	.entry-content blockquote {
		padding-inline: 1.15rem;
	}
}


/* ==========================================================================
   12. ABERTURA DA HOME

   O bloco que abre a home: saudação, versículo do dia, oração do dia e as
   próximas datas do calendário. Nada aqui usa imagem — a hierarquia é feita
   com tipografia, cor e espaço, então nenhum post sem foto abre buraco.

   A largura acompanha a da lista de orações logo abaixo, para tudo ficar na
   mesma coluna de leitura.
   ========================================================================== */

.odd-abertura {
	max-width: 52rem;
	margin-inline: auto;
	margin-bottom: 3rem;
}


/* --- Saudação --- */

.odd-saudacao-titulo {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.6rem);
	line-height: 1.16;
}

/* Um fio fecha a apresentação e abre o bloco de hoje. Sem ele, introdução e
   destaques encostavam um no outro e a página virava uma coisa só. */
.odd-saudacao {
	padding-bottom: 2rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid var(--odd-linha);
}

.odd-saudacao-texto {
	max-width: 40rem;
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--odd-texto);

	/* Evita que o parágrafo termine com uma palavra sozinha na última linha. */
	text-wrap: pretty;
}


/* --- Composição dos destaques ---
   No celular é uma coluna só, na ordem em que o HTML foi escrito: oração,
   versículo, calendário. A partir de 1000px vira duas colunas — oração e
   versículo à esquerda, calendário à direita — sem mudar a ordem de leitura
   para quem usa leitor de tela ou navega pelo teclado.

   Era aqui que o desenho no computador não fechava. Tudo empilhado em blocos
   de largura cheia deixava cada cartão com um vazio enorme à direita, e as
   datas do calendário, que têm três linhas de texto, ocupavam faixas de mais
   de 800px. Em duas colunas cada coisa ganha a largura proporcional ao que
   tem para dizer. */

.odd-destaques {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2.75rem;
}

.odd-coluna-principal {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

@media (min-width: 1000px) {
	.odd-destaques {
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
		align-items: start;
		gap: 3rem;
	}

	/* Um fio separa as duas zonas. Só o espaço em branco não bastava: sem ele
	   a lateral parecia continuação dos cartões em vez de coluna à parte. */
	.odd-calendario {
		padding-left: 3rem;
		border-left: 1px solid var(--odd-linha);
	}
}


/* --- Cartões do versículo e da oração --- */

.odd-cartao {
	margin: 0;
	padding: clamp(1.6rem, 5vw, 2.4rem);
	background-color: var(--odd-cartao);
	border: 1px solid var(--odd-linha);
	border-radius: var(--odd-raio-g);
}

.odd-etiqueta {
	margin: 0 0 1rem;
	font-family: var(--odd-corpo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
}


/* --- Versículo do dia ---
   Recebe a mesma cruz dourada das orações dentro dos artigos, para os dois
   momentos de Escritura do site terem a mesma assinatura visual. */

.odd-versiculo {
	position: relative;
	background-color: var(--odd-cartao-quente);
	text-align: center;
}

.odd-versiculo::before {
	content: '';
	position: absolute;
	top: -1.05rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2.1rem;
	height: 2.1rem;
	border: 1px solid var(--odd-linha);
	border-radius: 50%;
	background-color: var(--odd-fundo);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 2h2.8v5H19v2.8h-5.6V22h-2.8V9.8H5V7h5.6z' fill='%23a8977b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem;
}

/* A citação é um blockquote, que vem com margem e recuo do navegador. */
.odd-versiculo-texto {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--odd-serifada);
	font-size: clamp(1.15rem, 0.95rem + 1vw, 1.45rem);
	line-height: 1.7;
	color: var(--odd-tinta);
}

.odd-versiculo-texto p {
	margin: 0;
}

.odd-versiculo-fonte {
	margin: 1.2rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
}


/* --- Oração do dia --- */

.odd-oracao-titulo {
	margin: 0 0 0.75rem;
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
	line-height: 1.28;
}

.odd-oracao-titulo a {
	color: var(--odd-tinta);
	text-decoration: none;
}

.odd-oracao-titulo a:hover {
	color: var(--odd-ouro-forte);
}

.odd-oracao-resumo {
	margin: 0 0 1.6rem;
	color: var(--odd-texto);
}

.odd-botao {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 11px 26px;
	border-radius: 999px;
	background-color: var(--odd-ouro-forte);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.odd-botao:hover,
.odd-botao:focus {
	background-color: var(--odd-ouro-escuro);
	color: #ffffff;
	transform: translateY(-1px);
}


/* --- Calendário cristão ---
   Aqui NÃO é um cartão, de propósito. Cada data era uma caixa com borda e
   canto arredondado, e com quatro delas ao lado dos dois cartões a tela ficava
   com seis objetos de mesmo peso: nada indicava o que era principal e o que
   era apoio.

   Agora é uma lista simples, separada por fios, apoiada no fundo da página.
   O contraste com os cartões à esquerda é que constrói a hierarquia: caixa =
   destaque do dia, lista = informação de apoio. */

.odd-calendario {
	margin: 0;
}

.odd-etiqueta-secao {
	margin-bottom: 0.4rem;
}

.odd-datas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.odd-data {
	padding: 1rem 0;
	border-top: 1px solid var(--odd-linha);
}

.odd-data:first-child {
	border-top: 0;
}

.odd-data:last-child {
	padding-bottom: 0;
}

/* Sem caixa, a celebração de hoje se marca por um ponto dourado antes da
   palavra "Hoje". */
.odd-data-hoje .odd-data-quando::before {
	content: '';
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.45rem;
	border-radius: 50%;
	background-color: var(--odd-ouro);
	vertical-align: 0.08em;
}

.odd-data-quando {
	margin: 0 0 0.35rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
}

.odd-data-numero {
	margin-left: 0.5rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: none;
	color: var(--odd-suave);
}

.odd-data-nome {
	margin: 0;
	font-family: var(--odd-serifada);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--odd-tinta);
}

.odd-data-nota {
	margin: 0.35rem 0 0;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--odd-texto);
}


/* --- Passagem para a lista de orações --- */

.odd-titulo-da-lista {
	margin: 0;
	padding-top: 2.25rem;
	border-top: 1px solid var(--odd-linha);
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
}


/* ==========================================================================
   13. RODAPÉ COMPLETO

   O rodapé é feito de três faixas que dividem o mesmo fundo, então a área
   inteira se lê como uma coisa só:

     1. apresentação do site e orações recentes  (seção .odd-rodape-topo)
     2. o menu, que vem do Personalizar do Blocksy
     3. a linha de créditos                      (seção .odd-rodape-creditos)

   As faixas 1 e 3 são encaixadas em volta da 2 por ganchos do tema pai. Nenhum
   template do Blocksy foi copiado, e o menu continua sendo editado onde você
   já espera: em Aparência › Menus.
   ========================================================================== */

.odd-rodape-topo {
	padding-block: clamp(2.5rem, 6vw, 3.75rem) clamp(2rem, 5vw, 3rem);
	background-color: var(--odd-rodape);
	border-top: 1px solid var(--odd-linha);
}

/* A mesma largura da coluna de conteúdo do site, para o rodapé nascer alinhado
   com os cartões e o texto que vêm acima, em vez de começar mais à esquerda. */
.odd-rodape-grade {
	display: grid;
	gap: 2.5rem;
	max-width: 52rem;
	margin-inline: auto;
}

/* Duas colunas a partir do tablet: a apresentação, mais larga porque carrega
   texto corrido, e a navegação. */
@media (min-width: 700px) {
	.odd-rodape-grade {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}
}


/* --- Apresentação --- */

/* A mesma cruz do versículo e das orações, fechando o site com a assinatura
   com que ele abre. */
.odd-rodape-cruz {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	margin-bottom: 1.1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 2h2.8v5H19v2.8h-5.6V22h-2.8V9.8H5V7h5.6z' fill='%23a8977b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.odd-rodape-nome {
	margin: 0 0 0.35rem;
	font-family: var(--odd-serifada);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--odd-tinta);
}

.odd-rodape-frase {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
	color: var(--odd-ouro-forte);
}

.odd-rodape-texto {
	max-width: 34rem;
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--odd-texto);
	text-wrap: pretty;
}


/* --- Créditos --- */

.odd-rodape-creditos {
	padding-block: 1.5rem 1.75rem;
	background-color: var(--odd-rodape);
	border-top: 1px solid var(--odd-linha);
}

.odd-rodape-creditos p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--odd-suave);
	text-align: center;
}


/* ==========================================================================
   14. PAGINAÇÃO

   A página atual vinha como um quadrado preto de cantos vivos: o Blocksy pinta
   esse fundo com --theme-link-hover-color, que no nosso tema é a cor de texto
   escura. Aqui a variável é trocada só dentro da paginação, virando uma
   pastilha dourada — sem mexer na cor dos links do resto do site.
   ========================================================================== */

.ct-pagination {
	--spacing: 3.25rem;
	--theme-border-radius: 999px;
	--theme-link-hover-color: var(--odd-ouro-forte);
	--theme-text-active-color: #ffffff;
}

/* "Anterior" e "Próxima" ganham contorno permanente para se lerem como botões,
   e não como texto solto. */
.ct-pagination a.prev.page-numbers,
.ct-pagination a.next.page-numbers {
	border-color: var(--odd-linha);
	background-color: var(--odd-cartao);
}

.ct-pagination a.prev.page-numbers:hover,
.ct-pagination a.next.page-numbers:hover {
	border-color: var(--odd-ouro);
}


/* --- Coluna de navegação ---
   O menu do rodapé, em lista vertical. Ele vem de Aparência › Menus, o mesmo
   lugar de sempre: mudou só quem o desenha na tela. */

.odd-rodape-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.odd-rodape-menu a {
	display: flex;
	align-items: center;
	min-height: 40px;
	font-size: 0.96rem;
	color: var(--odd-texto);
	text-decoration: none;
}

.odd-rodape-menu a:hover {
	color: var(--odd-ouro-forte);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Subitens do menu, caso você crie um. Ficam recuados e um pouco menores,
   para a hierarquia se ler sem precisar de seta nem de clique. */
.odd-rodape-menu .sub-menu {
	margin: 0 0 0.35rem 0.9rem;
	padding: 0 0 0 0.9rem;
	border-left: 1px solid var(--odd-linha);
	list-style: none;
}

.odd-rodape-menu .sub-menu a {
	min-height: 34px;
	font-size: 0.9rem;
	color: var(--odd-suave);
}

.odd-rodape-menu .sub-menu a:hover {
	color: var(--odd-ouro-forte);
}

/* A oração do dia é o único elemento com sombra da página. É o que a separa
   do versículo logo abaixo e diz, sem precisar de rótulo maior, qual dos dois
   é o destaque principal e leva a algum lugar. */
.odd-oracao {
	box-shadow: 0 16px 36px -26px rgba(85, 73, 47, 0.55);
}


/* ==========================================================================
   15. RESULTADOS DA BUSCA INSTANTÂNEA

   O Personalizar gera um bloco de cores brancas para o formulário de busca,
   pensado para o painel preto que o Blocksy usa por padrão. Como o painel
   virou claro (seção 10), os títulos dos resultados ficavam brancos sobre
   creme — invisíveis.

   Os seletores levam "body" na frente para alcançar a especificidade da regra
   original, que usa um ID. Sem isso nada aqui teria efeito.
   ========================================================================== */

body[data-header] #search-modal .ct-search-form {
	--theme-link-initial-color: var(--odd-tinta);
	--theme-form-text-initial-color: var(--odd-tinta);
	--theme-form-text-focus-color: var(--odd-tinta);
	--theme-form-field-border-initial-color: var(--odd-linha);
	--theme-form-field-border-focus-color: var(--odd-ouro-forte);

	/* O botão vinha com texto branco sobre o dourado claro: 2,8 de contraste,
	   o mesmo problema já corrigido no resto do site. */
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-background-initial-color: var(--odd-ouro-forte);
	--theme-button-background-hover-color: var(--odd-ouro-escuro);
}

/* 14px é pequeno demais para uma lista que a pessoa vai percorrer com pressa,
   ainda mais no público deste site. */
body[data-header] #search-modal .ct-search-results {
	--theme-font-size: 1.02rem;
	--theme-line-height: 1.45;
	--items-divider: none;
	--items-padding: 0.95rem 1.15rem;
	--items-spacing: 0;
	grid-column-gap: 1rem;
	grid-row-gap: 0.75rem;
}

/* Cada resultado vira um cartão clicável, com a mesma linguagem dos cartões da
   listagem: fundo branco, borda cor de areia, canto suave. */
body[data-header] #search-modal .ct-search-results a {
	background-color: var(--odd-cartao);
	border: 1px solid var(--odd-linha);
	border-radius: var(--odd-raio);
	color: var(--odd-tinta);
	font-family: var(--odd-serifada);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body[data-header] #search-modal .ct-search-results a:hover,
body[data-header] #search-modal .ct-search-results a:focus-visible {
	background-color: var(--odd-cartao-quente);
	border-color: var(--odd-ouro);
	color: var(--odd-tinta);
}

/* O "ver todos os resultados" fecha a lista e não é um resultado: some da
   moldura de cartão e se apresenta como link. */
body[data-header] #search-modal .ct-search-results a.ct-search-more {
	background-color: transparent;
	border: 0;
	font-family: var(--odd-corpo);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
}

body[data-header] #search-modal .ct-search-results a.ct-search-more:hover {
	color: var(--odd-tinta);
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* --- Busca no menu do celular ---
   O cabeçalho do Blocksy só tem o ícone de busca na versão de computador, e o
   menu lateral não trazia nada. Este formulário preenche essa falta. */

.odd-busca-mobile {
	--theme-form-field-height: 48px;
	--theme-form-font-size: 1rem;
	--search-dropdown-background: var(--odd-cartao);
	margin-bottom: 1.75rem;
}

.odd-busca-mobile .ct-search-form {
	width: 100%;
}

.odd-busca-mobile input[type="search"] {
	width: 100%;
	color: var(--odd-tinta);
}

.odd-busca-mobile .ct-search-results a {
	color: var(--odd-tinta);
	font-family: var(--odd-serifada);
	line-height: 1.4;
}

.odd-busca-mobile .ct-search-results a:hover {
	background-color: var(--odd-cartao-quente);
}


/* ==========================================================================
   16. PÁGINA SOBRE

   Um layout com começo, meio e fim, em vez de uma sequência de blocos iguais.
   A frase em destaque reaproveita o cartão de citação dos artigos (seção 7),
   então a página fala a mesma língua visual do resto do site sem CSS novo.
   ========================================================================== */

.odd-sobre {
	max-width: 44rem;
	margin-inline: auto;
}

/* A abertura é a única frase em corpo grande da página: dá o tom antes de o
   texto começar de fato. */
.odd-sobre-abertura {
	margin: 0 0 2.5rem;
	font-family: var(--odd-serifada);
	font-size: clamp(1.24rem, 1.05rem + 1vw, 1.6rem);
	line-height: 1.55;
	color: var(--odd-tinta);
	text-wrap: pretty;
}

.entry-content .odd-sobre-destaque {
	text-align: center;
}

.odd-sobre-corpo {
	margin-top: 2.5rem;
}

.odd-sobre-corpo > *:first-child {
	margin-top: 0;
}


/* --- Encerramento --- */

.odd-sobre-encerramento {
	margin-top: 3.25rem;
	padding-top: 2.75rem;
	border-top: 1px solid var(--odd-linha);
	text-align: center;
}

.odd-sobre-cruz {
	display: block;
	width: 1.7rem;
	height: 1.7rem;
	margin: 0 auto 1.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 2h2.8v5H19v2.8h-5.6V22h-2.8V9.8H5V7h5.6z' fill='%23a8977b'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.odd-sobre-encerramento p {
	max-width: 34rem;
	margin: 0 auto 1.85rem;
	font-family: var(--odd-serifada);
	font-size: 1.12rem;
	line-height: 1.7;
	color: var(--odd-tinta);
	text-wrap: pretty;
}

/* O título da página vinha na borda do contêiner, enquanto o texto fica numa
   coluna mais estreita e centralizada: os dois começavam em pontos
   diferentes. Aqui o cabeçalho passa a dividir a mesma coluna do texto. */
.page .hero-section.is-width-constrained {
	max-width: 44rem;
	margin-inline: auto;
}


/* ==========================================================================
   17. CAIXA DE COMPARTILHAR

   Fica no fim do artigo. As bordas vinham do cinza padrão do Blocksy; aqui
   passam ao tom de areia do resto do site, e os alvos crescem para caber o
   dedo — a caixa agora aparece no celular, onde antes ficava escondida.
   ========================================================================== */

.ct-share-box[data-type="type-1"] {
	--theme-border: 1px solid var(--odd-linha);
	--margin: 3rem;
}

.ct-share-box[data-type="type-1"] > div {
	overflow: hidden;
	background-color: var(--odd-cartao);
	border-radius: var(--odd-raio);
}

.ct-share-box[data-type="type-1"] .ct-icon-container {
	min-height: 56px;
}

.ct-share-box a {
	color: var(--odd-texto);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ct-share-box a:hover {
	background-color: var(--odd-cartao-quente);
	color: var(--odd-ouro-forte);
}

.ct-share-box .ct-module-title {
	margin-bottom: 0.9rem;
	font-family: var(--odd-corpo);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--odd-ouro-forte);
}


/* ==========================================================================
   18. POSTS RELACIONADOS

   Os tamanhos aqui existiam apenas no CSS que o Blocksy gera dentro de
   wp-content/uploads/. Esse arquivo não acompanha a pasta do tema, então num
   servidor novo ele não existe e a data herdava os 19px do corpo do site,
   aparecendo enorme ao lado do título.

   Regra geral que vale para o tema inteiro: se é visual e precisa funcionar
   em qualquer instalação, mora neste arquivo.
   ========================================================================== */

.ct-related-posts .related-entry-title {
	--theme-font-size: 1.02rem;
	--theme-line-height: 1.4;
	font-family: var(--odd-serifada);
	font-weight: 600;
}

.ct-related-posts .entry-meta {
	--theme-font-size: 0.84rem;
	font-size: 0.84rem;
	color: var(--odd-suave);
}

.ct-related-posts-title {
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
}

/* --- O campo da busca, definido por inteiro ---
   O Blocksy deixa este campo sem moldura por uma regra que vale só dentro do
   modal, apoiada num sistema de variáveis "verdadeiro/falso" dele. Quando essa
   regra não chega — versão diferente do tema pai, CSS combinado por plugin de
   cache — o campo volta ao formulário comum, com borda em volta, e some dentro
   da moldura que o formulário já desenha: uma caixa dentro da outra.

   Aqui a aparência é declarada sem depender daquela regra: nenhuma moldura no
   formulário, e no campo apenas um traço embaixo, que engrossa e fica dourado
   ao focar. */

/* Primeiro apaga toda moldura e todo fundo de tudo que está dentro do
   formulário, inclusive do botão — que tem regra própria e mais específica no
   tema pai, e por isso escapava de uma tentativa mais educada. Sem isso o
   campo aparecia como uma caixa dentro de outra caixa. */
body[data-header] #search-modal .ct-search-form,
body[data-header] #search-modal .ct-search-form > *,
body[data-header] #search-modal .ct-search-form input,
body[data-header] #search-modal .ct-search-form button.wp-element-button {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Depois desenha só o que deve existir: um traço embaixo do campo inteiro,
   que fica dourado quando o cursor está lá dentro. */
body[data-header] #search-modal .ct-search-form {
	border-bottom: 1px solid var(--odd-linha);
	transition: border-color 0.15s ease;
}

body[data-header] #search-modal .ct-search-form:focus-within {
	border-bottom-color: var(--odd-ouro-forte);
}

body[data-header] #search-modal .modal-field {
	padding-inline: 0;
}

/* E o botão volta a ser o círculo dourado. */
body[data-header] #search-modal .ct-search-form button.wp-element-button {
	border-radius: 100%;
	background-color: var(--odd-ouro-forte);
	color: #ffffff;
}

body[data-header] #search-modal .ct-search-form button.wp-element-button:hover {
	background-color: var(--odd-ouro-escuro);
}

/* --- As colunas dos relacionados ---
   O número de colunas vinha apenas do CSS que o Blocksy gera em uploads/.
   Sem ele, "grid-template-columns: var(--grid-template-columns)" fica sem
   valor, o navegador descarta a propriedade e os cards passam a ser
   dimensionados pelo próprio conteúdo — estourando a largura do contêiner.
   O minmax(0, 1fr) é o que impede um título longo de empurrar a coluna. */

.ct-related-posts .ct-related-posts-items {
	--grid-template-columns: repeat(3, minmax(0, 1fr));
	--grid-columns-gap: 2rem;
}

@media (max-width: 999.98px) {
	.ct-related-posts .ct-related-posts-items {
		--grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 689.98px) {
	.ct-related-posts .ct-related-posts-items {
		--grid-template-columns: repeat(1, minmax(0, 1fr));
		--grid-columns-gap: 1.5rem;
	}
}


/* --- O campo de busca do menu do celular ---
   Mesmo tratamento do campo do computador: sem moldura, só um traço embaixo.
   A caixa arredondada vinha do estilo de formulário comum do Blocksy. */

.odd-busca-mobile .ct-search-form-controls {
	border: 0;
	background: none;
	box-shadow: none;
}

/* O traço fica no formulário, e não no campo, para acompanhar toda a largura
   — incluindo o trecho embaixo da lupa. No campo ele pararia antes dela. */
.odd-busca-mobile .ct-search-form {
	border: 0;
	border-bottom: 1px solid var(--odd-linha);
	background: none;
	box-shadow: none;
	transition: border-color 0.15s ease;
}

.odd-busca-mobile .ct-search-form:focus-within {
	border-bottom-color: var(--odd-ouro-forte);
}

.odd-busca-mobile input[type="search"] {
	padding-inline: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.odd-busca-mobile input[type="search"]:focus {
	background: none;
	box-shadow: none;
}

/* O botão da lupa desenha uma moldura própria, que sobrava como um retângulo
   solto ao lado do campo depois que a caixa do formulário saiu. Aqui ele fica
   sendo só o ícone, mantendo a área de toque. */
.odd-busca-mobile .ct-search-form button.wp-element-button {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--odd-ouro-forte);
}

.odd-busca-mobile .ct-search-form button.wp-element-button:hover {
	background: none;
	color: var(--odd-tinta);
}