/* ================================
   Tema global (padrão claro + dark por preferência do usuário)
   Referência visual: CONTATO / modelo_de_cor.jpg
   ================================ */
:root{
  --gb-bg:#fbf8f4;        /* Fundo principal (claro) */
  --gb-bg-alt:#ffffff;    /* Fundo alternativo (cards/áreas) */
  --gb-text:#333333;      /* Texto principal */
  --gb-muted:#594537;     /* Texto secundário */
  --gb-border:#e8dbce;    /* Bordas suaves */
  --gb-orange:#f27f0d;    /* Primária */
}

@media (prefers-color-scheme: dark){
  :root{
    --gb-bg:#221910;
    --gb-bg-alt:#1a120b;
    --gb-text:#f4ede7;
    --gb-muted:#d0c0b0;
    --gb-border:#3a2d20;
  }
}

/*
  style.css
  Estilos globais do site (arquivo único).

  Objetivo:
  - Centralizar tipografia (Manrope) e cores de apoio.
  - Ajustes de base (scroll suave, scrollbar).
  - Componentes pequenos reutilizáveis (ícones sociais, utilitários).
  - Tudo aqui evita "inline" no HTML.

  Paleta principal (prioridade):
  - Laranja: #f27f0d
  - Preto:   #333333
*/

/* ================================
   Variáveis de tema (cores)
   ================================ */
:root{
  --gb-orange:#f27f0d; /* Cor primária */
  --gb-black:#333333;  /* Cor principal de texto */
  --gb-bg:#fbf8f4;     /* Fundo claro do site */
}

/* ================================
   Base do documento
   ================================ */

/* Rolagem suave (âncoras e navegação) */
html{ scroll-behavior:smooth; }

/* Fonte padrão do site (Manrope) */
body{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--gb-black);
}

/* Classe auxiliar (Manrope) */
.font-display,
.font-manrope{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ================================
   Scrollbar (WebKit: Chrome/Edge/Safari)
   ================================ */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#f8f7f5; }
::-webkit-scrollbar-thumb{ background:#d6ccc2; border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gb-orange); }

/* ================================
   Ícones sociais (LinkedIn / Behance)
   Assets:
   - https://www.guibatista.com/logos/linkedin.svg
   - https://www.guibatista.com/logos/behance.svg
   ================================ */
.gb-social{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto 10px;
}

.gb-social-link{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  max-width:48px;
  max-height:48px;
  border-radius:999px;
  border:1px solid var(--gb-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gb-bg-alt);
  transition:transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.gb-social-link:hover{
  transform:translateY(-1px);
  border-color:rgba(242,127,13,0.55);
  background:rgba(242,127,13,0.08);
}

.gb-social-link img{
  width:22px;
  height:22px;
  display:block;
}

/* ================================
   Preferências do usuário (acessibilidade)
   ================================ */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ================================
   Estruturas padrão (nav / footer)
   ================================ */
.gb-topnav{
  border-bottom:1px solid var(--gb-border);
  background:var(--gb-bg);
}

.gb-mobile-panel{
  border-top:1px solid var(--gb-border);
  background:var(--gb-bg);
}

.gb-footer{
  border-top:1px solid var(--gb-border);
  background:var(--gb-bg);
}

/* Texto de apoio */
.gb-muted{ color:var(--gb-muted) !important; }
.gb-footer-copy{ color: rgba(17, 17, 17, 0.65) !important; }

/* Base do documento */
body{
  background-color:var(--gb-bg);
  color:var(--gb-text);
}

@media (prefers-color-scheme: dark){
  .gb-social-link img{ filter:invert(1); }
  ::-webkit-scrollbar-track{ background:#1a120b; }
  ::-webkit-scrollbar-thumb{ background:#3a2d20; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--gb-orange); }
}

/* Material Symbols - ajuste de alinhamento */
.material-symbols-outlined{
  line-height:1;
  display:inline-block;
  vertical-align:middle;
}
/* Footer padrão (ícones + copyright centralizados) */
.gb-footer-inner{
  max-width:960px;
  margin:0 auto;
  padding:40px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.gb-footer-sep{
  width:100%;
  height:1px;
  background:var(--gb-border);
  opacity:.7;
}

/* ================================
   Correção definitiva: ícones sociais (máx 48x48)
   ================================ */
.gb-social{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.gb-social-link{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.gb-social-link img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  display:block;
}


/* ================================
   FIX DEFINITIVO – ÍCONES LINKEDIN / BEHANCE
   ================================ */

/* container */
.gb-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
}

/* botão circular */
.gb-social-link{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  border-radius:50%;
  overflow:hidden;
  background-size:20px 20px !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

/* fallback se usar <img> */
.gb-social-link img{
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
}