/*
Theme Name:  Ji Consulting
Theme URI:   https://ji-consulting.local
Description: Tema filho do Kadence para a Ji Consulting — consultoria imobiliária no Japão para estrangeiros. A identidade visual (paleta e tipografia) é definida em theme.json; este tema filho protege as customizações das atualizações do tema-pai.
Author:      Ji Consulting
Template:    kadence
Version:     0.1.1
Text Domain: ji-consulting
License:     GPL-2.0-or-later
*/

/*
 * O CSS visual fica quase todo no theme.json e no tema-pai (Kadence).
 * Use este arquivo apenas para ajustes pontuais de CSS que o theme.json
 * não cobrir. O carregamento deste style.css é feito no functions.php.
 */

/*
 * Ponte tipográfica theme.json -> Kadence.
 *
 * O Kadence tem seu próprio motor de tipografia: ele aplica
 *   body   { font-family: var(--global-body-font-family) }
 *   h1..h6 { font-family: var(--global-heading-font-family) }
 * e essas regras têm mais especificidade que os estilos globais do
 * theme.json, então sobrepõem nossas fontes. Aqui apontamos as
 * variáveis do Kadence para os presets definidos no theme.json,
 * mantendo o theme.json como fonte única dos valores. O !important
 * garante que a nossa definição da variável vença, independente da
 * ordem de carregamento do CSS.
 */
:root {
	--global-body-font-family: var(--wp--preset--font-family--noto-sans) !important;
	--global-heading-font-family: var(--wp--preset--font-family--noto-sans) !important;
}

/*
 * Hero da Home (bloco "Capa" com a classe .ji-hero): garante que títulos e
 * textos fiquem brancos sobre o fundo verde, sobrepondo a cor de título
 * verde-escuro definida no theme.json.
 */
.wp-block-cover.ji-hero :is(h1, h2, h3, p) {
	color: #ffffff !important;
}

/* ==========================================================================
 * Design system moderno — Ji Consulting (2026-07)
 * Tokens, cards com realce, botões pill, chips, stats e animações de scroll.
 * ========================================================================== */
:root {
	--ji-radius: 16px;
	--ji-shadow-sm: 0 1px 2px rgba(8, 74, 40, 0.08), 0 4px 14px rgba(8, 74, 40, 0.07);
	--ji-shadow-lg: 0 14px 30px rgba(8, 74, 40, 0.18), 0 5px 10px rgba(8, 74, 40, 0.08);
	--ji-verde-escuro: #0B6E3B;
	--ji-verde-claro: #8CC63F;
}

/* Títulos: peso forte e tracking apertado (visual atual) */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* Botões: pill com micro-interação */
.wp-block-button__link,
button.wp-element-button {
	border-radius: 999px;
	padding: 0.8em 1.9em;
	font-weight: 600;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.wp-block-button__link:hover,
button.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--ji-shadow-lg);
}

/* Chip/etiqueta do hero (sempre sobre fundo escuro -> texto branco;
 * sem o color explícito ele herdava o cinza-escuro do tema: contraste ~2:1) */
.ji-chip {
	display: inline-block;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 0.35em 1.1em;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
}

/* Estatísticas (20+ anos etc.) */
.ji-stats .wp-block-column {
	text-align: center;
}
.ji-stat-num {
	font-size: 2.8rem;
	font-weight: 900;
	line-height: 1.1;
	color: var(--ji-verde-escuro);
	margin: 0;
}
.ji-stat-label {
	margin: 0.15rem 0 0;
	color: #5c6b60;
	font-size: 0.95rem;
}

/* Cards de serviço (kanji como ícone) */
.ji-service-card {
	background: #ffffff;
	border-radius: var(--ji-radius);
	padding: 1.9rem 1.6rem;
	box-shadow: var(--ji-shadow-sm);
	border-top: 4px solid var(--ji-verde-claro);
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ji-service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ji-shadow-lg);
}
.ji-kanji {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(140, 198, 63, 0.18);
	color: var(--ji-verde-escuro);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.9rem;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--noto-sans-jp);
	margin: 0 0 1.1rem;
}

/* Cabeçalho de tópico do blog (barra de acento + "ver todos") */
.ji-topic-head {
	align-items: baseline;
	margin-top: 2.4rem;
}
.ji-topic-head h3 {
	padding-left: 0.75rem;
	border-left: 6px solid var(--ji-verde-claro);
	border-radius: 3px;
	margin: 0;
}
.ji-topic-head p {
	margin: 0;
	font-weight: 600;
}

