/*
 * Componentes — Casa dos Parafusos Blog
 *
 * Cards de artigo, busca, hero, sidebar, paginação, newsletter e banner
 * de cookies. Parte destas regras vem do "CSS Adicional" do Customizer do
 * tema antigo: aquele CSS é atrelado ao slug do tema (post_type
 * custom_css, título = stylesheet), então NÃO acompanha a troca de tema.
 * Por isso ele agora vive aqui, como arquivo do tema.
 */

/* ----------------------------------------------------------------
   CARDS DE ARTIGO
   O GeneratePress entrega `.inside-article` sem raio e sem fundo. Aqui
   ele passa a falar a mesma língua do card de produto da loja
   (Assets/CSS/spot.css, referência read-only): raio 16px, fundo branco,
   borda 1px transparente que vira ciano no hover, mídia com raio 14px.
   ---------------------------------------------------------------- */
.inside-article,
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
	background-color: #ffffff;
	border: 1px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog .inside-article:hover,
.archive .inside-article:hover,
.search .inside-article:hover,
.blog .inside-article:focus-within,
.archive .inside-article:focus-within {
	border-color: var(--cp-second);
	box-shadow: 0 2px 10px rgba(30, 40, 165, 0.08);
}

/* A página do artigo não é um card clicável: sem hover, sem borda viva. */
.single .inside-article:hover {
	border-color: transparent;
	box-shadow: none;
}

.post-image,
.post-image img,
.inside-article .post-image img {
	border-radius: 14px;
	overflow: hidden;
}

/* Imagem uniforme na listagem — causa raiz medida no preview.
   Sintoma: na MESMA listagem, com marcação idêntica, os três primeiros
   artigos renderizavam a 300x169 e os sete seguintes a 758x426.
   Causa: o GeneratePress entrega `.post-image` com `float: left`. Bloco
   flutuado é shrink-to-fit — a largura dele não vem do card, vem da
   imagem. Nos três primeiros a imagem é `eager` e vale o atributo
   `width="300"`; nos demais o navegador aplica `sizes="auto"` do
   lazy-loading e chega a 758. Ou seja, a largura do card dependia de uma
   heurística de carregamento, não do layout.
   Correção no ponto certo: tirar o float e devolver a largura do card ao
   card. Sem isso, mexer só no `img` não resolve — foi o que eu tinha
   feito antes e o desalinhamento continuou.
   `aspect-ratio` fixo remove de quebra o CLS da listagem. */

/* Respiro entre cards.

   Medido no preview em 18/08/2026: 80px entre um card e o outro — 20px de
   `margin-bottom` do GeneratePress mais 60px de `padding-bottom` que vinham
   do CSS do tema anterior. Num card de ~230px de altura, o vazio chegava a
   um terço do próprio conteúdo: a lista parecia furada, e foi o que o
   usuário marcou de vermelho.

   28px é o suficiente para o olho separar um card do outro quando eles são
   superfícies brancas sobre fundo cinza — a cor já faz o trabalho que o
   espaço fazia. Menos que isso e os cards começam a ler como uma lista
   contínua; mais, e volta a fragmentar a leitura. Mesmo valor do respiro
   entre o mosaico e o primeiro card (24px), que o usuário não apontou. */
.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	padding-bottom: 0 !important;
	margin-bottom: 28px !important;
}

/* Card do artigo — grade de duas colunas com POSIÇÃO DECLARADA.

   O `display: flex` que eu tinha usado foi um erro de método, e o usuário
   descreveu o sintoma com precisão ("ficou confuso"): eu declarei o card
   como flex pensando só na miniatura, mas flex enfileira TODOS os filhos.
   O GeneratePress entrega quatro irmãos nesta ordem —

     header.entry-header  (título + data + autor)
     div.post-image
     div.entry-summary    (resumo + "Leia mais")
     footer.entry-meta    (categoria)

   — então o card virou quatro colunas lado a lado: título estreito à
   esquerda, imagem no meio, resumo depois, categoria espremida na ponta.
   Medido: 136px de título, 240px de imagem, 217px de resumo, 75px de
   categoria. Nenhuma ordem de leitura, quatro larguras arbitrárias.

   Grade resolve o que flex não resolve: a posição de cada elemento é
   declarada, independente da ordem do HTML. A imagem fica sempre na
   coluna da esquerda ocupando as três linhas; a coluna da direita recebe
   a leitura na ordem que ela pede —

     1. categoria   (contexto: onde estou)
     2. título      (a promessa, e o que puxa o clique)
     3. data/autor  (crédito, subordinado ao título)
     4. resumo      (a prova, com "Leia mais")

   Data e autor vêm dentro do `entry-header`, depois do título, então a
   ordem 2-3 já sai correta sem tocar em template. */
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	column-gap: 20px;
	row-gap: 6px;
	align-items: start;
	padding: 18px;
	position: relative;
}

/* Card inteiro clicável.

   O card tinha cinco links (título, imagem, "Leia mais", autor, categoria) e
   quatro deles apontam para o MESMO artigo. Todo o resto — a faixa à direita
   do título, o miolo do resumo, a folga abaixo da imagem — era área morta: o
   usuário marcou esses vazios de vermelho, clicou e não aconteceu nada. Num
   card cuja função inteira é "abrir este artigo", isso é um alvo de clique
   fragmentado em quatro pedaços pequenos em vez de um grande.

   A solução é o link esticado: o `::after` do link do título vira uma camada
   absoluta cobrindo o card. Não é JavaScript e não é um segundo link — é o
   MESMO `<a>` do título ganhando a área do card. Consequências que importam:

   - O leitor de tela continua vendo um link só por card, com o texto do
     título. Um `onclick` na div, ou um `<a>` embrulhando tudo, criaria alvo
     sem nome acessível ou aninharia link dentro de link (HTML inválido).
   - `Tab` continua parando uma vez por card, e o `:focus-visible` do título
     continua desenhando o anel.
   - Como o `::after` é filho do `<a>`, passar o mouse em qualquer ponto do
     card já dispara `a:hover` — o título muda de cor sozinho, sem regra nova.

   Categoria e autor sobem para z-index 2 porque levam a lugares diferentes
   (arquivo da categoria, página do autor) e já eram clicáveis. Imagem e
   "Leia mais" ficam sob a camada de propósito: apontam para o mesmo artigo,
   então o clique chega no mesmo destino de qualquer jeito.

   Custo assumido: com a camada por cima, o texto do resumo deixa de ser
   selecionável com o mouse. É o preço conhecido dessa técnica. Num card de
   listagem, cujo resumo é chamariz e não conteúdo para copiar, vale menos que
   perder o clique — e o texto integral continua selecionável no artigo. */
