/*
Theme Name:   Portfolio Dev Child - Elizaura da Anápolis
Template:     portfolio-dev
Description:  Tema filho do Portfolio Dev, exclusivo deste site. Use este tema (nao o Portfolio Dev direto) para customizacoes proprias deste site — elementos que nao existem na lista do plugin WP Vibe, ajustes de CSS ou secoes personalizadas — sem sujar o tema-pai, que e compartilhado com outros sites que usam o mesmo plugin.
Author:       Wyller Freitas
Version:      1.0.0
Text Domain:  portfolio-dev-child
*/

/* CSS especifico deste site entra aqui. O tema-pai ja carrega este arquivo
   por ultimo (via get_stylesheet_uri()), entao qualquer regra aqui
   sobrescreve o Portfolio Dev automaticamente — sem precisar !important. */

/* ================================================
   PALETA E FONTES DA CAMPANHA — ELIZAURA DA ANÁPOLIS
   Variáveis novas (não mexem no sistema de cores do painel WP VIBE,
   que continua livre pro tema-pai). --fonte-titulo/--fonte-corpo são
   as mesmas variáveis do tema-pai — sobrescrevê-las aqui já vira o
   padrão de fonte do site inteiro, como pedido no projeto.
   ================================================ */
:root {
  --laranja:  #F87800; /* primária */
  --amarelo:  #F8D800; /* secundária */
  --vermelho: #E2392A; /* contraste / CTA pontual */
  --azul:     #0060B0; /* institucional */
  --roxo:     #140050; /* seções de proposta (não usado ainda) */
  --preto:    #1A1A1A;
  --branco:   #FFFFFF;

  --fonte-titulo:      'Anton', 'Segoe UI', system-ui, sans-serif;
  --fonte-assinatura:  'Corinthia', cursive; /* nome "Elizaura" no Hero, estilo da logo */
  --fonte-corpo:       'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fonte-manuscrita:  'Caveat', cursive; /* uso pontual, não usar no Hero */
}

body {
  background-color: var(--branco);
}

/* ================================================
   BOTÃO PILL LARANJA (CTA da campanha)
   Reaproveita o formato do .btn do tema-pai (padding/raio/transição),
   só troca a cor pra laranja da marca. Peso 500 (Poppins) — mais fino
   que bold, pra facilitar leitura, como padrão de botão do site.
   ================================================ */
.eliz-btn-cta {
  background-color: var(--laranja);
  color: var(--branco);
  border: 1px solid var(--laranja);
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-medio);
}

.eliz-btn-cta:hover {
  background-color: #d96a00;
  border-color: #d96a00;
  color: var(--branco);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(248, 120, 0, 0.35);
}

/* ================================================
   MENU — SOBREPOSTO AO HERO, EM 3 ZONAS
   O menu (.eliz-menu) mora dentro do próprio .eliz-hero__cartao (ver
   secao-hero.php) — por isso é clipado pelos mesmos cantos arredondados
   do cartão e não precisa de raio/sombra próprios. A barra em si é
   totalmente transparente (a foto aparece atrás da logo e do bloco de
   ícones/CTA); só a zona central dos links ganha uma cápsula roxa
   translúcida — como no site de referência. Grid de 3 colunas (não
   flex+space-between) garante que a coluna central fique sempre
   centralizada de verdade, mesmo com esquerda/direita de larguras
   diferentes.
   ================================================ */
.eliz-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--espaco-6);
  padding: var(--espaco-5) var(--espaco-6);
  background: none;
}

.eliz-menu__zona {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
}

.eliz-menu__zona--esquerda {
  justify-self: start;
}

/* Cápsula central: fundo roxo translúcido, cantos 100% arredondados —
   só ela recebe fundo próprio, o resto da barra fica transparente. */
.eliz-menu__zona--centro {
  justify-self: center;
  gap: var(--espaco-2);
  background-color: rgba(20, 0, 80, 0.35); /* --roxo translúcido */
  border-radius: var(--raio-full);
  padding: var(--espaco-2);
}

.eliz-menu__zona--direita {
  justify-self: end;
}

.eliz-menu__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--branco);
  border-radius: var(--raio-full);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  transition: color var(--transicao-rapida), background-color var(--transicao-rapida);
}

.eliz-menu__social:hover {
  color: var(--laranja);
  background-color: rgba(255, 255, 255, 0.12);
}

.nav-principal__link {
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-semibold); /* Poppins 600 */
  text-transform: uppercase;
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  color: var(--branco);
  border-radius: var(--raio-full);
}

/* Destaque do item ativo (e do hover): pílula branca + texto roxo, no
   lugar do sublinhado laranja — estilo do site de referência Tapera. */
.nav-principal__link::after {
  display: none;
}

.nav-principal__link:hover,
.nav-principal__link.ativo {
  background-color: var(--branco);
  color: var(--roxo);
}

