/*
Theme Name: Qart BH — Personalizado
Template: qart-bh
Theme URI: https://qartt.com.br/
Author: Qart Tecnologia
Author URI: https://qartt.com.br/
Description: Tema-filho de "Qart BH". Coloque aqui suas personalizações de CSS e código — elas VENCEM o tema principal e NÃO somem quando o tema principal (Qart BH) é atualizado ou reinstalado. Edite este arquivo à vontade ou use Aparência → Editor.
Version: 1.1.6
Requires at least: 6.4
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: qart-bh-child
*/

/* =========================================================================
   SUAS PERSONALIZAÇÕES DE CSS
   -------------------------------------------------------------------------
   Escreva abaixo qualquer ajuste de estilo do site. Tudo que estiver aqui:
     • vence o tema principal (Qart BH);
     • fica blindado — não some ao atualizar/reinstalar o tema principal.

   DICA DE CACHE: ao editar este arquivo diretamente, suba o número em
   "Version:" (linha acima) para o navegador carregar a versão nova.

   Exemplo (pode apagar):
   .qart-header .wp-block-button__link{ letter-spacing:.2px; }
   ========================================================================= */

/* ===== Legibilidade do texto nas faixas ESCURAS (barra do topo e rodapé) =====
   Algo no ambiente (tema/plugin) força a cor de texto padrão (#29323b, escura)
   mesmo sobre fundo escuro, deixando o texto ilegível. Garantimos o contraste
   com !important (única forma de vencer, confirmado em teste ao vivo). */