.blog .inside-article .entry-title a::after,
.archive .inside-article .entry-title a::after,
.search .inside-article .entry-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog .inside-article .entry-meta .cat-links,
.archive .inside-article .entry-meta .cat-links,
.search .inside-article .entry-meta .cat-links,
.blog .inside-article .entry-header .entry-meta .byline,
.archive .inside-article .entry-header .entry-meta .byline,
.search .inside-article .entry-header .entry-meta .byline {
	position: relative;
	z-index: 2;
}

.blog .inside-article .post-image,
.archive .inside-article .post-image,
.search .inside-article .post-image {
	float: none !important;
	grid-column: 1;
	grid-row: 1 / -1;
	width: 240px !important;
	margin: 0 !important;
}

.blog .inside-article .entry-meta,
.archive .inside-article .entry-meta,
.search .inside-article .entry-meta {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.blog .inside-article .entry-header,
.archive .inside-article .entry-header,
.search .inside-article .entry-header {
	grid-column: 2;
	grid-row: 2;
	margin: 0 !important;
}

.blog .inside-article .entry-summary,
.archive .inside-article .entry-summary,
.search .inside-article .entry-summary {
	grid-column: 2;
	grid-row: 3;
	margin: 0 !important;
}

/* Categoria como pastilha: é rótulo de contexto, não frase. O ícone de
   pasta que o GeneratePress injeta some — ele repete em texto o que a
   pastilha já diz, e num card compacto cada pixel de ruído conta. */
.blog .inside-article .entry-meta .cat-links,
.archive .inside-article .entry-meta .cat-links,
.search .inside-article .entry-meta .cat-links {
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.blog .inside-article .entry-meta .cat-links a,
.archive .inside-article .entry-meta .cat-links a,
.search .inside-article .entry-meta .cat-links a {
	background-color: rgba(15, 185, 255, 0.14);
	color: var(--cp-main) !important;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}

.blog .inside-article .entry-meta .cat-links a:hover,
.archive .inside-article .entry-meta .cat-links a:hover,
.search .inside-article .entry-meta .cat-links a:hover {
	background-color: var(--cp-main);
	color: #ffffff !important;
}

/* Só o ícone de pasta sai — ele repete em desenho o que a pastilha já diz.
   O `.screen-reader-text` ("Categorias") FICA: ele é invisível na tela e é
   o que dá contexto a quem usa leitor de tela. Esconder com `display:none`
   o tiraria também da leitura assistiva, que é o oposto do objetivo. */
.blog .inside-article .entry-meta .cat-links .gp-icon,
.archive .inside-article .entry-meta .cat-links .gp-icon,
.search .inside-article .entry-meta .cat-links .gp-icon {
	display: none;
}

/* Título do card: fica maior que o resumo por hierarquia, e a caixa da
   coluna é larga o bastante para ele não quebrar palavra por palavra —
   que era o efeito de "coluna de 136px" da versão anterior. */
.blog .inside-article .entry-title,
.archive .inside-article .entry-title,
.search .inside-article .entry-title {
	font-size: 1.22rem;
	line-height: 1.35;
	margin: 0 0 4px;
}

.blog .inside-article .entry-header .entry-meta,
.archive .inside-article .entry-header .entry-meta,
.search .inside-article .entry-header .entry-meta {
	display: block;
	grid-column: auto;
	grid-row: auto;
	font-size: 0.78rem;
	color: #6b7070;
}

.blog .inside-article .entry-summary p,
.archive .inside-article .entry-summary p,
.search .inside-article .entry-summary p {
	margin-bottom: 0;
	font-size: 0.94rem;
	line-height: 1.6;
}

.blog .inside-article .post-image a,
.archive .inside-article .post-image a,
.search .inside-article .post-image a {
	display: block !important;
}

.blog .inside-article .post-image img,
.archive .inside-article .post-image img,
.search .inside-article .post-image img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 12px;
}

/* No celular a miniatura lateral esmagaria o título: abaixo de 600px a
   grade vira coluna única, com a imagem em faixa 16/9 no topo. A ordem de
   leitura continua a mesma; só a imagem sobe para a primeira posição,
   porque numa tela estreita ela é o que ancora o card. */
@media (max-width: 600px) {
	.blog .inside-article,
	.archive .inside-article,
	.search .inside-article {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		row-gap: 10px;
		padding: 14px;
	}

	.blog .inside-article .post-image,
	.archive .inside-article .post-image,
	.search .inside-article .post-image {
		grid-column: 1;
		grid-row: 1;
		width: 100% !important;
	}

	.blog .inside-article .entry-meta,
	.archive .inside-article .entry-meta,
	.search .inside-article .entry-meta { grid-column: 1; grid-row: 2; }

	.blog .inside-article .entry-header,
	.archive .inside-article .entry-header,
	.search .inside-article .entry-header { grid-column: 1; grid-row: 3; }

	.blog .inside-article .entry-summary,
	.archive .inside-article .entry-summary,
	.search .inside-article .entry-summary { grid-column: 1; grid-row: 4; }

	.blog .inside-article .post-image img,
	.archive .inside-article .post-image img,
	.search .inside-article .post-image img {
		aspect-ratio: 16 / 9 !important;
	}
}

.entry-title {
	line-height: 1.3;
}

h2.entry-title a {
	color: var(--cp-txt) !important;
}

h2.entry-title a:hover {
	color: var(--cp-main) !important;
}

.entry-meta {
	font-size: 0.82rem;
	color: #6b7070;
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-summary p {
	color: var(--cp-txt);
}

/* "Leia mais" como link claro, alinhado ao azul da marca. */
a.read-more,
.read-more-container a {
	font-weight: 700;
}

/* ----------------------------------------------------------------
   LEITURA DO ARTIGO (.single .entry-content)

   Medido no post "Trena laser" (1.452 palavras): corpo a 16px numa coluna
   de 790px dá 99 caracteres por linha. A faixa confortável de leitura é
   60–75; acima disso o olho perde a linha na volta e o leitor relê ou
   abandona. Era esse o incômodo, não o conteúdo.

   O HTML dos posts NÃO precisa ser reescrito. Medido nos 19 posts
   publicados: todos têm H2, 17 H3 só neste, 10 listas, nenhum `alignleft`/
   `alignright` e nenhuma imagem dentro de parágrafo. A estrutura semântica
   já está correta — o que faltava era o CSS respeitá-la. Tratar por CSS
   também é o único caminho que vale para os 19 posts de uma vez e para
   todos os que vierem, sem tocar em conteúdo publicado.

   O grid de três colunas é o que cria a coluna de leitura: tudo cai na
   coluna do meio e só mídia (figura, imagem, tabela) recebe a largura
   inteira do card. Sem `float`, sem margem negativa, sem quebrar o que já
   existe.

   O limite é 58ch, não 68ch: a unidade `ch` mede o dígito zero, e no
   Montserrat ele é largo (0,66em), então `ch` superestima a linha real.
   Medido contando caracteres e linhas renderizadas em 5 parágrafos longos
   deste post, 68ch entregava 82 caracteres por linha; 58ch cai para ~70,
   dentro da faixa alvo.
   ---------------------------------------------------------------- */
.single .entry-content {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		min(58ch, 100%)
		minmax(0, 1fr);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.single .entry-content > * {
	grid-column: 2;
}

.single .entry-content > figure,
.single .entry-content > img,
.single .entry-content > table,
.single .entry-content > .wp-block-image,
.single .entry-content > .wp-block-table,
.single .entry-content > .wp-block-embed {
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 100%;
}

.single .entry-content img {
	border-radius: 12px;
	height: auto;
}

/* Respiro entre seções: o GeneratePress zera o `margin-top` dos títulos,
   então H2 e H3 encostavam no parágrafo anterior e a página virava um bloco
   único. O espaço ANTES do título tem que ser maior que o espaço depois —
   é isso que faz o título parecer pertencer ao texto que ele abre, e não ao
   que ele fecha. */
.single .entry-content h2 {
	margin-top: 2.6em;
	margin-bottom: 0.6em;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--cp-main);
}

.single .entry-content h3 {
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cp-txt);
}

.single .entry-content h2:first-child,
.single .entry-content h3:first-child {
	margin-top: 0;
}

/* Traço ciano no H2: marca o início de cada seção sem pedir mais peso nem
   mais tamanho de fonte. É o mesmo recurso da navegação da loja. */
.single .entry-content h2::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 10px;
	background-color: var(--cp-second);
	border-radius: 2px;
}

