/*
Theme Name: ModernBlog
Theme URI: https://forumbd24.com
Author: SA Samim
Author URI: https://forumbd24.com
Description: A modern, minimalist blog theme with custom author profiles, like system, and dynamic content. Perfect for tech bloggers and writers.
Version: 1.0.0
License: BN-Free
Text Domain: modernblog
Tags: blog, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, footer-widgets, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* Tailwind will be enqueued separately - this file is for WordPress metadata only */
/**
 * Add these styles for notifications
 */

/* Notification Bell Animation */
@keyframes ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}

.fa-bell.has-notifications {
    animation: ring 1s ease-in-out;
}

/* Notification Types */
.notification-item {
    transition: all 0.3s ease;
}

.notification-item.unread {
    background: linear-gradient(to right, #f0f9ff, transparent);
}

.notification-item:hover {
    transform: translateX(5px);
}

/* Leaderboard Ranks */
.rank-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.rank-2 {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.rank-3 {
    background: linear-gradient(135deg, #fcd34d, #b45309);
}

/* Dashboard Cards */
.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
}

/* Post Submission Form */
.wp-editor-container {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.wp-editor-tabs {
    padding: 0.5rem 0.5rem 0 0.5rem;
    background: #f9fafb;
}

/* Loading States */
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}