/*
 * layout.css — estrutura de página do tema "O Mecânico 2026".
 *
 * Recria com CSS Grid/Flexbox o que o template de referência resolvia com
 * floats e o grid de 12 colunas do Bootstrap (analisado em
 * templates/assets/css/{responsive,pages,single}.css). As classes de coluna
 * do markup convertido (col-md-8, col-sm-4, ...) são mantidas como pontos de
 * ancoragem, mas o comportamento aqui é grid nativo — nenhum float é usado
 * para estruturar colunas.
 *
 * Depende de tokens.css.
 */

/* ---------- Wrappers ---------- */

.mec_viewport {
	overflow-x: clip;
}

/*
 * O contêiner cresce em degraus, como o do modelo (que é o do Bootstrap):
 * 750px, 970px e 1170px. Um `max-width` único acertava só o desktop largo — de
 * 768 a 1199px a linha ficava até 150px mais larga que a de lá, e a auditoria
 * não pegava porque mede a 1280.
 *
 * Os degraus são `min-width` de propósito, e não max-width como o resto do
 * responsive.css: assim o valor final de cada faixa fica declarado uma vez só,
 * na ordem em que a tela cresce.
 *
 * O degrau vive numa variável, e não direto no `max-width` da `.container`,
 * porque a tela de blocos precisa da MESMA medida: um bloco comum tem de nascer
 * alinhado com o cabeçalho e o rodapé, e não só a 1200px para cima. Enquanto os
 * degraus estavam presos aqui, `blocks.css` teria de repeti-los — e duas listas
 * de 750/970/1170 divergem no primeiro ajuste.
 */
:root {
	--mec-container-width: 100%;
	--mec-container-inline: 100%;
}

.container {
	width: var(--mec-container-inline);
	max-width: var(--mec-container-width);
	margin-inline: auto;
	padding-inline: var(--mec-container-pad);
}

/*
 * Entre 480 e 767px o modelo estreita a linha em 10px — 5px de folga de cada
 * lado da tela, além do padding. Abaixo de 480 ele volta à largura cheia, e a
 * calha do tema encolhe para 10px, decisão já registrada no responsive.css.
 *
 * Também em variável, e pelo mesmo motivo do degrau acima: a tela de blocos
 * precisa desta faixa. Enquanto o `calc` morava direto na `.container`, o bloco
 * comum saía 10px mais largo que o cabeçalho em toda a faixa de 480 a 767 —
 * medido, e invisível para a auditoria, que roda em 1280 e 1000.
 */
@media (480px <= width <= 767px) {
	:root {
		--mec-container-inline: calc(100% - 10px);
	}
}

@media (width >= 768px) {
	:root {
		--mec-container-width: 750px;
	}
}

@media (width >= 992px) {
	:root {
		--mec-container-width: 970px;
	}
}

@media (width >= 1200px) {
	:root {
		--mec-container-width: var(--mec-container-max); /* 1170px */
	}
}

.mec_main {
	padding-block: var(--mec-space-xl);
}

.mec_section {
	display: block;
}

/* ---------- Conteúdo + sidebar ---------- */

/*
 * O modelo usa colunas com 15px de padding de cada lado; o vão de 30px entre
 * conteúdo e sidebar nasce dessa soma, não de um gap da grade.
 *
 * A margem negativa devolve o padding que o .container cobra, para a linha
 * ocupar a largura cheia dele — é o que o modelo faz em `.row`. Sem isso a
 * coluna de conteúdo fica 20px mais estreita que a do modelo em toda a faixa
 * abaixo de 1281px. Vem da mesma variável do padding, senão a linha vaza da
 * viewport onde a calha encolhe.
 */
.row,
.mec_cat_content {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	margin-inline: calc(-1 * var(--mec-container-pad));
}

.row > [class*="col-"],
.mec_cat_content > [class*="col-"] {
	padding-inline: 15px;
}

/* A sidebar tem recuo maior do lado do conteúdo, como no modelo. */
.row > .mec_sidebar,
.mec_cat_content > .mec_sidebar {
	padding-left: 30px;
}

@media (width >= 992px) {
	.row:has(> .mec_sidebar),
	.mec_cat_content:has(> .mec_sidebar) {
		grid-template-columns: minmax(0, 1fr) minmax(280px, var(--mec-sidebar-width));
	}

	/*
	 * A classe `left` do markup não move nada — é inerte também no modelo, onde
	 * a sidebar de archive e search renderiza à direita (x=915 numa viewport de
	 * 1440), igual à do post, apesar do nome. Ela fica no markup só por paridade
	 * com o modelo; o CSS que a interpretava ao pé da letra invertia as colunas
	 * e foi removido.
	 *
	 * Como o <main> vem antes do <aside> no DOM, a grade base já entrega a
	 * ordem certa sem regra nenhuma.
	 */
}

.mec_main_content,
.mec_sidebar {
	min-width: 0;
}

.col-sm-12 {
	grid-column: 1 / -1;
}

/* ---------- Cabeçalho ---------- */

/*
 * Cabeçalho fixo sem JS e sem duplicar a navbar: o wrapper inteiro é sticky
 * com top negativo igual à altura da topbar + midbar (34px + 140px). Ao rolar,
 * essas duas somem para cima e só a barra de menu de 60px fica presa no topo —
 * o mesmo efeito que o template resolve clonando a navbar e alternando classe
 * por scroll.
 */
.mec_header_wrapper {
	position: sticky;
	/*
	 * O quanto o cabeçalho sobe antes de parar. O valor exato é medido pelo
	 * menu.js e publicado em --mec-header-travel; o fallback de 175px cobre o
	 * carregamento antes do JS e o caso de JS desligado.
	 *
	 * Somar 2.125rem + 8.75rem à mão dava 174px e deixava 1px da midbar
	 * aparecendo como uma linha clara no topo — a topbar mede 35px, não 34,
	 * por causa do próprio border-bottom.
	 */
	inset-block-start: calc(-1 * var(--mec-header-travel, 175px));
	z-index: var(--mec-z-header);
}

/*
 * Sem gap entre as colunas: o modelo não tem, e com ele as três colunas
 * somavam 1154px numa linha de 1140, empurrando a busca para fora da barra.
 * O espaçamento interno de cada coluna vem do .item_wrap.
 */
.mec_nav_row {
	display: flex;
	align-items: center;
	min-height: 2.125rem; /* 34px — topbar do template */
}

.mec_nav_col {
	display: flex;
	align-items: center;
	/*
	 * Precisa poder encolher: com white-space: nowrap no menu, o min-width
	 * auto travaria a coluna no tamanho do conteúdo e transbordaria.
	 */
	min-width: 0;
}

.mec_nav_grow {
	flex: 1 1 auto;
}

.mec_nav_normal {
	flex: 0 0 auto;
}

.item_wrap {
	display: flex;
	align-items: center;
	gap: var(--mec-space-md);
	width: 100%;
}

.mec_nav_alignright {
	justify-content: flex-end;
}

.mec_nav_aligncenter {
	justify-content: center;
}

.mec_topbar {
	background-color: var(--mec-color-bg);
	border-bottom: 1px solid var(--mec-color-border);
	font-size: var(--mec-font-size-sm);
}

.mec_midbar {
	background-color: var(--mec-color-bg);
}

.mec_midbar .mec_nav_row {
	min-height: 8.75rem; /* 140px */
}

.mec_bottombar .mec_nav_row {
	min-height: 3.75rem; /* 60px */
}

/*
 * A BARRA DO MENU vai de ponta a ponta, no azul da marca. Pedido da cliente.
 *
 * Duas diferenças em relação ao modelo, e as duas deliberadas:
 *
 * 1. quem pinta é a BARRA, e não a linha. No modelo o fundo escuro fica na
 *    `.mec_nav_row`, que o container limita a 1170px — a faixa termina junto
 *    com o conteúdo. Pintando a barra, ela ocupa a largura da janela e o menu
 *    continua alinhado ao conteúdo, porque o `.container` de dentro não mudou;
 * 2. a cor é o accent do site (#004489) e não o quase-preto do template.
 *
 * O tema já fazia exatamente isto quando a barra grudava no topo — era a única
 * situação em que a faixa sangrava. Agora é o estado normal, e o `is-stuck`
 * deixou de precisar de regra própria para o fundo.
 */
.mec_bottombar {
	background-color: var(--mec-color-accent);
}

/*
 * O primeiro item da linha não encosta na borda do fundo escuro: 20px de folga,
 * como no modelo. Fica no item, e não na linha, para o fundo continuar indo de
 * ponta a ponta quando a barra gruda no topo.
 */
.mec_navbar_boxed .mec_nav_alignleft .mec_nav_item:first-child {
	padding-inline-start: var(--mec-space-lg);
}


.mec_bottombar a {
	color: var(--mec-color-inverse);
}

/* Menu principal */

.mec_main_menu,
.mec_top_menu,
.mec_accountlink {
	display: flex;
	align-items: center;
	gap: var(--mec-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * No menu principal quem separa os itens é o padding do link, como no modelo
 * — vão de 0. Com gap, oito rótulos reais somavam 105px a mais e o menu
 * estourava a barra nas larguras menores do desktop.
 */
.mec_main_menu {
	gap: 0;
}

.mec_main_menu > li {
	position: relative;
	text-align: center;
}

.mec_main_menu > li > a {
	display: block;
	/*
	 * O padding recompõe os 60px da barra em volta da entrelinha de 20px: é o
	 * que faz o bloco do item ativo preencher a altura inteira, como no
	 * modelo, e devolve a área clicável cheia.
	 */
	padding-block: 1.25rem;
	padding-inline: 1rem;
	line-height: 1.25rem;
	/*
	 * Rótulo de duas palavras ("Mecânico Pro", "Cursos Online") quebrava
	 * dentro do item e esticava a barra de 60 para 80px. O modelo tem rótulos
	 * curtos e nunca esbarrou nisso.
	 */
	white-space: nowrap;
	color: #f5f5f5;
	font-family: var(--mec-font-title);
	font-size: 0.9375rem;
	/* 600 em vez dos 700 do modelo — mesma decisão do `.mec_post_title`. */
	font-weight: var(--mec-font-weight-semibold);
	text-transform: uppercase;
}

/* Item ativo: bloco azul preenchendo a barra, como no template. */
.mec_main_menu > .current-menu-item > a,
.mec_main_menu > .current-menu-ancestor > a,
.mec_main_menu > .current-menu-parent > a,
.mec_main_menu > .current_page_item > a,
.mec_main_menu > .current_page_parent > a {
	background-color: var(--mec-color-menu-active);
	color: var(--mec-color-menu-active-text);
}

/*
 * Seta para baixo nos itens que abrem submenu. O modelo usa um glifo do
 * FontAwesome; como aqui os ícones são SVG próprios e este é puramente
 * decorativo, sai em CSS — herda currentColor, então acompanha o item ativo,
 * e não custa requisição.
 *
 * .menu-item-has-children é a classe que o próprio WordPress aplica.
 */
.mec_main_menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: 0.5em;
	/* Traço de 1px e centro um pouco mais alto, por ajuste do PO. */
	border-right: 1px solid currentcolor;
	border-bottom: 1px solid currentcolor;
	transform: translateY(-0.25em) rotate(45deg);
}

/*
 * A mesma seta no menu do off-canvas (celular): item com submenu abre em acordeão, e sem a seta nada avisa
 * que ele abre. Mesmo traço do desktop; gira para cima com o item aberto (`.is-open` vem do menu.js).
 */
.mec_mobile_menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: 0.5em;
	border-right: 1px solid currentcolor;
	border-bottom: 1px solid currentcolor;
	transform: translateY(-0.25em) rotate(45deg);
	transition: transform var(--mec-transition-fast);
}

.mec_mobile_menu .menu-item-has-children.is-open > a::after {
	transform: translateY(0.1em) rotate(225deg);
}

/*
 * O submenu aparece e desliza, como no modelo. Isso exige que ele exista
 * sempre: com `display: none` não há estado de partida para transição nenhuma.
 * Daí `visibility` + `opacity` + `translate`, que animam — e o `visibility`
 * ainda tira o menu fechado da ordem de foco e do leitor de tela, coisa que
 * `opacity: 0` sozinho não faz.
 */
