/*
 * brand.css — Andréa Villar — Camada de Tokens de Marca
 * Etapa 1+2: Tokens de marca + tipografia + aplicação de cores
 *
 * Este arquivo é carregado por ÚLTIMO, após custom.css.
 * Seção 1: variáveis no :root (paleta, tokens funcionais, tipografia).
 * Seção 2: tipografia (font-family e peso).
 * Seção 3: aplicação das cores da marca via tokens var(--av-*).
 */

/* =============================================================================
   1. TOKENS DE MARCA
   ============================================================================= */

:root {
  /* ---------- Paleta base ---------- */
  --av-azul-noite: #252F40;
  --av-creme: #F0D8C1;
  --av-vermelho: #DD3A23;
  --av-dourado: #CC8D4D;
  --av-terracota: #9D4A32;
  --av-madeira: #C6894F;

  /* ---------- Tokens funcionais ---------- */
  --av-texto-titulo: var(--av-azul-noite);

  /*
    --av-texto-corpo: azul-noite a 80% de opacidade.
    Estratégia: color-mix(in srgb, ... 80%, transparent).
    O resultado visual equivale a rgba(37, 47, 64, 0.8) sobre fundo
    branco, que daria aproximadamente #515966 em hex flat.
    Por que color-mix e não rgba()? Porque assim a cor base fica
    referenciada via variável — se o azul-noite mudar, o texto-corpo
    acompanha automaticamente.
  */
  --av-texto-corpo: color-mix(in srgb, var(--av-azul-noite) 80%, transparent);

  --av-fundo-claro: #FFFFFF;
  --av-fundo-suave: var(--av-creme);
  --av-acento: var(--av-vermelho);
  --av-acento-secundario: var(--av-dourado);
  --av-borda: var(--av-creme);

  /* Cor do WhatsApp — NÃO é cor de marca. Jamais substituir. */
  --av-whatsapp: #25D366;

  /* ---------- Tipografia ---------- */
  --av-fonte-titulo: 'Playfair Display', Georgia, serif;
  --av-fonte-corpo: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
}


/* =============================================================================
   2. TIPOGRAFIA
   Apenas font-family e font-weight.
   ============================================================================= */

/* --- 2.1 Corpo e elementos de texto corrido — Montserrat 400 --- */

body,
p,
li,
td,
th,
dd,
dt,
label,
figcaption,
small,
input,
textarea,
select,
optgroup,
.form-control,
.form-control:focus,
.has-error .form-control,
.has-error .form-control:focus,
input[type="search"],
input[type="password"],
input[type="text"],
.footer-copyrights p,
.footer-copyrights p a,
.cookie-banner-content p,
.cookie-banner-content p a,
.block-subtitle,
.hero-subtitle,
.about-text-left p,
.about-subtitle,
.about-trust-item,
.cta-section p,
.cta-reassurance,
.audience-card p,
.help-card-content p,
.step-card p,
.contact-card-content p,
.contact-intro,
.privacy-content p,
.privacy-content ul,
.privacy-last-updated,
.thankyou-section p,
.faq-answer-inner p,
.faq-q-text,
.info-list li .title,
.info-list li .value,
.hero-trust-line span,
.testimonial-text p,
.footer-social-links a,
.footer-social-links li {
  font-family: var(--av-fonte-corpo);
  font-weight: 400;
}

/* Ajuste: elementos que usam strong/bold dentro de texto corrido */
strong,
b,
.cta-section p strong,
.about-text-left p strong,
.privacy-content p strong {
  font-weight: 600;
}

/* --- 2.2 Títulos — Playfair Display 500 --- */

h1, h2, h3, h4, h5, h6,
.block-title h2,
.block-title h3,
.privacy-content h2,
.privacy-content h3,
.thankyou-section h2,
.hero-headline,
.audience-card h4,
.help-card-content h4,
.step-card h4,
.contact-card-content h4,
.about-text-left h3,
.faq-item-v2 h4 {
  font-family: var(--av-fonte-titulo);
  font-weight: 500;
}

/*
  Ajuste fino para Playfair Display:
  Playfair tem altura-x menor que Poppins (a fonte anterior do template).
  Sem compensação, títulos de seção parecem "afundados" visualmente.
  A correção mínima é line-height ligeiramente mais folgado e um
  letter-spacing neutro (o default da Playfair já é levemente condensado).
*/
h1, h2, h3, h4, h5, h6 {
  line-height: 1.35em;
}

.block-title h2,
.block-title h3 {
  line-height: 1.4em;
  letter-spacing: -0.01em;
}

