/*
 * GAM Website - Main Stylesheet
 * Using Tailwind CSS as primary design system
 * Only essential legacy styles are imported here
 */

/* Import mixins for responsive design */
@import "mixins/breakpoints";

/* Essential legacy compatibility */
.img-center {
  margin: 0 auto;
}

/* Flash messages using Tailwind classes */
.alert {
  @apply px-4 py-3 rounded mb-4;
}

.alert-success {
  @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-danger, .alert-error {
  @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-warning {
  @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

.alert-info {
  @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Privacy Page Styles */
.privacy-card {
  @apply bg-white rounded-xl shadow-lg overflow-hidden;
}

.privacy-section {
  @apply mb-12;
}

/* Hero Section Subtle Typography */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Outline White Button */
.btn-outline-white {
  @apply px-6 py-3 border-2 border-white text-white font-semibold rounded-lg inline-flex items-center justify-center transition-all duration-300;
}

.btn-outline-white:hover {
  @apply bg-white text-gray-900 shadow-lg;
}

/* Ghost Button */
.btn-ghost {
  @apply px-6 py-3 text-white font-semibold rounded-lg inline-flex items-center justify-center transition-all duration-300 border border-white/30;
}

.btn-ghost:hover {
  @apply bg-white/10 border-white/60 backdrop-blur-md;
}

/* Enhanced Ghost Button with better contrast */
.btn-ghost-enhanced {
  @apply px-6 py-3 text-white font-semibold rounded-lg inline-flex items-center justify-center transition-all duration-300 border-2 border-white/60 bg-black/20 backdrop-blur-md shadow-xl;
}

.btn-ghost-enhanced:hover {
  @apply bg-white text-gray-900 border-white shadow-2xl;
}

/* Enhanced Shadow Effects */
.shadow-3xl {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

/* Drop Shadow Utilities for Text Readability */
.drop-shadow-lg {
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.8));
}

.drop-shadow-md {
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.6));
}