/* Cards do blog (query loop com imagem destacada) */
.ji-cards .wp-block-post-template {
	gap: 1.5rem;
}
.ji-cards .wp-block-post {
	background: #ffffff;
	border-radius: var(--ji-radius);
	overflow: hidden;
	box-shadow: var(--ji-shadow-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}
.ji-cards .wp-block-post:hover {
	transform: translateY(-6px);
	box-shadow: var(--ji-shadow-lg);
}
.ji-cards .wp-block-post-featured-image {
	margin: 0;
}
.ji-cards .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.45s ease;
}
.ji-cards .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.045);
}
.ji-card-body {
	padding: 1.1rem 1.3rem 1.4rem;
}
.ji-cards .wp-block-post-title {
	font-size: 1.06rem;
	line-height: 1.35;
	margin: 0 0 0.4rem;
}
.ji-cards .wp-block-post-title a {
	color: var(--ji-verde-escuro);
	text-decoration: none;
}
.ji-cards .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Resumo chamativo abaixo do título do card */
.ji-card-excerpt {
	font-size: 0.85rem;
	line-height: 1.45;
	color: #4c5a50;
	margin: 0.3rem 0 0.5rem;
}
.ji-cards .wp-block-post-date {
	font-size: 0.85rem;
	color: #6b7a6f;
}

