/*
Theme Name:   Foxiz Child — Ingrid Santos Psicopedagoga
Theme URI:    https://ingridsantospsicopedagoga.com.br
Description:  Child theme do Foxiz para o hub de psicopedagogia infantil. Identidade acolhedora, leitura no celular, fontes locais.
Author:       Glauber
Template:     foxiz
Version:      1.0.0
Text Domain:  foxiz-child
*/

/* ==========================================================================
   1. FONTES LOCAIS
   Baixe os .woff2 e coloque em assets/fonts/.
   Bitter (títulos) e Inter (corpo) — ambas SIL OFL, livres para self-host.
   Fonte: gwfh.mranftl.com/fonts  (baixe "latin" + "latin-ext")
   NÃO usar Google Fonts via CDN — Core Web Vitals + LGPD.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-v18-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-v18-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bitter';
  src: url('assets/fonts/bitter-v39-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bitter';
  src: url('assets/fonts/bitter-v39-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. PALETA E TOKENS
   Acolhedora, não clínica. Azul suave = confiança; terracota = calor humano.
   Branco clínico e azul-hospital ficam de fora de propósito.
   ========================================================================== */

:root {
  /* Azuis — confiança, profissionalismo */
  --pp-blue-900: #1F3A4A;   /* títulos */
  --pp-blue-700: #2E6C86;   /* links, hover */
  --pp-blue-500: #5B93AC;   /* primária */
  --pp-blue-100: #DCEAF1;   /* fundos de destaque */

  /* Quentes — acolhimento, CTA */
  --pp-warm-600: #C9713F;   /* CTA hover */
  --pp-warm-500: #E08A5A;   /* CTA, botões */
  --pp-warm-200: #F7DCC8;   /* fundo de aviso/caixa */

  /* Neutros */
  --pp-cream:    #FBF7F1;   /* fundo de página */
  --pp-white:    #FFFFFF;
  --pp-text:     #33424A;   /* corpo */
  --pp-muted:    #6B7A82;   /* legendas, meta */
  --pp-border:   #E4DDD3;

  /* Tipografia — 18px base; a maioria do tráfego é celular */
  --pp-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-font-heading: 'Bitter', Georgia, 'Times New Roman', serif;
  --pp-size-base:    18px;
  --pp-leading:      1.75;

  --pp-radius: 10px;
  --pp-maxw:   720px;   /* medida de leitura confortável */
}

/* ==========================================================================
   3. BASE DE LEITURA
   ========================================================================== */