.single .entry-content p {
	margin-bottom: 1.35em;
}

/* Listas: o `margin-bottom: 0` do tema colava um item no outro e a lista
   lia como parágrafo quebrado. */
.single .entry-content ul,
.single .entry-content ol {
	margin-bottom: 1.6em;
	padding-left: 1.4em;
}

.single .entry-content li {
	margin-bottom: 0.5em;
}

.single .entry-content li::marker {
	color: var(--cp-second);
}

/* Link do texto: sublinhado, não só cor. Cor sozinha não é sinal
   suficiente — some para quem tem daltonismo e se confunde com o negrito
   que o próprio texto usa para ênfase. */
.single .entry-content a:not(.wp-block-button__link) {
	color: var(--cp-main);
	text-decoration: underline;
	text-decoration-color: var(--cp-second);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.single .entry-content a:not(.wp-block-button__link):hover {
	color: var(--cp-hover);
	text-decoration-color: var(--cp-hover);
}

.single .entry-content strong {
	font-weight: 700;
	color: var(--cp-dark);
}

.single .entry-content blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--cp-second);
	font-style: normal;
	color: var(--cp-dark);
}

.single .entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.single .entry-content th,
.single .entry-content td {
	padding: 10px 12px;
	border: 1px solid rgba(30, 40, 165, 0.16);
	text-align: left;
}

.single .entry-content th {
	background-color: rgba(15, 185, 255, 0.12);
	color: var(--cp-dark);
}

/* No celular a coluna já é estreita por natureza; o que falta lá é
   tamanho de fonte, não limite de largura. */
@media (max-width: 768px) {
	.single .entry-content {
		font-size: 1rem;
		line-height: 1.7;
	}

	.single .entry-content h2 {
		font-size: 1.35rem;
		margin-top: 2.1em;
	}

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

/* ----------------------------------------------------------------
   TIPOGRAFIA
   H2 escuro em todo o blog; no rodapé azul ele volta a branco (regra em
   identity.css, carregada antes, mas com seletor mais específico).
   ---------------------------------------------------------------- */
h2, h2 a {
	color: var(--cp-txt);
}

h2 a:hover {
	color: var(--cp-main);
}

* { letter-spacing: unset !important; }
.underline { text-decoration: underline; }

/* ----------------------------------------------------------------
   BUSCA — mesmo desenho da loja
   Na loja: input branco com raio 12px e altura 48px, botão quadrado
   48x48 em mainSecond com o ícone branco (Components/header.html,
   classe .search-btn). Antes o botão do blog era forçado para #1E28A5
   por uma regra posterior no CSS do Customizer, então nunca chegava a
   ficar ciano.
   ---------------------------------------------------------------- */
.wp-block-search__inside-wrapper {
	background-color: #ffffff !important;
	border: 1px solid #d0d0d0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	padding: 4px !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.wp-block-search__input {
	background-color: transparent !important;
	border: none !important;
	flex: 1 !important;
	padding-left: 12px !important;
	color: var(--cp-txt) !important;
	font-size: 14px !important;
	box-shadow: none !important;
}

.wp-block-search__input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.wp-block-search__button {
	background-color: var(--cp-second) !important;
	border: none !important;
	border-radius: 10px !important;
	color: #ffffff !important;
	min-width: 44px !important;
	height: 40px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background-color 0.15s ease;
}

.wp-block-search__button:hover {
	background-color: #0aa2e0 !important;
}

.wp-block-search__button svg {
	fill: #ffffff !important;
	color: #ffffff !important;
	display: block !important;
}

/* Busca do header: 48px de altura, como na loja. */
aside#block-64 form .wp-block-search__inside-wrapper {
	width: 35vw !important;
	height: 48px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

aside#block-64 form .wp-block-search__inside-wrapper .wp-block-search__button {
	height: 38px !important;
	min-width: 48px !important;
}