/* Grid dos cards do shortcode [ji_posts] (usado nas páginas Elementor) */
.ji-cards-grid {
	display: grid;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ji-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ji-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ji-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ji-cols-5 { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1024px) {
	.ji-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.ji-cols-2, .ji-cols-3, .ji-cols-4 { grid-template-columns: 1fr; }
	.ji-cols-5 { grid-template-columns: repeat(2, 1fr); }
}
.ji-cards-grid .wp-block-post { list-style: none; }

/* Cards compactos (grade de 5 por tópico na Home) */
.ji-cols-5 .ji-card-body { padding: 0.8rem 0.9rem 1rem; }
.ji-cols-5 .wp-block-post-title { font-size: 0.92rem; line-height: 1.3; }
.ji-cols-5 .ji-card-excerpt { font-size: 0.78rem; }
.ji-cols-5 ~ * .wp-block-post-date,
.ji-cols-5 .wp-block-post-date { font-size: 0.75rem; }

/* Ponte de estilo para o widget nativo de posts (Essential Addons Post Grid):
 * aplica o mesmo visual dos cards do design system. */
.eael-grid-post-holder {
	background: #ffffff;
	border: none;
	border-radius: var(--ji-radius);
	overflow: hidden;
	box-shadow: var(--ji-shadow-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.eael-grid-post-holder:hover {
	transform: translateY(-6px);
	box-shadow: var(--ji-shadow-lg);
}
.eael-entry-title,
.eael-entry-title a {
	color: var(--ji-verde-escuro) !important;
	text-decoration: none;
}
.eael-entry-title {
	font-size: 0.95rem;
	line-height: 1.3;
	margin: 0 0 0.3rem;
}
.eael-entry-title a:hover {
	text-decoration: underline;
}
.eael-grid-post-excerpt p {
	font-size: 0.8rem;
	line-height: 1.45;
	color: #4c5a50;
}
.eael-entry-meta,
.eael-entry-meta a,
.eael-meta-posted-on {
	font-size: 0.75rem;
	color: #6b7a6f;
}
.eael-entry-thumbnail img {
	transition: transform 0.45s ease;
}
.eael-grid-post-holder:hover .eael-entry-thumbnail img {
	transform: scale(1.045);
}
/* Alturas iguais: o card preenche a célula da grade (sem fundos "em degrau") */
.eael-post-grid .eael-grid-post-holder,
.eael-post-grid .eael-grid-post-holder-inner {
	height: 100%;
}
.eael-post-grid .eael-grid-post-holder-inner {
	display: flex;
	flex-direction: column;
}

/* Box de tópico do blog (Home): container claro que agrupa o tópico */
.ji-topic-box {
	background: #ffffff;
	border: 1px solid #e3e8e0;
	border-radius: var(--ji-radius);
	box-shadow: var(--ji-shadow-sm);
	padding: 1.4rem 1.4rem 1.6rem;
}
.ji-topic-box .ji-topic-head { margin-top: 0; }

/* Kanji pequeno inline (selo do box de tópico) */
.ji-kanji-sm {
	display: inline-flex;
	width: 44px;
	height: 44px;
	font-size: 1.3rem;
	margin: 0 0.45rem 0 0;
	vertical-align: middle;
}

/* Botões do Elementor herdam o estilo pill do design system.
 * Seletor duplicado de propósito: o frontend.css do Elementor carrega DEPOIS
 * do CSS do tema filho e define border-radius:3px — a especificidade maior
 * (0,2,0) garante que o pill vença independente da ordem de carregamento. */
.elementor-button.elementor-button {
	border-radius: 999px;
	font-weight: 600;
	padding-left: 1.9em;
	padding-right: 1.9em;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-button.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--ji-shadow-lg);
}

/* Carrossel de matérias de outros tópicos ([ji_carousel] + assets/carousel.js) */
.ji-carousel {
	position: relative;
	overflow: hidden;
	padding: 4px 4px 2.4rem;
}
.ji-carousel .swiper-wrapper { display: flex; }
.ji-carousel .swiper-slide { flex-shrink: 0; height: auto; }
/* fallback sem Swiper: faixa rolável com snap */
.ji-car-fallback .swiper-wrapper { overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.ji-car-fallback .swiper-slide { width: 250px; scroll-snap-align: start; }
.ji-car-fallback .ji-car-prev, .ji-car-fallback .ji-car-next, .ji-car-fallback .swiper-pagination { display: none; }

.ji-car-card {
	background: #ffffff;
	border-radius: var(--ji-radius);
	overflow: hidden;
	box-shadow: var(--ji-shadow-sm);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ji-car-card:hover { transform: translateY(-5px); box-shadow: var(--ji-shadow-lg); }
.ji-car-thumb { display: block; }
.ji-car-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ji-car-body { padding: 0.8rem 0.9rem 1rem; display: flex; flex-direction: column; flex: 1; }
.ji-car-badge {
	display: inline-block;
	align-self: flex-start;
	background: rgba(140, 198, 63, 0.18);
	color: var(--ji-verde-escuro);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.18em 0.85em;
	margin-bottom: 0.5rem;
}
.ji-car-title { font-size: 0.92rem; line-height: 1.3; margin: 0 0 0.3rem; }
.ji-car-title a { color: var(--ji-verde-escuro); text-decoration: none; }
.ji-car-title a:hover { text-decoration: underline; }
.ji-car-excerpt { font-size: 0.78rem; line-height: 1.45; color: #4c5a50; margin-bottom: 0.6rem; }
.ji-car-cta { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--ji-verde-escuro); text-decoration: none; }
.ji-car-cta:hover { text-decoration: underline; }
.ji-car-prev, .ji-car-next {
	position: absolute;
	top: 36%;
	z-index: 5;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: #ffffff;
	color: var(--ji-verde-escuro);
	font-size: 1.5rem;
	line-height: 1;
	box-shadow: var(--ji-shadow-sm);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.ji-car-prev:hover, .ji-car-next:hover { background: var(--ji-verde-escuro); color: #ffffff; }
.ji-car-prev { left: 6px; }
.ji-car-next { right: 6px; }
.ji-carousel .swiper-pagination { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; }
.ji-carousel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #b9c6bb;
	display: inline-block;
	margin: 0 4px;
	opacity: 1;
	cursor: pointer;
}
.ji-carousel .swiper-pagination-bullet-active { background: var(--ji-verde-escuro); }

/* Animações de entrada ao rolar (classe aplicada via assets/animations.js).
 * Respeita prefers-reduced-motion: usuários sensíveis não veem movimento. */
@media (prefers-reduced-motion: no-preference) {
	.ji-animate {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: var(--ji-delay, 0ms);
		will-change: opacity, transform;
	}
	.ji-animate.ji-visible {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Botão "ver todas as matérias da categoria" — logo abaixo do
   "Posts Similares" na página do post (injetado pelo functions.php)
------------------------------------------------------------------- */
.ji-todas-categoria {
	text-align: center;
	margin: 4px 0 44px;
}
.ji-btn-todas {
	display: inline-block;
	background: var(--ji-verde-escuro);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 12px 30px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: var(--ji-shadow-sm);
	transition: background 0.2s ease, transform 0.2s ease;
}
.ji-btn-todas:hover {
	background: #095A30;
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}