/* ==========================================================================
   Responsividade — compartilhada pelas 5 páginas públicas.
   Criada na revisão de responsividade: antes o site não tinha nenhuma media
   query, então usava o layout de desktop em qualquer largura.

   Nota sobre zoom de navegador: zoom de 200% numa tela de 1440px equivale a
   um viewport de 720px CSS. Por isso os mesmos breakpoints cobrem celular e
   zoom no desktop — não são cenários separados.

   Os !important existem porque o projeto usa style inline em quase tudo
   (herança do exportador de design) e inline vence folha externa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Trava de overflow horizontal
   Rede de segurança: nenhuma página deve rolar de lado em nenhuma largura.
   -------------------------------------------------------------------------- */
/* IMPORTANTE: usar "clip", não "hidden".
   overflow-x:hidden transforma o elemento em contêiner de scroll, o que fazia
   a página rolar dentro do body: window.scrollY ficava em 0 e a navbar nunca
   escurecia (o handler observa window.scrollY). "clip" corta o excesso sem
   criar contêiner de scroll. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* Palavras longas (e-mail, URL) não devem estourar o contêiner */
p, h1, h2, h3, li, span, a { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   2. Botão de menu (só aparece em telas estreitas)
   Alternância em CSS puro com checkbox + label: sem JS, para não depender do
   runtime da página.
   -------------------------------------------------------------------------- */
.bm-menu-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.bm-menu-botao {
  display: none;
  width: 46px; height: 46px;           /* alvo de toque confortável */
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer; border-radius: 8px;
  border: 1px solid rgba(175, 81, 45, 0.45);
  background: rgba(175, 81, 45, 0.12);
  flex-shrink: 0;
}
.bm-menu-botao span {
  display: block; width: 20px; height: 1.5px;
  background: #f0ede8; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.bm-menu-toggle:focus-visible + .bm-menu-botao { outline: 2px solid #af512d; outline-offset: 2px; }

/* Vira "X" quando aberto */
.bm-menu-toggle:checked + .bm-menu-botao span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bm-menu-toggle:checked + .bm-menu-botao span:nth-child(2) { opacity: 0; }
.bm-menu-toggle:checked + .bm-menu-botao span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   3. Tablet e abaixo — inclui zoom de ~200% no desktop
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Grades de colunas fixas passam a acomodar o que couber.
     Sem isso, "repeat(3,1fr)" mantinha 3 colunas de ~120px a 320px. */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.35fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:1.15fr 1fr"] {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  }

  /* Menu vira painel sobreposto, aberto pelo botão */
  #bm-navbar { flex-wrap: nowrap !important; }
  .bm-menu-botao { display: flex; }

  #bm-navbar .bm-menu {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 0 14px !important;
    background: rgba(5, 5, 7, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    border-top: 1px solid rgba(175, 81, 45, 0.25);
  }
  #bm-menu-toggle:checked ~ .bm-menu { display: flex !important; }

  /* Cada item com altura de toque adequada (mínimo 44px) */
  #bm-navbar .bm-menu > a {
    min-height: 48px;
    display: flex !important; align-items: center;
    padding: 0 clamp(24px, 5vw, 72px) !important;
    font-size: 17px !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important;
    color: rgba(240, 237, 232, 0.9) !important;
  }
  /* O "Contato" mantém o destaque, mas como faixa */
  #bm-navbar .bm-menu > a:last-child {
    margin-top: 8px;
    color: #f0ede8 !important;
    background: rgba(175, 81, 45, 0.16) !important;
    border-top: 1px solid rgba(175, 81, 45, 0.3) !important;
  }
}

/* --------------------------------------------------------------------------
   4. Celular
   -------------------------------------------------------------------------- */
/* O zoom 0.85 vale só no desktop grande, onde foi aprovado. Abaixo de
   1400px os clamp() ainda estão perto do mínimo, e o zoom levava o texto
   corrido para 12,8-13,3px — pequeno demais em notebook e no celular.
   O limiar é 1400 (e não 1200) para o tamanho do texto crescer de forma
   contínua: sem isso havia uma queda de 15px para 13,3px justo em 1200. */
@media (max-width: 1399px) {
  html { zoom: 1 !important; }
}

@media (max-width: 700px) {
  /* Uma coluna: abaixo disso, duas nunca cabem bem */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Respiro lateral menor, para o texto não virar uma coluna fina */
  section, footer { padding-left: clamp(18px, 5vw, 28px) !important; padding-right: clamp(18px, 5vw, 28px) !important; }

  /* Blocos posicionados de forma absoluta nos heros voltam ao fluxo */
  [data-screen-label="Hero"] > div[style*="position:absolute"][style*="max-width:min(420px"] {
    position: static !important; max-width: 100% !important; margin-bottom: 20px;
  }

  /* Linhas de metadados (autor · data · tempo de leitura) precisam quebrar */
  [style*="display:flex"][style*="align-items:center"] { flex-wrap: wrap; }

  /* Alvos de toque */
  a, button { min-height: 40px; }
  a[style*="border-radius:999px"], button { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* --------------------------------------------------------------------------
   5. Celular pequeno (320px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  /* Selos do rodapé lado a lado não cabem */
  footer img { max-height: 58px; }
}

/* --------------------------------------------------------------------------
   6. Quem prefere menos animação
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .bm-reveal, .bm-clipreveal { opacity: 1 !important; }
}


/* --------------------------------------------------------------------------
   7. Navbar ao rolar a página
   A regra vive aqui, e não em cada página, porque duas delas (blog e artigo)
   declaravam sem !important e o style inline "background:transparent" vencia.
   -------------------------------------------------------------------------- */
#bm-navbar.bm-scrolled {
  background: rgba(5, 5, 7, 0.9) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 1px 0 rgba(175, 81, 45, 0.18) !important;
}

/* --------------------------------------------------------------------------
   8. Revelação dos títulos sem cortar descendentes
   A animação bm-clipin termina em clip-path:inset(0 0 0 0), que corta na
   borda exata da caixa. Como os títulos usam line-height ~1.05, a perna do
   "g", "q", "j" e a cedilha ficam fora da caixa e eram decepadas.
   Insets negativos expandem a área de recorte para fora da caixa: a varredura
   da esquerda para a direita continua igual, mas nada é cortado na vertical.
   O animation-name usa !important porque a folha da própria página é
   carregada depois desta e redefine bm-clipin.
   -------------------------------------------------------------------------- */
@keyframes bm-clipin-livre {
  from { opacity: 0; clip-path: inset(-0.4em 100% -0.4em -0.06em); }
  to   { opacity: 1; clip-path: inset(-0.4em -0.06em -0.4em -0.06em); }
}
.bm-clipreveal.bm-visible { animation-name: bm-clipin-livre !important; }