/**
 * Trx-Tt-Sleek Theme Footer CSS
 * 页脚组件样式和动画效果
 */

/* ========== 主页脚样式 ========== */
.footer {
    @apply bg-gray-900 text-white mt-16;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.footer-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* ========== 页脚内容区域 ========== */
.footer-content {
    @apply py-12;
}

.footer-widgets {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8;
}

/* ========== 页脚小部件样式 ========== */
.footer-widget {
    @apply space-y-4;
}

.footer-widget-title {
    @apply text-lg font-semibold text-white mb-4 pb-2 border-b border-gray-700;
    position: relative;
}

.footer-widget-title::after {
    content: '';
    @apply absolute bottom-0 left-0 w-8 h-0.5 bg-blue-500;
}

.footer-widget ul {
    @apply space-y-2;
}

.footer-widget li {
    @apply transition-colors duration-200;
}

.footer-widget a {
    @apply text-gray-300 hover:text-white text-sm transition-colors duration-200 no-underline;
    text-decoration: none;
}

.footer-widget a:hover {
    @apply text-blue-400;
    transform: translateX(2px);
}

/* ========== 关于信息区块 ========== */
.footer-about {
    @apply col-span-1 md:col-span-2 lg:col-span-2;
}

.footer-logo {
    @apply text-2xl font-bold text-white mb-4;
}

.footer-description {
    @apply text-gray-300 text-sm leading-relaxed mb-6;
    line-height: 1.6;
}

.footer-social {
    @apply flex space-x-4;
}

.social-link {
    @apply w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center text-gray-300 hover:text-white transition-all duration-300;
    transform: translateY(0);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.social-link i {
    @apply text-lg;
}

/* ========== 快速链接 ========== */
.footer-links {
    @apply space-y-2;
}

.footer-link {
    @apply text-gray-300 hover:text-white text-sm transition-all duration-200 no-underline flex items-center;
    text-decoration: none;
}

.footer-link::before {
    content: '→';
    @apply mr-2 text-blue-500 transition-all duration-200;
}

.footer-link:hover::before {
    @apply mr-3;
}

.footer-link:hover {
    transform: translateX(4px);
}

/* ========== 联系信息 ========== */
.footer-contact {
    @apply space-y-3;
}

.contact-item {
    @apply flex items-center space-x-3 text-sm;
}

.contact-icon {
    @apply w-5 h-5 text-blue-400;
}

.contact-text {
    @apply text-gray-300;
}

/* ========== 最近文章 ========== */
.footer-recent-posts {
    @apply space-y-3;
}

.recent-post-item {
    @apply border-b border-gray-800 pb-3 last:border-b-0;
}

.recent-post-title {
    @apply text-white hover:text-blue-400 text-sm font-medium transition-colors duration-200 no-underline block;
    text-decoration: none;
}

.recent-post-meta {
    @apply text-gray-400 text-xs mt-1 flex items-center;
}

.recent-post-date {
    @apply mr-4;
}

.recent-post-author {
    @apply flex items-center;
}

.recent-post-author i {
    @apply mr-1;
}

/* ========== 标签云 ========== */
.footer-tags {
    @apply flex flex-wrap gap-2;
}

.footer-tag {
    @apply px-3 py-1 bg-gray-800 hover:bg-blue-600 text-gray-300 hover:text-white text-xs rounded-full transition-all duration-200 cursor-pointer no-underline;
    text-decoration: none;
}

.footer-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* ========== 订阅表单 ========== */
.footer-newsletter {
    @apply space-y-4;
}

.newsletter-form {
    @apply relative;
}

.newsletter-input {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.newsletter-button {
    @apply absolute right-1 top-1 bottom-1 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors duration-200;
}

.newsletter-description {
    @apply text-gray-400 text-xs;
}

/* ========== 页脚底部 ========== */
.footer-bottom {
    @apply border-t border-gray-800 py-6;
}

.footer-bottom-content {
    @apply flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0;
}

.footer-copyright {
    @apply text-gray-400 text-sm;
}

.footer-menu {
    @apply flex flex-wrap justify-center md:justify-end space-x-6;
}

.footer-menu a {
    @apply text-gray-400 hover:text-white text-sm transition-colors duration-200 no-underline;
    text-decoration: none;
}

/* ========== 返回顶部按钮 ========== */
.back-to-top {
    @apply fixed bottom-6 right-6 w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 cursor-pointer z-50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.back-to-top i {
    @apply text-lg;
}

/* ========== 页脚动画类 ========== */
@keyframes footerSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-fade-in {
    animation: footerSlideUp 0.6s ease-out;
    will-change: transform, opacity;
}

/* ========== 动画性能优化 - will-change属性 ========== */
.footer {
    will-change: transform, opacity;
}

.footer-widget {
    will-change: transform, opacity;
}

.footer-widget a {
    will-change: transform, opacity;
}

.social-link {
    will-change: transform, opacity;
}

.footer-tag {
    will-change: transform, opacity;
}

.footer-link {
    will-change: transform, opacity;
}

.back-to-top {
    will-change: transform, opacity;
}

.footer-bottom {
    will-change: transform, opacity;
}

.recent-post-item {
    will-change: transform, opacity;
}

.contact-item {
    will-change: transform, opacity;
}

.footer-widget:nth-child(1) {
    animation-delay: 0.1s;
}

.footer-widget:nth-child(2) {
    animation-delay: 0.2s;
}

.footer-widget:nth-child(3) {
    animation-delay: 0.3s;
}

.footer-widget:nth-child(4) {
    animation-delay: 0.4s;
}

/* ========== 响应式设计 ========== */
@media (max-width: 1024px) {
    .footer-widgets {
        @apply grid-cols-1 md:grid-cols-2 gap-6;
    }
    
    .footer-about {
        @apply col-span-1 md:col-span-2;
    }
}

@media (max-width: 768px) {
    .footer-content {
        @apply py-8;
    }
    
    .footer-widgets {
        @apply grid-cols-1 space-y-8;
    }
    
    .footer-widget-title {
        @apply text-base;
    }
    
    .footer-social {
        @apply justify-center;
    }
    
    .footer-bottom-content {
        @apply text-center space-y-4;
    }
    
    .footer-menu {
        @apply justify-center;
    }
    
    .back-to-top {
        @apply bottom-4 right-4 w-10 h-10;
    }
}

@media (max-width: 640px) {
    .footer-container {
        @apply px-4;
    }
    
    .footer-content {
        @apply py-6;
    }
    
    .footer-widget {
        @apply space-y-3;
    }
    
    .footer-widget-title {
        @apply mb-3;
    }
    
    .footer-logo {
        @apply text-xl;
    }
    
    .footer-description {
        @apply text-xs;
    }
    
    .newsletter-form {
        @apply space-y-3;
    }
    
    .newsletter-input {
        @apply py-2 text-sm;
    }
    
    .newsletter-button {
        @apply px-3 text-sm;
    }
    
    .footer-menu {
        @apply flex-col space-x-0 space-y-2;
    }
}

/* ========== 高对比度模式支持 ========== */
@media (prefers-contrast: high) {
    .footer {
        @apply bg-black border-t-2 border-gray-800;
    }
    
    .footer-widget-title {
        @apply border-gray-600;
    }
    
    .footer-widget a {
        @apply text-gray-200 hover:text-white;
    }
    
    .footer-link {
        @apply text-gray-200 hover:text-white;
    }
    
    .footer-tag {
        @apply bg-gray-700 border border-gray-600;
    }
    
    .newsletter-input {
        @apply bg-gray-900 border-gray-600;
    }
    
    .footer-bottom {
        @apply border-gray-800;
    }
    
    .back-to-top {
        @apply bg-blue-800 border-2 border-blue-600;
    }
}

/* ========== 暗色模式支持 ========== */
@media (prefers-color-scheme: dark) {
    .footer {
        background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    }
    
    .footer-widget-title {
        @apply border-gray-600;
    }
    
    .footer-widget a {
        @apply text-gray-400 hover:text-gray-200;
    }
    
    .social-link {
        @apply bg-gray-700 hover:bg-blue-500;
    }
    
    .footer-tag {
        @apply bg-gray-700 hover:bg-blue-600 text-gray-300;
    }
    
    .newsletter-input {
        @apply bg-gray-800 border-gray-700;
    }
    
    .footer-bottom {
        @apply border-gray-700;
    }
}

/* ========== 减少动画模式 ========== */
@media (prefers-reduced-motion: reduce) {
    .footer,
    .footer-widget a,
    .social-link,
    .footer-tag,
    .footer-link,
    .back-to-top {
        transition: none !important;
        animation: none !important;
    }
    
    .footer-fade-in,
    .footer-widget {
        animation: none !important;
    }
    
    .back-to-top:hover {
        transform: none !important;
    }
    
    .social-link:hover {
        transform: none !important;
    }
    
    .footer-tag:hover {
        transform: none !important;
    }
}