/* Tailwind base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for K2BC website */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-gray-800;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-md font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-sm {
    @apply px-4 py-2 text-sm;
  }
  
  .btn-lg {
    @apply px-8 py-4 text-lg;
  }
  
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-dark focus:ring-primary;
  }
  
  .btn-secondary {
    @apply bg-secondary-blue text-white hover:bg-secondary-blue-dark focus:ring-secondary-blue;
  }
  
  .btn-outline {
    @apply bg-transparent border-2;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300;
  }
  
  /* Form styles */
  input, select, textarea {
    @apply rounded-md border-gray-300 focus:border-primary focus:ring focus:ring-primary/30 focus:ring-opacity-50;
  }
  
  /* Navigation styles */
  .nav-link {
    @apply text-gray-700 hover:text-primary font-medium;
  }
  
  .nav-link-active {
    @apply text-primary font-medium;
  }
  
  /* Prose content styles */
  .prose h2 {
    @apply text-2xl font-bold text-primary mt-8 mb-4;
  }
  
  .prose h3 {
    @apply text-xl font-bold text-primary-dark mt-6 mb-3;
  }
  
  .prose p {
    @apply mb-4;
  }
  
  .prose ul {
    @apply list-disc pl-5 mb-4;
  }
  
  .prose ol {
    @apply list-decimal pl-5 mb-4;
  }
  
  .prose li {
    @apply mb-2;
  }
  
  .prose a {
    @apply text-primary-blue hover:underline;
  }
  
  .prose blockquote {
    @apply border-l-4 border-primary pl-4 italic my-4;
  }
  
  /* Utility classes */
  .section-title {
    @apply font-heading text-3xl md:text-4xl font-bold text-center mb-4 text-primary;
  }
  
  .section-subtitle {
    @apply text-center text-gray-700 max-w-3xl mx-auto mb-12;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-in-out;
}

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

.animate-slideIn {
  animation: slideInFromBottom 0.5s ease-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .btn {
    @apply px-4 py-2 text-sm;
  }
}