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

.lazy-image {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.1s ease-out, filter 0.1s ease-out;
}

.lazy-image.lazy-loaded {
    opacity: 1;
    filter: blur(0);
}

.lazy-image.immediate-load {
    opacity: 1;
    filter: blur(0);
}

:root {
    --primary-color: #3B82F6;
    --secondary-color: #6366F1;
    --accent-color: #8B5CF6;
    --juejin-brand-5-light: #E6F4FF;
    
    --multimedia-btn-color: #6b7280;
    --multimedia-btn-border-color: rgba(107, 114, 128, 0.3);
    --multimedia-btn-hover-bg: #667eea;
    --multimedia-btn-hover-color: #ffffff;
    --multimedia-btn-active-bg: #667eea;
    --multimedia-btn-active-color: #ffffff;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #111827;
}

.main-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.sidebar-left-container, .sidebar-right-container { flex-shrink: 0; }

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}

.search-container { width: 13.75rem; }

#navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
}

@media (min-width: 640px) {
    .container { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
    .main-content-grid {
        grid-template-columns: 220px 768px 320px;
        max-width: 1376px;
        margin-inline: auto;
    }
    .container { padding-inline: 2rem; }
}

/* 多媒体按钮样式 */
.multimedia-btn {
    border: 0.5px solid var(--multimedia-btn-border-color);
    color: var(--multimedia-btn-color);
}
.multimedia-btn:hover {
    background: var(--multimedia-btn-hover-bg);
    color: var(--multimedia-btn-hover-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--multimedia-btn-hover-bg) 80%, transparent);
    border-color: var(--multimedia-btn-hover-bg);
}
.multimedia-btn.liked,
.multimedia-btn.favorited,
.multimedia-btn.followed {
    background: var(--multimedia-btn-active-bg);
    color: var(--multimedia-btn-active-color);
    border-color: var(--multimedia-btn-active-bg);
}
.multimedia-btn.liked .multimedia-count,
.multimedia-btn.favorited .multimedia-count,
.multimedia-btn.followed .multimedia-count {
    color: var(--multimedia-btn-active-bg);
}

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

/* 左侧边栏阴影样式 */
.sidebar-left-container nav {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

@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.25rem !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.25rem !important;
    }
    
    .dark .widget img.avatar,
    .dark .widget img.rounded-full {
        border-radius: 50% !important;
    }

    .banner1-carousel-container .carousel-slide img:not(.rounded-full),
    .banner1-carousel-container .rounded:not(.rounded-full),
    .banner1-carousel-container .rounded-lg:not(.rounded-full),
    .banner-carousel-container .carousel-slide img:not(.rounded-full),
    .banner-carousel-container .rounded:not(.rounded-full),
    .banner-carousel-container .rounded-lg:not(.rounded-full) {
        border-radius: 0.25rem !important;
    }

    .banner1-carousel-container a.rounded,
    .banner1-carousel-container a.rounded-lg,
    .banner-carousel-container a.rounded,
    .banner-carousel-container a.rounded-lg {
        border-radius: 0.25rem !important;
        overflow: hidden;
    }

    .content-card img,
    .content-card .rounded-lg,
    .content-card .rounded-md {
        border-radius: 0.25rem !important;
    }

    .content-card a.rounded-lg,
    .content-card a.rounded-md,
    .content-card div.rounded-lg,
    .content-card div.rounded-md {
        border-radius: 0.25rem !important;
        overflow: hidden;
    }
}

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

/* 头部 Header 整体样式 - 深色主题风格 */
.header-theme-dark {
    background: rgba(31, 41, 55, 0.95) !important;
    border-color: #374151 !important;
}

.header-theme-dark .text-gray-700,
.header-theme-dark .text-gray-600 {
    color: #e5e7eb !important;
}

.header-theme-dark a:not(.bg-primary):not(.bg-white) {
    color: #e5e7eb !important;
}

.header-theme-dark a:hover:not(.bg-primary):not(.bg-white):not(.text-primary) {
    color: var(--primary-color) !important;
}

/* 头部二级菜单深色主题风格 */
.header-theme-dark ul.absolute,
.header-theme-dark nav ul.absolute,
.header-theme-dark .menu-item-has-children ul {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

.header-theme-dark ul.absolute a,
.header-theme-dark nav ul.absolute a,
.header-theme-dark .menu-item-has-children ul a {
    color: #e5e7eb !important;
}

.header-theme-dark ul.absolute a:hover,
.header-theme-dark nav ul.absolute a:hover,
.header-theme-dark .menu-item-has-children ul a:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--primary-color) !important;
}

/* 暗色模式下头部样式覆盖 - 深色主题风格 */
.dark .header-theme-dark {
    background: rgba(31, 41, 55, 0.95) !important;
    border-color: #374151 !important;
}

.dark .header-theme-dark .text-gray-700,
.dark .header-theme-dark .text-gray-600 {
    color: #d1d5db !important;
}

.dark .header-theme-dark a:not(.bg-primary):not(.bg-white) {
    color: #d1d5db !important;
}

.dark .header-theme-dark a:hover:not(.bg-primary):not(.bg-white):not(.text-primary) {
    color: var(--primary-color) !important;
}

/* 暗色模式下头部二级菜单深色主题风格 */
.dark .header-theme-dark ul.absolute,
.dark .header-theme-dark nav ul.absolute,
.dark .header-theme-dark .menu-item-has-children ul {
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
}

.dark .header-theme-dark ul.absolute a,
.dark .header-theme-dark nav ul.absolute a,
.dark .header-theme-dark .menu-item-has-children ul a {
    color: #d1d5db !important;
}

.dark .header-theme-dark ul.absolute a:hover,
.dark .header-theme-dark nav ul.absolute a:hover,
.dark .header-theme-dark .menu-item-has-children ul a:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--primary-color) !important;
}

/* 底部链接导航样式 - 浅色主题风格 */
.footer-nav-light a {
    color: #6b7280;
}

.footer-nav-light a:hover {
    color: #3b82f6;
}


/* 底部 Footer 整体样式 - 深色主题风格 */
.footer-theme-dark {
    background: #111827 !important;
    border-color: #1f2937 !important;
}

.footer-theme-dark .text-gray-500,
.footer-theme-dark .text-sm {
    color: #9ca3af !important;
}

.footer-theme-dark a {
    color: #d1d5db;
}

.footer-theme-dark a:hover {
    color: #3b82f6 !important;
}

.footer-theme-dark .footer-nav-light a:hover,
.footer-theme-dark .footer-nav-dark a:hover {
    color: #3b82f6 !important;
}

.footer-theme-dark .border-gray-200,
.footer-theme-dark .border-t {
    border-color: #1f2937 !important;
}

.footer-theme-dark [style*="color: inherit"] {
    color: #d1d5db !important;
}

/* 底部footer深色模式下简介区域样式 */
.footer-theme-dark .text-\[\#32373ccf\] {
    color: #d1d5db !important;
}

.footer-theme-dark .text-gray-600 {
    color: #9ca3af !important;
}

.footer-theme-dark .bg-gray-100 {
    background: #374151 !important;
}

.footer-theme-dark .text-gray-400 {
    color: #d1d5db !important;
}

.footer-theme-dark .hover\:bg-blue-500:hover {
    background: #3b82f6 !important;
}

.footer-theme-dark .hover\:text-white:hover {
    color: #ffffff !important;
}




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

.font-semibold {
    font-weight: 500 !important;
}