@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom styles */
html, body {
  @apply antialiased;
}

body {
  @apply bg-gray-100;
}

/* Mobile-first approach */
.container {
  @apply px-4 sm:px-6 lg:px-8;
}

/* Header styles */
.header-nav {
  @apply flex flex-col sm:flex-row items-center justify-between;
}

.nav-item {
  @apply block py-2 px-4 text-center sm:inline-block sm:py-0;
}

/* Footer styles */
.footer-content {
  @apply flex flex-col sm:flex-row justify-between items-start sm:items-center;
}

.footer-section {
  @apply w-full sm:w-1/3 mb-6 sm:mb-0;
}

/* Form styles */
.form-input {
  @apply w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#8C1D40] focus:border-transparent;
}

/* Button styles */
.btn {
  @apply px-4 py-2 rounded-md transition duration-300 ease-in-out;
}

.btn-primary {
  @apply bg-[#8C1D40] text-white hover:bg-[#6B1631];
}

/* Responsive typography */
h1 {
  @apply text-3xl sm:text-4xl font-bold;
}

h2 {
  @apply text-2xl sm:text-3xl font-semibold;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-200;
}

::-webkit-scrollbar-thumb {
  @apply bg-[#8C1D40] rounded-full;
}

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Improved focus styles for accessibility */
*:focus {
  @apply outline-none ring-2 ring-[#8C1D40] ring-opacity-50;
}

/* Custom utility classes */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.hover-grow {
  @apply transition-transform duration-300 ease-in-out;
}

.hover-grow:hover {
  @apply transform scale-105;
}

/* Responsive grid layouts */
.grid-responsive {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;
}

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

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

/* Modal styles */
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 60vw;
  height: 60vh;
  overflow-y: hidden;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}