/* Custom styles for OutdoorPlayZone - Enhances TailwindCSS */

/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom gradient backgrounds */
.gradient-hero {
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
}

.gradient-card {
    background: linear-gradient(135deg, #34d399 0%, #60a5fa 100%);
}

/* Smooth animations and transitions */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced hover effects */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Custom button styles */
.btn-primary {
    @apply bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 inline-flex items-center;
}

.btn-secondary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 inline-flex items-center;
}

.btn-outline {
    @apply border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-semibold py-3 px-6 rounded-lg transition duration-200 inline-flex items-center;
}

/* Enhanced form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition duration-200;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-vertical transition duration-200;
}

.form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition duration-200;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6 transition duration-200;
}

.card:hover {
    @apply shadow-lg;
}

.card-feature {
    @apply bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition duration-200;
}

/* Typography enhancements */
.text-gradient {
    background: linear-gradient(135deg, #10b981, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Search suggestions styling */
.search-suggestions {
    @apply absolute top-full left-0 right-0 bg-white border border-gray-300 rounded-lg shadow-lg hidden z-50 mt-1 max-h-64 overflow-y-auto;
}

.search-suggestion-item {
    @apply px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-200 last:border-b-0 transition duration-150;
}

.search-suggestion-item:hover {
    @apply bg-green-50 text-green-700;
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-green-600;
}

/* Tag styles */
.tag {
    @apply inline-block bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full font-medium;
}

.tag-outline {
    @apply inline-block border border-green-300 text-green-700 text-xs px-3 py-1 rounded-full font-medium hover:bg-green-50 transition duration-200;
}

/* Alert styles */
.alert {
    @apply p-4 rounded-lg mb-4 border-l-4;
}

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

.alert-error {
    @apply bg-red-50 border-red-400 text-red-700;
}

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

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

/* Breadcrumb styling */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-600;
}

.breadcrumb a {
    @apply text-green-600 hover:text-green-800 transition duration-200;
}

.breadcrumb-separator {
    @apply text-gray-400;
}

/* Pagination styles */
.pagination {
    @apply flex items-center space-x-2;
}

.pagination-item {
    @apply px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-200;
}

.pagination-item.active {
    @apply bg-green-600 text-white border-green-600;
}

.pagination-item.disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Header enhancements */
.header-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Footer enhancements */
.footer-link {
    @apply text-gray-300 hover:text-white transition duration-200;
}

/* Image optimizations */
.img-cover {
    @apply object-cover w-full h-full;
}

.img-rounded {
    @apply rounded-lg overflow-hidden;
}

/* Content styling for blog posts */
.prose {
    @apply text-gray-700 leading-relaxed;
}

.prose h1 {
    @apply text-3xl md:text-4xl font-bold text-gray-800 mb-6;
}

.prose h2 {
    @apply text-2xl md:text-3xl font-bold text-gray-800 mb-4 mt-8;
}

.prose h3 {
    @apply text-xl md:text-2xl font-semibold text-gray-800 mb-3 mt-6;
}

.prose p {
    @apply mb-4 text-gray-700;
}

.prose ul {
    @apply list-disc list-inside mb-4 space-y-2;
}

.prose ol {
    @apply list-decimal list-inside mb-4 space-y-2;
}

.prose li {
    @apply text-gray-700;
}

.prose a {
    @apply text-green-600 hover:text-green-800 underline transition duration-200;
}

.prose strong {
    @apply font-semibold text-gray-800;
}

.prose em {
    @apply italic;
}

.prose blockquote {
    @apply border-l-4 border-green-500 pl-4 italic text-gray-600 my-4;
}

/* Mobile menu enhancements */
.mobile-menu {
    @apply md:hidden transition-all duration-300 ease-in-out;
}

.mobile-menu.open {
    @apply max-h-96 opacity-100;
}

.mobile-menu.closed {
    @apply max-h-0 opacity-0 overflow-hidden;
}

/* Focus states for accessibility */
.focus-ring:focus {
    @apply outline-none ring-2 ring-green-500 ring-offset-2;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-lg;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-lg;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        color: black !important;
        background: white !important;
    }
    
    .card, .card-feature {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Future dark mode styles can be added here */
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Loading animation for content */
.skeleton {
    @apply bg-gray-200 rounded animate-pulse;
}

.skeleton-text {
    @apply h-4 bg-gray-200 rounded animate-pulse mb-2;
}

.skeleton-title {
    @apply h-6 bg-gray-200 rounded animate-pulse mb-4;
}

/* Enhanced social sharing buttons */
.social-share {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition duration-200 text-white;
}

.social-share.facebook {
    @apply bg-blue-600 hover:bg-blue-700;
}

.social-share.twitter {
    @apply bg-blue-400 hover:bg-blue-500;
}

.social-share.pinterest {
    @apply bg-red-600 hover:bg-red-700;
}

.social-share.linkedin {
    @apply bg-blue-700 hover:bg-blue-800;
}

/* Utility classes */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.backdrop-blur {
    backdrop-filter: blur(4px);
}

/* Enhanced form validation styles */
.form-error {
    @apply border-red-500 bg-red-50;
}

.form-error:focus {
    @apply ring-red-500 border-red-500;
}

.error-message {
    @apply text-red-600 text-sm mt-1 flex items-center;
}

.success-message {
    @apply text-green-600 text-sm mt-1 flex items-center;
}

/* Enhanced table styles */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tr:nth-child(even) {
    @apply bg-gray-50;
}

.table tr:hover {
    @apply bg-gray-100;
}

/* Responsive image containers */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

/* Enhanced tooltip styles */
.tooltip {
    @apply relative;
}

.tooltip:hover .tooltip-text {
    @apply opacity-100 visible;
}

.tooltip-text {
    @apply invisible absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300;
}