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

:root {
    --primary-color: #3B82F6;
    --secondary-color: #6366F1;
    --accent-color: #8B5CF6;
    --juejin-brand-5-light: #E6F4FF;
}

/* 左侧边栏分类激活状态样式 */
.sidebar-left-container .active-nav,
.sidebar-left-container .active-nav:hover {
    background-color: var(--juejin-brand-5-light) !important;
    color: var(--primary-color) !important;
}

@layer base {
    * {
        @apply border-border;
    }
    
    body {
        @apply font-sans antialiased;
        @apply bg-white text-gray-900;
    }
    
    
    
    .dark body {
        @apply bg-gray-900 text-gray-100;
    }
}

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    
    .text-balance {
        text-wrap: balance;
    }
    
    .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    }
    
    .gradient-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    }
    
    .nav-shadow {
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    
    .carousel-slide {
        transition: opacity 0.5s ease-in-out;
    }
    
    .group:hover .group-hover\:opacity-100 {
        opacity: 1;
    }
    
    .group:hover .group-hover\:visible {
        visibility: visible;
    }
    
    .group:hover .group-hover\:scale-100 {
        transform: scale(1);
    }
    
    .mobile-submenu {
        display: none;
    }
    
    .mobile-submenu:not(.hidden) {
        display: block;
    }
    
    .mobile-dropdown .fa-chevron-down {
        transition: transform 0.2s ease;
    }
    
    .mobile-dropdown .fa-chevron-up {
        transform: rotate(180deg);
    }
    
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@layer components {
    .widget {
        @apply bg-white rounded-xl shadow-sm;
    }
    
    .dark .widget {
        @apply bg-gray-800;
    }
    
    .footer-widget {
        @apply bg-transparent shadow-none p-0;
    }
    
    .footer-widget {
        @apply text-gray-600;
    }
    
    .dark .footer-widget {
        @apply text-gray-400;
    }
    
    .footer-widget h3,
    .footer-widget .text-white {
        @apply text-gray-900;
    }
    
    .dark .footer-widget h3,
    .dark .footer-widget .text-white {
        @apply text-white;
    }
    
    .footer-widget a {
        @apply text-gray-600 hover:text-blue-500;
    }
    
    .dark .footer-widget a {
        @apply text-gray-400 hover:text-blue-400;
    }
    
    .widget-title {
        @apply font-semibold text-gray-900 mb-4 !important;
    }
    
    .dark .widget-title {
        @apply text-gray-100 !important;
    }
    
    .widget img:not(.no-rounded),
    .widget_media_image:not(.no-rounded),
    .widget .image:not(.no-rounded),
    .widget .attachment-full:not(.no-rounded),
    .widget .size-full:not(.no-rounded),
    .widget .wp-image:not(.no-rounded),
    .widget_media_image img:not(.no-rounded),
    .widget img[style]:not(.no-rounded) {
        border-radius: 0.5rem !important;
    }
    
    .widget img.avatar,
    .widget img.rounded-full {
        border-radius: 50% !important;
    }
    
    .dark .widget img:not(.no-rounded),
    .dark .widget_media_image:not(.no-rounded),
    .dark .widget .image:not(.no-rounded),
    .dark .widget .attachment-full:not(.no-rounded),
    .dark .widget .size-full:not(.no-rounded),
    .dark .widget .wp-image:not(.no-rounded),
    .dark .widget_media_image img:not(.no-rounded),
    .dark .widget img[style]:not(.no-rounded) {
        border-radius: 0.5rem !important;
    }
    
    .dark .widget img.avatar,
    .dark .widget img.rounded-full {
        border-radius: 50% !important;
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}