.mec_main_menu .sub-menu {
	position: absolute;
	text-align: left;
	inset-inline-start: 0;
	top: 100%;
	z-index: var(--mec-z-sticky);
	min-width: 14rem;
	padding: var(--mec-space-sm) 0;
	background-color: var(--mec-color-bg);
	box-shadow: var(--mec-shadow-lg);
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.5rem);
	/*
	 * O atraso é assimétrico de propósito. Ao FECHAR, `visibility` só muda
	 * depois que a opacidade terminou, senão o submenu sumiria de uma vez, sem
	 * a saída suave. Ao ABRIR (regra do `.is-open`), ele muda na hora — com
	 * atraso, o elemento continuaria invisível por 150ms e não aceitaria foco,
	 * que era o que impedia a seta para baixo de levar o teclado ao submenu.
	 */
	transition: opacity var(--mec-transition-fast),
		transform var(--mec-transition-fast),
		visibility 0s linear var(--mec-transition-fast);
}

.mec_main_menu .sub-menu a {
	display: block;
	padding: var(--mec-space-xs) var(--mec-space-md);
	color: var(--mec-color-heading);
	font-size: var(--mec-font-size-sm);
	font-weight: var(--mec-font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color var(--mec-transition-fast),
		color var(--mec-transition-fast);
}

/* Hover de superfície, o mesmo par de cores do resto do tema. */
.mec_main_menu .sub-menu a:hover,
.mec_main_menu .sub-menu a:focus-visible {
	background-color: var(--mec-color-accent-hover);
	color: var(--mec-color-surface-dark);
}

/* Aberto pelo JS da task 018 (sem :hover como único gatilho). */
.mec_main_menu li.is-open > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--mec-transition-fast),
		transform var(--mec-transition-fast),
		visibility 0s;
}

/* Busca */

/*
 * A paleta do campo de busca, em um lugar só.
 *
 * Ela é consumida pela linha do logo (aqui) e pela faixa aberta do celular (no
 * responsive.css). Os dois já usaram cores diferentes — branco lá, cinza aqui —
 * e o PO pediu que ficassem iguais; em variável, ficar iguais deixa de depender
 * de alguém lembrar dos dois lugares.
 */
.mec_search_wrapper {
	--mec-busca-fundo: var(--mec-color-surface-alt);
	--mec-busca-borda: var(--mec-color-border);
	--mec-busca-texto: var(--mec-color-text);

	position: relative;
}

/*
 * A busca do desktop mora na linha do logo, por pedido da cliente — no modelo
 * ela fica na barra do menu. Sem folga à direita aqui: ela encosta na borda do
 * container, alinhada com o fim do conteúdo, que é o que "alinhado ao logo"
 * pede do outro lado da linha.
 */
.mec_midbar .mec_nav_search {
	display: flex;
	align-items: center;
}

/*
 * O botão de submit fica dentro do campo, absoluto à direita — por isso o
 * input reserva 30px de padding daquele lado. O modelo mede 162x36.
 */
.mec_search_form {
	position: relative;
	display: block;
}

/*
 * A lupa é um <button type="submit">, então herdaria também a tipografia do
 * botão de ação do base.css. Ela não é um botão de ação — só embrulha o ícone,
 * e o modelo a mantém em 14px. Especificidade (0,1,1) empata com a regra do
 * base.css e vence por vir depois na ordem das folhas.
 */
button.mec_search_button {
	font-size: var(--mec-font-size-base);
}

/*
 * A lupa desce para o centro da linha do campo.
 *
 * Nas barras do cabeçalho o botão é flex e centra sozinho — ali esta regra não
 * move nada, porque `vertical-align` não vale para filho de flex. Ela existe
 * pela busca da página de resultados e da 404, onde o botão é `display: block`
 * e o ícone se alinha pela base do texto: medido, ele ficava 7,1px acima do
 * centro do campo. Os -0,45rem são -7,2px, que é a compensação.
 */
.mec_search_button.btn > .omec-icon {
	vertical-align: -0.45rem;
}

/*
 * Especificidade (0,3,0) para vencer button[type="submit"] do base.css, que
 * pinta o botão com o accent — aqui ele é só a lupa dentro do campo.
 */
.mec_search_wrapper .mec_search_form .mec_search_button {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	padding: 0 var(--mec-space-sm);
	background-color: transparent;
	color: inherit;
}

/*
 * Na variante que já mostra o campo, o botão-lupa de abrir não existe: se
 * ficasse visível apareceriam duas lupas, uma de abrir e uma de enviar.
 */
.mec_search_no_expand .mec_search_toggle {
	display: none;
}

/*
 * Dentro das barras escuras o campo é translúcido e sem borda, como no
 * template. Fora delas (busca de arquivo, 404) segue o input padrão.
 *
 * A barra do menu saiu daqui junto com a busca; sobrou a do celular, que
 * continua escura.
 */
.mec_navbar_mobile .mec_search_wrapper input.mec_search_input {
	width: 162px;
	height: 2.25rem; /* 36px */
	padding: 7px 30px 7px 14px;
	background-color: rgb(255 255 255 / 10%);
	border-color: transparent;
	color: #fafafa;
	font-weight: 300;
	line-height: normal;
}

.mec_navbar_mobile .mec_search_wrapper .mec_search_button {
	color: #fafafa;
	font-weight: var(--mec-font-weight-medium);
	letter-spacing: 1px;
	line-height: normal;
	text-transform: uppercase;
}

.mec_navbar_mobile .mec_search_wrapper input.mec_search_input::placeholder {
	color: rgb(255 255 255 / 60%);
}

/*
 * Na linha do logo o fundo é branco, então o campo translúcido das barras
 * escuras sumiria. Aqui ele é o input normal do tema: fundo de apoio, borda e
 * texto do corpo.
 */
.mec_midbar .mec_search_wrapper input.mec_search_input {
	/* 320px por decisão do PO; o modelo usa 162, que era o valor daqui. */
	width: 320px;
	height: 2.25rem; /* 36px — a medida do modelo */
	padding: 7px 30px 7px 14px;
	background-color: var(--mec-busca-fundo);
	border: 1px solid var(--mec-busca-borda);
	color: var(--mec-busca-texto);
	font-weight: 300;
	line-height: normal;
}

/*
 * O FOCO NÃO TROCA A BORDA DO CAMPO.
 *
 * O tema marca foco por `outline` — está no base.css — e nunca mexeu na borda.
 * Quem mexe é o `form-style.css` do plugin Ultimate Addons for CF7: ele pinta
 * `border-color` com a cor de botão dele, um roxo, em TODO input focado da
 * página. E com `!important`, que é por que a regra do tema perdia apesar de
 * ter mais especificidade.
 *
 * O `!important` daqui existe só por causa daquele. Aparecia ao abrir a busca
 * do celular, que recebe foco ao abrir — e apareceria no desktop ao primeiro
 * clique no campo.
 */
.mec_midbar .mec_search_wrapper input.mec_search_input:is(:focus, :focus-visible),
.mec_navbar_mobile .mec_search_wrapper.is-open .mec_search_form input:is(:focus, :focus-visible) {
	border-color: var(--mec-busca-borda) !important;
}

.mec_midbar .mec_search_wrapper .mec_search_button {
	color: var(--mec-busca-texto);
}

.mec_midbar .mec_search_wrapper input.mec_search_input::placeholder {
	color: var(--mec-color-muted);
}

/* Logo */

.site-title {
	letter-spacing: -0.02em;
}

.site-title img,
.mec_logo_img {
	max-height: 3rem;
	width: auto;
}

/* ---------- Navbar mobile e off-canvas ---------- */

.mec_navbar_mobile_wrapper {
	display: none;
}

/*
 * O INVÓLUCRO NÃO SE MOVE, e isso é o ponto todo desta estrutura.
 *
 * Ele já teve `transform: translateX(-100%)`, e um ancestral transformado vira
 * BLOCO DE CONTENÇÃO para descendentes `position: fixed`. O véu e o botão de
 * fechar, ambos fixos, deixavam de se referir à janela e passavam a se referir
 * ao invólucro — ficavam presos nos 320px do painel e viajavam com ele para
 * fora da tela. Por isso não havia véu visível e o X aparecia dentro do painel.
 *
 * No modelo quem se move é o painel, e véu e X são irmãos livres. Aqui é igual.
 */
#mec_off_canvas {
	position: fixed;
	inset: 0;
	z-index: var(--mec-z-offcanvas);
	visibility: hidden;
	/*
	 * O ATRASO É O QUE FAZ O FECHAMENTO SER VISTO.
	 *
	 * Sem ele, tirar `is-open` põe `visibility: hidden` no primeiro quadro: o
	 * painel continua deslizando e o véu continua desbotando, mas invisíveis —
	 * medido, o transform ia de 0 a -320px com o invólucro já oculto. Na tela o
	 * menu simplesmente sumia.
	 *
	 * `0s` de duração com atraso igual ao da transição segura a visibilidade
	 * até o movimento terminar. Ao ABRIR o atraso é zero, senão o painel
	 * deslizaria invisível na ida.
	 *
	 * O atraso é um valor literal e NÃO `var(--mec-transition-base)`: o token
	 * guarda a abreviação inteira, `250ms ease`. Usá-lo aqui produzia
	 * `visibility 0s linear 250ms ease`, com um token a mais — declaração
	 * inválida, que o navegador descarta por completo. Foi o que fez a primeira
	 * tentativa não mudar nada.
	 */
	transition: visibility 0s linear 250ms;
}

#mec_off_canvas.is-open {
	visibility: visible;
	transition: visibility 0s;
}

/*
 * O véu, com o gradiente do modelo — preto no topo, #434343 embaixo — a 85%.
 * A cortina inteira, e não só o que sobra ao lado do painel: é ela que dá o
 * clique de fechar em qualquer ponto da tela.
 */
.mec_bg_overlay {
	position: fixed;
	inset: 0;
	background: linear-gradient(to bottom, #000000, #434343);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--mec-transition-base),
		visibility var(--mec-transition-base);
}

#mec_off_canvas.is-open .mec_bg_overlay {
	opacity: 0.85;
	visibility: visible;
}

/*
 * O X fica SOBRE O VÉU, à direita, e não dentro do painel: 15px do topo e da
 * direita, branco a 75%, como no modelo. O giro de -90° ao abrir é do modelo
 * também.
 */
.mec_menu_close {
	position: fixed;
	inset-block-start: var(--mec-space-md);
	inset-inline-end: var(--mec-space-md);
	z-index: 1;
	padding: var(--mec-space-md);
	border: 0;
	background: none;
	color: #ffffff;
	/* O X é o único alvo sobre o véu: 24px de corpo, contra os 20 do modelo. */
	font-size: 1.5rem;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	transform: rotate(-90deg);
	transition:
		opacity var(--mec-transition-fast),
		visibility var(--mec-transition-fast),
		transform var(--mec-transition-fast);
}

#mec_off_canvas.is-open .mec_menu_close {
	opacity: 0.75;
	visibility: visible;
	transform: rotate(0);
}

#mec_off_canvas.is-open .mec_menu_close:hover,
#mec_off_canvas.is-open .mec_menu_close:focus-visible {
	opacity: 1;
}

/* Quem desliza é o painel. */
.mec_mobile_wrapper {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	width: min(20rem, 85vw);
	padding-block: var(--mec-space-xl);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--mec-transition-base);
	background-color: var(--mec-color-bg);
	box-shadow: var(--mec-shadow-lg);
}

#mec_off_canvas.is-open .mec_mobile_wrapper {
	transform: translateX(0);
}

/*
 * A BUSCA É UM BLOCO SEPARADO do menu, com linha embaixo — medido no modelo:
 * 20px de folga em volta e borda de 1px em #eee, com outros 20px até o primeiro
 * item.
 *
 * Sem ela o menu ficava colado na busca, e as duas coisas — procurar e navegar
 * — pareciam a mesma lista.
 */
.mec_mobile_wrapper .mec_search_wrapper {
	margin-bottom: var(--mec-space-lg);
	/* Sem folga no topo: o painel já tem a dele, e somadas as duas afastavam
	   demais a busca da borda superior. Ajuste do PO. */
	padding: 0 var(--mec-space-lg) var(--mec-space-lg);
	border-bottom: 1px solid var(--mec-color-border);
}

/* O resto do painel mantém o recuo lateral que a busca já traz no padding. */
.mec_mobile_wrapper .nav_wrap > * + *,
.mec_mobile_wrapper .item_main > *:not(.mec_search_wrapper),
.mec_mobile_wrapper .item_bottom {
	padding-inline: var(--mec-space-lg);
}

.mec_mobile_wrapper .nav_wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--mec-space-xl);
	justify-content: space-between;
}

