/*
Theme Name: ZF [pro]Tech
Theme URI: https://zfprotech.com.br
Description: Tema do site zfprotech.com.br. O muro de CNPJ continua no plugin "ZF [pro]Tech — Muro de CNPJ"; este tema desenha o site em volta dele — cabeçalho, menu, rodapé e páginas comuns. Requer o plugin ativo.
Author: ZF Aftermarket
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zf-protech
*/

/* ═══════════════ tokens ═══════════════
   O plugin declara os mesmos tokens, mas só dentro de .zfpt / body.zfpt-full.
   Aqui eles sobem para :root porque o cabeçalho e o rodapé existem em toda página,
   inclusive nas que não têm o muro. */
:root{
  --zf-blue:#0057B7; --zf-dark-blue:#000828; --zf-middle-blue:#00265F;
  --zf-cyan:#00ABE7; --zf-cyan-25:#CEEBFC; --zf-red:#E52330;
  --zf-gray-100:#F0F2F4; --zf-gray-300:#ACBBC5; --zf-gray-500:#768E9F; --zf-gray-800:#475968;
}

/* A família vem daqui; o @font-face vem do CSS do plugin, que o tema enfileira em
   todas as páginas. Redeclarar @font-face aqui faria o navegador baixar os mesmos
   três arquivos de fonte duas vezes na mesma página (215 KB à toa). */
body{
  margin:0;
  background:var(--zf-gray-100);
  font-family:'ZF Prometo',Tahoma,'Trebuchet MS',Arial,sans-serif;
  font-weight:300;line-height:1.5;color:var(--zf-dark-blue);
  display:flex;flex-direction:column;min-height:100vh;
}
.zfpt-page{flex:1;width:100%;display:flex;flex-direction:column}

/* ═══════════════ cabeçalho ═══════════════
   Na página do muro o cabeçalho não aparece: lá o logo é grande e mora dentro do hero,
   desenhado pelo plugin (`.zfpt-muro__logo`), que também esconde esta barra. Aqui ela
   continua existindo para a biblioteca (depois do CNPJ) e para as páginas comuns.

   ═══════════════ menu ═══════════════
   Hoje não existe menu atribuído e o <nav> nem chega a ser impresso. As regras ficam
   prontas para quando o site ganhar páginas. */
.zfpt-topbar__in .site-menu{margin-left:auto}
.site-menu ul{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.site-menu a{color:#fff;text-decoration:none;font-size:14px;font-weight:500;opacity:.82}
.site-menu a:hover,.site-menu .current-menu-item a{opacity:1;text-decoration:underline}

/* ═══════════════ conteúdo de página comum ═══════════════
   O muro traz o próprio visual escopado em .zfpt. Isto aqui é só para o texto de
   páginas que você criar no WordPress. */
/* Sem width:100% aqui: como item de um flex column ele já ocupa a largura toda, e
   width:100% mais padding em content-box (o border-box do plugin só vale dentro de
   .zfpt) somava e jogava rolagem horizontal na página. */
.site-conteudo{
  padding:56px 24px 72px;
  padding-inline:max(24px,calc((100% - 1200px) / 2));
  background:#fff;flex:1;
}
/* O container alinha com o logo do cabeçalho; o texto para antes, em medida de
   leitura, senão a linha fica com 1200px de largura e ninguém acha o começo da
   linha seguinte. */
.site-conteudo > *{max-width:800px}
.site-conteudo h1{font-size:40px;font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0 0 24px}
.site-conteudo h2{font-size:29px;font-weight:500;line-height:1.15;margin:40px 0 14px}
.site-conteudo h3{font-size:21px;font-weight:500;margin:32px 0 10px}
.site-conteudo p,.site-conteudo li{font-size:17px;margin:0 0 16px}
.site-conteudo a{color:var(--zf-blue);font-weight:500}
.site-conteudo img{max-width:100%;height:auto}
.site-lista{margin:0 0 40px}
.site-lista h2{margin-top:0;font-size:23px}
.site-lista a{text-decoration:none}

@media(max-width:860px){
  .site-conteudo{padding:36px 20px 52px}
  .site-conteudo h1{font-size:29px}
  .site-conteudo h2{font-size:23px}
  .site-menu ul{gap:18px}
}