/* ============================================================================
 * Blog — o que no knxsite vinha do ShadCN/Tailwind ou do conversor do Lexical, e
 * portanto não existe em blog.css / artigo.css (que são GERADOS por sync-css.mjs).
 *
 * Esta folha é AUTORAL. Os valores foram medidos no knxsite em execução, injetando
 * os elementos com as classes originais do ShadCN na página e lendo o estilo
 * computado — não deduzidos da documentação do Tailwind.
 *
 * Enfileirada só nas rotas do blog (inc/enqueue.php).
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * Paginação — componente Pagination do ShadCN (BlogPagination.tsx)
 *
 * Classes do original:
 *   nav  → mx-auto flex w-full justify-center
 *   ul   → flex flex-row items-center gap-1
 *   a    → buttonVariants({ variant: isActive ? 'outline' : 'ghost', size })
 *
 * Medido: altura 40px, raio 8px (rounded-md sobre --radius 0.625rem), 14px/20px,
 * peso 500, gap 8px (4px no prev/next), variante ativa com borda 1px oklch(0.922 0 0)
 * sobre oklch(1 0 0).
 *
 * Cor e sublinhado do link NÃO entram aqui de propósito: no original, as utilidades
 * `hover:text-accent-foreground` do Tailwind ficam em @layer utilities e perdem para a
 * regra `a:hover` de khoinix.css (sem camada). Só o fundo do hover se aplica de fato —
 * o mesmo fenômeno já documentado no título do menu mobile.
 * -------------------------------------------------------------------------- */

.khx-pagination {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.khx-pagination-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.khx-pagination-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	height: 40px;
	width: 40px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	background-color: transparent;
}

.khx-pagination-link.is-wide {
	width: auto;
	gap: 4px;
	padding: 8px 16px;
}

.khx-pagination-link.is-wide[aria-label="Go to previous page"] {
	padding-left: 10px;
}

.khx-pagination-link.is-wide[aria-label="Go to next page"] {
	padding-right: 10px;
}

.khx-pagination-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	pointer-events: none;
}

.khx-pagination-link:hover {
	background-color: oklch(0.97 0 0);
}

.khx-pagination-link.is-active {
	border: 1px solid oklch(0.922 0 0);
	background-color: oklch(1 0 0);
}

/* Anel de foco: aproximação de `focus-visible:ring-2 ring-ring ring-offset-2`. O
   token --ring-offset-background não resolve para valor algum no knxsite, então o
   deslocamento usa o fundo da página. */
.khx-pagination-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px oklch(0.708 0 0);
}

/* --------------------------------------------------------------------------
 * Badge das tags do artigo — componente Badge do ShadCN, variante "secondary"
 * (TagList.tsx). Mesmas classes do original: inline-flex items-center rounded-full
 * border px-2.5 py-0.5 text-xs font-semibold, com bg-secondary/text-secondary-foreground.
 * -------------------------------------------------------------------------- */

.khx-badge {
	display: inline-flex;
	align-items: center;
	/* `rounded-full` do Tailwind resolve para calc(infinity * 1px); 9999px daria outro
	   valor computado, e o gate compara valor computado. */
	border-radius: calc(infinity * 1px);
	/* O ShadCN pede `border-transparent`, mas essa utilidade fica em @layer utilities e
	   perde para o `* { border-color: var(--border) }` sem camada — medido: a borda do
	   badge é var(--border), não transparente. Por isso só largura e estilo aqui. */
	border-width: 1px;
	border-style: solid;
	padding: 2px 10px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	background-color: var(--secondary);
	color: var(--secondary-foreground);
	transition: background-color var(--duration-fast) var(--ease-out);
}

.khx-badge:hover {
	background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
}

/* --------------------------------------------------------------------------
 * Bloco de código do core dentro do artigo
 *
 * `core/code` emite <pre class="wp-block-code"><code>…</code></pre>; o knxsite emite
 * <div class="code-strip"><pre>…</pre></div>. A classe `code-strip` é acrescentada ao
 * <pre> em inc/blog-blocks.php, então `.av2-prose .code-strip` (de artigo.css) já
 * aplica fundo, fonte e raio. Falta só neutralizar o que o core dá ao <code> interno.
 * -------------------------------------------------------------------------- */

.av2-prose .wp-block-code.code-strip > code {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background: none;
	padding: 0;
	color: inherit;
	white-space: inherit;
}

/* --------------------------------------------------------------------------
 * Citação do core dentro do artigo
 *
 * `core/quote` recebe a classe `av2-quote` (inc/blog-blocks.php) e herda de artigo.css.
 * O `wp-block-styles` do core acrescenta borda à esquerda e itálico; ambos precisam
 * ceder para o desenho original, que usa borda laranja de 3px e texto sem itálico.
 * -------------------------------------------------------------------------- */

.av2-prose .wp-block-quote.av2-quote {
	border-left: 3px solid var(--color-orange-400);
	font-style: normal;
}