/*
Theme Name: Brazilian Goods Studio
Theme URI: https://braziliangoodsstudio.com
Description: Tema filho do GeneratePress para o Brazilian Goods Studio. Guarda as cores, fontes e o codigo proprio da marca — a home e os ajustes de layout entram aqui, nunca no tema pai.
Author: Brazilian Goods Studio
Author URI: https://braziliangoodsstudio.com
Template: generatepress
Version: 1.2.4
Text Domain: bgs-child
*/

/* ==========================================================================
   BLOCO A — identidade premium. Aprovado pelo Luciano em 14/08/2026.
   Fonte: Fraunces (titulos) + Lato (corpo, a mesma dos ebooks).
   Paleta: cream + dourado do design system dos ebooks, com dois ajustes
   obrigatorios porque a tela nao perdoa o que o papel perdoa.
   NUNCA escrever cor solta no CSS — sempre variavel.
   ========================================================================== */
:root {
  --bgs-cream:      #FDFAF5;   /* fundo principal                          */
  --bgs-cream-2:    #F3EEE4;   /* fundo de secao alternada                 */
  --bgs-ink:        #1E1912;   /* texto e secoes escuras   · 16,8:1 AAA    */
  --bgs-ink-2:      #14100B;   /* cabecalho e rodape                       */
  --bgs-gold:       #C39B3C;   /* fio, moldura, FUNDO de botao             */
  --bgs-gold-light: #DCB964;   /* dourado sobre fundo escuro · 9,3:1       */
  --bgs-gold-pale:  #F5EBC8;   /* fundo de bloco de destaque               */
  --bgs-gold-ink:   #7E611C;   /* dourado que PODE virar texto · 5,6:1 AA  */
  --bgs-muted:      #6E6659;   /* texto secundario · 5,4:1 AA              */
  --bgs-linha:      #E4DED2;   /* fios e bordas                            */

  /* Regua de respiro — toda distancia do site sai daqui */
  --bgs-s1: 8px;  --bgs-s2: 16px; --bgs-s3: 24px; --bgs-s4: 40px;
  --bgs-s5: 64px; --bgs-s6: 96px; --bgs-s7: 144px;

  --bgs-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bgs-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Apelidos da paleta antiga (v1.1.0). Ficam para nao quebrar as
         paginas ja publicadas, que usam estes nomes no conteudo. --- */
  --bgs-papel:   var(--bgs-cream);
  --bgs-papel-2: var(--bgs-cream-2);
  --bgs-tinta:   var(--bgs-ink);
  --bgs-verde:   var(--bgs-gold);
  --bgs-verde-e: var(--bgs-gold-ink);
  --bgs-ipe:     var(--bgs-gold);
  --bgs-ipe-e:   var(--bgs-gold-ink);
  --bgs-rio:     #2A6F8E;
  --bgs-barro:   #C1663F;
  --bgs-cinza:   var(--bgs-muted);
  --bgs-texto-2: #3A342A;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background: var(--bgs-cream);
  color: var(--bgs-ink);
  font-family: var(--bgs-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-branding .main-title {
  font-family: var(--bgs-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
}

/* Quatro tamanhos, so. O site nao inventa um quinto. */
h1, .entry-title { font-size: clamp(34px, 4.4vw, 56px); }
h2 { font-size: clamp(27px, 3.2vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.2; }
h4 { font-size: 19px; }

a { color: var(--bgs-gold-ink); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--bgs-ink); }

::selection { background: var(--bgs-gold-pale); color: var(--bgs-ink); }

/* ==========================================================================
   CABECALHO — wordmark tipografico, fundo proprio.
   O texto do topo NUNCA depende da foto que estiver atras.
   ========================================================================== */
.site-header {
  background: var(--bgs-ink-2);
  border-bottom: 1px solid rgba(220, 185, 100, .28);
  backdrop-filter: none;
}
.site-header .inside-header { padding: 18px 26px; }

/* O selo redondo sai do topo: texto em circulo vira borrao abaixo de 120px.
   Ele continua na capa dos ebooks, na Etsy e no Pinterest, onde e grande. */
.site-header .site-logo { display: none; }

.site-branding { display: block; }
.site-branding .main-title {
  font-size: 19px;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}
.site-branding .main-title a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
}
.site-branding .main-title a:hover { color: var(--bgs-gold-light); }
.site-branding::after {
  content: "Rio de Janeiro · Brazil";
  display: block;
  font-family: var(--bgs-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--bgs-gold-light);
  margin-top: 8px;
}
.site-description { display: none; }

.main-navigation,
.main-navigation ul ul { background: var(--bgs-ink-2); }
.main-navigation .main-nav ul li a {
  color: #F6F1E7;
  font-family: var(--bgs-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--bgs-gold-light);
}
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: #F6F1E7; }
.main-navigation ul ul li a { letter-spacing: .10em; }

/* ==========================================================================
   RODAPE
   ========================================================================== */
.site-footer,
.site-info {
  background: var(--bgs-ink);
  border-top: 1px solid rgba(220, 185, 100, .22);
  color: #C6BCA9;
}
.site-info a { color: var(--bgs-gold-light); }
.site-info a:hover { color: #fff; }

/* ==========================================================================
   AVISO DE AFILIADO — rodape e dentro de post
   ========================================================================== */
.bgs-disclosure {
  background: var(--bgs-gold-pale);
  border: 0;
  border-left: 3px solid var(--bgs-gold);
  border-radius: 0;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #463F31;
  margin: 18px 0;
}
.site-info .bgs-disclosure {
  background: transparent;
  border-left-color: var(--bgs-gold-light);
  color: #C6BCA9;
}

/* ==========================================================================
   BOTAO DA MARCA — serve em pagina, post e home
   ========================================================================== */
.bgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bgs-gold);
  color: var(--bgs-ink);
  text-decoration: none;
  font-family: var(--bgs-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid var(--bgs-gold);
  border-radius: 2px;
  line-height: 1.2;
  box-shadow: none;
  transition: background .22s, border-color .22s, color .22s;
}
.bgs-btn:hover, .bgs-btn:focus {
  background: var(--bgs-gold-light);
  border-color: var(--bgs-gold-light);
  color: var(--bgs-ink);
  transform: none;
}
.bgs-btn.is-gold { background: var(--bgs-gold); border-color: var(--bgs-gold); color: var(--bgs-ink); }
.bgs-btn.is-ghost {
  background: transparent;
  color: var(--bgs-ink);
  border: 1px solid var(--bgs-ink);
}
.bgs-btn.is-ghost:hover, .bgs-btn.is-ghost:focus {
  background: var(--bgs-ink);
  color: var(--bgs-cream);
}
.bgs-btn.on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.bgs-btn.on-dark:hover, .bgs-btn.on-dark:focus { background: #fff; color: var(--bgs-ink); }
.bgs-btn.is-sm { padding: 11px 22px; font-size: 11px; }

/* Foco visivel — acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--bgs-gold-ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bgs-btn { transition: none; }
}

/* ==========================================================================
   PAGINAS DE TEXTO — largura de leitura confortavel
   ========================================================================== */
.page:not(.home) .entry-content > *,
.single-post .entry-content > * { max-width: 68ch; }
.page:not(.home) .entry-content > h2,
.single-post .entry-content > h2 { margin-top: 1.9em; }
.page .entry-title, .single-post .entry-title { letter-spacing: -.02em; }
.entry-content ul li { margin-bottom: .5em; }
.entry-content > p, .entry-content > ul, .entry-content > ol { color: #3A342A; }

/* ==========================================================================
   CELULAR — o wordmark inteiro nao cabe na mesma linha do botao do menu
   ========================================================================== */
@media (max-width: 768px) {
  .site-header .inside-header { padding: 14px 18px; }
  .site-branding .main-title { font-size: 14px; letter-spacing: .08em; }
  .site-branding .main-title a { padding-bottom: 5px; }
  .site-branding::after { font-size: 8px; letter-spacing: .24em; margin-top: 6px; }
}