/* Os 15px entre itens são os do modelo, medidos com o menu aberto. */
.mec_mobile_menu {
	display: flex;
	flex-direction: column;
	gap: var(--mec-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Listagem de posts ---------- */

/*
 * Respiro abaixo do cabeçalho da listagem, por ajuste do PO. O bloco não tinha
 * regra própria: o `h1` do base.css entregava a tipografia e o vão vinha por
 * acaso, da margem do título.
 */
.mec_cat_header_1 {
	margin-bottom: 1.5rem;
}


.mec_posts {
	display: grid;
	grid-template-columns: 1fr;
}

/* O template não separa cards com borda — o respiro é só o gap da grade. */
.mec_post {
	display: grid;
	gap: var(--mec-space-xl);
	padding-bottom: var(--mec-space-2xs);
}

.mec_posts .mec_post {
	margin-bottom: var(--mec-space-xl);
}

/* Card horizontal grande (archive, index, author). */
.mec_post.mec_pl_lg_2 {
	grid-template-columns: minmax(0, 1fr);
}

@media (width >= 768px) {
	.mec_post.mec_pl_lg_2,
	.mec_post.mec_pl_md_2 {
		/*
		 * 264px de miniatura, por decisão do PO — o modelo usa 360px. O card
		 * fica mais textual, com a foto ocupando um terço da largura.
		 */
		grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
		align-items: start;
	}
}

/*
 * Card pequeno (sidebar, relacionados). `align-items: start`, como
 * `.mec_pl_lg_2`/`.mec_pl_md_2` já tinham (acima) e este nunca teve: sem ele,
 * o `.mec_thumb` (coluna 1) esticava pra altura do `.mec_postblock_content`
 * (coluna 2, mais alto — título+meta+resumo), e a badge de categoria, presa
 * ao fim da caixa esticada, sobrava abaixo da imagem em vez de em cima dela.
 */
.mec_post.mec_pl_sm {
	grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); /* 120px */
	align-items: start;
	gap: var(--mec-space-md);
}

.mec_thumb {
	position: relative;
}

/*
 * O fundo vale para toda caixa de miniatura, como no modelo — lá a
 * `.thumbnail-container` é pintada de `#f7f7f7` em qualquer bloco. É o que se
 * vê enquanto a imagem carrega; no post sem destaque quem entra é a miniatura
 * de reserva, um `<img>` de verdade (ver `omecanico_2026_post_thumbnail`).
 */
.thumbnail-container {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--mec-color-surface-alt);
}

.thumbnail-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 7:5, e não o quadrado que estava aqui.
 *
 * Esta regra existia desde a reconstrução do tema e NUNCA teve consumidor:
 * `.mec_pl_sm` aparecia cinco vezes no CSS e em nenhum PHP. O quadrado veio do
 * card da sidebar; medido no modelo da home, que usa a classe 59 vezes, a
 * miniatura é 120×86 — a mesma proporção dos outros cortes da home.
 *
 * O bloco de lista é o primeiro consumidor, e foi ele que revelou a
 * divergência: enquanto nada renderizava a classe, ela não podia ser medida.
 */
.mec_post.mec_pl_sm .thumbnail-container {
	aspect-ratio: 7 / 5;
}

/*
 * O badge só flutua quando está SOBRE a miniatura — daí o seletor pedir o
 * `.mec_thumb` em volta, que é quem serve de âncora.
 *
 * Sem esse escopo a regra pegava também o bloco "Categorias:" do fim do post
 * (`single.php`), que não tem ancestral posicionado: o `absolute` resolvia
 * contra a viewport e a pílula ficava solta na tela, medida em x=8, y=861.
 */
.mec_thumb .mec_post_category {
	position: absolute;
	inset-block-end: var(--mec-space-xs);
	inset-inline-start: var(--mec-space-xs);
}

/* Na listagem o badge é 14px; só no hero ele cai para 11px. */
.mec_post_category {
	font-size: var(--mec-font-size-base);
	line-height: 1;
}

.mec_heroblock .mec_post_category {
	font-size: var(--mec-font-size-xs);
}

/*
 * No hero o link herda o corpo da caixa, em vez de fixar os 11px do token.
 * O modelo faz assim, e é o que faz os degraus de 10px e 9px chegarem ao
 * texto: com o `font-size` do `.mec_post_category a` fixo, a caixa encolhia
 * nas telas menores e a letra dentro dela não.
 */
.mec_heroblock .mec_post_category a {
	font-size: inherit;
}

.mec_post_category a {
	display: inline-block;
	padding: 5px 7px 4px;
	background-color: var(--mec-color-accent);
	color: var(--mec-color-accent-contrast);
	font-family: var(--mec-font-heading);
	line-height: 1;
	font-size: var(--mec-font-size-xs);
	font-weight: var(--mec-font-weight-semibold);
	letter-spacing: var(--mec-letter-spacing-wide);
	text-transform: uppercase;
}

/*
 * Um mecanismo só de espaçamento, como pedido: as margens dos filhos, que são
 * as do modelo. Antes havia `gap` aqui E margem no título, e os dois somavam.
 */
.mec_postblock_content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * O peso é 600, e não os 700 do modelo, por decisão do PO: o negrito da Poppins
 * ficou pesado demais no título. Vale só onde a família é Poppins — aqui e no
 * item de menu. Os demais títulos são Heebo, que tem 400 e 700 e nada entre os
 * dois: pedir 600 lá cairia no 700 e não mudaria nada na tela.
 *
 * A divergência de peso contra o modelo está registrada como regra em
 * `tools/audit-diff.py`, não como exceção por seletor.
 */
/* Os 5px abaixo do título são a medida do modelo. */
.mec_post_title {
	margin-bottom: var(--mec-space-2xs);
	font-family: var(--mec-font-title);
	font-size: var(--mec-font-size-xl);
	font-weight: var(--mec-font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: var(--mec-line-height-heading);
}

/*
 * 15px, medido no modelo a 1280px. O token `base` vale 14 e era o que estava
 * aqui — diferença de um pixel que só apareceu quando o bloco de lista deu
 * consumidor à classe.
 */
.mec_post.mec_pl_sm .mec_post_title,
.mec_post.mec_pl_sm .mec_post_title a {
	font-size: 15px;
	line-height: 21px;
}

/*
 * Tudo aqui escala com a própria fonte, como no modelo: `1em` de margem e
 * entrelinha sem unidade. Assim, quando a faixa intermediária baixa o corpo
 * para 12px, a margem e a entrelinha acompanham sozinhas — com valores fixos
 * eu teria de repetir os três em cada breakpoint.
 */
.mec_post_excerpt {
	margin-top: 1em;
	font-size: var(--mec-font-size-base);
	line-height: 1.6;
}

.mec_post_excerpt p {
	margin-bottom: 0;
	font-size: inherit;
	line-height: inherit;
}

.mec_post_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mec-space-3xs);
	color: var(--mec-color-meta);
	font-size: var(--mec-font-size-xs);
}

.mec_post_meta a {
	color: inherit;
}

/* Nas listagens a meta é caixa alta; no corpo do post, não. */
.mec_postblock_content .mec_post_meta {
	text-transform: uppercase;
}

/*
 * No modelo é um botão de contorno, não um link solto.
 *
 * O `inline-block` não é detalhe: <a> é inline por padrão, e em elemento inline
 * padding e margem verticais não ocupam altura na linha — o botão subia por
 * cima da última linha do resumo, sobrepondo 4px em vez de deixar os 15px de
 * folga do modelo.
 *
 * (Havia aqui um `align-self: flex-start` inerte, de quando se supôs que o
 * .mec_post_excerpt fosse flex. Ele é bloco, nos dois lados.)
 */
.mec_readmore {
	display: inline-block;
	white-space: nowrap;
	margin-block: var(--mec-space-md) var(--mec-space-2xs);
	padding: 6px 18px;
	border: 1px solid var(--mec-color-border-strong);
	color: var(--mec-color-text);
	font-size: var(--mec-font-size-xs);
	font-weight: var(--mec-font-weight-regular);
	letter-spacing: var(--mec-letter-spacing-wide);
	line-height: 1.6;
	text-transform: uppercase;
}

/* Botão: hover pinta superfície, como o submit. */
.mec_readmore:hover {
	background-color: var(--mec-color-accent-hover);
	border-color: var(--mec-color-accent-hover);
	color: var(--mec-color-surface-dark);
}

/* ---------- Bloco de destaques (hero) ---------- */

/*
 * O mosaico segue o `mec_heroblock_1` do modelo e o rollover segue o
 * `mec_hero_style_1` em tudo menos no movimento da foto: o texto sobe, a meta
 * aparece e uma clareada cobre o card, mas o deslize lateral de 40px do modelo
 * virou um zoom leve, por decisão do PO. Nada disso existia aqui — o bloco era
 * estático e o escurecimento era uma faixa atrás do texto, não um véu sobre a
 * imagem.
 */
.mec_heroblock {
	position: relative;
	margin-bottom: var(--mec-space-2xl);
	overflow: hidden;
}

/*
 * A calha entre os destaques é `gap`, por decisão do PO. O modelo faz por fora
 * — margem negativa de 5px no wrapper e padding em cada card —, o que faz o
 * bloco avançar 5px sobre a calha do container e o card da direita passar meio
 * pixel do limite. Com `gap` o mosaico começa e termina exatamente onde o
 * `.mec_heroblock` termina, e cada card ocupa a célula inteira.
 *
 * Consequência medida: os cards ficam ~4px mais estreitos que os do modelo, e o
 * `padding-left` de 5px deixa de existir. As duas estão declaradas em
 * `CONHECIDAS`, no tools/audit-diff.py.
 */
.mec_heroblock_wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Em variável porque o mosaico da home entra com ela na conta da altura. */
	--mec-hero-calha: 0.25rem; /* 4px */
	gap: var(--mec-hero-calha);
}

/*
 * A caixa que o modelo põe em volta dos destaques 2 a 4. No desktop ela não
 * pode participar da grade — seria uma célula só, com os três cards empilhados
 * dentro —, então `display: contents` a apaga do layout e deixa os filhos
 * caírem direto na grade do wrapper. Abaixo de 667px ela volta a ser caixa e
 * vira a faixa de rolagem horizontal (responsive.css).
 */
.mec_heroblock_scroller {
	display: contents;
}

/*
 * Arquivo com menos de quatro posts. O mosaico é desenhado para quatro, e
 * célula de grade sem item não desenha nada: uma categoria com um post só
 * deixava metade do bloco em branco por 500px de altura — e o site tem 203
 * categorias com um punhado de posts cada. Com um destaque, ele ocupa o bloco
 * inteiro.
 *
 * Vale em qualquer largura: abaixo de 667px são duas linhas, e sem o scroller
 * a de baixo também ficaria vazia.
 */
.mec_heroblock_wrapper:not(:has(.mec_hero_item_2)) .mec_hero_item_1 {
	grid-row: 1 / -1;
}

@media (width >= 668px) {
	/*
	 * Arranjo do template: destaque principal ocupando a metade esquerda em
	 * altura cheia, o segundo cobrindo o topo da metade direita e o terceiro
	 * e o quarto dividindo a base — 4 colunas resolvem os três tamanhos.
	 */
	.mec_heroblock_wrapper {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		/*
		 * Linhas desiguais, como no template: 275px sobre 225px em 1170px.
		 *
		 * minmax(0, …) é obrigatório: uma linha `fr` tem mínimo `auto`, ou
		 * seja, min-content. Com imagens reais dentro, o conteúdo empurrava a
		 * linha e o aspect-ratio era ignorado — o hero passava de 487 para
		 * 1178px de altura.
		 */
		grid-template-rows: minmax(0, 55fr) minmax(0, 45fr);
		/*
		 * Altura fixa, como no modelo (`.mec_heroblock_1 .mec_heroblock_wrapper
		 * { height: 500px }`). Era proporção aqui, o que dava 487px na coluna de
		 * 1140 e encolhia o bloco junto com a janela.
		 */
		height: 500px;
	}

	.mec_hero_item_1 {
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}

	.mec_hero_item_2 {
		grid-column: 3 / span 2;
		grid-row: 1;
	}

	.mec_hero_item_3 {
		grid-column: 3;
		grid-row: 2;
	}

	.mec_hero_item_4 {
		grid-column: 4;
		grid-row: 2;
	}

	/* Um destaque: largura inteira, além das duas linhas já vistas acima. */
	.mec_heroblock_wrapper:not(:has(.mec_hero_item_2)) .mec_hero_item_1 {
		grid-column: 1 / -1;
	}

	/* Dois: metade e metade, em altura cheia. */
	.mec_heroblock_wrapper:has(.mec_hero_item_2):not(:has(.mec_hero_item_3)) .mec_hero_item_2 {
		grid-row: 1 / -1;
	}

	/* Três: o terceiro toma a base inteira da direita. */
	.mec_heroblock_wrapper:has(.mec_hero_item_3):not(:has(.mec_hero_item_4)) .mec_hero_item_3 {
		grid-column: 3 / span 2;
	}
}

