/*
Theme Name: GAX Post
Theme URI: https://gaxpost.com
Author: Gabriel Carvalho
Author URI: https://gaxpost.com/pt/sobre/
Description: Tema em bloco (FSE) do GAX Post, blog de tecnologia sobre IA aplicada, desenvolvimento, ferramentas e hardware. Construído sem page builder e sem jQuery, com tipografia hospedada localmente e zero JavaScript além do que o WordPress carrega. Segue a identidade visual do Kit IA Dev: Bricolage Grotesque nos títulos, Inter no corpo, azul como única cor de ação.
Version: 0.3.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gaxpost-theme
Tags: blog, one-column, block-patterns, full-site-editing, translation-ready, custom-colors, custom-logo
*/

/*
 * A maior parte do estilo vive em theme.json (padrão de tema em bloco).
 * Aqui entra só o que theme.json não cobre.
 */

/* Rolagem suave em âncora, respeitando quem pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

img,
figure {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Tabela larga rola dentro do bloco, sem criar barra na página toda.  */
/* ------------------------------------------------------------------ */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.65rem 0.85rem;
	text-align: left;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* Bloco de código longo rola sozinho. */
.wp-block-code code,
.wp-block-preformatted {
	overflow-x: auto;
	white-space: pre;
	display: block;
}

/* ------------------------------------------------------------------ */
/* Links: título e navegação sem sublinhado, sublinha no hover.        */
/* ------------------------------------------------------------------ */
.wp-block-post-title a,
.wp-block-site-title a,
.wp-block-navigation a,
.gaxpost-cat-card a {
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible,
.gaxpost-cat-card a:hover {
	text-decoration: underline;
}

.wp-block-post-title a,
.wp-block-site-title a {
	color: inherit;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* Foco visível no teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Botões: variantes que o core não traz prontas.                      */
/* ------------------------------------------------------------------ */

/* "Ghost": usado sobre fundo escuro (hero). Contorno claro, sem preenchimento. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
}

/* Link de navegação em formato de botão (o "Assinar" do cabeçalho). */
.wp-block-navigation-item.is-style-fill > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--accent);
	color: #ffffff !important;
	padding: 0.45rem 1.1rem;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none !important;
}

.wp-block-navigation-item.is-style-fill > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--accent-dark);
}

/* ------------------------------------------------------------------ */
/* Placeholder de imagem. Proporção travada, nunca quebra o layout.    */
/* Trocar por wp:image assim que a arte real existir.                  */
/* ------------------------------------------------------------------ */
.gaxpost-thumb {
	position: relative;
	width: 100%;
	background-color: var(--wp--preset--color--surface);
	background-image:
		linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(10, 17, 40, 0.06) 100%),
		repeating-linear-gradient(
			135deg,
			var(--wp--preset--color--border) 0,
			var(--wp--preset--color--border) 1px,
			transparent 1px,
			transparent 14px
		);
	overflow: hidden;
}

.gaxpost-thumb--cat {
	aspect-ratio: 16 / 9;
	border-radius: 11px 11px 0 0;
}

.gaxpost-thumb--avatar {
	width: 72px;
	min-width: 72px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
}

.gaxpost-thumb--wide {
	aspect-ratio: 16 / 7;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border);
}

/* ------------------------------------------------------------------ */
/* Cartão de categoria e de post.                                      */
/* ------------------------------------------------------------------ */
.gaxpost-cat-card {
	height: 100%;
	overflow: hidden;
	background-color: var(--wp--preset--color--background);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.gaxpost-cat-card:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 30px rgba(15, 23, 41, 0.1);
}

