/* ==========================================================================
   SITE.CSS UNIFICADO
   - Tema claro/escuro com CSS variables
   - Tipografia, navbar, hero, cards, formulários, footer
   - Animações performáticas
   - Responsividade e acessibilidade básica
   ========================================================================== */

/* ==========================================================================
   1. VARIÁVEIS DE TEMA (LIGHT / DARK)
   ========================================================================== */

:root {
  /* Paleta base (modo claro) */
  --brand: #7a2b19;
  --brand-soft: #f7ebe6;
  --brand-dark: #541b10;

  --body-bg: #f8fafc;
  --body-color: #0f172a;

  --card-bg: #ffffff;
  --card-border: #e5e5ea;

  --navbar-bg: #ffffff;
  --navbar-border: rgba(0, 0, 0, 0.06);

  --footer-bg: #111827;
  --footer-color: #e5e7eb;

  --link-color: #0d6efd;
  --link-hover: #0a58ca;

  --muted: #6c757d;
}

/* Tema escuro com data-bs-theme (Bootstrap 5.3+) */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --body-bg: #020617;
  --body-color: #e5e7eb;

  --card-bg: #020617;
  --card-border: #1f2937;

  --navbar-bg: #020617;
  --navbar-border: #111827;

  --footer-bg: #020617;
  --footer-color: #9ca3af;

  --link-color: #93c5fd;
  --link-hover: #bfdbfe;

  --brand: #fbbf94;
  --brand-soft: #1b1512;
  --brand-dark: #fed7aa;

  --muted: #9ca3af;
}

/* ==========================================================================
   2. BASE / TIPOGRAFIA / HERO
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--body-bg);
  color: var(--body-color);
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Parágrafos e textos */
p {
  margin-bottom: 0.6rem;
}

/* Imagens responsivas por padrão */
img {
  max-width: 100%;
  height: auto;
}

/* Logo (texto) */
.logo-text {
  letter-spacing: 0.18em;
}

/* Hero com imagem de fundo (ajuste o caminho conforme seu projeto) */
.hero-bg {
  background-image: url("../img/hero-farroupilha-hero.jpg");
  background-size: cover;
  background-position: center;
}

/* Scrollspy: compensa navbar fixa para âncoras internas */
.scrollspy-container section[id] {
  scroll-margin-top: 96px;
}

/* Textos de marca */
.text-brand {
  color: var(--brand) !important;
}
.bg-brand-soft {
  background-color: var(--brand-soft) !important;
}
.text-muted-custom {
  color: var(--muted) !important;
}

/* Links de footer */
footer a:hover {
  color: #fbbf24 !important;
}

/* Imagens que precisam preencher totalmente, sem distorcer */
.object-fit-cover {
  object-fit: cover;
}

/* ==========================================================================
   3. ANIMAÇÕES (KEYFRAMES PERFORMÁTICOS)
   ========================================================================== */

/* Fade-up genérico */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.5s ease-out both;
}

/* Fade-in genérico */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}
.animate-fade-in-delayed {
  animation: fadeIn 0.9s ease-out forwards;
}

/* Pulse leve em botões primários ao hover */
@keyframes btnPulse {
  0% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    transform: translate3d(0, -1px, 0);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
  }
  100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* ==========================================================================
   4. BOTÕES / ÍCONES / RIPPLE
   ========================================================================== */
.btn {
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
}
/* Movimento leve */
.btn-hover-move {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}
.btn-hover-move:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
}
.btn-hover-move.btn-primary:hover {
  animation: btnPulse 0.35s ease-out;
}

/* Ripple CSS */
.btn-ripple-css {
  position: relative;
  overflow: hidden;
}
.btn-ripple-css::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition:
          transform 0.45s ease-out,
          opacity 0.45s ease-out,
          width 0s,
          height 0s;
}
.btn-ripple-css:active::after {
  width: 220%;
  height: 220%;
  opacity: 0.7;
  transform: translate(-50%, -50%) scale(1);
}

/* Ícones com animação leve / rotação */
.btn-icon-spin i {
  display: inline-block;
  transition: transform 0.6s ease;
}
.btn-icon-spin:hover i {
  transform: rotate(360deg);
}
.btn-icon-spin.delay-slow i {
  transition-duration: 0.9s;
}
.btn-icon-spin.delay-fast i {
  transition-duration: 0.3s;
}

