/* MindVeda Custom Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Navigation styles */
.nav-link {
    @apply text-gray-600 hover:text-deep-teal px-3 py-2 text-sm font-medium transition-all duration-300 border-b-2 border-transparent hover:border-deep-teal;
}

.mobile-nav-link {
    @apply text-gray-600 hover:text-deep-teal block px-3 py-2 text-base font-medium transition-colors duration-300;
}

/* Button styles */
.btn-primary {
    @apply inline-flex items-center px-8 py-4 bg-deep-teal text-white font-medium rounded-full hover:bg-deep-teal/90 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

.btn-secondary {
    @apply inline-flex items-center px-8 py-4 bg-white text-deep-teal font-medium rounded-full border-2 border-deep-teal hover:bg-deep-teal hover:text-white transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

.btn-outline {
    @apply inline-flex items-center px-6 py-3 bg-transparent text-deep-teal font-medium rounded-full border border-deep-teal hover:bg-deep-teal hover:text-white transition-all duration-300;
}

/* Hover effects */
.hover-lift {
    @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-xl;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(168, 218, 220, 0.3);
}

/* Card styles */
.card {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden;
}

.card-gradient {
    @apply bg-gradient-to-br from-white via-soft-blue/5 to-sage/5 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300;
}

/* Blog post styles */
.blog-post-card {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden hover:-translate-y-2;
}

.blog-category-tag {
    @apply inline-block px-3 py-1 text-xs font-medium rounded-full;
}

.category-mindfulness {
    @apply bg-soft-blue/20 text-deep-teal;
}

.category-healing {
    @apply bg-sage/20 text-sage;
}

.category-wisdom {
    @apply bg-deep-teal/20 text-deep-teal;
}

.category-psychology {
    @apply bg-gray-200 text-gray-700;
}

/* 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-deep-teal/50 focus:border-deep-teal transition-colors duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-deep-teal/50 focus:border-deep-teal transition-colors duration-300 resize-vertical min-h-[120px];
}

/* Tool card styles */
.tool-card {
    @apply bg-gradient-to-br from-white to-soft-blue/10 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border border-gray-100;
}

/* Quote card styles */
.quote-card {
    @apply bg-gradient-to-br from-white via-soft-blue/5 to-sage/5 rounded-2xl p-8 shadow-lg text-center border border-gray-100;
}

/* Meditation timer styles */
.timer-display {
    @apply text-6xl font-light font-playfair text-deep-teal mb-8;
}

.timer-button {
    @apply px-6 py-3 mx-2 bg-deep-teal text-white font-medium rounded-full hover:bg-deep-teal/90 transition-all duration-300;
}

.timer-button.secondary {
    @apply bg-gray-300 text-gray-700 hover:bg-gray-400;
}

/* Loading states */
.loading {
    @apply animate-pulse;
}

.loading-shimmer {
    @apply bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 animate-pulse;
    background-size: 200% 100%;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* Scroll to top button */
.scroll-to-top {
    @apply fixed bottom-8 right-8 w-12 h-12 bg-deep-teal text-white rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible;
    z-index: 1000;
}

.scroll-to-top.visible {
    @apply opacity-100 visible;
}

/* Toast notifications */
.toast {
    @apply fixed top-20 right-4 bg-white border-l-4 border-deep-teal shadow-xl rounded-lg p-4 max-w-sm transform translate-x-full transition-transform duration-300 z-50;
}

.toast.show {
    @apply translate-x-0;
}

.toast.success {
    @apply border-green-500;
}

.toast.error {
    @apply border-red-500;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #A8DADC;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #457B9D;
}

/* Selection color */
::selection {
    background-color: rgba(168, 218, 220, 0.3);
    color: #457B9D;
}

/* Focus styles for accessibility */
.focus\:ring-mindveda:focus {
    --tw-ring-color: rgba(168, 218, 220, 0.5);
}

/* Pagination styles */
.pagination-btn {
    @apply px-4 py-2 mx-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-deep-teal hover:text-white hover:border-deep-teal transition-all duration-300;
}

.pagination-btn.active {
    @apply bg-deep-teal text-white border-deep-teal;
}

/* Modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300;
}

.modal-overlay.show {
    @apply opacity-100 visible;
}

.modal-content {
    @apply bg-white rounded-2xl max-w-lg w-full mx-4 transform scale-95 transition-transform duration-300;
}

.modal-overlay.show .modal-content {
    @apply scale-100;
}

/* Category filter styles */
.category-filter {
    @apply px-4 py-2 border border-gray-300 rounded-full text-sm font-medium text-gray-600 hover:border-deep-teal hover:text-deep-teal transition-all duration-300 cursor-pointer;
}

.category-filter.active {
    @apply bg-deep-teal text-white border-deep-teal;
}

/* Search styles */
.search-input {
    @apply w-full px-6 py-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-deep-teal/50 focus:border-deep-teal transition-colors duration-300 pl-12;
}

/* Author info styles */
.author-info {
    @apply flex items-center space-x-3 text-sm text-gray-600;
}

.author-avatar {
    @apply w-10 h-10 rounded-full bg-gradient-to-br from-deep-teal to-sage flex items-center justify-center text-white font-medium;
}

/* Reading time indicator */
.reading-time {
    @apply text-sm text-gray-500 flex items-center;
}

/* Social share buttons */
.social-share {
    @apply flex space-x-4 mt-8 pt-8 border-t border-gray-200;
}

.share-btn {
    @apply flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300;
}

.share-btn.twitter {
    @apply bg-blue-50 text-blue-600 hover:bg-blue-100;
}

.share-btn.facebook {
    @apply bg-blue-50 text-blue-800 hover:bg-blue-100;
}

.share-btn.linkedin {
    @apply bg-blue-50 text-blue-700 hover:bg-blue-100;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}