/* ============================================================================
 * Componentes que no knxsite eram utilitários do Tailwind ou primitivos do Radix,
 * e portanto não existem em khoinix.css. Valores medidos no site em execução
 * (tests/visual/extract-globals.mjs), não deduzidos da documentação do Tailwind.
 *
 * Esta folha é AUTORAL — não é gerada por scripts/sync-css.mjs.
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * Risco #7 — wrappers do Gutenberg quebrando o layout
 *
 * O Gutenberg envolve cada template part em <div class="wp-block-template-part">.
 * Esse box tem a altura do próprio cabeçalho (116px), e um elemento `position: sticky`
 * só gruda dentro dos limites do pai — então o navbar rolava junto com a página em vez
 * de ficar fixo no topo. Medido: após rolar 600px, `top` ia para -600 no WordPress
 * contra 0 no knxsite.
 *
 * `display: contents` remove o box do wrapper da árvore de layout sem remover o
 * elemento do DOM: o navbar volta a ter o mesmo pai efetivo que tem no original.
 * O wrapper é um <div> sem semântica, então não há perda de acessibilidade.
 * -------------------------------------------------------------------------- */

.wp-block-template-part {
	display: contents;
}

/* --------------------------------------------------------------------------
 * Risco #7, segundo caso — o blockGap do layout "flow" (corrigido no theme.json)
 *
 * Por padrão o WordPress emite, no `global-styles-inline-css`:
 *
 *   :root :where(.is-layout-flow) > *          { margin-block: 24px 0 }
 *   :where(.wp-site-blocks) > *                { margin-block-start: 24px }
 *
 * Como todo `core/group` e o `core/post-content` ganham `is-layout-flow` sozinhos, e
 * como `.wp-site-blocks` envolve cabeçalho, `<main>` e rodapé em qualquer template de
 * bloco, isso somava 24px de deslocamento e 48px de altura em TODAS as páginas —
 * inclusive as 7 institucionais da Fase 3 — e mais 24px entre cada seção montada por
 * pattern. Medido em /servicos/: `<section class="sv-hero">` com margin-block-start 0 e
 * todas as seções seguintes com 24px, contra 0 no knxsite em todas.
 *
 * A correção não está aqui: está em `theme.json`, com `settings.spacing.blockGap: null`.
 * Isso faz o WordPress não emitir nenhuma dessas regras — o design nunca usou blockGap,
 * o espaçamento vertical vem do padding das seções. Tentar neutralizar por CSS não
 * funciona bem: a regra do core é `:root :where(...)`, ou seja especificidade (0,1,0),
 * a mesma de qualquer `.classe` de khoinix.css — uma neutralização com a mesma
 * especificidade, carregada depois, apagaria também as margens legítimas do Design System.
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Utilitário `container` do Tailwind
 *
 * A classe `container` aparece no JSX do knxsite, então o Tailwind v4 emite o utilitário
 * `.container { width: 100% }` (mais max-widths por breakpoint, que perdem para o
 * `.container` sem camada de khoinix.css). O `width: 100%` não muda nada quando o pai é
 * um bloco — e por isso passou despercebido até aqui —, mas muda tudo quando o pai é
 * flex: sem ele o container vira item flex de largura de conteúdo.
 *
 * Medido em /conteudo/[slug]: `.av2-cover` é `display: flex`, e `.av2-cover .container`
 * saía com 774px (largura do conteúdo) em vez dos 980px de `max-width` do original.
 * -------------------------------------------------------------------------- */

