/*
 * MF Estúdio Gráfico — ajustes de marca sobre o ch-builder.
 * Carregado depois de chb-base.css (ver functions.php) para poder
 * sobrescrever regras de componente sem !important.
 */

/* Tokens de paleta/forma (paper, ink, radius, shadow...) NÃO ficam aqui —
   CHB_Plugin::inject_brand_colors() imprime um <style> inline em wp_head
   (prioridade 20) que redeclara --chb-paper/--chb-ink no :root, e um bloco
   inline sempre vem depois de qualquer <link> enfileirado no <head>, então
   venceria estas regras. Os tokens da marca MF entram inline em
   functions.php (hook wp_head, prioridade 21) para vir depois e vencer. */

/* ── Alinhamento: tudo à esquerda, nunca centralizado ── */
.chb-section-header { text-align: left; }
.chb-section-header .chb-section__lead { margin-inline: 0; }
.chb-section__cta { text-align: left; }
.chb-hero:not(.chb-hero--split) .chb-hero__inner { align-items: flex-start; text-align: left; }
.chb-hero:not(.chb-hero--split) .chb-hero__actions { justify-content: flex-start; }
.chb-hero:not(.chb-hero--split) .chb-hero__title,
.chb-hero:not(.chb-hero--split) .chb-hero__sub,
.chb-hero:not(.chb-hero--split) .chb-hero__text { margin-inline: 0; }
.chb-cta { text-align: left; }
.chb-cta__text { margin-inline: 0; }
.chb-cta__actions { justify-content: flex-start; }

/* ── Hero: sem faixa colorida — mesmo fundo claro do resto da página ── */
.chb-hero, .chb-hero--plain { background: var(--chb-paper); color: var(--chb-ink); }
.chb-hero__eyebrow {
	background: none; color: var(--chb-primary); padding: 0;
	font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.chb-hero__sub, .chb-hero__text { color: var(--chb-ink-soft); opacity: 1; }
.chb-hero .chb-btn--ghost { color: var(--chb-ink); border-color: var(--chb-line); }
.chb-hero .chb-btn--ghost:hover { background: var(--chb-paper-alt); }

/* ── Fotografia sempre em preto e branco ── */
.chb-hero__media img { filter: grayscale(1) contrast(1.08); }

/* ── Foco de teclado na cor de destaque, nunca o azul padrão ── */
:focus-visible { outline: 2px solid var(--chb-accent); outline-offset: 2px; }

/* ── Botões: elevação no hover + feedback de clique no active ── */
.chb-btn {
	transition: background-color .25s cubic-bezier(.2, .7, .3, 1), color .25s ease,
		border-color .25s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}
.chb-btn:hover { transform: translateY(-2px); }
.chb-btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }

/* Botões preenchidos (CTA): gradiente preto/cinza em vez de laranja sólido —
   inclui os que ficam sobre a faixa de contato (que por padrão o ch-builder
   pinta de branco ali; sobrescrevo com a mesma especificidade pra valer). */
.chb-btn--primary,
.chb-cta .chb-btn--primary {
	background: linear-gradient(135deg, #0d0d0c, var(--chb-ink-soft));
	color: #fff;
}
.chb-btn--primary:hover,
.chb-cta .chb-btn--primary:hover {
	background: linear-gradient(135deg, #000000, var(--chb-ink));
}

/* ── Seção "Vamos falar sobre o seu projeto." (home, #contato): fundo no
   mesmo gradiente escuro dos botões, e o botão "Falar no WhatsApp" no verde
   da marca do WhatsApp em vez do gradiente — só nesta seção específica da
   home (.page-id-13), não na faixa de contato da página "O que fazemos". ── */
.page-id-13 .chb-cta {
	background: linear-gradient(135deg, #0d0d0c, var(--chb-ink-soft));
}
.page-id-13 .chb-cta .chb-btn--primary {
	background: #25D366;
	color: #fff;
}
.page-id-13 .chb-cta .chb-btn--primary:hover {
	background: #1EBE5B;
}

/* ── Cards: destaque sutil no hover em vez de sombra flutuante — a régua
   de cima acende na cor de destaque e o número (eyebrow) desliza levemente,
   sem mudar nada no estado de repouso (mesma borda 1px de sempre). ── */
.chb-card {
	transition: background-color .25s ease, border-top-color .25s ease;
}
.chb-card:hover { background: var(--chb-paper-alt); border-top-color: var(--chb-primary); }
.chb-card__eyebrow { transition: color .25s ease, transform .25s ease; }
.chb-card:hover .chb-card__eyebrow { color: var(--chb-primary-dark); transform: translateX(3px); }