.mec_heroblock .mec_post {
	position: relative;
	/*
	 * Bloco, não grid: como grid a linha interna é `auto` e o height: 100% dos
	 * filhos vira circular, resolvendo pela altura da imagem em vez da altura
	 * do card. Era o que fazia a foto vazar a caixa.
	 */
	display: block;
	min-height: 0;
	/* Segura o zoom da foto dentro do card. */
	overflow: hidden;
	/* Sem calha por padding: quem separa os cards é o `gap` do wrapper. */
	margin-bottom: 0;
	padding: 0;
}

/*
 * Quem posiciona o conteúdo sobreposto é o contêiner interno, como no modelo.
 * Ancorado no `.mec_post`, o `.mec_postblock_content` se resolvia contra a
 * caixa de PADDING, e o texto invadia os 5px da calha: 572,5px de largura
 * contra os 567,5px de lá.
 */
.mec_heroblock .mec_block_container {
	position: relative;
	height: 100%;
}

/*
 * Zoom leve no rollover, por decisão do PO. O modelo faz outra coisa: a
 * miniatura é 50px mais larga que o card, entra recuada 40px e desliza de volta
 * — o que exige a foto sempre fora de enquadramento, mesmo parada. Aqui ela
 * fica no lugar e só cresce 5% no hover, com a mesma duração de 0,35s.
 *
 * Absoluta em `inset: 0` para o crescimento não empurrar nada; quem corta o que
 * passa da borda é o `overflow: hidden` do `.mec_post`.
 */
.mec_heroblock .mec_thumb {
	position: absolute;
	inset: 0;
	max-width: none;
	transition: transform 0.35s;
}

.mec_heroblock .mec_post:hover .mec_thumb,
.mec_heroblock .mec_post:focus-within .mec_thumb {
	transform: scale(1.05);
}

.mec_heroblock .mec_thumb a,
.mec_heroblock .thumbnail-container {
	display: block;
	height: 100%;
}

.mec_heroblock .thumbnail-container {
	aspect-ratio: auto;
}

/*
 * O escurecimento do modelo é um véu sobre a imagem INTEIRA — não uma faixa
 * atrás do texto. Sem ele o título cai sobre a foto crua, e em capa clara o
 * branco some. A opacidade é a do `scheme.css` do modelo (.35), que sobrepõe
 * o .6 declarado no `mechero.css`.
 */
.mec_heroblock .thumbnail-container::before,
.mec_heroblock .thumbnail-container::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.mec_heroblock .thumbnail-container::before {
	background-image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0, rgb(0 0 0) 65%, rgb(0 0 0) 100%);
	opacity: 0.35;
}

/*
 * Sobre a miniatura de reserva o véu de 35% não basta: o campo é #f0f0f0, e
 * escurecido nessa medida ainda deixa o texto branco em 2,4:1. Em 55% a base do
 * card cai para #6c6c6c e o contraste sobe para 5,2:1, sem apagar o logo — na
 * metade de cima o gradiente ainda é quase transparente.
 */
.mec_heroblock .thumbnail-container:has(.omec-thumb-placeholder)::before {
	opacity: 0.55;
}

/* Clareada branca no rollover, por cima do véu. */
.mec_heroblock .thumbnail-container::after {
	background-color: rgb(255 255 255 / 15%);
	opacity: 0;
	transition: opacity 0.3s;
}

.mec_heroblock .mec_post:hover .thumbnail-container::after,
.mec_heroblock .mec_post:focus-within .thumbnail-container::after {
	opacity: 1;
}

.mec_heroblock .mec_postblock_content {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 3;
	padding: 0 25px 25px;
	color: var(--mec-color-inverse);
	/* Fora dos links, o clique atravessa para a capa. */
	pointer-events: none;
}

.mec_heroblock .mec_postblock_content a {
	pointer-events: auto;
}

/*
 * O `a` da meta precisa estar aqui, e não só o contêiner: sem ele o nome do
 * autor caía na regra global de accent e saía em #004489 sobre a foto escura.
 * O modelo escreve exatamente estes quatro seletores pelo mesmo motivo.
 */
.mec_heroblock .mec_post_title a,
.mec_heroblock .mec_post_meta,
.mec_heroblock .mec_post_meta a,
.mec_heroblock .mec_postblock_content {
	color: var(--mec-color-inverse);
}

/* Sombra do modelo: segura o texto onde o véu não escurece o bastante. */
.mec_heroblock .mec_post_info {
	text-shadow: 0 1px 1px rgb(0 0 0 / 40%);
}

/*
 * Entrada do rollover: badge e título sobem 25px, a meta sobe 30 e aparece.
 * `:focus-within` acompanha o hover — o modelo revela só no ponteiro, e quem
 * navega por teclado ficaria com a meta invisível sob o próprio foco.
 */
.mec_heroblock .mec_post_category,
.mec_heroblock .mec_post_title {
	transform: translate3d(0, 25px, 0);
	transition: transform 0.35s;
}

.mec_heroblock .mec_post_meta {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: 0.35s ease;
}

.mec_heroblock .mec_post:hover .mec_post_category,
.mec_heroblock .mec_post:hover .mec_post_title,
.mec_heroblock .mec_post:hover .mec_post_meta,
.mec_heroblock .mec_post:focus-within .mec_post_category,
.mec_heroblock .mec_post:focus-within .mec_post_title,
.mec_heroblock .mec_post:focus-within .mec_post_meta {
	transform: translate3d(0, 0, 0);
}

.mec_heroblock .mec_post:hover .mec_post_meta,
.mec_heroblock .mec_post:focus-within .mec_post_meta {
	opacity: 1;
}

/*
 * O `prefers-reduced-motion` do base.css só zera durações — a meta continuaria
 * escondida até o ponteiro passar. Aqui tudo já nasce no lugar, como o modelo
 * faz nas larguras de toque.
 */
@media (prefers-reduced-motion: reduce) {
	.mec_heroblock .mec_post_category,
	.mec_heroblock .mec_post_title,
	.mec_heroblock .mec_post_meta {
		opacity: 1;
		transform: none;
	}

	/*
	 * O zoom sai de cena; a clareada branca continua, porque é mudança de cor e
	 * não de movimento. Precisa repetir o seletor de hover — o estado de repouso
	 * já é `none`, e quem precisa ser anulado é o hover.
	 */
	.mec_heroblock .mec_post:hover .mec_thumb,
	.mec_heroblock .mec_post:focus-within .mec_thumb {
		transform: none;
	}
}

.mec_heroblock .mec_post_category {
	position: static;
	margin-bottom: var(--mec-space-2xs);
}

.mec_heroblock .mec_post_category a {
	margin-bottom: var(--mec-space-2xs);
}

/* Só o destaque principal usa o corpo maior; os outros três são menores. */
.mec_heroblock .mec_post_title {
	margin-bottom: var(--mec-space-sm); /* 10px, a medida do modelo */
	font-size: var(--mec-font-size-lg);
	line-height: 1.35;
}

.mec_hero_item_1 .mec_post_title {
	margin-bottom: var(--mec-space-2xs);
	font-size: var(--mec-font-size-2xl);
}

/*
 * O modelo não corta o título: nas quatro capas do export ele cabe em três
 * linhas e ninguém precisou de limite. Com manchete real de 90 caracteres o
 * texto cresce PARA CIMA — a caixa está ancorada na base — passa do topo do
 * card e o badge de categoria some cortado. Foi o que a tela do WP mostrou nos
 * destaques 3 e 4: 236px de conteúdo num card de 225.
 *
 * Três linhas é o que o modelo desenha; aqui vira limite.
 *
 * O corte vai no `a`, e não no `h2`: com o clamp no h2 o Chrome corta na
 * terceira linha mas NÃO desenha as reticências, e a manchete termina no meio
 * da frase parecendo defeito. No link ele desenha. Verificado na tela, não
 * deduzido — o mesmo clamp num `h2` de teste, com outra família, reticencia
 * normalmente.
 */
.mec_heroblock .mec_post_title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Post individual e página ---------- */

.mec_singlepage .mec_breadcrumbs {
	margin-top: -10px;
}

.mec_singlepage .entry-header .mec_meta_comment {
	font-size: 1.125rem;
}

.mec_singlepage .entry-header {
	margin-bottom: var(--mec-space-xl);
}

/* Valores medidos em single.css / post.html do template de referência. */
.mec_singlepage .entry-header .mec_post_title {
	margin-bottom: 0.4em;
	letter-spacing: -0.04em;
	font-size: 2.625rem; /* 42px */
	line-height: 1.15;
}

.mec_post_subtitle {
	margin-top: 0.83em;
	margin-bottom: var(--mec-space-lg);
	color: var(--mec-color-muted);
	font-family: var(--mec-font-heading);
	font-size: 1.25rem; /* 20px */
	font-weight: var(--mec-font-weight-regular);
	line-height: var(--mec-line-height-heading);
}

.entry-header .mec_post_meta {
	color: var(--mec-color-muted);
	font-size: 0.8125rem; /* 13px */
}

.mec_meta_container {
	margin-top: 0;
}

.mec_post_meta_1 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mec-space-md);
	justify-content: space-between;
	width: 100%;
}

.meta_left,
.meta_right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mec-space-md);
}

.mec_meta_author {
	display: flex;
	align-items: center;
	gap: var(--mec-space-2xs);
}

/*
 * O nome do autor é a única informação clicável da linha, e o modelo o marca
 * com a cor de destaque. O peso é 600 por ajuste do PO.
 */
/*
 * O nome do autor é sempre a cor de destaque, em qualquer tela — decisão do PO
 * por homogeneidade. O modelo diferencia (accent no post, `#212121` na
 * listagem); aqui a diferença some, e a divergência está em CONHECIDAS.
 */
.mec_meta_author a {
	color: var(--mec-color-accent-text);
	font-weight: var(--mec-font-weight-semibold);
}

/*
 * Travessão separando autor e data, regra do próprio modelo. Depende de os dois
 * serem irmãos adjacentes — o que só passou a valer quando as categorias saíram
 * do meio deles.
 */
.entry-header .mec_meta_author + .mec_meta_date::before {
	content: "\2014";
	margin-inline-end: var(--mec-space-sm);
}

/*
 * Ícone e número na mesma linha, no cinza do modelo. Sem o inline-flex o número
 * caía abaixo do ícone quando a meta quebrava.
 */
.mec_meta_comment a {
	display: inline-flex;
	align-items: center;
	gap: var(--mec-space-3xs);
	/* Token, não literal: #53585c ficava com razão 2,45 no escuro. */
	color: var(--mec-color-text);
}

/*
 * Os ícones da meta são menores que os do resto do tema.
 *
 * A regra existia só para o de comentário, e o relógio da data ficou de fora:
 * com os 1,65rem gerais, ele saía 26px ao lado de um texto de 11px — mais que
 * o dobro — e, sendo maior que a entrelinha de 22,4px, esticava a linha inteira
 * da meta para 33px. No modelo o mesmo ícone ocupa 9x11.
 *
 * Vale para qualquer ícone dentro da meta, e não item a item: era assim que o
 * relógio passava despercebido.
 */
.mec_post_meta .omec-icon {
	width: 1.1rem;
	height: 1.1rem;
}

/*
 * Ícone e texto no mesmo eixo. O `vertical-align` do `.omec-icon` alinha pela
 * base, e com o ícone mais alto que a letra a data descia em relação a ele.
 * Alinhar pelo centro não depende do tamanho de nenhum dos dois.
 */
.mec_post_meta > div > a,
.mec_post_meta > div {
	display: inline-flex;
	align-items: center;
	gap: var(--mec-space-3xs);
}

.mec_meta_author img {
	width: 2.1875rem; /* 35px */
	height: 2.1875rem;
	border-radius: var(--mec-radius-circle);
}

.mec_featured {
	margin-bottom: var(--mec-space-xl);
}

.mec_featured .thumbnail-container {
	aspect-ratio: auto;
}

