/*
============================================================================
ARQUIVO: botoes-projetos.css
----------------------------------------------------------------------------
OBJETIVO:
- Centralizar a configuração visual dos botões Projeto/Resumo.
- Corrigir o estado visual preso em dispositivos touch.
- Reduzir tamanho dos botões sem alterar o Styles.css principal.

CONFIGURAÇÃO PRINCIPAL:
Altere as variáveis abaixo para controlar altura, largura, fonte, borda e cores.
============================================================================
*/

:root {
  --botao-projeto-altura: 34px;
  --botao-projeto-largura-minima: 86px;
  --botao-projeto-padding-horizontal: 12px;
  --botao-projeto-fonte-tamanho: 0.76rem;
  --botao-projeto-fonte-peso: 700;
  --botao-projeto-borda-raio: 8px;
  --botao-projeto-borda-cor: #2f3640;
  --botao-projeto-cor-texto: #1f2933;
  --botao-projeto-cor-fundo: #ffffff;
  --botao-projeto-cor-hover-fundo: #805b468c;
  --botao-projeto-cor-hover-texto: #ffffff;
  --botao-projeto-cor-hover-borda: #8c644d61;
}

/* Base comum dos botões de projeto e resumo */
.botao-projeto,
.botao-resumo,
.abrir-projeto,
.posts .botao-projeto,
.posts .botao-resumo,
.card-tokenflow .botao-projeto,
.card-tokenflow .botao-resumo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--botao-projeto-altura) !important;
  height: var(--botao-projeto-altura) !important;
  min-width: var(--botao-projeto-largura-minima) !important;
  width: auto !important;
  padding: 0 var(--botao-projeto-padding-horizontal) !important;
  border: 1px solid var(--botao-projeto-borda-cor) !important;
  border-radius: var(--botao-projeto-borda-raio) !important;
  background-color: var(--botao-projeto-cor-fundo) !important;
  color: var(--botao-projeto-cor-texto) !important;
  font-size: var(--botao-projeto-fonte-tamanho) !important;
  font-weight: var(--botao-projeto-fonte-peso) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