/* --- 2.3 Botões — Montserrat 600 --- */

.btn,
.btn-primary,
.btn-secondary,
button,
input[type="button"],
input[type="submit"],
.wp-block-button .wp-block-button__link,
.cookie-btn,
.hero-cta-block .btn-lg,
.cta-section .btn,
.cta-section .btn-lg,
.faq-cta-btn,
.about-cta .btn,
.home-buttons .btn,
.home-buttons .btn-primary,
.home-buttons .btn-secondary {
  font-family: var(--av-fonte-corpo);
  font-weight: 600;
}

/* --- 2.4 Elementos de formulário auxiliares --- */

.form-group .help-block {
  font-family: var(--av-fonte-corpo);
  font-weight: 400;
}

/* --- 2.5 Navegação e menu --- */

.site-main-menu li a,
.site-nav a {
  font-family: var(--av-fonte-corpo);
  font-weight: 400;
}

.text-logo .logo-text {
  font-family: var(--av-fonte-titulo);
  font-weight: 500;
}

.text-logo .logo-text span {
  font-weight: 400;
}

/* --- 2.6 Elementos decorativos com fonte do template --- */

.preloader,
.portfolio-filters li a,
.tags a,
.post-meta .item,
.blog-card .post-date,
.timeline-item h5.item-period,
.timeline-item .item-company {
  font-family: var(--av-fonte-corpo);
}

/* --- 2.7 Footer social links (obrigado e privacidade) --- */

.footer-social-links {
  font-family: var(--av-fonte-corpo);
}


/* --- 2.8 Logo header — novo formato horizontal (substitui ícone + wordmark) --- */

/*
  A logo antiga era um ícone 44×44 (.logo-symbol) + texto (.logo-text).
  A nova é um PNG/WebP horizontal 300×100 com símbolo e wordmark juntos.
  Remove as constraints do ícone antigo, esconde o wordmark, e ajusta o
  <picture> para manter proporção sem distorcer.
*/

.text-logo a {
  display: flex;
  align-items: center;
}

/* Anula as constraints do ícone circular antigo (main.css:1202-1215) */
.text-logo .logo-symbol {
  width: auto;
  height: auto;
  margin-right: 0;
  margin-top: 0;
  border-radius: 0;
  float: none;
}

/* Esconde o wordmark — agora faz parte da imagem */
.text-logo .logo-text {
  display: none;
}

/* A nova logo: altura fixa alinhada ao header, largura proporcional */
.text-logo picture,
.text-logo img {
  display: block;
  height: 44px;
  width: auto;
}


/* =============================================================================
   3. CORES — Aplicação dos tokens de marca
   NUNCA use hex direto. Apenas var(--av-*) e #25D366 (WhatsApp).
   ============================================================================= */

/* --- 3.0 Bloqueio global do WhatsApp — INTOCADO (#25D366) --- */

a[href*="wa.me"] {
  color: #25D366;
}

/* --- 3.1 Fundo do body + moldura da foto --- */

body {
  background-color: var(--av-creme);
}

.home-photo {
  border-color: var(--av-creme);
}

/* --- 3.2 Links inline no corpo → terracota (6.07:1 AA ✓) --- */

a {
  color: var(--av-terracota);
}

.footer-copyrights p a,
.cookie-banner-content p a {
  color: var(--av-terracota);
}

/* --- 3.3 Links hover → terracota (mantém tom, sem contraste próprio) --- */

a:hover,
a:focus {
  color: var(--av-terracota);
}

/* --- 3.4 Títulos de seção → azul-noite --- */

h1, h2, h3, h4, h5, h6,
.block-title h2,
.block-title h3,
.privacy-content h2,
.privacy-content h3,
.thankyou-section h2,
.hero-headline,
.audience-card h4,
.help-card-content h4,
.step-card h4,
.contact-card-content h4,
.about-text-left h3,
.faq-item-v2 h4 {
  color: var(--av-texto-titulo);
}

/* --- 3.5 Badge CRP → fundo creme, texto azul-noite (9.81:1 AAA ✓) --- */

.hero-name span {
  background: var(--av-creme);
  color: var(--av-azul-noite);
}

/* --- 3.6 Subtítulo Sobre Mim (CRP) → azul-noite (!important preservado) --- */

.about-subtitle {
  color: var(--av-texto-titulo) !important;
}

/* --- 3.7 Filete/accento sob títulos de seção → vermelho (apenas aqui) --- */
/*
  Antes: ::after 30px × 2px vermelho + ::before 100% creme (dois segmentos).
  Depois: ::after 55px × 3px vermelho sólido, ::before suprimido.
  O filete vira um traço de assinatura visível, sem continuação creme.
*/

