/*
Theme Name:   GeneratePress Child Kevin Calbusch
Theme URI:    https://blogdoconsumidor.com.br
Description:  Child theme do GeneratePress com a identidade visual do Kevin Calbusch.
Author:       Bruno
Template:     generatepress
Version:      1.0.0
Text Domain:  kevin
*/

/* ==========================================================================
   Cores da marca

   O verde e o azul vêm da apresentação de marca. O azul da paleta principal
   está escrito como #FFFFFF no PDF do designer, que é branco: é um erro de
   copiar e colar. O valor real, amostrado do próprio arquivo, é #2C4384.

   As variáveis --contrast, --base e --accent são do GeneratePress, e os valores
   delas já foram trocados nas configurações do tema. As de marca abaixo cobrem
   o que o GeneratePress não tem, que é um segundo acento.
   ========================================================================== */
:root {
  --kc-verde:          #39b54b;
  --kc-verde-escuro:   #2d9a3e;
  --kc-verde-vibrante: #52ff66;
  --kc-azul:           #2c4384;
  --kc-azul-vibrante:  #5582ff;
  --kc-gelo:           #f4f4f4;
}

/* ==========================================================================
   Header: logo à esquerda, foto do Kevin à direita
   ========================================================================== */
/* A foto e a logo são filhas DIRETAS do .inside-header, sem contêiner de marca
   entre elas. Com o justify-content: space-between do GeneratePress, as duas se
   afastam e a logo vai parar do outro lado da tela. Ancorar tudo à esquerda e
   empurrar só o menu para a direita mantém a foto colada na logo, como no PDF. */
.site-header .inside-header {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 8px;
}
/* O align-items: flex-end acima existe para a foto pisar na base do header, e a
   logo acompanha. O menu, não: preso na base, ele fica com um vão de ar em cima e
   parece descolado. Ele é o único filho que se centra na altura. */
.site-header .main-navigation {
  margin-left: auto;
  align-self: center;
}
.site-header .site-logo {
  flex: 0 0 auto;
  align-self: center;
}

/* A logo é vetorial e foi exportada grande. Sem travar a altura aqui, o
   GeneratePress serve no tamanho original e ela ocupa a tela inteira. */