.gaxpost-post-card .wp-block-post-featured-image img {
	border-radius: 10px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.gaxpost-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

/* ------------------------------------------------------------------ */
/* Bio do autor: empilha no celular.                                   */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.gaxpost-author-bio {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------ */
/* Newsletter embedada do beehiiv: centraliza e limita a largura.      */
/* ------------------------------------------------------------------ */
.gaxpost-newsletter-embed iframe {
	max-width: 100% !important;
	margin: 0 auto;
	display: block;
}

/* Paginação com respiro entre os números. */
.wp-block-query-pagination-numbers .page-numbers {
	margin-right: 0.4rem;
}

figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Home: hero encosta no cabeçalho, sem faixa branca entre os dois.    */
/* O blockGap padrão do body criaria um respiro indesejado ali.        */
/* ------------------------------------------------------------------ */
.gaxpost-main-flush {
	margin-block-start: 0 !important;
}

.gaxpost-main-flush > .alignfull:first-child {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ */
/* Grade de cards: todos com a mesma altura, em qualquer tela.         */
/* O layout grid do core já iguala a altura da linha; o que falta é    */
/* o miolo do card esticar pra empurrar o rodapé do card pra baixo.    */
/* ------------------------------------------------------------------ */
.gaxpost-card-grid > .gaxpost-cat-card,
.gaxpost-card-grid > li,
.gaxpost-card-grid > li > .gaxpost-post-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.gaxpost-cat-card__body {
	flex: 1 1 auto;
}

/* Cartão de post: a imagem mantém proporção fixa e o texto ocupa o resto. */
.gaxpost-post-card {
	height: 100%;
}

.gaxpost-post-card .wp-block-post-excerpt {
	flex: 1 1 auto;
}

/* No celular, uma coluna e cartão sem altura forçada. */
@media (max-width: 600px) {
	.gaxpost-card-grid > .gaxpost-cat-card,
	.gaxpost-card-grid > li,
	.gaxpost-card-grid > li > .gaxpost-post-card,
	.gaxpost-post-card {
		height: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Bloco "Quem escreve": foto centralizada acima do texto, também       */
/* centralizado. Fica equilibrado em qualquer largura de tela.          */
/* ------------------------------------------------------------------ */
.gaxpost-author-card {
	text-align: center;
}

/* O nome precisa ter o maior contraste do cartão. Definido de forma
   explícita porque o cartão tem fundo próprio, e herdar cor nesse
   contexto deixava o título quase da cor do fundo. */
.gaxpost-author-card h2,
.gaxpost-author-card h3,
.gaxpost-author-card .wp-block-heading {
	color: var(--wp--preset--color--ink);
	font-weight: 800;
}

.gaxpost-author-card .gaxpost-author-photo {
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--30);
}

.gaxpost-author-card .gaxpost-author-photo {
	width: 128px;
	max-width: 128px;
}

.gaxpost-author-card .gaxpost-author-photo img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 128px;
	max-width: 128px;
	height: 128px;
	border: 3px solid var(--wp--preset--color--background);
	box-shadow: 0 0 0 1px var(--wp--preset--color--border);
}

/* ------------------------------------------------------------------ */
/* Menu no celular: painel legível, com respiro e itens alinhados       */
/* à esquerda. O padrão do core abre encostado na borda e alinhado      */
/* à direita, o que fica desconfortável de ler e de tocar.              */
/* ------------------------------------------------------------------ */
@media (max-width: 781px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		background-color: var(--wp--preset--color--background);
	}

	/* O core alinha o conteudo do painel a direita, encostando os itens
	   na borda. Aqui ele passa a ocupar a largura toda, alinhado a
	   esquerda, com respiro nas laterais. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		text-align: left;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		align-items: stretch;
		justify-content: flex-start;
		padding-top: var(--wp--preset--spacing--50);
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		gap: 0;
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.9rem 0;
		font-size: var(--wp--preset--font-size--medium);
		text-align: left;
		color: var(--wp--preset--color--foreground) !important;
	}

	/* O "Assinar" continua sendo botão, mas ocupa a largura toda. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.is-style-fill {
		border-bottom: none;
		margin-top: var(--wp--preset--spacing--40);
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.is-style-fill
		> .wp-block-navigation-item__content {
		text-align: center;
		padding: 0.9rem 1.1rem;
		color: #ffffff !important;
	}

	/* Botão de fechar com área de toque confortável. */
	.wp-block-navigation__responsive-container-close {
		padding: 0.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Imagem do topo do cartão de categoria.                              */
/* Herda o comportamento que o placeholder tinha: proporção 16:9        */
/* travada e cantos arredondados só em cima, pra não vazar da borda.    */
/* ------------------------------------------------------------------ */
.gaxpost-cat-card .gaxpost-thumb-img {
	margin: 0;
	line-height: 0;
	overflow: hidden;
	border-radius: 11px 11px 0 0;
}

.gaxpost-cat-card .gaxpost-thumb-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.gaxpost-cat-card:hover .gaxpost-thumb-img img {
	transform: scale(1.03);
}

/* ------------------------------------------------------------------ */
/* Seletor de idioma no cabeçalho.                                     */
/* ------------------------------------------------------------------ */
.gaxpost-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.gaxpost-lang__item {
	padding: 0.2rem 0.4rem;
	border-radius: 5px;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}

.gaxpost-lang__item:hover {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.gaxpost-lang__item.is-current {
	color: var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--surface);
	cursor: default;
}

/* O parágrafo que o WordPress cria em volta do shortcode não deve
   introduzir margem no meio do cabeçalho. */
.site-header .wp-block-shortcode,
.site-header .wp-block-shortcode p {
	margin: 0;
}