/* ════════════════════════════════════════════════════════════════════
   WAVE STUDIO — overrides.css  v6.0
   Bootstrap 5.3 overrides com identidade da marca.
   Carregar SEMPRE depois de bootstrap.min.css e depois de style.css.
   ────────────────────────────────────────────────────────────────────
   WCAG FIX — btn-primary:
   Branco #FFF sobre sálvia #8FA882 = 2.6:1 ❌ FALHA AA
   Solução: texto --salvia-btn (#2D2A26) = 5.5:1 ✅ AA
════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   1. BTN — Base tipográfica de todos os botões
   ──────────────────────────────────────────────────────────────── */
.btn {
  font-family:    var(--f-h);
  font-weight:    600;
  letter-spacing: .08em;
  border-radius:  var(--r);
  transition:     all var(--tr);
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
}


/* ────────────────────────────────────────────────────────────────
   2. BTN-PRIMARY — Botão principal (sálvia + texto escuro)
   ──────────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--salvia);
  border-color:     var(--salvia);
  color:            var(--salvia-btn);  /* #2D2A26 — 5.5:1 ✅ AA */
  box-shadow:       var(--sh-s);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--salvia-hover);
  border-color:     var(--salvia-hover);
  color:            var(--salvia-btn);
  transform:        translateY(-2px);
  box-shadow:       0 12px 32px rgba(var(--salvia-rgb), .45);
}
.btn-primary:active {
  background-color: var(--salvia-hover);
  border-color:     var(--salvia-hover);
  color:            var(--salvia-btn);
  transform:        translateY(0);
}
.btn-primary:focus-visible {
  outline:    3px solid var(--salvia-texto);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(78, 105, 67, .20);
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--salvia);
  border-color:     var(--salvia);
  color:            var(--salvia-btn);
  opacity:          .5;
  cursor:           not-allowed;
  transform:        none;
}


/* ────────────────────────────────────────────────────────────────
   3. BTN-WA — WhatsApp (#25D366, branco 4.5:1 ✅ AA)
   ──────────────────────────────────────────────────────────────── */
.btn-wa {
  background-color: var(--wa);
  border-color:     var(--wa);
  color:            var(--txt-inv);
  box-shadow:       0 4px 18px rgba(37, 211, 102, .30);
  font-family:      var(--f-h);
  font-weight:      600;
  letter-spacing:   .08em;
  border-radius:    var(--r);
  display:          inline-flex;
  align-items:      center;
  gap:              .5rem;
  text-decoration:  none;
  transition:       all var(--tr);
}
.btn-wa:hover,
.btn-wa:focus {
  background-color: var(--wa-hover);
  border-color:     var(--wa-hover);
  color:            var(--txt-inv);
  transform:        translateY(-2px);
  box-shadow:       0 8px 24px rgba(37, 211, 102, .45);
}
.btn-wa:active  { transform: translateY(0); background-color: var(--wa-hover); }
.btn-wa:focus-visible {
  outline:    3px solid #1da851;
  outline-offset: 3px;
}


/* ────────────────────────────────────────────────────────────────
   4. BTN-DARK — CTA sobre fundos coloridos
      #4A403A sobre branco = 10.1:1 ✅ AAA
   ──────────────────────────────────────────────────────────────── */
.btn-dark {
  background-color: var(--txt-h);
  border-color:     var(--txt-h);
  color:            var(--txt-inv);  /* 10.1:1 ✅ AAA */
  font-family:      var(--f-h);
  font-weight:      600;
  letter-spacing:   .08em;
}
.btn-dark:hover,
.btn-dark:focus {
  background-color: var(--taupe-esc);
  border-color:     var(--taupe-esc);
  color:            var(--txt-inv);
  transform:        translateY(-2px);
}
.btn-dark:active { background-color: var(--taupe-esc); transform: translateY(0); }
.btn-dark:focus-visible {
  outline:    3px solid rgba(74, 64, 58, .6);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(74, 64, 58, .15);
}


/* ────────────────────────────────────────────────────────────────
   5. BTN-OUTLINE-SALVIA — Secundário
      --salvia-texto (#4E6943) sobre branco = 6.1:1 ✅ AA
   ──────────────────────────────────────────────────────────────── */
.btn-outline-salvia {
  border:         1.5px solid var(--salvia-texto);
  color:          var(--salvia-texto);
  background:     transparent;
  font-family:    var(--f-h);
  font-size:      .85rem;
  font-weight:    600;
  letter-spacing: .08em;
  padding:        .75rem 2rem;
  border-radius:  var(--r);
  transition:     all var(--tr);
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  text-decoration: none;
}
.btn-outline-salvia:hover {
  background: var(--salvia-texto);
  color:      var(--txt-inv);
  transform:  translateY(-2px);
}
.btn-outline-salvia:focus-visible {
  outline:    3px solid var(--salvia-texto);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(78, 105, 67, .20);
}


/* ────────────────────────────────────────────────────────────────
   6. TAMANHOS DE BOTÃO
   ──────────────────────────────────────────────────────────────── */
.btn-lg { font-size: .9rem  !important; padding: .85rem 2.1rem !important; }
.btn-md { font-size: .82rem !important; padding: .7rem  1.65rem !important; }
.btn-sm { font-size: .72rem !important; padding: .45rem 1.1rem  !important; }
.btn-full { width: 100%; justify-content: center; }
.btn-nav  { font-size: .78rem !important; padding: .5rem 1.4rem !important; }


/* ────────────────────────────────────────────────────────────────
   7. FORM — Overrides de foco Bootstrap
   ──────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--salvia-texto) !important;
  box-shadow:   0 0 0 3px rgba(78, 105, 67, .20) !important;
}
.form-check-input:checked {
  background-color: var(--salvia-texto) !important;
  border-color:     var(--salvia-texto) !important;
}
.form-check-input:focus {
  box-shadow:   0 0 0 3px rgba(78, 105, 67, .20) !important;
  border-color: var(--salvia-texto) !important;
}


/* ────────────────────────────────────────────────────────────────
   8. NAVBAR TOGGLER — Já gerido em style.css,
      mas este override garante foco Bootstrap
   ──────────────────────────────────────────────────────────────── */
.navbar-toggler:focus { box-shadow: none !important; }
.navbar-toggler:focus-visible {
  outline:    2px solid var(--salvia-texto) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}


/* ────────────────────────────────────────────────────────────────
   9. MOBILE NAV — Gerido em style.css (secção 6)
      Regras duplicadas removidas para evitar conflitos.
   ──────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────
   10. ACCORDION
   ──────────────────────────────────────────────────────────────── */
.accordion-button:not(.collapsed) {
  color:            var(--salvia-texto) !important;
  background-color: var(--salvia-light) !important;
  box-shadow:       inset 0 -1px 0 rgba(78, 105, 67, .15) !important;
}
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(78, 105, 67, .20) !important; }
.accordion-item         { border-color: var(--bege) !important; border-radius: var(--r) !important; }


/* ────────────────────────────────────────────────────────────────
   11. BADGES BOOTSTRAP
   ──────────────────────────────────────────────────────────────── */
.badge.bg-primary   { background-color: var(--salvia-texto) !important; color: var(--txt-inv) !important; }
.badge.bg-secondary { background-color: var(--taupe-esc)    !important; color: var(--txt-inv) !important; }


/* ────────────────────────────────────────────────────────────────
   12. BG-LIGHT — Usa creme da marca
   ──────────────────────────────────────────────────────────────── */
.bg-light { background-color: var(--creme) !important; }


/* ────────────────────────────────────────────────────────────────
   13. CONTAINER — Largura máxima ajustada à marca
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1200px; } }