/* ----------------------------------------------------------------
   HERO
   Era `padding: 10%` vertical, ou seja, altura proporcional à largura:
   quanto maior o monitor, mais alto o banner. Passa a ter altura fixa e
   modesta — o banner é assinatura, não conteúdo.
   ---------------------------------------------------------------- */
.page-hero {
	position: relative;
	min-height: 180px !important;
	height: auto !important;
	max-height: none !important;
	padding-top: 44px !important;
	padding-bottom: 44px !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 769px) {
	.page-hero {
		min-height: 220px !important;
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

/* Véu escuro em qualquer página, não só na listagem: sem ele o texto
   cinza sobre foto clara fica abaixo do contraste legível. */
.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		0deg,
		rgba(10, 14, 48, 0.86) 0%,
		rgba(20, 27, 105, 0.68) 55%,
		rgba(30, 40, 165, 0.48) 100%
	);
}

.inside-page-hero {
	position: relative;
	z-index: 3;
}

.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero h4,
.page-hero h1 a,
.page-hero h2 a,
.page-hero p {
	color: #ffffff !important;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.page-hero h1 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	margin-bottom: 6px;
}

.page-hero h2 {
	font-weight: 500;
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	opacity: 0.95;
}

/* Em busca e 404 o módulo imprime um <h1> vazio. A correção definitiva é
   no GP Element 734; aqui só se evita o espaço morto. */
.page-hero h1:empty,
.page-hero h2:empty {
	display: none;
}

/* ----------------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------------- */
.sidebar .widget,
.widget-area .widget,
aside.widget_block {
	background-color: #ffffff;
	border-radius: 16px;
}

.sidebar .widget ul li a,
.widget-area .widget ul li a,
aside.widget_block ul li a {
	color: var(--cp-txt) !important;
}

.sidebar .widget ul li a:hover,
.widget-area .widget ul li a:hover,
aside.widget_block ul li a:hover {
	color: var(--cp-main) !important;
}

/* ----------------------------------------------------------------
   PAGINAÇÃO
   Estava invisível e ficava preta no hover: o tema pai não pinta nada, e
   a única regra de hover que existia era a do CSS antigo do Customizer,
   que jogava o número para preto sobre fundo transparente. Sem estado
   padrão desenhado, o leitor não tinha como saber que havia mais páginas.
   Aqui a paginação vira botão de verdade — pílula branca com borda azul,
   página atual sólida — e o alvo de toque passa de ~20px para 40px, que
   é o mínimo utilizável no celular.
   ---------------------------------------------------------------- */
.paging-navigation .nav-links,
nav.navigation .nav-links {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

a.page-numbers,
span.page-numbers,
.paging-navigation .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgba(30, 40, 165, 0.25) !important;
	background-color: #ffffff !important;
	color: var(--cp-main) !important;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.page-numbers:hover,
a.page-numbers:focus-visible {
	background-color: var(--cp-main) !important;
	border-color: var(--cp-main) !important;
	color: #ffffff !important;
}

/* Página atual: sólida e sem hover — não é destino, é onde já se está. */
span.page-numbers.current,
.page-numbers.current {
	background-color: var(--cp-main) !important;
	border-color: var(--cp-main) !important;
	color: #ffffff !important;
	cursor: default;
}

/* Reticências não são botão. */
span.page-numbers.dots {
	border-color: transparent !important;
	background-color: transparent !important;
	color: #6b7070 !important;
}

/* Navegação anterior/próximo do post individual segue a mesma linguagem. */
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	color: var(--cp-main) !important;
	font-weight: 700;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
	color: var(--cp-hover) !important;
}

/* ----------------------------------------------------------------
   NEWSLETTER
   ---------------------------------------------------------------- */
.gb-container-9ae4b4a4 .tnp-subscription .tnp-field-email label { display: none; }

.gb-container-9ae4b4a4 .tnp-subscription form {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	max-width: 100%;
	gap: 8px;
}

.gb-container-9ae4b4a4 .tnp-subscription .tnp-field-email { width: 62.5%; }

.gb-container-9ae4b4a4 .tnp-subscription .tnp-email {
	background-color: #ffffff !important;
	border: 2px solid #ffffff !important;
	border-radius: 10px !important;
	color: var(--cp-txt) !important;
	height: 100%;
	font-size: 16px;
	padding: 10px 12px !important;
}

.gb-container-9ae4b4a4 .tnp-subscription .tnp-email::placeholder {
	color: #888888 !important;
}

.gb-container-9ae4b4a4 .tnp-subscription .tnp-field-button input {
	background-color: var(--cp-second) !important;
	border-radius: 10px !important;
	border: 1px solid var(--cp-second) !important;
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 700;
	padding: 12px 26px;
}

div.tnp-subscription, form.tnp-subscription, form.tnp-profile {
	margin-block: 0 !important;
}

/* Em telas estreitas, 62.5% de largura para o campo de e-mail não sobra
   espaço para o placeholder "Digite seu e-mail" com padding de 12px —
   o texto fica cortado. Abaixo de 480px o formulário empilha: e-mail em
   cima ocupando 100%, botão embaixo também 100%. */
