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

/* Review Carousel - prevent layout shift before Vue mounts */
#vue-review-carousel {
  min-height: 400px;
}

#vue-review-carousel:empty::before {
  content: '';
  display: block;
  height: 400px;
  background: linear-gradient(90deg, #F5F0E8 25%, #EDE5D8 50%, #F5F0E8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hide scrollbar for mobile navigation while keeping functionality */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Custom focus styles for accessibility */
@layer utilities {
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-terracotta;
  }
}

/* Smooth transitions for interactive elements */
@layer base {
  a, button {
    @apply transition-colors duration-200;
  }
}