.block-title h2::after,
.block-title h3::after,
h3.comment-reply-title::after {
  width: 55px;
  height: 3px;
  background-color: var(--av-vermelho);
}

.block-title h2::before,
.block-title h3::before,
h3.comment-reply-title::before {
  display: none;
}

/* --- 3.8 Ícones dos cards de seção → azul-noite, chip creme --- */

.audience-icon {
  color: var(--av-azul-noite);
}

.help-card-icon {
  background: var(--av-creme);
  color: var(--av-azul-noite);
}

/* --- 3.9 Numeral dos passos → círculo azul-noite, numeral creme (9.81:1 AAA ✓) --- */

.step-number {
  background: var(--av-azul-noite);
  color: var(--av-creme);
}

/* --- 3.10 Checks/ícones de confirmação → terracota (4.52:1 AA ✓ componente) --- */

.hero-trust-line i,
.cta-reassurance i,
.about-trust-item i,
.thankyou-icon {
  color: var(--av-terracota);
}

/* --- 3.11 Botões → fundo azul-noite, texto branco (13.47:1 AAA ✓) --- */

.btn-primary,
.btn-secondary,
button,
input[type="button"],
input[type="submit"],
.wp-block-button .wp-block-button__link {
  background-color: var(--av-azul-noite);
  border-color: var(--av-azul-noite);
  color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: var(--av-azul-noite);
  border-color: var(--av-azul-noite);
  color: #FFFFFF;
}

.btn-secondary {
  border-color: var(--av-azul-noite);
  box-shadow: 0px 10px 10px -8px rgba(37, 47, 64, .22);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--av-azul-noite);
  border-color: var(--av-azul-noite);
  color: #FFFFFF;
}

/* Cookie banner — botão Accept */
.cookie-btn.accept {
  background: var(--av-azul-noite);
  border-color: var(--av-azul-noite);
  color: #FFFFFF;
}

.cookie-btn.accept:hover {
  background: var(--av-azul-noite);
  border-color: var(--av-azul-noite);
  color: #FFFFFF;
}

/* --- 3.12 Fundos suaves → creme diluído #FBF6F0 --- */

.cta-section {
  background: #FBF6F0;
  border-color: var(--av-creme);
}

/* --- 3.13 Bordas de cards → creme --- */

.audience-card {
  border-color: var(--av-creme);
}

.help-card {
  border-color: var(--av-creme);
}

.step-card {
  border-color: var(--av-creme);
}

.contact-card {
  border-color: var(--av-creme);
}

.site-footer {
  border-top-color: var(--av-creme);
}

/* --- 3.14 Bordas translúcidas de hover → azul-noite a 25% --- */

.audience-card:hover {
  border-color: color-mix(in srgb, var(--av-azul-noite) 25%, transparent);
}

.help-card:hover {
  border-color: color-mix(in srgb, var(--av-azul-noite) 25%, transparent);
}

/* --- 3.15 Cards de contato secundários (Instagram/Email) → azul-noite --- */

.contact-card:hover {
  border-color: var(--av-azul-noite);
}

.contact-card-icon {
  color: var(--av-azul-noite);
}

/* --- 3.16 WhatsApp contact card — restauração explícita (INTOCADO) --- */

.contact-card-primary {
  border-color: #25D366;
  background: #f8fff9;
}

.contact-card-primary:hover {
  border-color: #1ebe57;
  background: #f0fdf4;
}

.contact-card-primary .contact-card-icon {
  color: #25D366;
}

.contact-card-primary .contact-card-content h4 {
  color: #1a8a3f;
}

.contact-card-arrow {
  color: #25D366;
}

/* --- 3.17 Spinner de carregamento → azul-noite --- */

.preloader-spinner {
  background-color: var(--av-azul-noite);
}

/* --- 3.18 Corpo de texto (p, li, etc.) → azul-noite a 80% --- */

body,
p,
li,
.footer-copyrights p,
.cookie-banner-content p,
.hero-subtitle,
.about-text-left p,
.cta-section p,
.audience-card p,
.help-card-content p,
.step-card p,
.contact-card-content p,
.privacy-content p,
.privacy-content ul,
.thankyou-section p,
.faq-answer-inner p,
.faq-q-text,
.block-subtitle,
.hero-trust-line span,
.cta-reassurance,
.privacy-last-updated,
.contact-intro,
.footer-social-links a {
  color: var(--av-texto-corpo);
}