.site-header .site-logo img,
.site-header .custom-logo {
  max-height: 58px;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (max-width: 768px) {
  .site-header .site-logo img,
  .site-header .custom-logo { max-height: 42px; }
  .site-header .main-title { font-size: 1.25rem; line-height: 1.25; }
  .site-header .site-description { font-size: .8rem; }
}

/* Ele "pisa" no rodapé do header em vez de flutuar, como na página 38. */
.kc-foto {
  height: 132px;
  width: auto;
  display: block;
  align-self: flex-end;
  /* Encosta no fundo do header, sem folga, e avança sobre a logo como no PDF. */
  margin: 0 -14px -1px 0;
  position: relative;
  z-index: 2;
}

/* O padrão da marca é uma FAIXA atrás da foto, não um fundo do header inteiro.
   Na página 38 ele aparece cheio atrás do Kevin e vai desbotando até o branco na
   direção da logo. Espalhado por trás do menu, como estava antes, ele vira ruído
   e deixa os itens do menu difíceis de ler.

   A faixa sangra da borda ESQUERDA DA TELA, não da borda do container, senão em
   telas largas ela flutua no meio da margem branca. Como o .site-header ocupa a
   largura toda e o .inside-header é centrado e limitado, a borda esquerda do
   container é max(0, 50vw - metade do container): é essa conta que a largura faz.

   --kc-faixa: onde a faixa termina, medido a partir da borda esquerda do container.
   --kc-fade:  quanto desse trecho final é degradê. O resto, atrás da foto, fica cheio. */
.site-header {
  --kc-container: 1200px;
  --kc-faixa: 380px;
  --kc-fade: 280px;
  --kc-bar: 132px;
  position: relative;
  border-bottom: 3px solid var(--kc-verde);
  overflow: hidden;
}
/* A altura é FIXA na barra (--kc-bar), não `bottom: 0`. No celular o menu abre
   para baixo dentro do header, e com `bottom: 0` o padrão descia junto e afogava
   os itens. Preso na altura da barra, ele fica só atrás da foto e da logo, e o
   menu aberto embaixo cai no branco. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  height: var(--kc-bar);
  left: 0;
  width: calc(max(0px, 50vw - var(--kc-container) / 2) + var(--kc-faixa));
  background-image: url("assets/img/padrao.webp");
  background-size: cover;
  background-position: left center;
  opacity: .5;
  /* O degradê come só o fim da faixa, então ele não depende da largura da tela:
     em px a partir da direita, e não em %, que esticaria junto com o viewport.

     A queda NÃO é uma rampa linear. A foto avança sobre a logo, então onde ela
     termina o texto da logo já começou: numa rampa reta, "KEVIN CALBUSCH" cai em
     cima da parte cheia do padrão e vira sopa. O terceiro ponto derruba o padrão
     para 20% logo depois da foto e deixa só um rastro lavado atrás da logo, que é
     o que a página 38 faz. */
  --kc-queda: 60px;
  -webkit-mask-image: linear-gradient(to right,
    #000 0,
    #000 calc(100% - var(--kc-fade)),
    rgba(0, 0, 0, .2) calc(100% - var(--kc-fade) + var(--kc-queda)),
    transparent 100%);
          mask-image: linear-gradient(to right,
    #000 0,
    #000 calc(100% - var(--kc-fade)),
    rgba(0, 0, 0, .2) calc(100% - var(--kc-fade) + var(--kc-queda)),
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.site-header .inside-header { position: relative; z-index: 1; }

/* O header precisa de altura para ele caber em pé. A barra e o padrão usam a
   mesma --kc-bar, então nunca saem de sincronia. */
.site-header .inside-header {
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--kc-bar);
}

/* A foto encolhe nos breakpoints, e a faixa e a barra encolhem junto: o trecho
   cheio tem que acabar onde a foto acaba, senão o degradê começa em cima dele. */
@media (max-width: 1024px) {
  .kc-foto { height: 104px; margin-right: -10px; }
  .site-header { --kc-faixa: 340px; --kc-fade: 230px; --kc-bar: 104px; }
}
/* Sem o título e o subtítulo, sobra espaço: ele continua aparecendo no celular. */
@media (max-width: 768px) {
  .kc-foto { height: 84px; margin-right: -8px; }
  .site-header { --kc-faixa: 280px; --kc-fade: 185px; --kc-bar: 84px; }
}
@media (max-width: 480px) {
  .kc-foto { height: 68px; margin-right: -6px; }
  .site-header { --kc-faixa: 210px; --kc-fade: 135px; --kc-bar: 68px; }
  .site-header .site-logo img,
  .site-header .custom-logo { max-height: 34px; }
}

/* ==========================================================================
   Menu com fundo transparente, para o padrão da marca aparecer atrás dele
   ========================================================================== */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
  background: transparent;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item a {
  background: transparent;
  color: var(--kc-azul);
}
/* Sem fundo, o item ativo precisa de outro sinal: um traço verde embaixo. */
.main-navigation .main-nav ul li a { position: relative; }
.main-navigation .main-nav ul li a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 2px;
  background: var(--kc-verde);
  transform: scaleX(0);
  transition: transform .15s ease;
}
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current-menu-item a::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .main-navigation .main-nav ul li a::after { transition: none; }
}

/* Os submenus continuam com fundo, senão o texto se perde sobre o conteúdo. */
.main-navigation ul ul,
.main-navigation ul ul li a {
  background: #fff;
}

/* No celular o menu vira uma coluna que abre abaixo da barra. O transparente lá
   deixaria os itens sobre o que estiver embaixo (padrão da barra ou conteúdo da
   página), sem contraste. Aberto, o menu ganha fundo branco. Precisa vir DEPOIS
   das regras de transparente acima para vencer, e vale só na largura do menu
   mobile do GeneratePress (768px). */
@media (max-width: 768px) {
  .main-navigation,
  .main-navigation .inside-navigation,
  .main-navigation .main-nav ul,
  .main-navigation .main-nav ul li a {
    background: #fff;
  }
}

/* ==========================================================================
   Acentos em verde

   O GeneratePress só tem um acento (--accent), que ficou com o azul da marca.
   O verde entra aqui, nos pontos de destaque.
   ========================================================================== */
.entry-title a:hover,
.widget a:hover,
.site-info a:hover {
  color: var(--kc-verde-escuro);
}

