@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-sans;
  }
}

@layer components {
  .hero-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://zpep.com.ua/images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  
  .nav-link {
    @apply text-gray-800 hover:text-primary-600 transition-colors duration-200 font-medium;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white px-6 py-2 rounded hover:bg-primary-700 transition-colors duration-200;
  }
  
  .btn-orange {
    @apply bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600 transition-colors duration-200;
  }
  
  .sidebar-btn {
    @apply bg-orange-500 text-white px-3 py-2 rounded-r text-sm font-medium hover:bg-orange-600 transition-colors duration-200 flex items-center gap-2;
  }
  
  .news-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-200;
  }
  
  .pagination-btn {
    @apply px-3 py-1 mx-1 rounded hover:bg-primary-100 transition-colors duration-200;
  }
  
  .pagination-active {
    @apply bg-primary-600 text-white;
  }
}