/* Custom styles for 2 Flame Entertainment */

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Fix for text-balance which might not be supported in all browsers */
.text-balance {
  overflow-wrap: break-word;
}

/* Mobile menu styles */
#mobile-menu {
  transition: all 0.3s ease-in-out;
}

#mobile-menu.hidden {
  display: none;
}

/* Roster filter active state */
.roster-filter-btn.active,
.gallery-filter-btn.active,
.event-toggle-btn.active {
  background: linear-gradient(to right, #FF6B35, #E63946);
  box-shadow: 0 4px 6px rgba(230, 57, 70, 0.2);
}

/* Service card hover effect */
.service-card:hover .service-details {
  display: block;
}

/* Gallery item hover effect */
.gallery-item:hover .absolute {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .text-6xl {
    font-size: 2.5rem;
  }
  
  .text-5xl {
    font-size: 2rem;
  }
  
  .text-4xl {
    font-size: 1.875rem;
  }
}

/* Animation fixes */
.animate-bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Focus states for accessibility */
a:focus, button:focus {
  outline: 2px solid #FF6B35;
  outline-offset: 2px;
}

/* Form input focus states */
input:focus, select:focus, textarea:focus {
  outline: 2px solid #FF6B35;
  outline-offset: 2px;
}