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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

@layer components {
  /* Hero Section */
  .hero-section {
    @apply relative overflow-hidden py-24 text-white text-center;
  }

  .hero-section-gradient {
    @apply hero-section bg-gradient-to-r;
  }

  .hero-section-slate {
    @apply hero-section bg-slate-900;
  }

  .hero-container {
    @apply relative max-w-5xl mx-auto px-4 z-10;
  }

  .hero-badge {
    @apply inline-block px-3 py-1 rounded-full bg-indigo-500/20 border border-indigo-400/30 text-indigo-300 text-sm font-medium mb-6 backdrop-blur-sm;
  }

  .hero-title {
    @apply text-5xl md:text-6xl font-extrabold tracking-tight mb-6;
  }

  .hero-subtitle {
    @apply text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed;
  }

  /* Buttons */
  .btn-hero {
    @apply inline-flex items-center gap-3 bg-white px-8 py-4 rounded-xl transition-all font-bold shadow-xl hover:scale-105 active:scale-95;
  }

  .btn-hero-teal {
    @apply btn-hero text-teal-700 hover:bg-teal-50;
  }

  .btn-hero-indigo {
    @apply btn-hero text-indigo-900 hover:bg-indigo-50;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center font-bold py-3 px-8 rounded-xl transition-all shadow-lg;
  }

  /* Grid and Containers */
  .main-container {
    @apply max-w-7xl mx-auto px-4 -mt-12 relative z-10;
  }

  .card-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  /* Cards */
  .card-base {
    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm;
  }

  .card-interactive {
    @apply bg-white rounded-2xl border border-gray-200 p-6 shadow-sm hover:shadow-xl transition-all duration-300 ease-out hover:-translate-y-1;
  }

  /* Decorative Background Elements */
  .hero-decor-blob {
    @apply absolute rounded-full blur-3xl opacity-30;
  }
}

/* Wiki content styles (used with v-html) */
.wiki-content h1 { @apply text-2xl font-bold mt-8 mb-4 text-gray-900; }
.wiki-content h2 { @apply text-xl font-bold mt-6 mb-3 text-gray-800; }
.wiki-content h3 { @apply text-lg font-bold mt-4 mb-2 text-gray-800; }
.wiki-content p { @apply mb-4 text-gray-700 leading-relaxed; }
.wiki-content ul { @apply list-disc ml-6 mb-4 text-gray-700; }
.wiki-content ol { @apply list-decimal ml-6 mb-4 text-gray-700; }
.wiki-content li { @apply mb-1; }
.wiki-content a { @apply text-indigo-600 hover:underline; }
.wiki-content img { @apply max-w-full h-auto rounded-lg my-6 shadow-md; }
.wiki-content pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-6 font-mono text-sm; }
.wiki-content code { @apply bg-gray-100 text-pink-600 px-1 rounded font-mono text-sm; }
.wiki-content blockquote { @apply border-l-4 border-gray-300 pl-4 italic my-6 text-gray-600; }
.wiki-content table { @apply w-full border-collapse my-6; }
.wiki-content th,
.wiki-content td { @apply border border-gray-200 p-3 text-left; }
.wiki-content th { @apply bg-gray-50 font-bold; }