@media (max-width: 480px) {
	.gb-container-9ae4b4a4 .tnp-subscription form {
		flex-wrap: wrap;
	}

	.gb-container-9ae4b4a4 .tnp-subscription .tnp-field-email {
		width: 100%;
	}

	.gb-container-9ae4b4a4 .tnp-subscription .tnp-field-button {
		width: 100%;
	}

	.gb-container-9ae4b4a4 .tnp-subscription .tnp-field-button input {
		width: 100%;
	}
}

/* ----------------------------------------------------------------
   BANNER DE COOKIES
   Branco sobre o verde #61A229 do plugin dá 3,13:1. O botão vai para o
   azul institucional. (A substituição do plugin segue como decisão em
   aberto — ver §8 do plano.)
   ---------------------------------------------------------------- */
.cli-modal .cli_setting_save_button,
.cli-modal-content .cli_action_button,
#cookie-law-info-bar .cli_action_button,
#cookie-law-info-bar a.medium.cli-plugin-button,
.wt-cli-element.medium,
.wt-cli-privacy-btn.cli_setting_save_button {
	background-color: var(--cp-main) !important;
	color: #ffffff !important;
	border-color: var(--cp-main) !important;
	border-radius: 10px !important;
}

.cli-modal .cli_setting_save_button:hover,
#cookie-law-info-bar .cli_action_button:hover,
.wt-cli-element.medium:hover,
.wt-cli-privacy-btn.cli_setting_save_button:hover {
	background-color: var(--cp-hover) !important;
	color: #ffffff !important;
}

/* ----------------------------------------------------------------
   UTILITÁRIOS (portados do Customizer)
   ---------------------------------------------------------------- */
@media (min-width: 768px)  { .hidden-desktop { display: none !important; } }
@media (max-width: 768px)  { .hidden-mobile  { display: none !important; } }
@media (min-width: 1130px) { .menu-bar-items:has(.icon-search) { display: none; } }

/* ----------------------------------------------------------------
   AUTORA — caixa no fim do post e página do autor

   O nome saía branco sobre fundo branco, invisível (apontado pelo
   usuário). A caixa é o GP Element 6782, feito em GenerateBlocks, e o
   `gb-headline` dele carrega cor própria pensada para outro fundo. Como o
   elemento é conteúdo do banco e não código do tema, corrigir aqui é o
   caminho que sobrevive a qualquer reedição do Element — e o que não
   depende de ninguém lembrar de abrir o Customizer.
   ---------------------------------------------------------------- */
.single .gb-container-f9916854 .gb-headline,
.single .gb-container-f9916854 .gb-headline a {
	color: var(--cp-txt) !important;
}

.single .gb-container-f9916854 .gb-headline a:hover {
	color: var(--cp-main) !important;
}

/* Página do autor: a foto vira a âncora visual da página.
   Pedido do usuário — "já que não temos banner full". O avatar sai de 50px
   para 112px, ganha recorte redondo e um anel ciano; o cabeçalho inteiro
   vira card branco sobre o cinza do corpo, com o mesmo raio de 16px dos
   outros cards do blog. O arquivo de origem tem 150px, então 112px ainda
   é redução — não há perda de nitidez. */
.author .page-header {
	background-color: var(--cp-surface);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(15, 20, 60, 0.06);
}

/* O avatar é filho do próprio `<h1>` no template do GeneratePress
   (`<h1 class="page-title"><img class="avatar"><span class="vcard">`).
   Em vez de arrancá-lo do título com posicionamento absoluto, o título
   vira a linha do cabeçalho: foto e nome lado a lado, alinhados pelo
   centro. Nenhum template mexido e nenhum deslocamento calculado à mão. */
.author .page-header .page-title {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 10px;
	font-size: 1.9rem;
	line-height: 1.2;
	color: var(--cp-main);
}

.author .page-header .page-title img.avatar {
	flex: 0 0 112px;
	width: 112px !important;
	height: 112px !important;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px rgba(15, 185, 255, 0.35);
}

/* Descrição e links sociais recuam para debaixo do NOME, não da foto —
   130px = 112 da foto + 18 do respiro. */
.author .page-header .author-info,
.author .page-header > .gb-container {
	padding-left: 130px;
	color: var(--cp-txt);
	font-size: 1rem;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.author .page-header {
		text-align: center;
		padding: 20px 16px;
	}

	.author .page-header .page-title {
		flex-direction: column;
		gap: 12px;
		font-size: 1.5rem;
	}

	.author .page-header .author-info,
	.author .page-header > .gb-container {
		padding-left: 0;
	}
}

/* ----------------------------------------------------------------
   COMENTÁRIOS

   O que estava errado era ordenação, não estilo: "Conectado como Ana
   Rocha. Edite seu perfil. Sair?" e "Campos obrigatórios são marcados com
   *" saíam na MESMA linha corrida, dois assuntos diferentes colados. E o
   campo de texto vinha antes de qualquer respiro do título.

   Aqui a área vira um bloco com hierarquia própria: título, aviso de
   sessão como linha discreta, campo, e o botão com o peso de ação que ele
   tem. Sem tocar em template — `comment_form` é do WordPress, e o que dá
   para reordenar com segurança é a apresentação.
   ---------------------------------------------------------------- */
.comments-area {
	margin-top: 32px;
}

.comments-area .comment-reply-title,
.comments-area .comments-title {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--cp-main);
	margin-bottom: 4px;
}

.comment-form .logged-in-as,
.comment-form .comment-notes {
	display: block;
	font-size: 0.85rem;
	color: #6b7070;
	margin: 0 0 14px;
	line-height: 1.6;
}

.comment-form .logged-in-as a,
.comment-form .comment-notes a {
	color: var(--cp-main);
	text-decoration: underline;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	border: 1px solid rgba(30, 40, 165, 0.25) !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-family: inherit;
	font-size: 0.95rem;
	background-color: var(--cp-surface);
}

