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

/* Optional custom styles */
html {
  @apply scroll-smooth h-full;
}

body {
  @apply bg-gray-50 text-gray-800 h-full overflow-hidden;
}

h1, h2, h3, h4, h5, h6 {
  @apply font-semibold text-gray-900;
}

a {
  @apply text-blue-600 hover:text-purple-600 underline;
}

button {
  @apply font-medium;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in {
  animation: fade-in 0.5s ease forwards;
}

.flash-message {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin: 0.25rem 0;
}
.flash-message.info { background-color: #e0f2fe; color: #0369a1; }
.flash-message.error { background-color: #fee2e2; color: #991b1b; }
.flash-message.success { background-color: #dcfce7; color: #065f46; }

.logo-img {
  @apply h-12 sm:h-14 lg:h-16 w-auto object-contain;
}

/* Homepage mobile tweaks */
.hero {
  @apply px-4 py-6 text-center;
}

.hero h1 {
  @apply text-2xl leading-9 font-bold;
}

.hero p {
  @apply text-base text-gray-600 mb-4;
}

.hero .btn-primary {
  @apply block w-full max-w-xs mx-auto mb-8 px-4 py-3 text-base rounded-lg;
}

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  padding: 0 1rem;
}

.category-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: white;
  border-radius: 0.5rem;
}

.header {
  @apply flex justify-between items-center px-4 py-3;
}

.header .logo-img {
  @apply h-10;
}

.header .nav-actions {
  @apply flex gap-2;
}

/* styles.css or global.css */
img[src*="logo"] {
  max-height: 60px;
}