/* Hover apenas em dispositivos com mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  .botao-projeto:hover,
  .botao-resumo:hover,
  .abrir-projeto:hover,
  .posts .botao-projeto:hover,
  .posts .botao-resumo:hover,
  .card-tokenflow .botao-projeto:hover,
  .card-tokenflow .botao-resumo:hover {
    background-color: var(--botao-projeto-cor-hover-fundo) !important;
    color: var(--botao-projeto-cor-hover-texto) !important;
    border-color: var(--botao-projeto-cor-hover-borda) !important;
  }
}

/* Em celular/tablet, impede que o botão fique preso na cor de toque */
@media (hover: none), (pointer: coarse) {
  .botao-projeto:hover,
  .botao-projeto:focus,
  .botao-projeto:focus-visible,
  .botao-resumo:hover,
  .botao-resumo:focus,
  .botao-resumo:focus-visible,
  .abrir-projeto:hover,
  .abrir-projeto:focus,
  .abrir-projeto:focus-visible,
  .posts .botao-projeto:hover,
  .posts .botao-projeto:focus,
  .posts .botao-resumo:hover,
  .posts .botao-resumo:focus,
  .card-tokenflow .botao-projeto:hover,
  .card-tokenflow .botao-projeto:focus,
  .card-tokenflow .botao-resumo:hover,
  .card-tokenflow .botao-resumo:focus {
    background-color: var(--botao-projeto-cor-fundo) !important;
    color: var(--botao-projeto-cor-texto) !important;
    border-color: var(--botao-projeto-borda-cor) !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .botao-projeto:active,
  .botao-resumo:active,
  .abrir-projeto:active {
    background-color: var(--botao-projeto-cor-hover-fundo) !important;
    color: var(--botao-projeto-cor-hover-texto) !important;
    border-color: var(--botao-projeto-cor-hover-borda) !important;
  }
}

/* ==========================================================================
   BOTÕES SUPERIORES — SOBRE MIM / PROJETOS
   --------------------------------------------------------------------------
   Local central para configurar os botões superiores da primeira dobra.
   Ajusta tamanho, largura, borda, fonte, cores e comportamento em toque.
   ========================================================================== */

:root {
  --botao-topo-altura: 32px;
  --botao-topo-largura-minima: 104px;
  --botao-topo-padding-horizontal: 16px;
  --botao-topo-fonte-tamanho: 0.72rem;
  --botao-topo-fonte-peso: 700;
  --botao-topo-borda-raio: 999px;

  --botao-topo-primario-fundo: #a87961;
  --botao-topo-primario-texto: #ffffff;
  --botao-topo-primario-borda: #a87961;

  --botao-topo-secundario-fundo: transparent;
  --botao-topo-secundario-texto: #ffffff;
  --botao-topo-secundario-borda: rgba(255, 255, 255, 0.78);

  --botao-topo-hover-fundo: #ffffff;
  --botao-topo-hover-texto: #1f2933;
  --botao-topo-hover-borda: #ffffff;
}

/* Estado base dos botões superiores */
a.btn[href="#sobre"],
a.btn[href="#projetos"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--botao-topo-altura) !important;
  height: var(--botao-topo-altura) !important;
  min-width: var(--botao-topo-largura-minima) !important;
  width: auto !important;
  padding: 0 var(--botao-topo-padding-horizontal) !important;
  border-radius: var(--botao-topo-borda-raio) !important;
  font-size: var(--botao-topo-fonte-tamanho) !important;
  font-weight: var(--botao-topo-fonte-peso) !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

/* Sobre mim: botão principal */
a.btn.btn-primary[href="#sobre"] {
  background-color: var(--botao-topo-primario-fundo) !important;
  color: var(--botao-topo-primario-texto) !important;
  border: 1px solid var(--botao-topo-primario-borda) !important;
}

/* Projetos: botão secundário */
a.btn.btn-outline[href="#projetos"] {
  background-color: var(--botao-topo-secundario-fundo) !important;
  color: var(--botao-topo-secundario-texto) !important;
  border: 1px solid var(--botao-topo-secundario-borda) !important;
}

/* Hover somente para mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  a.btn[href="#sobre"]:hover,
  a.btn[href="#projetos"]:hover {
    background-color: var(--botao-topo-hover-fundo) !important;
    color: var(--botao-topo-hover-texto) !important;
    border-color: var(--botao-topo-hover-borda) !important;
  }
}

/* Em celular/tablet, impede botão preso em estado de hover/focus */
@media (hover: none), (pointer: coarse) {
  a.btn.btn-primary[href="#sobre"]:hover,
  a.btn.btn-primary[href="#sobre"]:focus,
  a.btn.btn-primary[href="#sobre"]:focus-visible {
    background-color: var(--botao-topo-primario-fundo) !important;
    color: var(--botao-topo-primario-texto) !important;
    border-color: var(--botao-topo-primario-borda) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  a.btn.btn-outline[href="#projetos"]:hover,
  a.btn.btn-outline[href="#projetos"]:focus,
  a.btn.btn-outline[href="#projetos"]:focus-visible {
    background-color: var(--botao-topo-secundario-fundo) !important;
    color: var(--botao-topo-secundario-texto) !important;
    border-color: var(--botao-topo-secundario-borda) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  a.btn[href="#sobre"]:active,
  a.btn[href="#projetos"]:active {
    background-color: var(--botao-topo-hover-fundo) !important;
    color: var(--botao-topo-hover-texto) !important;
    border-color: var(--botao-topo-hover-borda) !important;
  }
}

/* ==========================================================================
   AJUSTE_BOTOES_HERO_CONTATO_IGUAL_CARDS_202606
   --------------------------------------------------------------------------
   Padroniza os botões superiores "Sobre mim" e "Projetos" e o botão inferior
   "Enviar e-mail" para seguirem o mesmo comportamento visual dos botões
   "Projeto" e "Resumo" dos cards.

   Objetivos:
   - reduzir o tamanho visual dos botões;
   - remover aparência exagerada em formato pill grande;
   - manter estado normal branco com borda escura;
   - aplicar hover somente em mouse/trackpad;
   - impedir cor presa em celular/tablet após toque.
   ========================================================================== */

/* Painel de controle local dos botões superiores e de contato */
:root {
  --botao-acao-site-altura: var(--botao-projeto-altura);
  --botao-acao-site-largura-minima: 92px;
  --botao-acao-site-email-largura-minima: 150px;
  --botao-acao-site-padding-horizontal: var(--botao-projeto-padding-horizontal);
  --botao-acao-site-fonte-tamanho: var(--botao-projeto-fonte-tamanho);
  --botao-acao-site-fonte-peso: var(--botao-projeto-fonte-peso);
  --botao-acao-site-borda-raio: var(--botao-projeto-borda-raio);
  --botao-acao-site-borda-cor: var(--botao-projeto-borda-cor);
  --botao-acao-site-texto: var(--botao-projeto-cor-texto);
  --botao-acao-site-fundo: var(--botao-projeto-cor-fundo);
  --botao-acao-site-hover-fundo: var(--botao-projeto-cor-hover-fundo);
  --botao-acao-site-hover-texto: var(--botao-projeto-cor-hover-texto);
  --botao-acao-site-hover-borda: var(--botao-projeto-cor-hover-borda);
}

/* Estado normal: topo e contato seguem o padrão dos botões dos cards */
.hero-actions .btn,
.contact-section .email-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--botao-acao-site-altura) !important;
  height: var(--botao-acao-site-altura) !important;
  width: auto !important;
  padding: 0 var(--botao-acao-site-padding-horizontal) !important;
  border: 1px solid var(--botao-acao-site-borda-cor) !important;
  border-radius: var(--botao-acao-site-borda-raio) !important;
  background-color: var(--botao-acao-site-fundo) !important;
  color: var(--botao-acao-site-texto) !important;
  font-size: var(--botao-acao-site-fonte-tamanho) !important;
  font-weight: var(--botao-acao-site-fonte-peso) !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

/* Largura específica dos botões superiores */
.hero-actions .btn {
  min-width: var(--botao-acao-site-largura-minima) !important;
}

/* Largura específica do botão "Enviar e-mail" */
.contact-section .email-button {
  min-width: var(--botao-acao-site-email-largura-minima) !important;
  max-width: max-content !important;
}

/* Hover somente em dispositivos com mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  .hero-actions .btn:hover,
  .contact-section .email-button:hover {
    background-color: var(--botao-acao-site-hover-fundo) !important;
    color: var(--botao-acao-site-hover-texto) !important;
    border-color: var(--botao-acao-site-hover-borda) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Touch/mobile: impede cor presa após toque */
@media (hover: none), (pointer: coarse) {
  .hero-actions .btn:hover,
  .hero-actions .btn:focus,
  .hero-actions .btn:focus-visible,
  .contact-section .email-button:hover,
  .contact-section .email-button:focus,
  .contact-section .email-button:focus-visible {
    background-color: var(--botao-acao-site-fundo) !important;
    color: var(--botao-acao-site-texto) !important;
    border-color: var(--botao-acao-site-borda-cor) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  .hero-actions .btn:active,
  .contact-section .email-button:active {
    background-color: var(--botao-acao-site-hover-fundo) !important;
    color: var(--botao-acao-site-hover-texto) !important;
    border-color: var(--botao-acao-site-hover-borda) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   AJUSTE_FINAL_BOTOES_PADRAO_CARDS_202606
   --------------------------------------------------------------------------
   Camada final de correção dos botões principais do site.

   Esta regra possui especificidade maior para vencer regras anteriores de:
   - .btn-primary
   - .btn-outline
   - .email-button
   - .project-button

   Objetivo:
   - deixar SOBRE MIM, PROJETOS, ENVIAR E-MAIL, PROJETO e RESUMO no mesmo padrão;
   - reduzir tamanho visual;
   - usar fundo branco, borda escura e texto escuro no estado normal;
   - usar hover marrom claro;
   - impedir cor presa em dispositivos touch.
   ========================================================================== */

:root {
  --botao-padrao-site-altura: 34px;
  --botao-padrao-site-largura-minima: 86px;
  --botao-padrao-site-email-largura-minima: 138px;
  --botao-padrao-site-padding-horizontal: 12px;
  --botao-padrao-site-raio: 8px;
  --botao-padrao-site-fonte-tamanho: 0.76rem;
  --botao-padrao-site-fonte-peso: 700;

  --botao-padrao-site-fundo: #ffffff;
  --botao-padrao-site-texto: #1f2933;
  --botao-padrao-site-borda: #1f2933;

/*--botao-padrao-site-hover-fundo: #b79a89;*/
  --botao-padrao-site-hover-fundo: #ceb8ab;
  --botao-padrao-site-hover-texto: #000000;
  --botao-padrao-site-hover-borda: #b79a89;
}

/* Estado normal: topo, contato, cards e modal no mesmo padrão */
.hero .hero-actions a.btn.btn-primary[href="#sobre"],
.hero .hero-actions a.btn.btn-outline[href="#projetos"],
.contact-section button.email-button#email-button,
.projects-section button.project-button.botao-projeto,
.projects-section button.project-button.botao-resumo,
#project-modal .modal-actions a.button,
#project-modal .modal-actions button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--botao-padrao-site-altura) !important;
  height: var(--botao-padrao-site-altura) !important;
  min-width: var(--botao-padrao-site-largura-minima) !important;
  width: auto !important;
  padding: 0 var(--botao-padrao-site-padding-horizontal) !important;
  border: 1px solid var(--botao-padrao-site-borda) !important;
  border-radius: var(--botao-padrao-site-raio) !important;
  background-color: var(--botao-padrao-site-fundo) !important;
  color: var(--botao-padrao-site-texto) !important;
  font-size: var(--botao-padrao-site-fonte-tamanho) !important;
  font-weight: var(--botao-padrao-site-fonte-peso) !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

/* Largura específica do botão inferior de contato */
.contact-section button.email-button#email-button {
  min-width: var(--botao-padrao-site-email-largura-minima) !important;
}

/* Hover somente para mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  .hero .hero-actions a.btn.btn-primary[href="#sobre"]:hover,
  .hero .hero-actions a.btn.btn-outline[href="#projetos"]:hover,
  .contact-section button.email-button#email-button:hover,
  .projects-section button.project-button.botao-projeto:hover,
  .projects-section button.project-button.botao-resumo:hover,
  #project-modal .modal-actions a.button:hover,
  #project-modal .modal-actions button.button:hover {
    background-color: var(--botao-padrao-site-hover-fundo) !important;
    color: var(--botao-padrao-site-hover-texto) !important;
    border-color: var(--botao-padrao-site-hover-borda) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Touch/mobile: impede estado visual preso após toque */
@media (hover: none), (pointer: coarse) {
  .hero .hero-actions a.btn.btn-primary[href="#sobre"]:hover,
  .hero .hero-actions a.btn.btn-primary[href="#sobre"]:focus,
  .hero .hero-actions a.btn.btn-primary[href="#sobre"]:focus-visible,
  .hero .hero-actions a.btn.btn-outline[href="#projetos"]:hover,
  .hero .hero-actions a.btn.btn-outline[href="#projetos"]:focus,
  .hero .hero-actions a.btn.btn-outline[href="#projetos"]:focus-visible,
  .contact-section button.email-button#email-button:hover,
  .contact-section button.email-button#email-button:focus,
  .contact-section button.email-button#email-button:focus-visible,
  .projects-section button.project-button.botao-projeto:hover,
  .projects-section button.project-button.botao-projeto:focus,
  .projects-section button.project-button.botao-projeto:focus-visible,
  .projects-section button.project-button.botao-resumo:hover,
  .projects-section button.project-button.botao-resumo:focus,
  .projects-section button.project-button.botao-resumo:focus-visible {
    background-color: var(--botao-padrao-site-fundo) !important;
    color: var(--botao-padrao-site-texto) !important;
    border-color: var(--botao-padrao-site-borda) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
  }

  .hero .hero-actions a.btn.btn-primary[href="#sobre"]:active,
  .hero .hero-actions a.btn.btn-outline[href="#projetos"]:active,
  .contact-section button.email-button#email-button:active,
  .projects-section button.project-button.botao-projeto:active,
  .projects-section button.project-button.botao-resumo:active {
    background-color: var(--botao-padrao-site-hover-fundo) !important;
    color: var(--botao-padrao-site-hover-texto) !important;
    border-color: var(--botao-padrao-site-hover-borda) !important;
  }
}

/* ==========================================================================
   AJUSTE_SOMBRA_HOVER_BOTOES_TOPO_CONTATO_202606
   --------------------------------------------------------------------------
   Adiciona sombra inferior discreta nos botões superiores e no botão de
   contato somente quando houver interação por mouse/trackpad.
   Não altera os botões Projeto/Resumo dos cards.
   ========================================================================== */

:root {
  --botao-topo-contato-hover-sombra: 0 7px 14px #ffffff;
}

/* Sombra somente em dispositivos com mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  .hero .hero-actions a.btn.btn-primary[href="#sobre"]:hover,
  .hero .hero-actions a.btn.btn-outline[href="#projetos"]:hover,
  .contact-section button.email-button#email-button:hover {
    box-shadow: var(--botao-topo-contato-hover-sombra) !important;
  }
}

/* ==========================================================================
   AJUSTE_SOMBRA_HOVER_BOTOES_CARDS_202606
   --------------------------------------------------------------------------
   Adiciona sombra discreta aos botões Projeto/Resumo dos cards quando houver
   interação com mouse. A cor não é branca porque os cards e botões já usam
   fundo claro, então a sombra precisa gerar contraste visual.
   ========================================================================== */

:root {
  --botao-card-hover-sombra: 0 7px 14px rgba(42, 33, 29, 0.24);
}

/* Sombra somente em dispositivos com mouse/trackpad */
@media (hover: hover) and (pointer: fine) {
  .projects-section button.project-button.botao-projeto:hover,
  .projects-section button.project-button.botao-resumo:hover {
    box-shadow: var(--botao-card-hover-sombra) !important;
  }
}

/* Em touch/mobile, aplica sombra apenas no momento do toque */
@media (hover: none), (pointer: coarse) {
  .projects-section button.project-button.botao-projeto:active,
  .projects-section button.project-button.botao-resumo:active {
    box-shadow: var(--botao-card-hover-sombra) !important;
  }
}

/* ==========================================================================
   AJUSTE_MOBILE_BOTOES_CARDS_202606
   --------------------------------------------------------------------------
   Reduz os botões PROJETO e RESUMO dos cards em dispositivos móveis.
   O ajuste evita que os botões fiquem largos demais ou ultrapassem o limite
   visual dos cards em telas menores.
   ========================================================================== */

:root {
  --botao-card-mobile-altura: 30px;
  --botao-card-mobile-largura-minima: 70px;
  --botao-card-mobile-padding-horizontal: 8px;
  --botao-card-mobile-fonte-tamanho: 0.66rem;
  --botao-card-mobile-raio: 8px;
}

/* Ajuste para tablets e celulares */
@media (max-width: 768px) {
  .projects-section button.project-button.botao-projeto,
  .projects-section button.project-button.botao-resumo {
    min-height: var(--botao-card-mobile-altura) !important;
    height: var(--botao-card-mobile-altura) !important;
    min-width: var(--botao-card-mobile-largura-minima) !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 var(--botao-card-mobile-padding-horizontal) !important;
    border-radius: var(--botao-card-mobile-raio) !important;
    font-size: var(--botao-card-mobile-fonte-tamanho) !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }

  .projects-section .project-actions,
  .projects-section .card-actions,
  .projects-section .project-card-actions {
    gap: 7px !important;
    justify-content: center !important;
  }
}

/* Ajuste mais compacto para celulares estreitos */
@media (max-width: 480px) {
  .projects-section button.project-button.botao-projeto,
  .projects-section button.project-button.botao-resumo {
    min-width: 64px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 7px !important;
    font-size: 0.62rem !important;
  }

  .projects-section .project-actions,
  .projects-section .card-actions,
  .projects-section .project-card-actions {
    gap: 6px !important;
  }
}