.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
	outline: none;
	border-color: var(--cp-second) !important;
	box-shadow: 0 0 0 3px rgba(15, 185, 255, 0.25);
}

.comment-form textarea {
	min-height: 130px;
	resize: vertical;
}

/* Nome e e-mail dividem a linha: são campos curtos e lado a lado a área
   encolhe uma rolagem inteira. Empilham no celular.

   Os alvos são os INPUTS, não wrappers. Medido em 17/08/2026: o
   GeneratePress reescreve os campos em
   `generate_filter_comment_fields` e entrega `<label class="screen-reader-text">`
   + `<input>` soltos como filhos diretos do formulário — os `<p
   class="comment-form-author">` do WordPress padrão não existem aqui, e a
   regra que eu tinha escrito para eles não pegava nada. O rótulo é
   `position: absolute` (recorte de leitor de tela), então não ocupa linha e
   os dois inputs coubem lado a lado sem nenhum contêiner extra.

   `50% - 12px` e não `50% - 7px`: entre dois inline-block existe o espaço em
   branco do HTML, que em Montserrat 16px mede ~4px. Com 7px a soma dava
   exatamente a largura do formulário e o segundo campo caía para a linha de
   baixo — medido, 389px cada, em `y` diferentes. */
.comment-form input#author,
.comment-form input#email {
	display: inline-block;
	width: calc(50% - 12px) !important;
	vertical-align: top;
	margin-bottom: 14px;
}

.comment-form input#author { margin-right: 10px; }

@media (max-width: 600px) {
	.comment-form input#author,
	.comment-form input#email {
		display: block;
		width: 100% !important;
		margin-right: 0;
	}
}

.comment-form .comment-form-cookies-consent,
.comment-form .comment-form-url {
	font-size: 0.85rem;
	color: #6b7070;
}

.comment-form .form-submit {
	margin-top: 6px;
}

