/* Custom CSS - Only used for styles not easily achievable with Tailwind */

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

/* Override Tailwind outline styles for better accessibility */
*:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Helper class for animating the mobile menu */
.mobile-menu-open {
  transform: translateX(0) !important;
}

/* Newsletter popup animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.popup-animation {
  animation: fadeIn 0.3s ease-out forwards, slideUp 0.3s ease-out forwards;
}

/* Improve scrollbar appearance */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Custom animation for scroll-to-top button */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

/* Improve focus visibility for better accessibility */
.focus-visible:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

/* Utility class for limiting text to specific number of lines */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}