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

/* Frontend-specific styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    }
}

@layer components {
    /* Navigation Styles */
    .nav-link {
        @apply relative text-gray-700 hover:text-primary-600 font-medium transition-all duration-300 py-2 px-1;
    }

    .nav-link::after {
        content: '';
        @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-primary-600 to-primary-800 transition-all duration-300;
    }

    .nav-link:hover::after {
        @apply w-full;
    }

    .nav-link.active::after {
        @apply w-full;
    }

    .dropdown-link {
        @apply block px-4 py-3 text-sm text-gray-700 hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 hover:text-primary-600 transition-all duration-200 rounded-lg mx-2;
    }

    .mobile-nav-link {
        @apply flex items-center px-6 py-4 text-gray-700 hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 hover:text-primary-600 border-b border-gray-100 transition-all duration-200;
    }

    /* Button Styles */
    .btn {
        @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 active:scale-95;
    }

    .btn-primary {
        @apply text-white bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 focus:ring-primary-500 shadow-lg hover:shadow-xl;
    }

    .btn-secondary {
        @apply text-gray-700 bg-white border-gray-300 hover:bg-gray-50 hover:border-primary-300 focus:ring-primary-500 shadow-md hover:shadow-lg;
    }

    .btn-success {
        @apply text-white bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 focus:ring-emerald-500 shadow-lg hover:shadow-xl;
    }

    .btn-danger {
        @apply text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 focus:ring-red-500 shadow-lg hover:shadow-xl;
    }

    /* Card Styles */
    .card {
        @apply bg-white rounded-2xl shadow-lg border-0 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl;
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
        backdrop-filter: blur(10px);
    }

    .card-header {
        @apply px-8 py-6 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white;
    }

    .card-body {
        @apply px-8 py-6;
    }

    .card-footer {
        @apply px-8 py-6 border-t border-gray-100 bg-gradient-to-r from-gray-50 to-white;
    }

    /* Form Styles */
    .form-group {
        @apply mb-6;
    }

    .form-label {
        @apply block text-sm font-semibold text-gray-700 mb-3;
    }

    .form-input {
        @apply block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 bg-white;
    }

    .form-textarea {
        @apply block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 resize-y transition-all duration-200 bg-white;
    }

    .form-select {
        @apply block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 bg-white;
    }

    /* Badge Styles */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold shadow-sm;
    }

    .badge-primary {
        @apply bg-gradient-to-r from-primary-100 to-primary-200 text-primary-800;
    }

    .badge-secondary {
        @apply bg-gradient-to-r from-secondary-100 to-secondary-200 text-secondary-800;
    }

    .badge-success {
        @apply bg-gradient-to-r from-emerald-100 to-emerald-200 text-emerald-800;
    }

    .badge-warning {
        @apply bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800;
    }

    .badge-danger {
        @apply bg-gradient-to-r from-red-100 to-red-200 text-red-800;
    }

    /* Alert Styles */
    .alert {
        @apply rounded-xl p-6 mb-6 border-0 shadow-lg;
    }

    .alert-success {
        @apply bg-gradient-to-r from-emerald-50 to-emerald-100 border-l-4 border-emerald-500 text-emerald-800;
    }

    .alert-error {
        @apply bg-gradient-to-r from-red-50 to-red-100 border-l-4 border-red-500 text-red-800;
    }

    .alert-warning {
        @apply bg-gradient-to-r from-yellow-50 to-yellow-100 border-l-4 border-yellow-500 text-yellow-800;
    }

    .alert-info {
        @apply bg-gradient-to-r from-blue-50 to-blue-100 border-l-4 border-blue-500 text-blue-800;
    }

    /* Hero Section Styles */
    .hero-section {
        @apply relative bg-gradient-to-br from-primary-900 via-primary-800 to-primary-700 text-white overflow-hidden;
        background-size: 400% 400%;
        animation: gradient-shift 8s ease infinite;
    }

    .hero-overlay {
        @apply absolute inset-0;
        background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    }

    .hero-content {
        @apply relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32;
    }

    /* Section Styles */
    .section {
        @apply py-20 lg:py-24;
    }

    .section-gray {
        @apply py-20 lg:py-24 bg-gradient-to-br from-gray-50 to-gray-100;
    }

    .section-white {
        @apply py-20 lg:py-24 bg-white;
    }

    /* Grid Layouts */
    .grid-cards {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
    }

    .grid-cards-4 {
        @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8;
    }

    /* Article Card Styles */
    .article-card {
        @apply bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border-0;
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
        backdrop-filter: blur(10px);
    }

    .article-image {
        @apply w-full h-56 object-cover transition-transform duration-500 hover:scale-110;
    }

    .article-content {
        @apply p-8;
    }

    .article-meta {
        @apply flex items-center text-sm text-gray-500 mb-4;
    }

    .article-title {
        @apply text-2xl font-bold text-gray-900 mb-4 hover:text-primary-600 transition-colors duration-300 leading-tight;
    }

    .article-excerpt {
        @apply text-gray-600 mb-6 leading-relaxed;
    }

    /* Statistics Card Styles */
    .stat-card {
        @apply text-center p-8 rounded-2xl bg-white shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2;
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
        backdrop-filter: blur(10px);
    }

    .stat-icon {
        @apply bg-gradient-to-r from-primary-600 to-primary-700 text-white w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg;
        background-size: 200% 200%;
        animation: icon-pulse 3s ease-in-out infinite;
    }

    .stat-number {
        @apply text-4xl lg:text-5xl font-bold text-gray-900 mb-3;
        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-label {
        @apply text-gray-600 font-medium text-lg;
    }

    /* Footer Styles */
    .footer {
        @apply bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white relative overflow-hidden;
    }

    .footer::before {
        content: '';
        @apply absolute inset-0 opacity-10;
        background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.3) 1px, transparent 0);
        background-size: 20px 20px;
    }

    .footer-section {
        @apply py-16 relative z-10;
    }

    .footer-title {
        @apply text-xl font-bold mb-6;
    }

    .footer-link {
        @apply text-gray-300 hover:text-white transition-all duration-200 hover:translate-x-1;
    }

    /* Utility Classes */
    .text-gradient {
        @apply bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 bg-clip-text text-transparent;
    }

    .bg-gradient-primary {
        @apply bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800;
    }

    .border-gradient {
        @apply border-2 border-transparent bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-border;
    }

    /* Responsive Utilities */
    .container-responsive {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .section-responsive {
        @apply py-12 sm:py-16 lg:py-20;
    }

    /* Animation Classes */
    .fade-in {
        @apply opacity-0 translate-y-8;
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .animate-fade-in {
        @apply opacity-100 translate-y-0;
    }

    .slide-up {
        @apply transform translate-y-12 opacity-0;
        animation: slideUp 0.6s ease-out forwards;
    }

    .animate-slide-in {
        animation: slideInFromRight 0.5s ease-out forwards;
    }
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(3rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes icon-pulse {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Mobile menu slide animation */
#mobile-menu:not(.hidden) {
    transform: translateX(0);
}

/* Enhanced line clamp utilities */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* Glass morphism effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* Focus visible improvements */
.focus-visible:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Enhanced mobile responsiveness */
@media (max-width: 640px) {
    .hero-content {
        @apply py-16;
    }

    .stat-number {
        @apply text-3xl;
    }

    .article-title {
        @apply text-xl;
    }

    .btn {
        @apply px-4 py-2 text-sm;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-900 {
        background-color: rgb(17 24 39);
    }

    .dark\:text-white {
        color: rgb(255 255 255);
    }
}