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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-sans text-metro-navy antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-metro-sky text-white font-semibold rounded-xl
           hover:bg-metro-blue transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metro-sky;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-metro-navy font-semibold rounded-xl
           border border-metro-border hover:bg-metro-light transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metro-sky;
  }

  .btn-outline-white {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-transparent text-white font-semibold rounded-xl
           border-2 border-white/60 hover:bg-white/10 hover:border-white transition-all duration-200;
  }

  .section-heading {
    @apply text-3xl sm:text-4xl font-bold text-metro-navy;
  }

  .section-sub {
    @apply text-lg text-metro-muted mt-3 max-w-2xl;
  }

  .card {
    @apply bg-white rounded-2xl border border-metro-border shadow-sm hover:shadow-md transition-shadow duration-200 p-6;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold;
  }

  .input-field {
    @apply w-full px-4 py-3 rounded-xl border border-metro-border bg-white text-metro-navy placeholder-metro-muted
           focus:outline-none focus:ring-2 focus:ring-metro-sky focus:border-transparent transition-all duration-150;
  }

  .prose-metro p {
    @apply text-metro-muted leading-relaxed mb-4;
  }

  .prose-metro h3 {
    @apply text-metro-navy text-xl font-semibold mt-8 mb-3;
  }

  .prose-metro ul {
    @apply list-disc pl-5 space-y-2 text-metro-muted mb-4;
  }
}

/* Leaflet overrides — ensure proper z-index inside Next.js */
.leaflet-container {
  z-index: 0;
  border-radius: 1rem;
  font-family: inherit;
}

.leaflet-popup-content-wrapper {
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

.leaflet-popup-content {
  margin: 12px 16px !important;
}

/* Mobile nav transition */
.mobile-nav-enter {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-nav-open {
  max-height: 500px;
}

/* Skip link */
.skip-link {
  @apply absolute -top-12 left-4 z-[9999] bg-metro-sky text-white px-4 py-2 rounded-b-lg font-semibold
         focus:top-0 transition-all duration-150;
}

/* Force white text on dark-background interactive elements.
   Using @layer utilities ensures these survive Tailwind's purge. */
@layer utilities {
  .btn-primary,
  .btn-primary:visited,
  .btn-primary:hover,
  .btn-primary:focus {
    color: #ffffff !important;
  }

  .btn-outline-white,
  .btn-outline-white:visited,
  .btn-outline-white:hover,
  .btn-outline-white:focus {
    color: #ffffff !important;
  }

  .nav-white,
  .nav-white:visited,
  .nav-white:hover {
    color: #ffffff !important;
  }
}