.qart-header .has-primary-ink-background-color p,
.qart-header .has-primary-ink-background-color a{color:#ffffff !important}

.qart-footer p{color:#e9eff4 !important}                 /* tagline e copyright */
.qart-footer h4{color:#cdd9e3 !important}                /* títulos: Serviços/Conteúdo/Contato */
.qart-footer ul,
.qart-footer li,
.qart-footer li a{color:#e9eff4 !important}              /* itens e links das listas */
.qart-footer li a:hover{color:#ffffff !important}

/* CTA "Pronto para colocar sua empresa no topo?" (faixa com gradiente azul
   escuro): o texto claro estava sendo forçado para escuro. #cta é ID, vence
   com folga. NÃO afeta o botão "Solicitar orçamento" (texto escuro sobre
   fundo branco, que deve continuar escuro). */
#cta h2{color:#ffffff !important}
#cta p{color:#e7f0f6 !important}                              /* parágrafo "Receba uma proposta…" */
#cta p:first-of-type{color:#a9cfe6 !important}               /* olho "Vamos começar" */
#cta .is-style-ghost .wp-block-button__link{color:#ffffff !important}  /* botão "Falar com o time" */

/* Banda GEO "A busca mudou" (faixa escura com gradiente petróleo) — mesmo caso. */
#geo h2{color:#ffffff !important}
#geo p{color:#d5e3ee !important}                             /* "Cada vez mais gente pergunta…" */
#geo p:first-of-type{color:#7fb3ff !important}              /* olho "A busca mudou" */
#geo .wp-block-button__link{color:#ffffff !important}       /* botão "Quero ser citado pela IA" */

/* Regra GERAL para qualquer faixa de gradiente escuro (band/brand) sem id
   próprio — ex.: "Onde atuamos" da página Sobre. As regras #geo/#cta acima
   têm especificidade maior e continuam mandando onde existem. */
.has-band-gradient-background h2,.has-brand-gradient-background h2,
.has-band-gradient-background h3,.has-brand-gradient-background h3{color:#ffffff !important}
.has-band-gradient-background p,.has-brand-gradient-background p{color:#d5e3ee !important}
/* preserva o "olho" (eyebrow) azul claro das faixas */
.has-band-gradient-background p[style*="7fb3ff"],
.has-brand-gradient-background p[style*="a9cfe6"]{color:#7fb3ff !important}

/* ===== Hero das páginas internas colado ao header =====
   O WP coloca um espaçamento (blockGap ~19px) acima do <main>. Na home o
   primeiro bloco é branco (não aparece), mas nas internas o hero é azul-claro
   e o gap vira uma faixa branca entre o header e o hero. Zeramos essa margem. */
.wp-site-blocks > main{margin-top:0 !important}

/* ===== Header fixo (sticky) que afina ao rolar, com transição suave =====
   Obs.: overflow-x:hidden no body quebra position:sticky; trocamos por
   overflow-x:clip (mesmo efeito anti-rolagem-horizontal, sem quebrar o sticky). */
body{overflow-x:clip}
/* Desliga o "scroll anchoring": ao encolher o header, o navegador reajustaria
   a rolagem e realimentaria o toggle (efeito "tremido"). Sem ele, a rolagem
   fica estável e o header afina de forma suave. */
html{overflow-anchor:none}

/* O sticky vai no WRAPPER do template-part (filho direto de .wp-site-blocks),
   senão o header fica preso à altura do próprio wrapper e rola embora. */
.wp-site-blocks > header{
  position:sticky;
  top:var(--wp-admin--admin-bar--height, 0px); /* abaixo da barra do admin quando logado; 0 p/ visitante */
  z-index:1000;
  background:var(--wp--preset--color--ground);
}
.qart-header{transition:box-shadow .35s ease}
.qart-header.is-scrolled{box-shadow:0 8px 24px -14px rgba(13,42,59,.30)}
/* Remove o espaçamento (blockGap ~19px) entre a faixa do topo e a barra
   principal. Sem isso, quando a faixa recolhe no sticky, sobra um vão morto
   que empurra logo/menu/botão para baixo (fora do centro). */
.qart-header > *{margin-top:0 !important;margin-bottom:0 !important}

/* Faixa utilitária do topo ("Tecnologia · Marketing…"): recolhe ao rolar */
.qart-header > .has-primary-ink-background-color{
  overflow:hidden;max-height:64px;
  transition:max-height .35s ease, padding .35s ease, opacity .3s ease;
}
.qart-header.is-scrolled > .has-primary-ink-background-color{
  max-height:0;padding-top:0 !important;padding-bottom:0 !important;opacity:0;
}

/* Barra principal (logo + menu): fica mais fina ao rolar */
.qart-header > .alignfull:not(.has-primary-ink-background-color){transition:padding .35s ease}
.qart-header.is-scrolled > .alignfull:not(.has-primary-ink-background-color){
  padding-top:6px !important;padding-bottom:6px !important;
}
/* Logo encolhe no estado compacto → header bem mais baixo */
.qart-header .wp-block-site-logo img{transition:width .35s ease, height .35s ease}
.qart-header.is-scrolled .wp-block-site-logo img{width:52px !important;height:auto !important}

/* Botão "Solicitar orçamento" também reduz no header compacto (era 56px de
   altura, dominando a barra). Transição suave junto com o resto. */
.qart-header .wp-block-button__link{transition:padding .3s ease, font-size .3s ease, transform .16s ease, box-shadow .2s ease, background-color .18s ease}
.qart-header.is-scrolled .wp-block-button__link{
  padding-top:9px !important;padding-bottom:9px !important;
  padding-left:18px !important;padding-right:18px !important;
  font-size:14px !important;
}
/* Garante alinhamento vertical central de logo, menu e botão na barra principal. */
.qart-header > .alignfull:not(.has-primary-ink-background-color) > .wp-block-group{align-items:center}

/* ===== Faixa de números (15 anos / SEO / GEO / BH) — centralizada ===== */
.qart-stats h3{font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.05}
.qart-stats p{margin-top:6px}
.qart-stats .wp-block-column{position:relative}
.qart-stats .wp-block-column:not(:first-child)::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:48px;width:1px;background:var(--wp--preset--color--border);
}
@media (max-width:781px){
  .qart-stats .wp-block-columns{gap:22px}
  .qart-stats .wp-block-column:not(:first-child)::before{display:none}
}

/* ===== Ajustes de MOBILE (respiro lateral + barra do topo) ===== */
@media (max-width:781px){
  /* Respiro lateral: o conteúdo deixa de encostar nas bordas. As bandas
     full-width mantêm o fundo até a borda, só o conteúdo interno recua. */
  main .wp-block-group.alignfull,
  .qart-footer{padding-left:22px !important;padding-right:22px !important}
  main .wp-block-group.alignfull .wp-block-group.alignfull{padding-left:0 !important;padding-right:0 !important}
  .wp-block-post-content > .wp-block-group:not(.alignfull),
  main.wp-block-group > .wp-block-group:not(.alignfull){padding-left:22px;padding-right:22px}

  /* Barra escura acima do header: no mobile o texto descritivo longo é
     escondido e os links ficam centralizados, sem cortar. */
  .qart-header .has-primary-ink-background-color .alignwide{flex-wrap:wrap;justify-content:center;row-gap:2px}
  .qart-header .has-primary-ink-background-color p:first-of-type{display:none}
  /* garante que a faixa do topo não seja cortada pelo overflow do efeito sticky */
  .qart-header:not(.is-scrolled) > .has-primary-ink-background-color{max-height:none}
  /* respiro nas laterais da barra principal do header (logo/menu/botão) */
  .qart-header > .alignfull:not(.has-primary-ink-background-color){padding-left:16px !important;padding-right:16px !important}
}

/* ===== Efeitos de hover e clique nos botões (CTA, hero, header) ===== */
.wp-block-button__link{transition:transform .16s ease, box-shadow .2s ease, background-color .18s ease, color .18s ease, border-color .18s ease}
.wp-block-button__link:hover{transform:translateY(-2px)}
.wp-block-button__link:active{transform:translateY(1px) scale(.99)}
/* botões preenchidos ganham sombra ao passar o mouse */
.wp-block-button:not(.is-style-ghost) .wp-block-button__link:hover{box-shadow:0 12px 26px -10px rgba(13,42,59,.5)}
/* CTA — botão branco sobre o gradiente escuro */
#cta .wp-block-button__link.has-white-background-color:hover{box-shadow:0 14px 30px -8px rgba(0,0,0,.4)}
/* botão fantasma "Falar com o time" (fundo escuro) preenche levemente no hover */
#cta .is-style-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.14) !important;border-color:#ffffff !important}
@media (prefers-reduced-motion:reduce){
  .wp-block-button__link:hover,.wp-block-button__link:active{transform:none}
}

/* ===== Menu do topo — mais encorpado e elegante ===== */
.qart-header .wp-block-navigation__container{gap:30px !important}
.qart-header .wp-block-navigation-item__content{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.004em;
  color:var(--wp--preset--color--ink) !important;   /* mais forte que o cinza atual */
  position:relative;
  padding-bottom:5px;
  transition:color .18s ease;
}
/* sublinhado que cresce no hover / na página atual */
.qart-header .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:var(--wp--preset--color--primary);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.qart-header .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--primary) !important}
.qart-header .wp-block-navigation-item__content:hover::after{transform:scaleX(1)}
.qart-header .current-menu-item > .wp-block-navigation-item__content{color:var(--wp--preset--color--primary) !important}
.qart-header .current-menu-item > .wp-block-navigation-item__content::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .qart-header .wp-block-navigation-item__content::after{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .qart-header,
  .qart-header > .has-primary-ink-background-color,
  .qart-header > .alignfull:not(.has-primary-ink-background-color){transition:none}
}