/*
Theme Name: JVAZ Tech
Theme URI: https://jvaztech.com.br
Author: JVAZ Tech
Description: Tema de bloco nativo do site institucional da JVAZ Tech. Substitui a implementação anterior em Elementor.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: jvaztech
*/

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
::selection { background: var(--wp--preset--color--light-blue); }
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Landing page (page-templates/landing.php) — mobile-first grids =====
   Stacked (flex column) by default, promoted to real grid only at explicit
   breakpoints. No auto-fit/minmax — this rendering stack mishandles the
   auto-fit-percentage-in-minmax combination (documented gotcha). */
.jv-hero-grid, .jv-metodo-grid, .jv-solucoes-grid, .jv-segmentos-grid,
.jv-dores-grid, .jv-diferenciais-grid, .jv-resultados-grid {
  display: flex; flex-direction: column;
}
/* WordPress removes margin-block-start only on :first-child by default, so
   non-first grid items kept their default top margin and sat lower than the
   first — zero it everywhere so every card starts flush with its grid row. */
.jv-resultados-grid > * { margin: 0; }
@media (max-width: 767px) {
  .jv-hero-kpis { grid-template-columns: 1fr !important; }
  .jv-hero-chip { position: static !important; margin-bottom: 12px; align-self: flex-start; }
  .jv-solucoes-swap { order: initial !important; }
  .jv-nav-link { display: none !important; }
  .jv-nav-cta a { padding: 8px 16px !important; font-size: 13px !important; }
  .jv-header-inner { height: 64px !important; padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important; }
}
@media (min-width: 600px) {
  .jv-dores-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .jv-segmentos-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .jv-diferenciais-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .jv-resultados-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .jv-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; }
  .jv-metodo-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; }
  .jv-solucoes-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .jv-dores-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
  .jv-metodo-sticky { position: static !important; top: auto !important; }
}

/* ===== Header (parts/header.html) ===== */
.jv-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid #E3ECF4; }
/* Theme doesn't load core block-library CSS, so Gutenberg's ".is-nowrap"
   utility class (flexWrap:"nowrap" in these blocks' attributes) never
   actually applies anywhere — every layout:flex group silently defaults to
   flex-wrap:wrap instead, which is why the header used to break onto extra
   lines on narrow screens. Forcing nowrap explicitly here instead. */
