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

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import './styles/mobile-responsive.css';

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes ellipsis {
  0% {
    clip-path: inset(0 66% 0 0);
  }
  25% {
    clip-path: inset(0 33% 0 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 0);
  }
}

* {
  font-family: 'Nunito', serif;
}

/* Mobile-first responsive utilities */
@media (max-width: 640px) {
  .mobile-hide {
    display: none !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-text-sm {
    font-size: 0.875rem !important;
  }

  .mobile-p-2 {
    padding: 0.5rem !important;
  }
}

/* Tablet responsive utilities */
@media (min-width: 641px) and (max-width: 1024px) {
  .tablet-hide {
    display: none !important;
  }
}

@page {
  size: a4;
  margin: 20mm;
}

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
  .print-only {
    display: block;
  }
  .no-print {
    display: none;
  }
}

@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}