.container {
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Menu mobile (era Radix Sheet + utilitários Tailwind)
 * -------------------------------------------------------------------------- */

/* Overlay: Tailwind `fixed inset-0 z-50 bg-black/80` */
.nav-sheet-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	/* O Tailwind v4 emite oklab para bg-black/80; usamos o mesmo espaço de cor. */
	background-color: oklab(0 0 0 / 0.8);
	animation: khoinix-fade-in 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-sheet-overlay[data-state="closed"] {
	animation: khoinix-fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Painel: `fixed inset-y-0 right-0 z-50 h-full w-3/4 border-l bg-background p-6 shadow-lg`
   mais `sm:max-w-sm` (384px a partir de 640px). */
.nav-sheet {
	position: fixed;
	inset-block: 0;
	right: 0;
	z-index: 50;
	height: 100%;
	width: 75%;
	padding: 24px;
	gap: 16px;
	background-color: var(--background);
	border-left: 1px solid var(--border);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	animation: khoinix-slide-in-right 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
	.nav-sheet {
		max-width: 384px;
	}
}

.nav-sheet[data-state="closed"] {
	animation: khoinix-slide-out-right 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* SheetHeader: `flex flex-col space-y-2 text-center sm:text-left` */
.nav-sheet-header {
	display: flex;
	flex-direction: column;
	text-align: center;
}

@media (min-width: 640px) {
	.nav-sheet-header {
		text-align: left;
	}
}

/*
 * O título do sheet herda o `h2` de khoinix.css — 32px/700 em General Sans — e não os
 * 18px que `text-lg` sugeriria. Motivo: no Tailwind v4 os utilitários ficam em
 * @layer utilities, e regra sem camada vence regra em camada, então o seletor de
 * elemento `h2` ganha de `.text-lg`. Medido no original: 32px, peso 700, e a margem
 * inferior de 16px que khoinix.css dá a todo heading — por isso não zeramos aqui.
 */

/* Botão de fechar: `absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100`.
   Sem `border` nem `line-height` próprios: os dois vêm do Preflight e de khoinix.css,
   como no original. */
.nav-sheet-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	padding: 0;
	color: inherit;
	/* Sem `cursor`: o original não declara nenhum, e o Preflight do v4 deixa o padrão do
	   navegador (`default`). Ver a nota em compat-preflight.css. */
	border-radius: var(--radius-sm);
	opacity: 0.7;
	transition: opacity var(--duration-normal) var(--ease-out);
}

.nav-sheet-close:hover {
	opacity: 1;
}

/* O original usa `focus:outline-none focus:ring-2 focus:ring-offset-2`, ou seja, o anel
   de foco é box-shadow (offset na cor do fundo + anel), não outline. E é `:focus`, não
   `:focus-visible` — o painel move o foco por código ao abrir, e `:focus-visible` não
   casaria nesse caso. */
.nav-sheet-close:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

@keyframes khoinix-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes khoinix-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes khoinix-slide-in-right {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes khoinix-slide-out-right {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}

/* Trava a rolagem do fundo enquanto o painel está aberto, como o Radix faz. */
body.khoinix-sheet-aberto {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Botão "Gerenciar cookies" do rodapé
 *
 * No knxsite é um <button> com utilitários Tailwind:
 * `text-inherit hover:underline bg-transparent border-none cursor-pointer p-0 text-sm`.
 * -------------------------------------------------------------------------- */

.footer-cookie-link {
	color: inherit;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	text-align: inherit;
}

.footer-cookie-link:hover {
	text-decoration: underline;
}

/* ----------------------------------------------------------------------------
 * Anel de foco em superfície escura
 *
 * `khoinix.css` traz `:focus-visible { outline: 2px solid var(--primary) }`, e o
 * sombreamento de tokens do ShadCN resolve `--primary` para quase preto — o mesmo
 * defeito que deixa o botão do hero escuro em vez de laranja, reproduzido de
 * propósito desde a Fase 1.
 *
 * Em fundo claro o anel aparece. Em fundo escuro ele desaparece por completo:
 *
 *   contorno  oklch(0.205 0 0)  ≈ #1a1a1a
 *   rodapé    #0a0b0c           → contraste 1,14:1
 *   fechamento de contato #16283c → 1,16:1
 *   chip ativo do blog    #243B53 → 1,51:1
 *
 * A norma pede 3:1 para indicador de foco. Navegar por Tab no rodapé era navegar
 * às cegas — foi assim que o dono do site encontrou, ao validar a Fase 10.
 *
 * A correção não toca em nenhum fundo: só na cor do anel, e só onde o fundo é
 * escuro. `--foco` existe para que uma superfície escura nova precise declarar uma
 * linha, não descobrir este comentário. O padrão continua sendo `--primary`, então
 * todo o resto do site fica idêntico ao original.
 *
 * O knxsite tem o mesmo defeito e não foi alterado: é somente leitura durante a
 * migração. Divergência deliberada, como o domínio corrigido na mesma fase.
 * -------------------------------------------------------------------------- */
:root {
	--foco: var(--primary);
}

:focus-visible {
	outline-color: var(--foco);
}

.footer,
.ct-fechamento,
.cta-form-section,
.blog-chip.active {
	--foco: var(--color-gray-100);
}

/* ----------------------------------------------------------------------------
 * Contraste do "ver tudo" da seção "Continue lendo" — WCAG AA
 *
 * `--color-orange-700` (#C65F18) sobre `--bg-subtle` (#F7F8F9) mede **3,91:1**, e
 * os 15px em peso 600 do link exigem 4,5:1. `--color-orange-800` (#9C4A14) dá
 * 5,80:1: continua sendo laranja da marca, e da mesma escala — não é cor nova.
 *
 * O knxsite tem a regra idêntica e o mesmo problema. O defeito escapou de todas as
 * fases porque o artigo de referência não tem posts relacionados, e sem eles a
 * seção não renderiza: o axe nunca viu o link. Apareceu no staging, quando o dono
 * do site criou um segundo post durante a validação — e valeria para produção no
 * instante em que houvesse dois artigos.
 *
 * Divergência deliberada do knxsite, autorizada na Fase 10. As outras seis
 * ocorrências de baixo contraste do artigo são iguais nos dois sites e ficaram
 * como estão: não foram avaliadas nesta decisão.
 *
 * O seletor carrega `.av2-more` de propósito. `pages/artigo.css` é gerado e traz
 * `.av2-more-head a`, de especificidade igual — e é enfileirado **depois** de
 * `components.css`, porque depende dele (`inc/enqueue.php`). Empate de
 * especificidade se decide pela ordem, então a regra daqui perderia calada. Um
 * seletor mais específico é a forma explícita de vencer; editar o arquivo gerado
 * não é opção, e o knxsite é somente leitura.
 * -------------------------------------------------------------------------- */
.av2-more .av2-more-head a {
	color: var(--color-orange-800);
}