.wp-caption-text {
	margin-top: 3px;
	color: var(--mec-color-muted);
	font-size: var(--mec-font-size-xs);
}

/*
 * O corpo do artigo é maior que a base do site: 16px/26px contra 14px/1.6.
 * É a diferença de leitura entre listagem e leitura longa no template.
 */
.entry-content {
	margin-bottom: var(--mec-space-xl);
}

.entry-content .content-inner {
	/* O corpo do artigo é mais escuro que o texto de interface — e o token tem
	   o par para o escuro, onde ele é mais CLARO pela mesma razão. */
	color: var(--mec-color-text-strong);
	font-size: var(--mec-font-size-md);
	/* Com unidade, pelo mesmo motivo do corpo: herda 26px fixos. */
	line-height: 1.625em;
}

.mec_post_tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mec-space-xs);
	/* Não recebe margem própria: o parágrafo anterior já entrega o respiro. */
	margin-top: 0;
	font-size: var(--mec-font-size-sm);
}

/*
 * A pílula é uma só, em qualquer lugar: tag no fim do post, categoria no fim do
 * post e nuvem de tags do widget. No modelo as três dividem a mesma regra
 * (`.mec_post_tags a, .mec_post_category a, .mec_post_source a, .mec_post_via a`),
 * e aqui também — o que muda entre elas é só o tamanho da letra.
 *
 * O `.entry-content` na frente empata com a especificidade do link de conteúdo
 * do base.css, que de outro modo pintaria a tag de azul.
 */
.entry-content .mec_post_tags a,
.entry-content .mec_post_category a,
.mec_post_tags a,
.widget_tag_cloud a {
	margin-bottom: var(--mec-space-2xs);
	padding: 4px var(--mec-space-sm);
	letter-spacing: 1px;
	line-height: normal;
	background-color: var(--mec-color-surface-alt);
	/* Token com par: como literal, o #616161 do modelo dava razão 2,36 no
	   escuro. O valor claro segue sendo o do modelo. */
	color: var(--mec-color-tag-text);
	font-size: var(--mec-font-size-sm);
}

/*
 * Hover de superfície, igual ao do botão: fundo no azul da marca e rótulo
 * escuro. Sem ele a pílula não dava sinal nenhum de ser clicável.
 */
.entry-content .mec_post_tags a:hover,
.entry-content .mec_post_category a:hover,
.mec_post_tags a:hover,
.widget_tag_cloud a:hover {
	background-color: var(--mec-color-accent-hover);
	color: var(--mec-color-surface-dark);
}

/*
 * Medidas do modelo: bordas em cima e embaixo, 20px de respiro dentro e 30px
 * abaixo. O grid fica no lugar do float, como decidido na task 011 do
 * planejamento original — o resultado em pixel é o mesmo.
 */
.mec_prevnext_post {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mec-space-md);
	margin-block: 0 var(--mec-space-xl);
	padding-block: var(--mec-space-lg);
	border-block: 1px solid var(--mec-color-border);
}

@media (width >= 768px) {
	.mec_prevnext_post {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mec_prevnext_post .post {
	display: flex;
	flex-direction: column;
	gap: var(--mec-space-3xs);
}

/*
 * O título leva uma barra à esquerda que muda de cor no hover — é o retorno
 * visual do bloco no modelo, no lugar da borda em volta do card que estava
 * aqui.
 */
.mec_prevnext_post .post-title {
	margin-block: var(--mec-space-sm);
	padding-inline-start: 1em;
	border-inline-start: 10px solid var(--mec-color-border);
	line-height: 1.4;
	transition: border-color var(--mec-transition-base);
}

.mec_prevnext_post .post:hover .post-title {
	border-color: var(--mec-color-accent-hover);
}

.mec_prevnext_post .next-post {
	text-align: right;
}

.mec_prevnext_post .post-title {
	font-size: var(--mec-font-size-md);
	font-weight: var(--mec-font-weight-bold);
}

.mec_prevnext_post .caption {
	color: var(--mec-color-muted);
	font-size: var(--mec-font-size-base);
}

/* ---------- Caixa do autor ---------- */

/*
 * Um componente só para o fim do post e para o topo do arquivo de autor, por
 * decisão do PO. No modelo são dois: avatar de 80 sem fundo no post, 110 com
 * fundo e borda no arquivo. A divergência está registrada em CONHECIDAS, no
 * tools/audit-diff.py.
 *
 * O vão de 30px e a borda nos quatro lados foram medidos no arquivo de autor
 * do modelo — lá a foto termina em x=131 e o texto começa em 161, e o
 * `pages.css` fecha a caixa com `border: 1px solid #eaeaea`. Cantos seguem
 * retos, divergência decidida: o modelo arredonda em 3px.
 */
.mec_author_wrap {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	column-gap: var(--mec-space-xl);
	/* Avatar no topo: centralizado, ele descia junto com bio longa. */
	align-items: start;
	margin: 0;
	padding: var(--mec-space-xl) var(--mec-space-lg);
	background-color: var(--mec-color-surface-alt);
	border: 1px solid #eaeaea;
}

/* As redes da caixa são discretas e só escurecem no hover. */
.mec_author_socials a {
	color: var(--mec-color-muted);
}

.mec_author_socials a:hover {
	color: var(--mec-color-text);
}

.mec_author_wrap img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: var(--mec-radius-circle);
}

.mec_author_wrap .mec_author_name {
	margin-bottom: var(--mec-space-2xs);
	font-size: 1.5rem; /* 24px */
	letter-spacing: normal;
	line-height: var(--mec-line-height-heading);
}

.mec_author_wrap .mec_author_content {
	color: var(--mec-color-muted);
}

.mec_author_wrap .mec_author_desc p {
	margin-bottom: 14px;
}

.mec_author_socials {
	display: flex;
	gap: var(--mec-space-xs);
	margin-top: 0;
}

/* No post a caixa precisa de folga; no arquivo de autor ela é o cabeçalho. */
.mec_author_box_container {
	margin-block: var(--mec-space-xl);
}

/* Na página de autor a listagem ocupa a largura cheia e o título cresce. */
.mec_author_content_wrapper .mec_post_title {
	font-size: 1.5rem;
}

/* ---------- Lista de comentários ---------- */

/*
 * As medidas vêm de templates/assets/css/single.css, que traz a lista inteira
 * mesmo ela não aparecendo no post.html exportado. Lá a classe é `.commentlist`
 * e o WordPress moderno gera `.comment-list` — por isso procurar pelo nome da
 * classe não achava nada e o bloco passou tanto tempo sem estilo.
 *
 * Uma diferença de estrutura a respeitar: no modelo `.comment-meta` é a data;
 * no walker do WP ela é o <footer> que embrulha autor e data, e a data fica em
 * `.comment-metadata`. Os seletores abaixo seguem o markup do WP.
 *
 * As entrelinhas são comprimentos fixos, como no modelo — ver a armadilha do
 * `line-height` com unidade no handoff: sem unidade, `.fn` e a data recalculam
 * pelo próprio corpo e desalinham do avatar.
 */
.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.5rem; /* 24px */
}

.comment-list li {
	font-size: 1em;
}

/*
 * O respiro é simétrico: só em cima, o texto de um comentário encostava no
 * separador do seguinte.
 */
.comment-body {
	margin-bottom: var(--mec-space-sm);
	padding-block: var(--mec-space-lg);
	/* O modelo pede branco a 30% aqui, invisível sobre fundo claro; o separador
	   é claramente intencional, então vale a borda do tema. */
	border-top: 1px solid var(--mec-color-border);
}

/*
 * Separador é entre comentários, não em volta da lista: o primeiro não leva
 * linha acima nem o último, linha abaixo.
 */
.comment-list > li:first-child > .comment-body {
	border-top: 0;
	padding-block-start: 0;
}

.comment-list > li:last-child > .comment-body {
	border-bottom: 0;
	margin-bottom: 0;
}

/*
 * A calha de 70px do modelo existe para o avatar, posicionado absoluto dentro
 * dela. Com `show_avatars` desligado — como está hoje — ela seria só recuo
 * vazio, então só entra quando há avatar de fato.
 */
.comment-body:has(.avatar) {
	padding-left: 70px;
}

/*
 * A altura fixa e o `object-fit` são o que impede o avatar de esticar ou
 * encolher: com texto longo, a imagem sem altura declarada acompanhava a caixa
 * e virava uma elipse.
 */
.comment-list .avatar {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -70px;
	flex: 0 0 auto;
	width: 55px;
	height: 55px;
	object-fit: cover;
	border-radius: var(--mec-radius-circle);
}

.comment-list .children {
	margin-left: 2em;
}

/* Autor e data na mesma linha, como no modelo. */
.comment-author,
.comment-metadata {
	display: inline-block;
	line-height: 1.375rem; /* 22px */
}

.comment-author {
	position: relative;
	margin-right: 6px;
	margin-bottom: 6px;
}

.comment-list .fn {
	color: var(--mec-color-heading);
	font-size: var(--mec-font-size-base);
	font-style: normal;
	font-weight: var(--mec-font-weight-bold);
}

.comment-list .fn a {
	color: inherit;
}

/* O "disse:" que o WordPress emite não existe no modelo. */
.comment-list .says {
	display: none;
}

/* Comentário de quem assina o post ganha a cor de destaque. */
.comment-list .bypostauthor > .comment-body .fn {
	color: var(--mec-color-accent-text);
}

.comment-metadata a {
	color: var(--mec-color-meta);
	font-size: var(--mec-font-size-sm);
}

.comment-content p {
	margin-bottom: 1em;
}

.comment-content p:first-child {
	margin-top: 0;
}

.comment-content p:last-child {
	margin-bottom: 0.5em;
}

.comment-list .reply a {
	color: var(--mec-color-meta);
	font-size: 0.6875rem; /* 11px */
	font-weight: var(--mec-font-weight-bold);
}

/* ---------- Formulário de comentário ---------- */

/*
 * Medidas do `single.css` do modelo: borda de 3px separando a lista do
 * formulário, rótulo em bloco e 20px entre os campos.
 */
.comment-respond {
	margin-block-start: var(--mec-space-xl);
	padding-block-start: var(--mec-space-xl);
	border-block-start: 3px solid var(--mec-color-border);
}

.comment-form p {
	margin: 0 0 var(--mec-space-lg);
}

.comment-form label {
	display: block;
	margin-block-end: 0.5em;
	font-weight: var(--mec-font-weight-semibold);
}

/*
 * Email e site dividem a segunda linha; nome e comentário ocupam a sua
 * inteira. A ordem vem do filtro `comment_form_fields`, no functions.php —
 * aqui é só a largura.
 */
@media (width >= 481px) {
	.comment-form-email,
	.comment-form-url {
		display: inline-block;
		width: 50%;
		vertical-align: top;
	}

	.comment-form-email {
		padding-inline-end: var(--mec-space-md);
	}

	.comment-form-url {
		padding-inline-start: var(--mec-space-md);
	}
}

.comment-form-cookies-consent {
	position: relative;
}

.comment-form-cookies-consent label {
	display: inline-block;
	font-weight: var(--mec-font-weight-regular);
}

/* ---------- Posts relacionados (mosaico 2 + 3) ---------- */

/*
 * O modelo monta cinco cards em duas linhas: dois ocupando metade da coluna e
 * três ocupando um terço. A calha de 30px é aberta como padding à direita de
 * cada card e puxada de volta pela margem negativa do container, para a última
 * coluna encostar na borda. Por isso a largura do card inclui a calha — 390px
 * e 260px numa coluna de 750.
 *
 * O modelo ainda floata os cards; aqui basta o flex-wrap, que ele já declara
 * no container. As larguras batem em pixel, que é o que a auditoria compara.
 */
.mec_related_post_container .mec_posts_wrap {
	position: relative;
	overflow: hidden;
}

.mec_related_post_container .mec_posts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-inline-end: calc(-1 * var(--mec-space-xl));
}

/*
 * display: block anula a grade do card da listagem, que traria o gap dela
 * junto; aqui o respiro entre miniatura e texto é a margem do .mec_thumb.
 */
.mec_related_post_container .mec_post {
	display: block;
	/* As casas decimais são as do modelo: com menos, o card da segunda linha
	   cai em outro valor de subpixel e a auditoria acusa 0,016px. */
	width: 33.333333333%;
	margin-bottom: var(--mec-space-xl);
	padding-inline-end: var(--mec-space-xl);
}

.mec_related_post_container .mec_post:nth-child(-n + 2) {
	width: 50%;
}