.jv-header-inner, .jv-header-logo, .jv-header-nav { flex-wrap: nowrap; }
.jv-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.jv-nav-link { color: #5E6B7C; font-size: 15px; font-weight: 500; }
/* .jv-nav-cta is the wp:button wrapper <div> — the actual visible pill needs
   to be its inner <a class="wp-element-button">. Styling the wrapper div
   itself (as this used to do) stacks two boxes: the div's own background/
   padding/radius behind the link's own default WP button background/padding,
   showing as a second rectangle peeking out from behind the pill. */
.jv-nav-cta { background: none; padding: 0; border-radius: 0; }
.jv-nav-cta a { display: inline-flex; align-items: center; gap: 8px; background: #0F7DC2; color: #FFFFFF; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 10px; transition: background .2s ease; }
.jv-nav-cta a:hover { background: #0A2A4A; color: #FFFFFF; }

/* ===== Resultados — mesma receita exata do card de Segmentos: container com
   max-width 640px no cabeçalho, grid com gap 24px, card com padding 32px /
   radius 14px / border 1px / gap interno 12px, tudo alinhado à esquerda. */
/* Mesmo container que toda outra seção da página usa (max-width 1200px
   centralizado, padding 96px/40px) — construído manualmente em vez de usar
   o layout "constrained" do WordPress, que centraliza cada filho individual
   por conta própria e desalinhava o título em relação aos cards. */
.jv-resultados-inner { max-width: 1200px; margin: 0 auto; }
.jv-resultados-header { max-width: 640px; }
.jv-resultados-grid { gap: 24px; }
.jv-resultado-card { background: #EFF5FA; border: 1px solid #E3ECF4; border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.jv-resultado-card > * { margin: 0; }
/* Caixa fixa pro logo (não só altura): os arquivos têm proporções bem
   diferentes (faixa larga, retângulo, emblema redondo), então só limitar a
   altura deixaria uns enormes e outros minúsculos. Os PNGs também foram
   recortados no servidor (`convert -trim`) porque vinham com muito espaço
   vazio em volta da marca — sem isso a marca visível encolhia a quase nada
   dentro da caixa. brightness(0) força preto sólido: alguns logos chegam
   brancos/transparentes (feitos pra fundo escuro) e sumiriam aqui. */
   Especificidade: o core do WordPress declara `.wp-block-image img{height:auto}`
   e é carregado depois deste arquivo, então uma regra `.jv-resultado-logo img`
   (mesma especificidade) perde a cascata — daí o seletor mais longo abaixo. */
.jv-resultado-logo { height: 40px; margin: 0 0 4px; display: flex; align-items: center; }
.jv-resultado-logo a { display: flex; align-items: center; height: 100%; }
.jv-resultado-card figure.jv-resultado-logo img { height: 40px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0); }

/* ===== Footer (parts/footer.html) ===== */
.jv-footer { background: #0A2A4A; color: #A9BDD0; }
.jv-footer a { color: #C9E6F8; }
.jv-footer-inner { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.jv-footer-row { flex-wrap: nowrap; }
.jv-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); transition: background .2s ease; }
.jv-footer-social a:hover { background: #0F7DC2; }
@media (max-width: 767px) {
  .jv-footer-inner { padding-left: 20px; padding-right: 20px; }
}

/* ===== Como Trabalhamos (page-templates/como-trabalhamos.php) — estrada de
   ferramentas. Mobile-first: lista de cards em coluna por padrão; vira
   estrada sinuosa em linha só a partir do breakpoint (mesma lógica das
   grids acima — sem depender de minmax/auto-fit). ===== */
.jv-jornada-road { display: flex; flex-direction: column; gap: 16px; }
.jv-jornada-node { display: flex; }
.jv-jornada-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 16px; width: 100%; background: #FFFFFF; border: 1px solid #E3ECF4; border-radius: 14px; padding: 16px 20px; transition: box-shadow .2s ease, transform .2s ease; }
.jv-jornada-btn:hover, .jv-jornada-btn:focus-visible { box-shadow: 0 12px 28px rgba(10,42,74,0.12); transform: translateY(-2px); }
.jv-jornada-btn:focus-visible { outline: 2px solid #0F7DC2; outline-offset: 2px; }
.jv-jornada-circle { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.jv-jornada-label { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; color: #0A2A4A; }
.jv-jornada-hint { display: block; font-size: 13px; color: #5E6B7C; margin-top: 2px; }
@media (min-width: 900px) {
  .jv-jornada-road { flex-direction: row; align-items: flex-start; gap: 0; position: relative; padding: 48px 0 24px; }
  .jv-jornada-road::before {
    content: ''; position: absolute; left: 4%; right: 4%; top: 122px; height: 3px;
    background: repeating-linear-gradient(90deg, #C6D8E8 0 14px, transparent 14px 26px);
    z-index: 0;
  }
  .jv-jornada-node { flex: 1; position: relative; z-index: 1; }
  .jv-jornada-node:nth-child(even) { margin-top: 64px; }
  .jv-jornada-btn { flex-direction: column; text-align: center; gap: 12px; border: none; background: none; padding: 0 12px; }
  .jv-jornada-btn:hover, .jv-jornada-btn:focus-visible { box-shadow: none; transform: translateY(-4px); }
  .jv-jornada-circle { width: 64px; height: 64px; box-shadow: 0 12px 28px rgba(10,42,74,0.18); }
  .jv-jornada-hint { max-width: 150px; margin-left: auto; margin-right: auto; }
}
/* Nó ativo (produto expandido no painel abaixo) — mesmo destaque visual do
   hover, mas persistente enquanto o painel estiver aberto. */
.jv-jornada-node.jv-jornada-active .jv-jornada-circle { box-shadow: 0 0 0 4px #C9E6F8; }
.jv-jornada-node.jv-jornada-active .jv-jornada-label { color: #0F7DC2; }

/* ===== Painel de detalhe do produto (Como Trabalhamos) — expande em
   acordeon logo abaixo da estrada, na própria página (sem popup/overlay).
   max-height calculado via JS (scrollHeight), não valor fixo, porque o
   conteúdo varia de tamanho entre produtos. ===== */
.jv-produto-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.jv-produto-panel-inner { background: #EFF5FA; border-radius: 16px; padding: 32px; margin-top: 32px; }
@media (min-width: 600px) {
  .jv-produto-panel-inner { padding: 40px; }
}