/* Ajustes de acessibilidade (WCAG 2.1 AA) — carregado por ultimo para
   sobrescrever style.css sem edita-lo. */

/* 1. Skip link: permite pular a navegacao com teclado/leitor de tela. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}
.skip-link:focus {
  left: 0;
}

/* 2. Foco visivel em qualquer elemento interativo (navegacao por teclado). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffbe33;
  outline-offset: 2px;
}

/* 3. Contraste: links de corpo de texto sobre fundo claro.
   O amarelo #ffbe33 sobre branco fica em ~1.8:1 e reprova em AA.
   Este tom escuro fica acima de 4.5:1 e mantem a identidade quente. */
.content-link {
  color: #8a4b00;
  text-decoration: underline;
}
.content-link:hover,
.content-link:focus {
  color: #6d3b00;
}

/* 4. Area de toque minima de 44x44px (WCAG 2.5.5) nos alvos pequenos. */
.footer_social a,
.navbar-nav .nav-link,
.filters_menu li {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  line-height: 1.6;
  padding: 10px 14px;
}

.whatsapp-float .wa-icon {
  min-height: 48px;
  min-width: 48px;
}

/* 5. Texto auxiliar cinza: #a5a5a5 sobre branco reprova em AA.
   Escurecido para ~4.6:1 mantendo a hierarquia visual. */
.box .detail-box p span[style*="#a5a5a5"] {
  color: #6b6b6b !important;
}

/* 6. Botoes fora do template da home.
   No template original o botao e estilizado pelo contexto (.btn-box a), nao
   pela classe .btn1 — entao .btn1 sozinho, nas paginas novas, caia no link
   azul padrao do navegador. Aqui ela ganha estilo proprio, igual ao da home. */
.btn1,
a.btn1,
button.btn1 {
  display: inline-block;
  padding: 12px 40px;
  background-color: #ffbe33;
  color: #222831;
  border-radius: 45px;
  border: none;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}
.btn1:hover,
.btn1:focus {
  background-color: #e69c00;
  color: #222831;
  text-decoration: none;
}

/* Botao secundario: mesma forma, peso visual menor — para a acao alternativa
   ao lado do CTA principal (ex.: "Montar cotacao" ao lado do WhatsApp). */
.btn2,
a.btn2 {
  display: inline-block;
  padding: 12px 40px;
  background-color: transparent;
  color: #8a4b00;
  border: 2px solid #ffbe33;
  border-radius: 45px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s;
}
.btn2:hover,
.btn2:focus {
  background-color: #ffbe33;
  color: #222831;
  text-decoration: none;
}

/* Acoes do card de produto: "Saiba mais" ao lado do botao do WhatsApp. */
.options-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* O template zera padding e forca `color:#fff!important` em
   `.food_section .box .options a`, entao esta regra precisa de especificidade
   maior (4 classes) e de !important na cor para vencer. */
.card-saiba-mais,
.food_section .box .options .card-saiba-mais {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 2px solid #ffbe33;
  border-radius: 45px;
  color: #ffbe33 !important;
  background: transparent;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.3s;
}
.card-saiba-mais:hover,
.card-saiba-mais:focus,
.food_section .box .options .card-saiba-mais:hover,
.food_section .box .options .card-saiba-mais:focus {
  background-color: #ffbe33;
  color: #222831 !important;
  text-decoration: none;
  transform: none;
  opacity: 1;
}

/* Empilha os botoes no celular em vez de espremer lado a lado. */
.acoes-produto {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.acoes-produto .btn1,
.acoes-produto .btn2 {
  flex: 1 1 auto;
  min-width: 240px;
}

/* 7. Conteudo das paginas internas herda a tipografia do site sem
   depender das classes do template da home. */
main#conteudo h1 {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}
main#conteudo h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 12px;
}
main#conteudo p,
main#conteudo li {
  line-height: 1.75;
}
main#conteudo ul {
  padding-left: 22px;
  margin-bottom: 16px;
}