/**
 * 标签云美化样式
 * 为侧边栏和页面中的标签云提供现代化的视觉效果
 * 包括多种配色方案、悬停效果和响应式设计
 */

/* ========================================
   WordPress原生标签云样式 (侧边栏/搜索页)
   ======================================== */

/* 标签云容器 - 保持原有布局，不强制flex */
.tagcloud,
.wp-tag-cloud,
.search-keywords {
    /* 不设置display，保持WordPress原有的布局方式 */
    /* 不设置gap，让标签自然排列 */
    line-height: 1.6; /* 稍微增加行高，让不同大小的标签更协调 */
    /* 保持原有的margin和padding */
}

/* 标签云链接基础样式 - 极简版，只改颜色 */
.tagcloud a,
.wp-tag-cloud a,
.search-keywords a {
    /* 完全不添加padding、margin、border等影响布局的属性 */
    color: #666; /* 默认中性灰色 */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 标签云链接悬停效果 - 只改颜色 */
.tagcloud a:hover,
.wp-tag-cloud a:hover,
.search-keywords a:hover {
    color: #0073aa; /* 悬停时变蓝色 */
    text-decoration: none;
}

/* 标签云颜色美化 - 使用位置选择器模拟热门度 */
/* 由于RiPro主题的标签云使用相同字体大小，我们用nth-child来创建颜色变化 */

/* 第1、6、11、16个标签 - 蓝色系 */
.tagcloud a:nth-child(5n+1),
.wp-tag-cloud a:nth-child(5n+1),
.search-keywords a:nth-child(5n+1) {
    color: #2196f3;
}

.tagcloud a:nth-child(5n+1):hover,
.wp-tag-cloud a:nth-child(5n+1):hover,
.search-keywords a:nth-child(5n+1):hover {
    color: #1976d2;
}

/* 第2、7、12、17个标签 - 紫色系 */
.tagcloud a:nth-child(5n+2),
.wp-tag-cloud a:nth-child(5n+2),
.search-keywords a:nth-child(5n+2) {
    color: #9c27b0;
}

.tagcloud a:nth-child(5n+2):hover,
.wp-tag-cloud a:nth-child(5n+2):hover,
.search-keywords a:nth-child(5n+2):hover {
    color: #7b1fa2;
}

/* 第3、8、13、18个标签 - 绿色系 */
.tagcloud a:nth-child(5n+3),
.wp-tag-cloud a:nth-child(5n+3),
.search-keywords a:nth-child(5n+3) {
    color: #4caf50;
}

.tagcloud a:nth-child(5n+3):hover,
.wp-tag-cloud a:nth-child(5n+3):hover,
.search-keywords a:nth-child(5n+3):hover {
    color: #388e3c;
}

/* 第4、9、14、19个标签 - 橙色系 */
.tagcloud a:nth-child(5n+4),
.wp-tag-cloud a:nth-child(5n+4),
.search-keywords a:nth-child(5n+4) {
    color: #ff9800;
    font-weight: 600;
}

.tagcloud a:nth-child(5n+4):hover,
.wp-tag-cloud a:nth-child(5n+4):hover,
.search-keywords a:nth-child(5n+4):hover {
    color: #f57c00;
}

/* 第5、10、15、20个标签 - 红色系 */
.tagcloud a:nth-child(5n),
.wp-tag-cloud a:nth-child(5n),
.search-keywords a:nth-child(5n) {
    color: #f44336;
    font-weight: 700;
}

.tagcloud a:nth-child(5n):hover,
.wp-tag-cloud a:nth-child(5n):hover,
.search-keywords a:nth-child(5n):hover {
    color: #d32f2f;
}

/* ========================================
   页面标签云样式 (.tag-item)
   ======================================== */

/* 标签页面容器 */
.tags-page-warp {
    margin: 0;
}

/* 标签项基础样式 */
.tag-item {
    display: block;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.tag-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #0073aa;
    text-decoration: none;
}

/* 标签项内容区域 */
.tag-item .d-flex {
    position: relative;
    z-index: 2;
}

/* 标签首字母圆圈 */
.tag-substr {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    position: relative;
}

/* 标签信息区域 */
.tag-item b.text-dark {
    color: #2c3e50 !important;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.3s ease;
}

.tag-item:hover b.text-dark {
    color: #0073aa !important;
}

.tag-item .small {
    font-size: 12px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.tag-item:hover .small {
    opacity: 1;
}

/* 标签项背景渐变效果 */
.tag-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 115, 170, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.tag-item:hover::before {
    left: 100%;
}

/* ========================================
   Widget区域标签云样式
   ======================================== */

/* Widget标题样式 */
.widget .widget-title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #0073aa 0%, #005177 100%);
    border-radius: 2px;
}

/* Widget内的标签云 */
.widget .tagcloud,
.widget .wp-tag-cloud {
    margin-top: 15px;
}

.widget .tagcloud a,
.widget .wp-tag-cloud a {
    margin-bottom: 8px;
}

/* ========================================
   响应式设计
   ======================================== */

/* 平板设备 */
@media (max-width: 768px) {
    /* 标签云保持原有布局，只调整页面标签云 */
    .tag-item {
        border-radius: 10px;
    }
    
    .tag-substr {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .tag-item b.text-dark {
        font-size: 14px;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    /* 标签云保持原有布局，只调整页面标签云 */
    .tag-item {
        border-radius: 8px;
    }
    
    .tag-substr {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .tag-item b.text-dark {
        font-size: 13px;
    }
    
    .tag-item .small {
        font-size: 11px;
    }
}

/* ========================================
   注意：已移除暗色主题支持
   ======================================== */

/* 由于网站后台已关闭暗色主题功能，这里不再定义暗色主题样式
   这样可以避免CSS优先级冲突，确保热门度颜色分级正常工作 */

/* ========================================
   动画效果增强
   ======================================== */

/* 标签云加载动画 */
@keyframes tagCloudFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tagcloud,
.wp-tag-cloud,
.search-keywords {
    animation: tagCloudFadeIn 0.6s ease-out;
}

.tagcloud a,
.wp-tag-cloud a,
.search-keywords a {
    animation: tagCloudFadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

.tagcloud a:nth-child(1),
.wp-tag-cloud a:nth-child(1),
.search-keywords a:nth-child(1) { animation-delay: 0.1s; }
.tagcloud a:nth-child(2),
.wp-tag-cloud a:nth-child(2),
.search-keywords a:nth-child(2) { animation-delay: 0.15s; }
.tagcloud a:nth-child(3),
.wp-tag-cloud a:nth-child(3),
.search-keywords a:nth-child(3) { animation-delay: 0.2s; }
.tagcloud a:nth-child(4),
.wp-tag-cloud a:nth-child(4),
.search-keywords a:nth-child(4) { animation-delay: 0.25s; }
.tagcloud a:nth-child(5),
.wp-tag-cloud a:nth-child(5),
.search-keywords a:nth-child(5) { animation-delay: 0.3s; }

/* 标签项脉搏效果 */
@keyframes tagPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    50% {
        box-shadow: 0 4px 16px rgba(0, 115, 170, 0.2);
    }
}

.tag-item:hover {
    animation: tagPulse 2s ease-in-out infinite;
}

/* ========================================
   可访问性优化
   ======================================== */

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .tagcloud a,
    .wp-tag-cloud a,
    .search-keywords a {
        border-width: 2px;
        font-weight: bold;
    }
    
    .tag-item {
        border-width: 2px;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .tagcloud a,
    .wp-tag-cloud a,
    .search-keywords a,
    .tag-item {
        transition: none;
        animation: none;
    }
    
    .tag-item:hover {
        transform: none;
        animation: none;
    }
}

/* 聚焦状态 */
.tagcloud a:focus,
.wp-tag-cloud a:focus,
.search-keywords a:focus,
.tag-item:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.2);
}