/* Categorias e tags viram etiquetas verdes */
.entry-meta .cat-links a,
.entry-meta .tags-links a {
  display: inline-block;
  background: var(--kc-verde);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
.entry-meta .cat-links a:hover,
.entry-meta .tags-links a:hover {
  background: var(--kc-verde-escuro);
  color: #fff;
}

/* Botões: azul da marca, verde no hover */
.button,
button,
input[type="submit"],
.wp-block-search__button {
  background: var(--kc-azul);
  color: #fff;
  border: 0;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-search__button:hover {
  background: var(--kc-verde);
  color: #fff;
}

/* Títulos dos widgets com um traço verde, o mesmo gesto da marca */
.widget .widget-title,
.widget h2 {
  border-bottom: 2px solid var(--kc-verde);
  padding-bottom: 6px;
}

/* Citações puxam o verde */
blockquote {
  border-left: 4px solid var(--kc-verde);
}

/* ==========================================================================
   Rodapé: logo, links e Instagram sobre o azul da marca
   ========================================================================== */
.site-footer,
.site-info {
  background: var(--kc-azul);
  color: #dfe4f0;
}
.site-info a { color: #fff; }

/* O .footer-widgets tem fundo BRANCO próprio, que o GeneratePress imprime no CSS
   dinâmico dele. Pintar só o .site-footer não basta: a área dos widgets continua
   branca, a logo branca some e os links viram cinza claro sobre branco. */
.site-footer .footer-widgets {
  background: var(--kc-azul);
  padding: 46px 0 34px;
}

/* Sobre o azul, os títulos e os links precisam do branco: a cor padrão do
   GeneratePress é o azul do texto, que some no fundo. */
.site-footer .widget .widget-title,
.site-footer .widget h4 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer .widget a { color: #dfe4f0; text-decoration: none; }
.site-footer .widget a:hover,
.site-footer .widget a:focus { color: var(--kc-verde-vibrante); }

/* Listas de links sem marcador: no rodapé a bolinha só polui. */
.site-footer .wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .wp-block-list li { margin-bottom: 9px; }

.kc-rodape-marca p {
  font-size: .92rem;
  line-height: 1.6;
  max-width: 34ch;
}
.kc-rodape-logo { margin-bottom: 14px; }

/* Instagram: o ícone e o @ formam um alvo de clique só. */
.kc-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.kc-social:hover,
.kc-social:focus { color: var(--kc-verde-vibrante); }
.kc-social svg { flex: 0 0 auto; }

/* ==========================================================================
   Página Sobre e o bloco de sobre da barra lateral
   ========================================================================== */
.kc-sobre-foto img {
  border-radius: 10px;
  display: block;
}
.kc-lead {
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 500;
}
/* O aviso não é rodapé nem letra miúda: ele é ressalva, e precisa ser lido. */
.kc-aviso {
  margin-top: 34px;
  padding: 16px 18px;
  background: var(--kc-gelo);
  border-left: 4px solid var(--kc-verde);
  font-size: .92rem;
  line-height: 1.6;
}

/* O CSS adicional do tema demo tem `.about-section p` com uma caixa bege, e com
   isso o resumo e o "leia mais" saíam como dois cartões soltos. Esse CSS é
   impresso DEPOIS do stylesheet do child, então com a mesma especificidade ele
   ganha: por isso as regras abaixo passam por `.widget`. A caixa vira uma só, no
   grupo inteiro, e os parágrafos voltam a ser parágrafos. */
.widget .kc-about {
  background: var(--kc-gelo);
  padding: 18px 20px 20px;
  border-radius: 10px;
}
.widget .kc-about p {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 12px;
}
.widget .kc-about h4 {
  margin-top: 0;
  color: var(--kc-azul);
  border-bottom-color: var(--kc-verde);
}
.widget .kc-about-avatar { margin: 0 0 14px; }
.widget .kc-about-avatar img {
  border-radius: 50%;
  display: block;
}
.widget .kc-about .kc-leia-mais { margin-bottom: 0; }
.widget .kc-about .kc-leia-mais a {
  font-weight: 600;
  color: var(--kc-azul);
  text-decoration: none;
}
.widget .kc-about .kc-leia-mais a::after {
  content: " \203A";
  font-weight: 700;
}
.widget .kc-about .kc-leia-mais a:hover { color: var(--kc-verde-escuro); }

/* Foco visível, nas cores da marca */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--kc-verde);
  outline-offset: 2px;
}