/* =========================================================
   STYLE.CSS — Casal do Chopp
   Versão Otimizada
========================================================= */

/* 1. VARIÁVEIS E FONTES */
:root {
  --yellow: #F0BB20;
  --light-yellow: #FCEA9F;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bondrians {
  font-family: 'Bondrians', sans-serif;
}

/* 2. LAYOUT BASE */
img {
  max-width: 100%;
  display: block;
}

/* 3. HEADER */
#site-header {
  transition: all 0.5s ease;
  backdrop-filter: blur(5px);
}

#menu-btn {
  transition: color 0.3s ease;
  position: relative;
  z-index: 60;
  color: white;
  font-size: 1.9rem;
  padding: 6px;
}

/* Comportamento do header ao rolar */
#site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
}

#site-header.scrolled #menu-btn {
  color: #000 !important;
}

#site-header.scrolled #logo-text {
    content: url('img/casaldochopp_preto.png');
    height: 2rem; /* ajusta a altura se necessário */
}

#site-header.scrolled #main-nav a {
  color: black !important;
}

/* 4. HERO */
#inicio {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

#inicio picture {
  position: absolute;
  inset: 0;
  top: 0;
}

#inicio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

@media (max-width: 639px) {
  #inicio img {
    object-position: center 80% !important;
    transform: translateY(-6%) !important;
    will-change: transform, object-position;
  }
}

@media (min-width: 640px) and (max-width: 768px) {
  #inicio img {
    object-position: center 40% !important;
  }
}

/* 5. GALERIA */
#galeria {
  background: var(--light-yellow);
}

#galeria .swiper-slide {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#galeria .swiper-slide img {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: block;
  width: 100%;
  max-width: 260px;
  height: 360px;
  object-fit: cover;
  border-radius: 1rem;
  margin: 0 auto;
}

/* 6. LIGHTBOX */
#lightbox img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
  border-radius: 1rem;
}

/* 7. EFEITOS E RESPONSIVIDADE */

/* Logo e texto */
#logo,
#logo-text {
  transition: transform 0.3s ease, color 0.3s ease;
}

#logo:hover,
#logo-text:hover {
  transform: scale(1.08);
}

/* Links do menu desktop */
#main-nav a {
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
}

#main-nav a:hover {
  transform: scale(1.1);
  color: var(--yellow);
}

/* Botão principal */
#site-header a.bg-\[\#F0BB20\]:hover {
  transform: scale(1.08);
  transition: transform 0.3s ease;
}

/* Menu e logo pretos no mobile
@media (max-width: 768px) {
  #menu-btn {
    color: black !important;
  }
  #logo-text {
    color: black !important;
    text-shadow: none !important;
  }
} */

/* Media query para dispositivos mobile e tablets */
@media (max-width: 768px) {
  /* Diminui o logo do Casal do Chopp apenas em telas pequenas */
  #logo-text {
    height: 1.5rem !important; /* Tamanho menor para a nova imagem */
  }
}

.galeriaSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding: 0;
}

/* Cores específicas para os ícones de redes sociais no rodapé */
footer .fa-instagram {
  color: #E4405F !important; /* Rosa do Instagram */
}

footer .fa-tiktok {
  color: #000000 !important; /* Preto do TikTok */
}

footer .fa-facebook {
  color: #1877F2 !important; /* Azul do Facebook (mais vibrante que o anterior) */
}

footer .fa-whatsapp {
  color: #25D366 !important; /* Verde do WhatsApp */
}