body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-size-base);
  line-height: var(--pp-leading);
  color: var(--pp-text);
  background-color: var(--pp-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .post-title, .heading-title {
  font-family: var(--pp-font-heading);
  color: var(--pp-blue-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h1, .entry-title { font-size: 2.1rem; font-weight: 700; }
h2 { font-size: 1.55rem; font-weight: 700; margin-top: 2.2em; }
h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.8em; }

.entry-content p {
  margin-bottom: 1.35em;
}

.entry-content a {
  color: var(--pp-blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content a:hover {
  color: var(--pp-warm-600);
}

/* Celular: título não pode estourar */
@media (max-width: 600px) {
  h1, .entry-title { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  body { font-size: 17px; }
}

/* ==========================================================================
   4. CAIXA DE AVISO YMYL
   Gerada pelo shortcode [aviso_psicopedagogico] (ver functions.php).
   Obrigatória em todo artigo sobre transtorno — seção 9 do PLANO.md.
   ========================================================================== */

.pp-aviso {
  background: var(--pp-warm-200);
  border-left: 4px solid var(--pp-warm-500);
  border-radius: var(--pp-radius);
  padding: 1.1em 1.3em;
  margin: 2em 0;
  font-size: 0.94em;
  line-height: 1.65;
}

.pp-aviso strong {
  color: var(--pp-blue-900);
  display: block;
  margin-bottom: 0.35em;
  font-family: var(--pp-font-heading);
}

.pp-aviso p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   5. CAIXA DE DESTAQUE / RESUMO
   [pp_destaque]texto[/pp_destaque]
   ========================================================================== */

.pp-destaque {
  background: var(--pp-blue-100);
  border-radius: var(--pp-radius);
  padding: 1.2em 1.4em;
  margin: 2em 0;
}

.pp-destaque p:last-child { margin-bottom: 0; }

/* ==========================================================================
   6. CTA — captura de e-mail e atendimento
   ========================================================================== */

.pp-cta {
  background: var(--pp-white);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  padding: 1.6em;
  margin: 2.5em 0;
  text-align: center;
  box-shadow: 0 2px 12px rgba(31, 58, 74, 0.06);
}

.pp-cta h3 {
  margin-top: 0;
}

.pp-btn,
.entry-content a.pp-btn {
  display: inline-block;
  background: var(--pp-warm-500);
  color: var(--pp-white);
  font-weight: 600;
  padding: 0.75em 1.8em;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease;
}

.pp-btn:hover,
.entry-content a.pp-btn:hover {
  background: var(--pp-warm-600);
  color: var(--pp-white);
}

/* ==========================================================================
   7. CAIXA DE AUTOR — E-E-A-T
   Nicho YMYL: a autoria visível é fator de ranqueamento, não enfeite.
   Fecha todo artigo — é o último elemento que o leitor vê antes de decidir
   se confia, e o retrato é quem carrega esse peso.

   20/08/2026 — esta seção mirava `.author-box` / `.author-name`, classes que
   NÃO existem no Foxiz: 0 ocorrências no HTML renderizado. Era regra morta,
   e a caixa vinha desde sempre com o visual cru do tema pai. As classes reais
   são `.usr-holder .ubox` (contêiner), `.author-avatar` (link da foto),
   `.nice-name` (nome) e `.author-job` (cargo).
   ========================================================================== */

.usr-holder .ubox {
  background: var(--pp-white);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  padding: 34px 36px 30px;
  box-shadow: 0 1px 2px rgba(31, 58, 74, .04),
              0 10px 28px -14px rgba(31, 58, 74, .16);
}

.usr-holder .ubox-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.usr-holder .author-info-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1 1 260px;
}

/* --- O retrato ------------------------------------------------------------
   Anel duplo: um vão branco separa a foto de um traço azul fino. Destaca sem
   virar moldura pesada. A sombra baixa levanta o retrato do plano da página
   em vez de deixá-lo colado no fundo. */

/* O tamanho tem que ser fixado AQUI, no link, e não só na imagem: o Foxiz
   trava `.author-avatar` em 50x50, e o `img { max-width: 100% }` do tema pai
   esmagava a largura da foto para 42px enquanto a altura passava — a foto
   virava uma fatia vertical. Com box-sizing, 112px de caixa = 104px de foto
   dentro dos 4px de respiro do anel. */
.usr-holder .author-avatar {
  flex: 0 0 auto;
  display: block;
  box-sizing: border-box;
  width: 112px;
  height: 112px;
  padding: 4px;
  border-radius: 50%;
  background: var(--pp-white);
  line-height: 0;
  box-shadow: 0 0 0 1.5px var(--pp-blue-500),
              0 12px 24px -12px rgba(31, 58, 74, .45);
  transition: box-shadow .3s ease, transform .3s ease;
}

.usr-holder .author-avatar:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px var(--pp-warm-500),
              0 16px 30px -12px rgba(31, 58, 74, .5);
}

/* object-fit é o que garante o círculo sem achatar o rosto, caso um dia
   entre aqui uma foto que não seja quadrada. */
.usr-holder .author-avatar img.avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* --- Nome e cargo --------------------------------------------------------- */

.usr-holder .nname-info {
  display: block;
  margin-bottom: 3px;
}

.usr-holder .nname-info .meta-label {
  display: block;
  margin-bottom: 1px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

.usr-holder .nname-info .nice-name {
  font-family: var(--pp-font-heading);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pp-blue-900);
  text-decoration: none;
}

.usr-holder .nname-info .nice-name:hover {
  color: var(--pp-blue-700);
}

.usr-holder .nname-info .verified-tick {
  color: var(--pp-blue-500);
}

/* O cargo é o único elemento em versalete da caixa — por isso ele segura o
   olho logo depois do nome, sem competir com ele. */
.usr-holder .author-job {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-warm-600);
}

/* --- Bio ------------------------------------------------------------------ */

.usr-holder .bio-description {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--pp-border);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--pp-muted);
}

.usr-holder .usocials .ef-label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

/* Celular: empilha e centraliza. Lado a lado, nesta largura, a bio fica com
   três palavras por linha. */
@media (max-width: 600px) {
  .usr-holder .ubox {
    padding: 26px 22px 24px;
  }

  .usr-holder .ubox-header,
  .usr-holder .author-info-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .usr-holder .author-avatar {
    width: 100px;
    height: 100px;
  }

  .usr-holder .bio-description {
    text-align: left;
  }
}

/* ==========================================================================
   8. AJUSTES DO FOXIZ
   ========================================================================== */

/* Dark mode desativado no painel; isto é cinto de segurança caso
   algum bloco herde a variável do tema pai. */
.light-scheme,
body.is-light-mode {
  --body-bg: var(--pp-cream);
}

/* Largura de leitura no single post */
.single .entry-content > *:not(.alignwide):not(.alignfull) {
  max-width: var(--pp-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* Imagens sempre com cantos suaves — combina com o tom acolhedor */
.entry-content img {
  border-radius: var(--pp-radius);
}