.mec_related_post_container .mec_thumb {
	margin-bottom: var(--mec-space-md);
}

/* Miniatura em 2:1, contra os 16:9 da listagem. */
.mec_related_post_container .thumbnail-container {
	aspect-ratio: 2 / 1;
}

/* Título em 14px, e 16px só nos dois cards da primeira linha. */
.mec_related_post_container .mec_post_title {
	font-size: var(--mec-font-size-base);
}

.mec_related_post_container .mec_post:nth-child(-n + 2) .mec_post_title {
	font-size: var(--mec-font-size-md);
}

/* ---------- Blocos e paginação ---------- */

.mec_block_heading {
	position: relative;
	margin-bottom: var(--mec-space-xl);
	padding-bottom: var(--mec-space-xs);
	border-bottom: 2px solid var(--mec-color-border);
}

/*
 * O mesmo detalhe de 30x2px do título de widget, sobre a borda.
 *
 * Faltava em TODAS as telas, e não só na home: o modelo o desenha aqui desde
 * sempre — vermelho na home da demo, azul no post —, e nós não tínhamos em
 * lugar nenhum. A auditoria não podia acusar: ela lê estilo computado de
 * elementos, e isto é pseudo-elemento.
 *
 * `bottom: -2px` cobre a borda em vez de assentar acima dela, como no widget.
 */
.mec_block_heading::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: var(--mec-color-accent);
}

.mec_block_title {
	font-size: 1.0625rem;
	letter-spacing: normal;
	line-height: normal;
}

.mec_block_title strong {
	color: var(--mec-color-accent-text);
}

/* ---------- Paginação ---------- */

/*
 * O modelo TEM contraparte, ao contrário do que se supôs: o `author.html`
 * traz o bloco dentro do mesmo `.mec_block_navigation`, como
 * `.mec_navigation.mec_pagination.mec_pagenav_1.mec_aligncenter` com
 * `no_navtext` e `no_pageinfo`, e a folha está em `main.css`.
 *
 * As medidas abaixo são as de lá, escritas com os nomes que o WordPress
 * gera: `.page-numbers` é o `.page_number`, `.prev`/`.next` são o
 * `.page_nav`, e o `<nav>` da paginação faz o papel do `.mec_navigation`.
 *
 * Nada aqui é escopado no `.mec_block_navigation`: a paginação é a mesma em
 * qualquer lugar — listagem, busca, arquivo de autor e comentários —, e o
 * WordPress usa as mesmas classes nos dois `<nav>` que gera. Escopar deixaria
 * a dos comentários sem estilo nenhum, que era o caso antes.
 */

.mec_block_navigation {
	position: relative;
}

.pagination,
.comments-pagination {
	margin-bottom: var(--mec-space-xl);
	text-align: center;
}

.page-numbers {
	display: inline-block;
	min-width: 1.875rem; /* 30px */
	margin: 0 var(--mec-space-2xs) var(--mec-space-sm) 0;
	padding-inline: var(--mec-space-sm);
	border: 1px solid var(--mec-color-border);
	color: var(--mec-color-heading);
	font-size: 0.8125rem; /* 13px */
	font-weight: var(--mec-font-weight-bold);
	line-height: 1.875rem; /* 30px — é ela que dá a altura da caixa */
	text-align: center;
	transition: background-color var(--mec-transition-fast),
		border-color var(--mec-transition-fast),
		color var(--mec-transition-fast);
}

/*
 * A cor precisa ser repetida aqui porque o `a:hover` do base.css levaria o
 * texto para o accent se ninguém empatar com ele — e `a.page-numbers:hover`
 * empata.
 *
 * O fundo era o cinza do modelo; passou ao azul da marca por decisão de
 * padronizar todo hover de superfície. É desvio consciente do modelo.
 */
a.page-numbers:hover {
	background-color: var(--mec-color-accent-hover);
	border-color: var(--mec-color-accent-hover);
	color: var(--mec-color-surface-dark);
}

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

/* No modelo as reticências não têm caixa: só o número a menos no peso. */
.page-numbers.dots {
	border: 0;
	font-weight: var(--mec-font-weight-regular);
}

/*
 * `.omec-icon` vem fixo em 1.65rem (task 027); ao lado do número de 13px a
 * seta ficava desproporcional. Mesmo ajuste já feito no separador dos
 * breadcrumbs.
 */
.page-numbers.prev .omec-icon,
.page-numbers.next .omec-icon {
	width: 1rem;
	height: 1rem;
}

/* ---------- Breadcrumbs ---------- */

.mec_breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mec-space-3xs);
	margin-bottom: var(--mec-space-lg);
	color: var(--mec-color-text);
	font-size: var(--mec-font-size-base);
}

.mec_breadcrumbs #breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mec-space-3xs);
	color: var(--mec-color-muted);
	font-size: var(--mec-font-size-sm);
}

/*
 * A seta entre os níveis não segue os 1,65rem que o PO fixou para os ícones do
 * tema: ali ela fica maior que o próprio texto de 12px da trilha, e a linha
 * cresce de 22px para 26. 1rem, por decisão do PO. No modelo o separador mede
 * 10x12 ao lado do mesmo corpo de 12px.
 */
.mec_breadcrumbs .omec-icon {
	width: 1rem;
	height: 1rem;
}

/* ---------- Topbar como área de widgets ---------- */

/*
 * A topbar tem 35px e uma linha só. Os widgets entram como itens dessa linha,
 * e não como caixas empilhadas — por isso o `before_widget` da área registra um
 * `div` sem estilo de bloco, e a régua fica com o espaço que sobrar.
 */
.topbar_widgets {
	display: flex;
	align-items: center;
	gap: var(--mec-space-md);
	/*
	 * `min-width: 0` em toda a corrente é o que permite a régua encolher. Sem
	 * ele, um item flex nunca fica menor que o próprio conteúdo, e uma régua
	 * larga empurraria a barra para fora do contêiner.
	 */
	min-width: 0;
	width: 100%;
}

.topbar_widget {
	min-width: 0;
}

/* Só a régua cresce; a data ocupa o que precisa. */
.topbar_widget.omecanico_headline {
	flex: 1 1 auto;
}

.topbar_widget.omecanico_data {
	flex: 0 0 auto;
}

/*
 * O traço entre um widget e outro — o "Data | Headline" do desenho. É borda, e
 * não um caractere, para não entrar na seleção de texto nem ser lido em voz
 * alta como conteúdo.
 */
.topbar_widget + .topbar_widget {
	padding-left: var(--mec-space-md);
	/* Folga à direita para a régua não encostar no alternador de tema. */
	padding-right: var(--mec-space-sm);
	border-left: 1px solid var(--mec-color-border);
}

/*
 * As regras de celular desta barra ficam no `responsive.css`, junto das outras
 * decisões de faixa do cabeçalho: lá a topbar deixa de ser escondida em
 * `width <= 1024px` — a midbar e a bottombar continuam saindo — e a data some,
 * deixando a régua sozinha na linha.
 */

/* ---------- Sidebar ---------- */

.mec_sidebar .widget,
.mec_sidebar .mec_postblock {
	margin-bottom: var(--mec-space-xl);
}

/*
 * TÍTULO DE WIDGET DA SIDEBAR.
 *
 * O tamanho é o mesmo para QUALQUER nível de heading: quem escreve escolhe o
 * nível pela hierarquia do documento — que importa para leitor de tela e para
 * busca —, não pelo tamanho na tela. No modelo todos os títulos de widget têm a
 * mesma medida, a de h3.
 *
 * Os 17px são o mesmo valor literal de `.mec_block_title`, e não um token,
 * porque a escala do tema não tem esse degrau: `md` é 16px e `lg` é 18px.
 *
 * O seletor é de FILHO DIRETO de propósito. Widget de lista de posts traz
 * `h3` no título de cada item — com seletor de descendente, cada post do widget
 * ganharia borda e detalhe.
 */
.mec_sidebar .widget > :is(h1, h2, h3, h4, h5, h6) {
	position: relative;
	margin: 0 0 var(--mec-space-lg);
	padding-bottom: var(--mec-space-xs);
	border-bottom: 2px solid var(--mec-color-border);
	color: var(--mec-color-heading);
	font-size: 1.0625rem; /* 17px */
	font-weight: var(--mec-font-weight-bold);
	line-height: normal;
}

/*
 * O detalhe sobre a borda: 30px por 2px, medido no modelo, onde é vermelho
 * (#f70d28). Aqui é o azul do site, por pedido do PO.
 *
 * `bottom: -2px` faz o detalhe cobrir a borda em vez de ficar acima dela — é
 * o mesmo deslocamento do modelo, que ali vem de posição relativa em vez de
 * absoluta.
 */
.mec_sidebar .widget > :is(h1, h2, h3, h4, h5, h6)::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: var(--mec-color-accent);
}

/* ---------- Widget de últimos posts ---------- */

/*
 * Layout do "Premium Content" do modelo: miniatura de 120x86 flutuando à
 * esquerda, título de 15px e a data miúda em caixa alta embaixo.
 */
.mec_sidebar .wp-block-latest-posts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mec_sidebar .wp-block-latest-posts__list > li {
	/* Contém a flutuação da miniatura sem precisar de clearfix. */
	overflow: hidden;
	margin-bottom: var(--mec-space-xl);
}

.mec_sidebar .wp-block-latest-posts__list > li:last-child {
	margin-bottom: 0;
}

.mec_sidebar .wp-block-latest-posts__featured-image {
	float: left;
	margin-right: var(--mec-space-md);
}

.mec_sidebar .wp-block-latest-posts__featured-image img {
	display: block;
	width: 120px;
	height: 86px;
	object-fit: cover;
}

.mec_sidebar .wp-block-latest-posts__post-title {
	display: block;
	margin-bottom: var(--mec-space-2xs);
	color: var(--mec-color-heading);
	font-size: 0.9375rem; /* 15px, como no modelo */
	font-weight: var(--mec-font-weight-bold);
	line-height: 1.4;
}

.mec_sidebar .wp-block-latest-posts__post-title:hover {
	color: var(--mec-color-accent-text);
}

.mec_sidebar .wp-block-latest-posts__post-date {
	display: block;
	color: var(--mec-color-meta);
	font-size: var(--mec-font-size-xs);
	letter-spacing: var(--mec-letter-spacing-wide);
	text-transform: uppercase;
}

/* ---------- Widget de categorias ---------- */

.mec_sidebar .widget_categories ul,
.mec_sidebar .wp-block-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * As linhas divisórias são pedido do PO e NÃO estão no modelo, onde os itens só
 * têm 6px de respiro e nada os separa. Ficam registradas como decisão, não como
 * fidelidade.
 */
.mec_sidebar .widget_categories li,
.mec_sidebar .wp-block-categories li {
	padding-block: var(--mec-space-xs);
	border-bottom: 1px solid var(--mec-color-border);
}

.mec_sidebar .widget_categories li:last-child,
.mec_sidebar .wp-block-categories li:last-child {
	border-bottom: 0;
}

.mec_sidebar .widget_categories li a,
.mec_sidebar .wp-block-categories li a {
	color: var(--mec-color-heading);
	font-size: var(--mec-font-size-base);
	font-weight: var(--mec-font-weight-bold);
	text-transform: uppercase;
}

.mec_sidebar .widget_categories li a:hover,
.mec_sidebar .wp-block-categories li a:hover {
	color: var(--mec-color-accent-text);
}

/* ---------- Rodapé ---------- */

/*
 * O contêiner não tem respiro próprio: quem tem são os dois blocos de dentro,
 * cada um com o seu. Concentrar o padding aqui impedia dar folgas diferentes
 * ao corpo do rodapé e à faixa de baixo, que no modelo são 60px e 20px.
 *
 * Rodapé em tom de cinza, pedido da cliente — não mais o quase-preto do
 * modelo. Texto no tom mais forte da escala (`--mec-color-heading`), pro
 * contraste ficar alto sobre o cinza; os títulos (`.mec_footer_title` e os
 * headings de widget, mais abaixo) saem desse grupo e vão de accent — são a
 * única cor de marca no meio do cinza.
 */
.mec_footer {
	margin-top: var(--mec-space-3xl);
	background-color: var(--mec-color-footer-bg);
	color: var(--mec-color-footer-muted);
}