/* ==========================================================================
   5. NAVBAR / HEADER
   ========================================================================== */

.navbar {
  background-color: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
  backdrop-filter: blur(4px);
}

.navbar-brand img {
  filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.15));
}

.nav-link {
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
}

.nav-link.active {
  color: var(--brand) !important;
}

/* Toggle tema (se usar) */
.btn-theme-toggle {
  border-radius: 999px;
  padding-inline: 0.65rem;
}

/* ==========================================================================
   6. CARDS / CONTEÚDO / BLOG
   ========================================================================== */

.card {
  border-radius: 0.75rem;
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

/* Elevação suave + leve scale (genérico) */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  will-change: transform;
}
.card-hover:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22);
}

/* Versão avançada (cards destaque) */
.card-hover-advanced {
  transition:
          transform 0.25s ease,
          box-shadow 0.25s ease,
          background-color 0.25s ease,
          color 0.25s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transform-origin: center;
  background-color: #ffffff;
  color: #0f172a;
}
.card-hover-advanced:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.24);
  background-color: #8b0000;
  color: #ffffff;
}
.card-hover-advanced:hover h3,
.card-hover-advanced:hover p,
.card-hover-advanced:hover .text-muted,
.card-hover-advanced:hover .text-brand,
.card-hover-advanced:hover i {
  color: #ffffff !important;
}

/* Borda glow opcional */
.card-border-glow {
  position: relative;
  overflow: hidden;
}
.card-border-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(120deg, #8b0000, #fbbf24, #8b0000) border-box;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.card-border-glow > .card-body {
  position: relative;
  z-index: 1;
}
.card-border-glow:hover::before {
  opacity: 1;
}

/* Zoom suave em imagens de cards */
.card-img-zoom {
  overflow: hidden;
}
.card-img-zoom img,
.card-img-zoom .card-img-top {
  transition: transform 0.35s ease;
  transform-origin: 50% 50%;
}
.card-hover:hover .card-img-zoom img,
.card-hover:hover .card-img-zoom .card-img-top,
.card-img-zoom:hover .card-img-top {
  transform: scale(1.06);
}

/* Conteúdo de post */
.blog-post-content p {
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.blog-post-content h2,
.blog-post-content h3 {
  margin-top: 1.5rem;
}

/* ==========================================================================
   7. FORMULÁRIOS / CONTATO
   ========================================================================== */

.form-control,
.form-select {
  border-radius: 0.4rem;
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.15rem rgba(122, 43, 25, 0.23);
  border-color: var(--brand);
}

/* Estado inválido customizado (Bootstrap 5) */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #e55353;
  padding-right: calc(1.5em + 0.75rem);
}

.invalid-feedback {
  font-size: 0.75rem;
}

/* Alerta de contato (AJAX) */
#contato-alert {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

footer {
  background-color: var(--footer-bg);
  color: var(--footer-color);
  font-size: 0.85rem;
}

footer a.link-light:hover {
  text-decoration: underline;
}

/* ==========================================================================
   9. ACESSIBILIDADE / REDUZIR ANIMAÇÃO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-in-delayed,
  .animate-fade-up,
  .card-hover,
  .card-hover-advanced,
  .card-img-zoom img,
  .card-img-zoom .card-img-top,
  .btn-hover-move,
  .btn-icon-spin i {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   10. RESPONSIVIDADE / MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {
  .navbar-brand span {
    font-size: 0.8rem;
  }

  .card .card-body {
    padding: 1rem 1.1rem;
  }

  footer .row > [class^="col-"] {
    text-align: left;
  }

  .card-hover:hover,
  .card-hover-advanced:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 12px 20px rgba(15, 23, 42, 0.18);
  }

  .card-img-zoom:hover .card-img-top {
    transform: scale(1.03);
  }
}

/* Tabela de histórico de sessões */
.table thead th {
  border-bottom-width: 1px;
}

.table-hover tbody tr:hover {
  background-color: rgba(122, 43, 25, 0.04);
}

/* Centralizar colunas numéricas da tabela de histórico */
.table-historico td.text-center,
.table-historico th.text-center {
  text-align: center !important;
}