.comment-form .submit {
	background-color: var(--cp-main) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 12px !important;
	padding: 12px 26px !important;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.comment-form .submit:hover {
	background-color: var(--cp-hover) !important;
}

/* ---------------------------------------------------------------------------
   Respiro interno do card do artigo (single)
   ---------------------------------------------------------------------------

   Os dois defeitos apontados pelo usuário — a linha "14 de abril de 2026 Por Ana
   Rocha" colada na borda esquerda no topo, e a categoria com o ícone de pasta
   colada na borda embaixo — são o MESMO defeito, medido: `.inside-article` do
   single tinha `padding: 0`. O card é uma superfície branca de cantos
   arredondados (16px) e o conteúdo encostava direto na borda.

   O corpo do texto parecia ter recuo, mas não tinha: `.entry-content` é
   `display: grid` (layout restrito do editor de blocos), e os parágrafos ficam
   numa faixa de 653px centrada dentro dos 790px disponíveis. Ou seja, o recuo do
   texto vinha da centralização, não de padding — e por isso o cabeçalho e o
   rodapé, que estão FORA do `.entry-content`, ficavam rentes à borda.

   Daí a correção ser uma só: dar padding ao card. Com 40px de folga lateral, a
   faixa de 653px continua cabendo (sobram 710px) e o texto do artigo não se
   move um pixel — só o cabeçalho e o rodapé entram. O leitor não vê o corpo do
   artigo mudar de lugar; vê a data e a categoria pararem de raspar na borda. */
.single .inside-article {
	padding: 30px 40px 34px;
}

/* No mobile o card tem ~335px. 40px de cada lado comeriam quase um quarto da
   largura útil e a linha de texto ficaria curta demais para ler bem. 20px
   mantém a mesma leitura de "conteúdo descolado da borda" sem estrangular a
   medida — é também o valor que o GeneratePress usa na margem da página. */
@media (max-width: 768px) {
	.single .inside-article {
		padding: 22px 20px 26px;
	}
}

/* A categoria no fim do artigo é a última coisa antes do box do autor. Sem
   separação ela lê como se fosse continuação do texto. Uma linha fina de 1px e
   o respiro acima transformam em rodapé do artigo, que é o que ela é.
   O ícone de pasta cinza do GeneratePress sai: é decoração genérica de tema, sem
   relação com a identidade, e a palavra "Construção e reforma" já diz o que é.
   Mesma decisão já tomada nos cards da listagem. */
.single .entry-meta .cat-links .gp-icon {
	display: none;
}

.single footer.entry-meta {
	margin-top: 32px !important;
	padding-top: 18px;
	border-top: 1px solid #e6e6e6;
}

.single footer.entry-meta .cat-links a {
	color: var(--cp-main);
	font-weight: 600;
	text-decoration: none;
}

.single footer.entry-meta .cat-links a:hover {
	text-decoration: underline;
}

/* Botão de enviar comentário alinhado à direita.

   Convenção de formulário: a ação que conclui fica no fim do fluxo de leitura,
   alinhada à borda direita do campo que a precede. O olho termina de percorrer o
   textarea no canto inferior direito e encontra o botão ali — à esquerda ele
   obriga o olho a voltar. Vale para formulário de uma coluna como este.

   `flex` em vez de `text-align: right` porque o `.form-submit` do WordPress pode
   conter o `<input type="submit">` junto de campos ocultos; o flex posiciona só o
   que é visível e não depende de o input ser inline.

   No mobile o botão vira largura total: com o polegar, alvo maior vale mais do
   que a convenção de alinhamento, e não há percurso horizontal do olho para
   respeitar numa tela de 375px. */
.comment-form .form-submit {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

@media (max-width: 600px) {
	.comment-form .form-submit {
		display: block;
	}

	.comment-form .submit {
		width: 100%;
	}
}

/* Lista de posts populares na barra lateral.

   O shortcode devolve um `<ul>` simples. Sem estilo ele herda os marcadores e o
   recuo padrão do navegador, que numa caixa estreita de barra lateral desperdiça
   os primeiros 20px de cada linha. Aqui os itens viram uma lista de links
   separados por linha fina — mesma lógica visual dos cards: a separação vem de
   um traço discreto, não de espaço vazio. */
.cp-populares {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cp-populares__item + .cp-populares__item {
	border-top: 1px solid #ececec;
}

.cp-populares__link {
	display: block;
	padding: 10px 0;
	color: var(--cp-txt);
	font-size: 0.92rem;
	line-height: 1.4;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.cp-populares__link:hover,
.cp-populares__link:focus-visible {
	color: var(--cp-main);
}

/* ================================================================
   REESTRUTURAÇÃO MOBILE E TABLET — auditoria de 18/08/2026

   Regra que governa este bloco inteiro: o desktop (>= 1130px) está
   aprovado e não pode ser afetado. 1130px não é um número escolhido
   aqui — é onde o GeneratePress troca o `#site-navigation` pelo
   `#mobile-header`. Toda regra abaixo mora dentro de `max-width`,
   nunca acima dele.
   ================================================================ */

/* ---------- 1. Busca no cabeçalho (<= 1129px) ----------

   A busca existia só no widget da sidebar, que no celular empilha
   depois dos artigos: medido em y=6304 numa página de 8039px. Agora
   ela é um ícone no cabeçalho, na altura do polegar. O widget da
   sidebar sai de cena na mesma faixa para não haver dois campos
   fazendo a mesma coisa; acima de 1130px ele continua exatamente
   onde estava. */
@media (max-width: 1129px) {
	.mobile-header-navigation .inside-navigation {
		position: relative;
	}

	.cp-busca-toggle {
		order: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--cp-main);
		cursor: pointer;
	}

	.mobile-header-navigation .menu-toggle {
		order: 3;
	}

	.cp-busca-toggle:hover,
	.cp-busca-toggle[aria-expanded="true"] {
		color: var(--cp-second);
		background: none;
	}

	.cp-busca-toggle:focus-visible {
		outline: 2px solid var(--cp-second);
		outline-offset: -2px;
	}

	.cp-busca-painel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 500;
		padding: 12px;
		background-color: var(--cp-surface);
		box-shadow: 0 8px 20px rgba(15, 20, 60, 0.14);
	}

	.cp-busca-painel[hidden] {
		display: none;
	}

	.cp-busca-form {
		display: flex;
		gap: 8px;
	}

	.cp-busca-campo {
		flex: 1 1 auto;
		min-width: 0;
		height: 46px;
		padding: 0 14px;
		border: 1px solid #d6d8dd;
		border-radius: 12px;
		/* 16px evita o zoom automático do iOS ao focar o campo. */
		font-size: 16px;
		color: var(--cp-txt);
	}

	.cp-busca-campo:focus {
		border-color: var(--cp-second);
		outline: none;
	}

	.cp-busca-enviar {
		flex: 0 0 auto;
		height: 46px;
		padding: 0 18px;
		border: 0;
		border-radius: 12px;
		background-color: var(--cp-main);
		color: #ffffff;
		font-size: 0.88rem;
		font-weight: 700;
		cursor: pointer;
	}

	.cp-busca-enviar:hover {
		background-color: var(--cp-hover);
	}

	/* O widget de busca da sidebar vira redundante nesta faixa. */
	#right-sidebar #block-89 {
		display: none;
	}
}

/* ---------- 2. Cauda depois dos artigos (<= 768px) ----------

   Abaixo de 768px o GeneratePress empilha a sidebar sob o conteúdo,
   e a página ganhava 1653px de rolagem morta (676 de sidebar + 977
   de rodapé) com Categorias aparecendo duas vezes. Aqui: Categorias
   sobe para primeiro, vira faixa de chips (ocupa 1/3 da altura de
   uma lista vertical) e a coluna duplicada do rodapé sai. */
@media (max-width: 768px) {
	#right-sidebar .inside-right-sidebar {
		display: flex;
		flex-direction: column;
	}

	#right-sidebar #categories-3 {
		order: 1;
	}

	#right-sidebar #block-24 {
		order: 2;
	}

	#right-sidebar #categories-3 ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#right-sidebar #categories-3 li {
		margin: 0;
		border: 0;
		padding: 0;
	}

	#right-sidebar #categories-3 li a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 14px;
		border-radius: 999px;
		background-color: rgba(15, 185, 255, 0.14);
		color: var(--cp-main);
		font-size: 0.82rem;
		font-weight: 700;
		text-decoration: none;
	}

	#right-sidebar #categories-3 li a:hover {
		background-color: var(--cp-main);
		color: #ffffff;
	}

	/* Categorias já está logo acima, na sidebar. */
	.gb-container-95ee7a8c {
		display: none;
	}
}

/* ---------- 3. Card do artigo no celular (<= 600px) ----------

   O título saía com weight 400 (peso de texto corrido) e o resumo
   herdava o corpo da página: 16px/28px em preto puro. Num card de
   370px isso vira um bloco cinza sem hierarquia. */
@media (max-width: 600px) {
	.blog .inside-article .entry-title,
	.archive .inside-article .entry-title,
	.search .inside-article .entry-title {
		font-size: 1.12rem;
		line-height: 1.3;
		font-weight: 700;
	}

	.blog .inside-article .entry-title a,
	.archive .inside-article .entry-title a,
	.search .inside-article .entry-title a {
		font-weight: 700;
	}

	.blog .inside-article .entry-summary p,
	.archive .inside-article .entry-summary p,
	.search .inside-article .entry-summary p {
		font-size: 0.9rem;
		line-height: 1.55;
		color: #4c5252;
	}
}

/* ---------- 4. Paginação (<= 768px) ----------
   Alvos medidos em 40x40; a diretriz de toque é 44px. */