/*
 * `--mec-color-footer-muted` e `--mec-color-accent` — NÃO `--mec-color-heading`
 * nem `--mec-color-accent-text` —, porque estes dois últimos mudam de valor no
 * modo escuro do SITE (`--mec-color-heading` vira quase branco, pra combinar
 * com um fundo escuro que o rodapé não tem mais). O fundo do rodapé é FIXO,
 * então o texto também precisa ser: com o token errado, o link virava quase
 * branco sobre o cinza fixo no modo escuro — 2:1 de contraste, falha grave.
 */
.mec_footer a {
	color: var(--mec-color-footer-muted);
}

.mec_footer a:hover {
	color: var(--mec-color-accent);
}

.mec_footer_primary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mec-gutter);
	padding-block: var(--mec-space-3xl); /* 60px, como no modelo */
	/*
	 * O recuo lateral é da GRADE, não da coluna.
	 *
	 * Antes cada `.footer_column` tinha 15px de padding, e com o `gap` de 30 o
	 * vão entre duas colunas virava 60px — o dobro dos 30 do modelo, onde as
	 * colunas se encostam e o espaço vem só dos dois paddings.
	 *
	 * Tirar o padding da coluna sem repor nada resolveria o vão e quebraria
	 * outra coisa: medido, o conteúdo do rodapé começa em x=150 no mesmo eixo do
	 * título do post, e sem o recuo iria para 135, desalinhado da matéria acima.
	 * Passando o recuo para a grade, o vão fica nos 30px do `gap` e o eixo
	 * continua em 150.
	 */
	padding-inline: var(--mec-space-md);
}

@media (width >= 768px) {
	.mec_footer_primary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width >= 992px) {
	.mec_footer_primary {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mec_footer_heading {
	margin-bottom: var(--mec-space-md);
}

/*
 * Título de widget no rodapé. Os 20px de folga e os 16px vêm do modelo.
 *
 * O `:is()` cobre o widget de bloco, que imprime o próprio heading e não passa
 * pelo `before_title` do tema — sem ele, o widget clássico e o de bloco sairiam
 * com dois tamanhos diferentes na mesma coluna.
 *
 * SEM borda e SEM o `::after` de detalhe, ao contrário da sidebar: medido no
 * modelo, o `.mec_footer_heading` não tem nenhum dos dois — mas o título
 * ainda ganha destaque de marca, com `--mec-color-accent` em vez do tom
 * escuro do resto do texto (pedido da cliente).
 */
.mec_footer_title,
.footer_column .footer_widget > :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 var(--mec-space-lg);
	color: var(--mec-color-accent);
	font-size: var(--mec-font-size-md);
	font-weight: var(--mec-font-weight-bold);
	/*
	 * SEM `line-height` aqui. Eu tinha escrito `normal` e a auditoria pegou: o
	 * modelo tem 22,4px, que é o 1,4 herdado do corpo. Declarar `normal`
	 * entregava a entrelinha ao cálculo da fonte e encurtava a linha.
	 */
}

.footer_widget ul {
	display: flex;
	flex-direction: column;
	gap: var(--mec-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * O bloco de redes sociais (`core/social-links`) é um `ul`, e a regra acima o pegava: coluna e `gap` de
 * lista de links empilhavam as caixas quadradas. Ele tem desenho próprio (blocks.css: caixas de 60px em
 * linha, lacuna de .25rem) — aqui só se desfaz a herança. Especificidade 0,2,0 contra 0,1,1 da regra acima.
 */
.footer_widget .wp-block-social-links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem;
}

/* No rodapé as caixas são de 40x40 (pedido do PO), com ícone de 18px; na home e na sidebar seguem 60x60. */
.footer_widget .wp-block-social-links .wp-social-link {
	width: 40px;
	height: 40px;
}

.footer_widget .wp-block-social-links .wp-social-link svg {
	width: 18px;
	height: 18px;
}

/*
 * O widget de posts recentes do core emite a data num <span class="post-date">
 * logo depois do link, sem quebra. Sem regra própria ela cola no fim do título
 * — "…no Nissan March 1.0 14 de abril de 2026" numa linha só.
 */
.footer_widget .post-date {
	display: block;
	color: var(--mec-color-footer-muted);
	font-size: var(--mec-font-size-sm);
}

/*
 * Widget de texto no rodapé, e a folga entre widgets de texto SEGUIDOS.
 *
 * A primeira versão desta regra mirou o `<p>` e não resolveu nada, porque eu li
 * a estrutura errado: a coluna 1 não tem um widget com três parágrafos, tem
 * TRÊS WIDGETS DE TEXTO, cada um com um `<p>` só. Sendo filho único, o
 * parágrafo é sempre o último e caía fora do `:not(:last-child)` — medido, os
 * vãos entre os três eram 0.
 *
 * Então a folga é do widget. `:not(:last-child)` porque o espaço abaixo do
 * último é do rodapé, não do widget: com ele, a coluna ficaria mais alta que as
 * vizinhas.
 *
 * Só `.widget_text`: nas colunas 2 a 4 o vão entre o widget de título e o de
 * conteúdo já é de 20px, herdado da margem do próprio título, e uma regra para
 * `.footer_widget` em geral somaria outra folga por cima.
 *
 * Os 20px são o mesmo ritmo dos parágrafos do corpo do post, medido lá.
 */
.footer_column .widget_text:not(:last-child) {
	margin-bottom: var(--mec-space-lg);
}

/* Vale também para um widget que traga mais de um parágrafo. */
.footer_column .widget_text p:not(:last-child) {
	margin-bottom: var(--mec-space-lg);
}

/* ---------- Widgets no rodapé: últimos posts e categorias ---------- */

/*
 * No rodapé o widget de últimos posts NÃO leva miniatura. A coluna tem um
 * quarto da largura da página e a caixa de 120px do modelo comeria metade dela,
 * empurrando o título para duas ou três linhas em cada item.
 */
.footer_column .wp-block-latest-posts__featured-image {
	display: none;
}

.footer_column .wp-block-latest-posts__list > li {
	margin-top: 0;
	margin-bottom: var(--mec-space-sm);
}

/*
 * Sem `color` aqui — o rodapé virou cinza e este seletor concorre, em
 * empate de especificidade, com a regra mais abaixo (`.footer_column
 * .wp-block-latest-posts__post-title` dentro do grupo de "categorias"), que
 * já resolve isso e vence por vir depois. Declarar de novo aqui só criava
 * uma cor morta, nunca aplicada, e um lugar a mais pra esquecer de atualizar.
 */
.footer_column .wp-block-latest-posts__post-title {
	display: block;
	font-size: var(--mec-font-size-base);
	line-height: 1.4;
}

.footer_column .wp-block-latest-posts__post-date {
	display: block;
	color: var(--mec-color-footer-muted);
	font-size: var(--mec-font-size-sm);
}

/*
 * Categorias no rodapé, como no modelo: 14px em negrito, capitalizado — e não
 * em caixa alta como na sidebar —, com 10px de respiro e sem divisória.
 *
 * A cor é a 80% do modelo, e não pura: sobre o fundo do rodapé o preto cheio
 * fica mais duro do que o resto da coluna pede. Era branco a 80% antes do
 * rodapé virar cinza (pedido da cliente); hoje é preto a 80%, mesmo
 * raciocínio, cor invertida. Contraste sobre `--mec-color-footer-bg`: 5,8:1,
 * acima do mínimo de 4,5:1.
 */
/*
 * DUAS COLUNAS, como no modelo: `column-count: 2` com 20px de calha, medido lá.
 *
 * O `display: block` é necessário e não é redundante — o `.footer_widget ul`
 * acima faz da lista uma coluna flex, e flex desliga o layout multicoluna. Ele
 * também aposenta o `gap` daquela regra, de modo que o respiro passa a vir só
 * do padding do item, como no modelo; os dois somados davam 18px onde o modelo
 * tem 10.
 *
 * Aqui NÃO cabe um `gap: 0` para reforçar isso. `gap` é atalho e governa também
 * a calha entre colunas: escrito depois do `column-gap`, zerava a calha de 20px
 * — medido, as duas colunas saíam encostadas.
 *
 * `break-inside: avoid` impede que um nome de categoria longo se parta entre o
 * pé de uma coluna e o topo da outra.
 */
.footer_column .widget_categories ul,
.footer_column .wp-block-categories {
	display: block;
	columns: 2;
	column-gap: var(--mec-space-lg);
}

.footer_column .widget_categories li,
.footer_column .wp-block-categories li {
	break-inside: avoid;
	padding-bottom: var(--mec-space-sm);
}

.footer_column .widget_categories li a,
.footer_column .wp-block-categories li a,
.footer_column .wp-block-latest-posts__post-title {
	color: rgb(13 19 23 / 80%);
}

.footer_column .widget_categories li a,
.footer_column .wp-block-categories li a {
	font-size: var(--mec-font-size-base);
	font-weight: var(--mec-font-weight-bold);
	text-transform: capitalize;
}

/*
 * O hover precisa ser declarado aqui, e não herdado do `.mec_footer a:hover`
 * que já existe. É especificidade: o seletor das categorias tem dois elementos
 * (`li a`) contra um do genérico, e vencia até no hover — medido, a cor não
 * mudava. O título do último post não tinha o problema porque o seletor dele
 * não desce até o `li`, e por isso o hover do rodapé funcionava ali.
 *
 * A cor é a mesma que o genérico entrega ao título do último post, que o PO
 * aprovou.
 */
.footer_column .widget_categories li a:hover,
.footer_column .wp-block-categories li a:hover {
	color: var(--mec-color-accent);
}

/*
 * Item do widget "Últimos posts" sem imagem destacada. O bloco do core não
 * imprime a caixa da miniatura nesse caso, e o título ia parar colado na
 * margem, desalinhado dos vizinhos.
 *
 * A LISTA PRECISA TER PELO MENOS UMA IMAGEM para a reserva valer, e é o que a
 * condição no `:has()` do `<ul>` garante. Sem ela, um widget configurado para
 * NÃO mostrar imagem destacada — em que nenhum item tem a caixa — ganharia uma
 * miniatura de reserva em todos os itens, que é justamente o contrário do que
 * foi configurado. Pedido explícito do PO, e o core não ajuda: as classes que
 * ele põe no `<ul>` (`has-dates`, `has-author`, `has-excerpts`) não incluem
 * nada sobre a imagem, então a regra tem de se decidir pelo conteúdo.
 *
 * A reposição é por CSS porque quem monta o `<li>` é o core, sem gancho para
 * item: o `::before` refaz a caixa com a flutuação, a medida e a folga que o
 * próprio bloco usa, e traz dentro a mesma miniatura de reserva dos cards.
 *
 * `contain`, e não `cover`: a reserva é 16:9 e a caixa do modelo é 120x86
 * (~1,4:1) — recortada para cobrir, ela cortaria o logo. O fundo do arquivo e o
 * desta regra são o mesmo cinza, então a sobra não aparece.
 */
.wp-block-latest-posts__list:has(.wp-block-latest-posts__featured-image)
	> li:not(:has(.wp-block-latest-posts__featured-image))::before {
	content: '';
	float: left;
	width: 120px;
	height: 86px;
	margin: 0 var(--mec-space-md) var(--mec-space-sm) 0;
	background: var(--mec-color-surface-alt) url('../images/thumb-placeholder.svg') no-repeat center / contain;
}

/*
 * Pílula de tag. No modelo ela é preenchida e sem borda, e a geometria é a
 * mesma em qualquer contexto — 11px com 1px de espaçamento, padding de 3px/10px
 * —, mudando só as cores conforme o fundo.
 *
 * A cor padrão (fundo claro, texto #616161) já vem da regra unificada lá em
 * cima (`.widget_tag_cloud a` na pílula de tag/categoria); esta aqui é só
 * geometria, para uma nuvem de tags em qualquer lugar não nascer torta. O que
 * fica escopado ao `.mec_footer` abaixo é só a variante para o fundo cinza do
 * rodapé, com contraste próprio — não o caso geral.
 *
 * O !important no font-size é necessário: o widget do core escreve um
 * font-size inline em cada tag, proporcional à contagem de posts.
 */
.widget_tag_cloud a {
	display: inline-block;
	margin: 0 3px 6px 0;
	padding: 3px 10px;
	border: 0;
	font-size: 11px !important;
	letter-spacing: 1px;
}

/*
 * Pedido da cliente: pílula de tag SÓ no rodapé com o fundo na cor de marca
 * (`--mec-color-accent`, #004489) translúcido — 50% em repouso, 75% no
 * hover —, texto branco fixo nos dois estados. `rgb(0 68 137 / ...)` é o
 * mesmo azul do token em RGB: precisa do canal alfa, que `var()` sozinho não
 * dá sem `color-mix()` ou sintaxe de cor relativa.
 */
.mec_footer .widget_tag_cloud a {
	background-color: rgb(0 68 137 / 50%);
	color: #fff;
}

.mec_footer .widget_tag_cloud a:hover {
	background-color: rgb(0 68 137 / 75%);
	color: #fff;
}

/*
 * A faixa de baixo mantém a cor original do modelo (`#141414`), mesmo com o
 * corpo do rodapé agora em cinza — pedido da cliente. Como o texto e os
 * ícones dela precisam continuar claros sobre esse fundo escuro,
 * `.copyright` NÃO herda
 * `--mec-color-footer-muted`: esse token agora é escuro, o par certo pro
 * cinza do corpo, não para esta faixa.
 */
.mec_footer_bottom {
	padding-block: var(--mec-space-lg); /* 20px em cima e embaixo */
	background-color: #141414;
}

.mec_footer_bottom .container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mec-space-md);
	align-items: center;
	justify-content: space-between;
}