.site-logo__texto {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-md);
  letter-spacing: 0.02em;
  color: var(--branco);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.btn-menu-mobile {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.btn-menu-mobile span {
  background-color: var(--branco);
}

.btn-menu-mobile:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media screen and (max-width: 782px) {
  /* .nav-principal já vem "display:none" do tema-pai nesta largura, mas
     a regra .eliz-menu__zona{display:flex} (sem media query) carrega
     depois no cascade e vencia — repetir aqui pra garantir que o centro
     some de verdade, senão o hambúrguer é empurrado pra fora da tela. */
  .eliz-menu__zona--centro {
    display: none;
  }

  .eliz-menu__zona--direita .eliz-menu__social,
  .eliz-menu__zona--direita .eliz-btn-cta {
    display: none;
  }
}

/* ================================================
   DRAWER LATERAL DO MENU (hambúrguer)
   Sobrescreve o .menu-mobile do tema-pai: em vez de overlay central em
   tela cheia, vira um painel branco deslizando pela direita — mesma
   mecânica do site de referência (logo no topo, lista vertical, X pra
   fechar), com o toggle de classes já feito pelo main.js do tema-pai.
   ================================================ */
.menu-mobile {
  display: flex;
  opacity: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: min(320px, 85vw);
  height: 100%;
  background-color: var(--branco);
  padding: var(--espaco-10) var(--espaco-8);
  gap: var(--espaco-8);
  transform: translateX(100%);
  transition: transform var(--transicao-suave);
  box-shadow: var(--sombra-lg);
  pointer-events: none;
}

.menu-mobile.visivel {
  transform: translateX(0);
  pointer-events: auto;
}

.eliz-drawer__fechar {
  position: absolute;
  top: var(--espaco-5);
  right: var(--espaco-5);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--preto);
  font-size: var(--texto-3xl);
  line-height: 1;
  cursor: pointer;
}

.eliz-drawer__logo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xl);
  color: var(--preto);
}

.menu-mobile .menu-mobile__lista {
  align-items: flex-start;
  gap: var(--espaco-5);
}

.menu-mobile .menu-mobile__link {
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-semibold); /* Poppins 600 */
  font-size: var(--texto-lg);
  color: var(--preto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.menu-mobile .menu-mobile__link:hover {
  color: var(--laranja);
}

.eliz-drawer__rodape {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  margin-top: auto;
}

.eliz-menu__social--drawer {
  color: var(--preto);
}

.eliz-menu__social--drawer:hover {
  color: var(--laranja);
  background-color: rgba(0, 0, 0, 0.06);
}

/* ================================================
   HERO — QUASE DE PONTA A PONTA DA VIEWPORT
   O tema-pai reserva 7rem de padding-top em #conteudo-principal pra
   páginas sem Hero não ficarem coladas no menu fixo. Aqui quem cuida do
   espaçamento é o próprio .eliz-hero (gutter mínimo ao redor do
   cartão), então essa reserva do tema-pai precisa sumir nesta página.
   ================================================ */
.page-template-page-home #conteudo-principal {
  padding-top: 0;
  min-height: 0;
}

.eliz-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gutter mínimo — a foto domina a dobra, quase sem margem branca */
  padding: 10px;
  box-sizing: border-box;
}

.eliz-hero__cartao {
  /* min-height direto no cartão (não % de um wrapper) — é o que faz o
     Hero de fato dominar a primeira dobra, como pedido no projeto. */
  position: relative;
  width: 100%;
  min-height: 93vh;
  border-radius: clamp(10px, 1.2vw, 20px); /* cantos bem sutis agora */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  color: var(--branco);
  box-shadow: var(--sombra-lg);
}

.eliz-hero__slides {
  position: absolute;
  inset: 0;
}

.eliz-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.eliz-hero__slide--ativo {
  opacity: 1;
}

.eliz-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.48);
}

.eliz-hero__conteudo {
  position: relative;
  z-index: var(--z-elevado);
  max-width: var(--container-estreito);
  padding: var(--espaco-10);
}

.eliz-hero__titulo {
  margin: 0;
}

.eliz-hero__assinatura {
  display: block;
  font-family: var(--fonte-assinatura); /* Corinthia — estilo da logo */
  font-weight: 700;
  line-height: 0.85;
  font-size: clamp(4.5rem, 11vw, 9rem);
}

.eliz-hero__titulo-linha {
  display: block;
  font-family: var(--fonte-titulo); /* Anton */
  font-weight: var(--peso-normal); /* Anton só tem um peso */
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: var(--linha-apertada);
  font-size: var(--texto-3xl);
  margin-top: var(--espaco-2);
}

.eliz-hero__divisor {
  display: block;
  width: 96px;
  height: 3px;
  background-color: var(--branco);
  margin: var(--espaco-6) 0;
}

.eliz-hero__texto-apoio {
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-normal);
  font-size: var(--texto-md);
  line-height: var(--linha-relaxada);
  max-width: 34ch;
  margin: 0 0 var(--espaco-6);
  color: rgba(255, 255, 255, 0.92);
}

.eliz-hero__cta {
  padding: var(--espaco-5) var(--espaco-10);
}

.eliz-hero__selo {
  position: absolute;
  right: var(--espaco-8);
  bottom: var(--espaco-8);
  z-index: var(--z-elevado);
  background-color: var(--branco);
  color: var(--preto);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  padding: var(--espaco-5) var(--espaco-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-1);
  text-align: center;
}

.eliz-hero__selo-numero {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-3xl);
  color: var(--laranja);
  line-height: 1;
}

.eliz-hero__selo-legenda {
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-xs);
  color: var(--preto);
}

@media screen and (max-width: 900px) {
  .eliz-hero {
    align-items: flex-start;
  }

  .eliz-menu {
    padding: var(--espaco-4);
  }

  .eliz-hero__selo {
    position: static;
    margin: 0 var(--espaco-6) var(--espaco-6);
    align-items: flex-start;
    text-align: left;
  }

  .eliz-hero__conteudo {
    padding: var(--espaco-6) var(--espaco-6) var(--espaco-4);
  }
}