@media (max-width: 768px) {
	.nav-links .page-numbers,
	.paging-navigation .nav-previous a,
	.paging-navigation .nav-next a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---------- 5. Caixa da autora no fim do post (<= 768px) ----------

   Medido: `.gb-inside-container` com padding de 40px dentro de uma
   caixa de 358px — sobravam 276px de conteúdo — e dois eixos de
   alinhamento diferentes (avatar centralizado em l=180, nome à
   esquerda em l=82). Aqui vira card único, um eixo só, 40px de
   padding viram 20px. O `!important` é necessário porque a caixa é
   um GP Element (GenerateBlocks) com estilo inline gerado no banco:
   sem ele, o padding do bloco vence. Escopo restrito ao Element
   e-81933df, então nada mais do site é atingido. */
@media (max-width: 768px) {
	.single .gb-container-e81933df {
		background-color: var(--cp-surface);
		border-radius: 16px;
		box-shadow: 0 1px 3px rgba(15, 20, 60, 0.06);
		margin-top: 28px !important;
	}

	.single .gb-container-e81933df > .gb-inside-container {
		padding: 20px !important;
	}

	.single .gb-grid-wrapper-10e83c9f {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.single .gb-grid-wrapper-10e83c9f > .gb-grid-column {
		width: 100% !important;
		padding-left: 0 !important;
	}

	.single .gb-container-e81933df img.avatar {
		width: 72px !important;
		height: 72px !important;
		border-radius: 50%;
		box-shadow: 0 0 0 3px rgba(15, 185, 255, 0.32);
	}

	.single .gb-container-f9916854 {
		align-items: center;
		text-align: center;
	}

	.single .gb-container-f9916854 .gb-headline {
		text-align: center;
	}

	.single .gb-container-f9916854 h2.gb-headline {
		margin: 12px 0 4px;
		font-size: 1.12rem;
		line-height: 1.3;
		font-weight: 700;
	}

	.single .gb-container-f9916854 p.gb-headline {
		margin: 0;
		font-size: 0.9rem;
		line-height: 1.5;
	}
}

/* ---------- 6. Menu sanduíche (slideout) ----------

   Medido no painel de 265px: itens em 16px/600 com `line-height: 44px`
   herdado da navegação de topo. "Guia de máquinas e ferramentas" não
   cabia e quebrava em duas linhas, criando um item com o dobro da
   altura dos outros — a régua vertical do menu deixava de existir.

   Correção pedida pelo usuário: fonte menor e proibição de quebra. Em
   vez de cortar o texto no PHP (que quebraria o nome real da categoria
   e o que o leitor de tela anuncia), o corte é visual: `nowrap` +
   `text-overflow: ellipsis`. O título completo continua no DOM, então
   acessibilidade e SEO seguem intactos, e o "…" só aparece quando o
   nome realmente não cabe. `display: block` é obrigatório aqui —
   `text-overflow` não funciona em container flex. */
#generate-slideout-menu .slideout-menu li > a {
	display: block;
	padding: 12px 16px;
	font-size: 0.875rem;
	line-height: 20px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#generate-slideout-menu .slideout-menu li > a:hover,
#generate-slideout-menu .slideout-menu li.current-menu-item > a,
#generate-slideout-menu .slideout-menu li[class*="current-menu-"] > a {
	/* No slideout o item ocupa a linha inteira: o raio "de aba"
	   (8px 8px 0 0) da navegação de topo não faz sentido aqui. */
	border-radius: 0;
}

/* "Loja" no slideout: era o CTA da navegação de topo caindo aqui de
   herança, com `margin-left: 14px`, `padding: 0 20px` e texto à
   esquerda — virava uma pastilha torta, sem eixo com o resto do menu.
   Aqui ele vira o que é: o botão de ação no pé do menu, largura
   cheia, texto centralizado, separado da lista por um respiro. */
#generate-slideout-menu .slideout-menu li a[href^="https://www.casadosparafusos.com"] {
	margin: 18px 14px 14px !important;
	padding: 0 16px !important;
	line-height: 46px !important;
	font-size: 0.9rem;
	text-align: center;
	white-space: nowrap;
	border-radius: 12px;
}

#generate-slideout-menu .slideout-menu li a[href^="https://www.casadosparafusos.com"]:hover {
	background-color: var(--cp-green-hov) !important;
	border-radius: 12px;
}

/* ---------- 7. Ordem dos botões do cabeçalho mobile ----------
   Medido depois do primeiro deploy: lupa e hambúrguer saíram ambos com
   `order: 2` (a regra do GeneratePress para o `.menu-toggle` vence a
   minha na cascata), jogando a lupa para o canto e deixando o
   hambúrguer solto no meio. Fixando a ordem explicitamente e dando o
   espaço restante à logo, os dois botões ficam agrupados à direita. */
@media (max-width: 1129px) {
	.mobile-header-navigation .site-logo {
		flex: 1 1 auto;
	}

	.cp-busca-toggle {
		order: 2 !important;
	}

	.mobile-header-navigation .menu-toggle {
		order: 3 !important;
	}
}

/* ---------- 8. Duas correções apontadas pelo usuário ----------

   (a) A lupa saía em `var(--cp-main)` sobre o cabeçalho que também é
   `--cp-main`: azul sobre azul, botão presente e invisível. O
   hambúrguer ao lado sempre foi branco — a lupa passa a falar a mesma
   língua dele, com o ciano da marca no hover e no estado aberto.

   (b) Reordenar a sidebar por `order` move a posição visual, mas não
   move o `:last-child` do DOM: o `margin-bottom: 0` continuava no
   Categorias, que agora é o PRIMEIRO card. Resultado medido: fim do
   Categorias em y=6248 e começo do Posts Populares em y=6248, colados.
   Trocar margem por `gap` resolve na raiz — o espaço passa a ser do
   container e independe de qual card está em qual posição. */
@media (max-width: 1129px) {
	.cp-busca-toggle {
		color: #ffffff;
	}

	.cp-busca-toggle:hover,
	.cp-busca-toggle[aria-expanded="true"] {
		color: var(--cp-second);
	}

	.cp-busca-toggle:focus-visible {
		outline-color: #ffffff;
	}
}

@media (max-width: 768px) {
	#right-sidebar .inside-right-sidebar {
		gap: 20px;
	}

	#right-sidebar .widget {
		margin-bottom: 0;
	}
}