/*
 * `#a9afb3` direto, e não `--mec-color-footer-muted`: aquele token virou
 * escuro quando o CORPO do rodapé passou a cinza, e esta faixa continua
 * escura — precisa do valor claro que o token tinha antes.
 */
.copyright {
	margin: 0;
	color: #a9afb3;
	font-size: var(--mec-font-size-sm);
}

/* ---------- Redes sociais ---------- */

/*
 * Sem caixa, sem cor de marca — ícone na cor de título do tema
 * (`--mec-color-heading`), o tom mais forte da escala. Escurece pra accent no
 * hover, mesmo par de qualquer link do tema. Fundo sempre transparente.
 *
 * A cor padrão segue `--mec-color-bg` (topbar e off-canvas: claro no tema
 * claro, escuro no escuro), e `--mec-color-heading` já acompanha certo nos
 * dois. O rodapé é a exceção — a faixa de baixo (`.mec_footer_bottom`) é
 * escura FIXA, independente do tema do site e do cinza do corpo —, por isso
 * o override logo abaixo usa a mesma cor clara que `.copyright` já usa ali.
 */
.socials_widget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

/*
 * Traço entre a régua de destaques e as redes, na topbar — mesma borda que já
 * separa "Data | Régua" (`.topbar_widget + .topbar_widget`, acima), e não um
 * caractere `|`: pelo mesmo motivo de lá, não entra na seleção de texto nem é
 * lido em voz alta. `.mec_nav_socials` é sempre o primeiro item da coluna
 * direita, então a borda fica na fronteira entre as duas colunas.
 */
.mec_nav_socials {
	padding-left: var(--mec-space-md);
	border-left: 1px solid var(--mec-color-border);
}

.socials_widget a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--mec-color-heading);
	transition: color var(--mec-transition-fast);
}

.socials_widget a:hover,
.socials_widget a:focus-visible {
	color: var(--mec-color-accent);
}

.socials_widget .omec-icon {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/*
 * Redes vindas de widget (bloco `core/social-links`, área "Redes Sociais"): o bloco tem desenho próprio em
 * blocks.css (caixas de 60px de cor da marca, para a sidebar), então dentro de `.socials_widget` ele volta
 * à régua compacta de ícones — caixa de 1.75rem, ícone de 1rem, sem fundo — igual à que os links soltos tinham.
 */
:is(.socials_widget, .topbar_widget) .wp-block-social-links {
	display: flex;
	flex-wrap: nowrap; /* a linha da topbar é estreita: sem isso os ícones empilham */
	gap: 0;
}

/*
 * Vale também para um bloco de redes colocado direto na área "Topbar" (`.topbar_widget`), além da área
 * "Redes Sociais" (`.socials_widget`): no cabeçalho o desenho é sempre o mesmo.
 *
 * A cor vai no `<li>`, e não no `<a>`: o core fixa `color: currentColor` no link com especificidade maior
 * que qualquer seletor razoável daqui, então o link só herda — e herdar é o que ele faz. `!important`
 * porque quem monta o widget pode escolher cor de ícone/fundo no editor (vira estilo inline no `<li>`),
 * e no cabeçalho o desenho é um só: ícone escuro sobre fundo transparente.
 */
:is(.socials_widget, .topbar_widget) .wp-block-social-links .wp-social-link {
	width: auto;
	height: auto;
	border-radius: 0;
	transform: none !important; /* o core cresce o ícone em 1.1x no hover; no cabeçalho só a cor muda */
	color: var(--mec-color-heading) !important;
	background: transparent !important;
	transition: color var(--mec-transition-fast);
}

:is(.socials_widget, .topbar_widget) .wp-block-social-links .wp-social-link:hover,
:is(.socials_widget, .topbar_widget) .wp-block-social-links .wp-social-link:focus-within {
	color: var(--mec-color-accent) !important;
}

:is(.socials_widget, .topbar_widget) .wp-block-social-links .wp-social-link a {
	width: 1.75rem;
	height: 1.75rem;
	filter: none;
}

:is(.socials_widget, .topbar_widget) .wp-block-social-links .wp-social-link svg {
	width: 1rem;
	height: 1rem;
}

/*
 * Redes no menu off-canvas (celular): centralizadas, ícone de 1.25rem e 1rem de respiro abaixo da lista, antes
 * da linha de copyright. A caixa clicável de 1.75rem do cabeçalho continua a mesma.
 */
.mec_aside_item .mec_social_widget {
	flex: 1 1 100%; /* o contêiner `.socials_widget` é flex: sem isto o widget encolhe ao conteúdo e não há folga para centralizar */
}

.mec_aside_item .wp-block-social-links {
	justify-content: center;
	margin-bottom: 1rem;
}

.mec_aside_item .wp-block-social-links .wp-social-link svg {
	width: 1.25rem;
	height: 1.25rem;
}

/*
 * Alternador de tema na mesma escala dos ícones sociais ao lado, na topbar —
 * mesma caixa de 1.75rem, mesmo ícone de 1rem dentro. Sem isso ele ficava no
 * tamanho de botão padrão do navegador (padding próprio, ícone em 1.65rem),
 * maior e desalinhado dos ícones vizinhos.
 */
.omec-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	color: var(--mec-color-heading);
	transition: color var(--mec-transition-fast);
}

.omec-theme-toggle:hover,
.omec-theme-toggle:focus-visible {
	color: var(--mec-color-accent);
}

.omec-theme-toggle .omec-icon {
	width: 1rem;
	height: 1rem;
}

/*
 * Sol no tema claro, lua no escuro. O estado vem do CSS e não do JS — `data-mec-theme` quando o usuário
 * escolheu, `prefers-color-scheme` quando não —, então o ícone certo já aparece na primeira pintura, sem
 * esperar o módulo darkmode.js.
 */
.omec-theme-toggle .omec-icon--moon {
	display: none;
}

:root[data-mec-theme="dark"] .omec-theme-toggle .omec-icon--sun {
	display: none;
}

:root[data-mec-theme="dark"] .omec-theme-toggle .omec-icon--moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-mec-theme="light"]) .omec-theme-toggle .omec-icon--sun {
		display: none;
	}

	:root:not([data-mec-theme="light"]) .omec-theme-toggle .omec-icon--moon {
		display: block;
	}
}

/* ---------- Anúncios ---------- */

/*
 * Slot sem anúncio não pode ocupar espaço — na referência ele mede 0 em
 * altura e em margem.
 *
 * `:empty` no container não resolve: ele sempre contém o .ads-wrapper (e a
 * quebra de linha entre as tags), então nunca casa. Quem casa é o wrapper.
 * Por isso a margem vive no wrapper, e não no container: escondido o
 * wrapper, a margem some junto.
 */
.mec_ad:empty,
.ads-wrapper:empty {
	display: none;
}

.mec_ad {
	text-align: center;
}

.ads-wrapper {
	margin-block: var(--mec-space-md);
}

/* ---------- Voltar ao topo ---------- */

/*
 * Botão de voltar ao topo, com as medidas do modelo: quadrado de 46px, canto
 * de 5px, fundo cinza translúcido e borda fina. O ícone é o SVG do tema, no
 * lugar do glifo do FontAwesome.
 *
 * Ele nasce escondido e só aparece depois que a página rola — o `.show` vem do
 * `to-top.js`. Antes ficava fixo na tela desde o topo, ocupando espaço sem ter
 * o que fazer.
 */
.jscroll-to-top {
	position: fixed;
	inset-block-end: 1.875rem; /* 30px */
	inset-inline-end: 1.875rem;
	z-index: var(--mec-z-sticky);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--mec-transition-fast),
		visibility 0s linear var(--mec-transition-fast);
}

.jscroll-to-top.show {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--mec-transition-fast), visibility 0s;
}

.jscroll-to-top_link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.875rem; /* 46px */
	height: 2.875rem;
	border: 1px solid rgb(0 0 0 / 11%);
	border-radius: 5px;
	background-color: rgb(180 180 180 / 15%);
	color: var(--mec-color-muted);
	transition: background-color var(--mec-transition-fast),
		color var(--mec-transition-fast);
}

/*
 * O hover do modelo é só opacidade, o que num fundo translúcido quase não
 * aparece. Aqui ele escurece o fundo e o ícone — mesma intenção, com retorno
 * visível, e o contraste do ícone sobe de 2,2:1 para 5,1:1 sobre a página.
 */
.jscroll-to-top_link:hover {
	background-color: rgb(0 0 0 / 55%);
	color: var(--mec-color-inverse);
}

/* ---------- Ícones SVG (task 027) ---------- */

.omec-icon {
	display: inline-block;
	/*
	 * Medida FIXA em rem, e não relativa ao corpo do texto em volta. Os ícones
	 * do tema aparecem em contextos de corpos diferentes — barra de 12px, botão
	 * de 14px, menu de 18px — e com `em` cada um saía de um tamanho. Ajuste do
	 * PO.
	 */
	width: 1.65rem;
	height: 1.65rem;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}

/*
 * O hambúrguer é o maior dos ícones: no celular ele é o alvo principal do
 * cabeçalho, e divide a barra com o logo e a busca.
 */
.mec_mobile_toggle .omec-icon {
	width: 1.85rem;
	height: 1.85rem;
}

/* ---------- Cabeçalho de busca / 404 ---------- */

.mec_archive_header {
	margin-bottom: var(--mec-space-2xl);
}

.mec_archive_title {
	margin-bottom: var(--mec-space-md);
	font-size: var(--mec-font-size-2xl); /* 26px, menor que o título de categoria */
	letter-spacing: -0.02em;
	line-height: 1.25;
}

/*
 * A caixa acompanha a largura da coluna, como no modelo — o `pages.css` de lá
 * só declara fundo e padding, sem limite de largura.
 */
.mec_archive_search {
	padding: var(--mec-space-lg);
	/*
	 * Token: o #f7f7f7 literal continuava claro no modo escuro, e o texto —
	 * que vira claro — ficava com razão 1,86 em cima dele.
	 */
	background-color: var(--mec-color-surface);
}

/*
 * O campo aqui não precisa de regra própria: altura, padding, cor e peso são
 * os do campo padrão, agora que o base.css carrega as medidas do modelo.
 */
.mec_archive_search .mec_search_form {
	display: flex;
	align-items: center;
}

.mec_archive_search .mec_search_button {
	position: static;
	padding: 0 var(--mec-space-lg);
	font-weight: var(--mec-font-weight-bold);
	letter-spacing: 1px;
	line-height: 40px;
	text-transform: uppercase;
}

.mec_404_message {
	max-width: 44rem;
	margin-bottom: var(--mec-space-lg);
	color: var(--mec-color-meta);
	font-size: var(--mec-font-size-md);
}

.mec_404_header .mec_archive_title {
	margin-bottom: var(--mec-space-sm);
}

/* Estado de zero resultados. */
.mec_search_noresult {
	display: flex;
	flex-direction: column;
	gap: var(--mec-space-md);
	align-items: flex-start;
	padding: var(--mec-space-xl);
	background-color: var(--mec-color-surface);
}

.mec_search_noresult p {
	margin: 0;
	color: var(--mec-color-heading);
	font-size: var(--mec-font-size-md);
}

.mec_search_noresult .mec_search_form {
	width: 100%;
	max-width: 28rem;
}

.mec_empty_content {
	padding: var(--mec-space-xl);
	background-color: var(--mec-color-surface);
	color: var(--mec-color-meta);
	text-align: center;
}