/**
 * 轻蜂加速器主题 - 统一CSS样式文件
 * 基于所有HTML文件提取的样式
 * 
 * @package Qingfeng
 * @version 1.0.0
 */

/* ============================================
   CSS变量定义
   ============================================ */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 217 91% 60%; /* Blue color from logo */
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 217 91% 60%;
    --radius: 0.5rem;
}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
}

/* ============================================
   基础样式重置
   ============================================ */
html {
    scroll-behavior: smooth;
}

body, main {
    margin: 0;
    padding: 0;
    font-family: inherit !important;
}

section {
    margin: 0;
    transition: background-color 0.3s ease;
}

footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

a {
    font-family: inherit !important;
}

/* ============================================
   文章列表页面包屑导航样式
   ============================================ */
.archive .breadcrumb-nav,
.archive .breadcrumb-nav a,
.archive .breadcrumb-nav span {
    color: #6b7280 !important;
}

.archive .breadcrumb-nav a:hover {
    color: hsl(var(--primary)) !important;
}

/* 面包屑导航通用样式 - 确保所有文字都是灰色 */
.border-b.bg-background .text-muted-foreground,
.border-b.bg-background .text-muted-foreground a,
.border-b.bg-background .text-muted-foreground span {
    color: #6b7280 !important;
}

.border-b.bg-background .text-muted-foreground a:hover {
    color: hsl(var(--primary)) !important;
}

/* ============================================
   导航栏二级菜单样式
   ============================================ */
/* 确保二级菜单可以点击 */
header nav .menu-item-has-children > ul,
header nav .menu-item-has-children > .sub-menu,
header nav .relative.group > ul,
header nav .relative.group > .sub-menu {
    pointer-events: auto !important;
    z-index: 9999 !important;
}

header nav .menu-item-has-children > ul a,
header nav .menu-item-has-children > .sub-menu a,
header nav .relative.group > ul a,
header nav .relative.group > .sub-menu a {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    position: relative !important;
    display: block !important;
    text-decoration: none !important;
}

/* 确保父菜单项不会阻止子菜单的点击 */
header nav .menu-item-has-children.relative.group > a {
    pointer-events: auto !important;
}

/* 确保子菜单链接可以点击 */
header nav .sub-menu li a,
header nav ul.sub-menu li a {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10001 !important;
    display: block !important;
    width: 100% !important;
}

/* 子菜单显示时的样式 */
header nav .sub-menu[style*="display: block"],
header nav .sub-menu[style*="display:block"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ============================================
   移动端优化样式
   ============================================ */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* 移动端按钮优化 - 触摸友好的按钮高度 */
    button {
        min-height: 44px;
    }
    
    /* 移动端卡片间距优化 */
    .grid > * {
        margin-bottom: 1rem;
    }
    
    /* 文章列表页移动端布局优化 */
    article.flex.flex-row {
        flex-direction: column !important;
    }
    
    article.flex.flex-row img {
        width: 100% !important;
        height: 200px !important;
    }
}

/* 文章列表页样式优化 */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 平板端优化 */
@media (min-width: 640px) and (max-width: 1024px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ============================================
   卡片和交互元素样式
   ============================================ */
.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.07);
    border-color: hsl(var(--primary));
}

.icon-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.download-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.download-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px -8px rgba(8, 9, 13, 0.07);
    border-color: hsl(var(--primary));
}

/* ============================================
   图标颜色控制
   ============================================ */
/* 1. 主要按钮（蓝色背景）中的图标应为白色，但导航栏的客户端下载按钮图标应为蓝色 */
button[class*="bg-primary"][class*="text-primary-foreground"] i.fas,
button[class*="bg-primary"][class*="text-primary-foreground"] i.fab,
button.bg-primary.text-primary-foreground i {
    color: hsl(var(--primary-foreground)) !important;
}

/* 导航栏客户端下载按钮 - 确保显示 */
header a[href*="#download"],
header a[href*="#download"][class*="bg-primary"],
header .flex.items-center.space-x-4 > a[href*="#download"],
header div.flex.items-center.space-x-4 > a,
header #header-download-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    background-color: #3b82f6 !important; /* 蓝色备用 */
    color: #f0f9ff !important; /* 白色文字备用 */
    padding: 8px 16px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 导航栏客户端下载按钮图标应为蓝色 */
header a[class*="bg-primary"][class*="text-primary-foreground"] i.fas,
header a[class*="bg-primary"][class*="text-primary-foreground"] i.fab,
header a.bg-primary.text-primary-foreground i,
header a[href*="#download"] i.fas.fa-download,
header a[href*="#download"] i.fas {
    color: hsl(var(--primary)) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* 2. 次要按钮中的图标继承文字颜色 */
button[class*="bg-background"] i.fas,
button[class*="bg-background"] i.fab,
button.bg-background i {
    color: inherit !important;
}

/* 3. 确保英雄区平台图标显示为 slate-500 颜色（灰色） */
.text-slate-500 i.fab,
.text-slate-500 i.fas,
.text-slate-500 i[class*="fa-"],
section.bg-sky-100 .text-slate-500 i.fab,
section.bg-sky-100 .text-slate-500 i.fas {
    color: rgb(100 116 139) !important;
}

/* 4. 确保权威认证区域的图标显示为蓝色（primary） */
i.fas.text-primary,
i.fab.text-primary,
i[class*="fa-"][class*="text-primary"],
section.bg-secondary i.fas.text-primary,
section.bg-secondary i.fab.text-primary {
    color: hsl(var(--primary)) !important;
}

/* 5. 确保优势区域的图标显示为蓝色（primary） */
.flex.items-start i.fas.text-primary,
.flex.items-start i.fab.text-primary,
.flex.items-start i[class*="fa-"][class*="text-primary"],
section:not(.bg-secondary):not(.bg-sky-100) .flex.items-start i.fas.text-primary,
section:not(.bg-secondary):not(.bg-sky-100) .flex.items-start i.fab.text-primary {
    color: hsl(var(--primary)) !important;
}

/* 6. 确保全平台覆盖区域的图标显示为灰色（muted-foreground） */
i.fab.text-muted-foreground,
i.fas.text-muted-foreground,
i[class*="fa-"][class*="text-muted-foreground"],
section#download i.fab.text-muted-foreground,
section#download i.fas.text-muted-foreground {
    color: hsl(var(--muted-foreground)) !important;
}

/* 7. 通用规则：所有图标默认继承父元素颜色（优先级较低） */
i.fas, i.fab, i[class*="fa-"] {
    color: inherit;
}

/* ============================================
   文章正文样式（Prose）
   ============================================ */
.prose {
    color: rgb(55 65 81);
    font-family: inherit !important;
}

.prose code {
    font-size: 0.875em;
    color: #dc2626;
    background-color: #f3f4f6;
    padding: 2px 4px;
    border-radius: 4px;
}

.prose pre {
    background-color: #1f2937;
    color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.prose pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.prose blockquote {
    border-left: 4px solid hsl(var(--border));
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-style: normal;
    color: #4b5563;
}

.prose ol, .prose ul {
    padding-left: 1.5rem;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose li {
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
}

.prose li code {
    color: #dc2626;
    background-color: #f3f4f6;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.875em;
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    line-height: 1.7;
}

.prose h1 {
    color: rgb(17 24 39);
    font-weight: 700;
}

.prose h2 {
    color: rgb(17 24 39);
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
    border-bottom: 1px solid hsl(var(--border));
    padding-bottom: 0.5rem;
}

.prose h3 {
    color: rgb(31 41 55);
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
}

.prose h4 {
    color: rgb(31 41 55);
}

.prose strong {
    color: rgb(17 24 39);
    font-weight: 600;
}

.prose a {
    color: hsl(var(--primary));
    text-decoration: underline;
    font-family: inherit !important;
}

.prose a:hover {
    opacity: 0.8;
}

.prose .entry-content {
    color: inherit;
}

.prose .entry-content p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose .entry-content code {
    color: #dc2626;
    background-color: #f3f4f6;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.875em;
}

.prose .entry-content pre {
    background-color: #1f2937;
    color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose .entry-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.prose .entry-content blockquote {
    border-left: 4px solid hsl(var(--border));
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-style: normal;
    color: #4b5563;
}

.prose .entry-content ol,
.prose .entry-content ul {
    padding-left: 1.5rem;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    list-style-type: decimal;
}

.prose .entry-content li {
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
}

.prose .entry-content h2 {
    color: #111827;
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
}

.prose .entry-content h3 {
    color: #1f2937;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
}

.prose .entry-content strong {
    color: #111827;
    font-weight: 600;
}

.prose .entry-content a {
    color: hsl(var(--primary));
    text-decoration: underline;
}

.prose .entry-content a:hover {
    opacity: 0.8;
}

/* ============================================
   板块背景色控制
   ============================================ */
/* 所有 bg-secondary 板块强制显示为灰色 */
section.bg-secondary {
    background-color: hsl(var(--secondary)) !important;
}

/* 权威认证板块 - 灰色背景 */
section.bg-secondary:has(h2:contains("权威认证")),
section.bg-secondary:first-of-type {
    background-color: hsl(var(--secondary)) !important;
}

/* 满足您的多种加速需求板块 - 灰色背景 */
section#solutions.bg-secondary {
    background-color: hsl(var(--secondary)) !important;
}

/* 用户见证板块 - 灰色背景 */
section.bg-secondary:has(h2:contains("他们都在用轻蜂")) {
    background-color: hsl(var(--secondary)) !important;
}

/* ============================================
   最新动态区域样式
   ============================================ */
/* 最新动态标题 - 单行显示，颜色为黑色 */
section#news .news-title a {
    color: #111827 !important; /* slate-900 / 黑色 */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section#news .news-title a:hover {
    color: hsl(var(--primary)) !important;
}

/* 最新动态摘要 - 2行显示，第二行21个字符超出省略（由JavaScript精确控制） */
section#news .news-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    max-height: 3em; /* 2行的高度 */
    word-break: break-word; /* 允许在单词边界换行 */
    color: #63748A !important; /* 浅色字体 */
}

/* ============================================
   文字颜色控制
   ============================================ */
/* 场景类板块摘要文字 - 浅色字体 */
section#solutions .bg-card p.text-muted-foreground {
    color: #63748A !important;
}

/* 用户见证部分文字颜色 - 浅色字体 */
section#testimonials .bg-card p.text-muted-foreground.italic {
    color: #63748A !important;
}

/* 用户见证部分身份文字颜色 - 浅色字体 */
section#testimonials .bg-card p.text-sm.text-muted-foreground {
    color: #63748A !important;
}

/* Q&A部分答案文字颜色 - 浅色字体 */
section#support p.text-muted-foreground.mt-2 {
    color: #63748A !important;
}

/* 导航栏链接默认颜色 */
header nav a.nav-link,
header .nav-link {
    color: #63748A !important;
}

/* 导航栏链接悬停颜色 - 保持原色（text-foreground/80） */
header nav a.nav-link:hover,
header .nav-link:hover {
    color: hsl(var(--foreground) / 0.8) !important;
}

/* 所有板块的副标题（描述文字）颜色 - #63748A */
section#solutions .text-center .text-muted-foreground,
section#news .text-center .text-muted-foreground,
section#testimonials .text-center .text-muted-foreground,
section#support .text-center .text-muted-foreground,
section.bg-blue-50 .text-center .text-muted-foreground,
section .text-center p.text-muted-foreground[class*="max-w"],
section .text-center .text-muted-foreground {
    color: #63748A !important;
}

/* 权威认证板块副标题 */
section.bg-secondary .text-center .text-muted-foreground {
    color: #63748A !important;
}

/* "为什么选择我们"板块的正文文字颜色 - #63748A */
section .text-muted-foreground.mt-1 {
    color: #63748A !important;
}

/* 定价页面副标题颜色 - #63748A */
section#pricing .text-center .text-muted-foreground,
section.bg-secondary .text-center .text-muted-foreground {
    color: #63748A !important;
}

/* ============================================
   定价页面功能特性图标颜色
   ============================================ */
/* 功能特性区域的图标容器 */
section.bg-secondary .flex.flex-col.items-center .rounded-full {
    background-color: hsl(var(--primary) / 0.1) !important;
}

/* 功能特性区域的图标颜色 - 蓝色 */
section.bg-secondary .flex.flex-col.items-center .rounded-full i,
section.bg-secondary .flex.flex-col.items-center .rounded-full i.fas,
section.bg-secondary .flex.flex-col.items-center .rounded-full i.fab,
section.bg-secondary .flex.flex-col.items-center .text-primary i,
section.bg-secondary .flex.flex-col.items-center .text-primary i.fas,
section.bg-secondary .flex.flex-col.items-center .text-primary i.fab {
    color: hsl(var(--primary)) !important;
}

/* 备用规则：直接针对包含图标的div */
section.bg-secondary div.h-12.w-12.rounded-full i {
    color: hsl(var(--primary)) !important;
}

section.bg-secondary div.h-12.w-12.rounded-full {
    background-color: hsl(var(--primary) / 0.1) !important;
}

/* ============================================
   卡片背景色强制应用
   ============================================ */
.bg-card {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
}

section.bg-secondary .bg-card {
    background-color: hsl(var(--card)) !important;
}

section#download .bg-card {
    background-color: hsl(var(--card)) !important;
}

/* ============================================
   按钮背景色强制应用
   ============================================ */
/* 英雄区立即免费试用按钮 - 蓝色背景 */
section.hero-section button[class*="bg-primary"][class*="text-primary-foreground"]:first-of-type,
section.bg-sky-100 button[class*="bg-primary"][class*="text-primary-foreground"]:first-of-type {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

/* 英雄区下载客户端按钮 - 白色背景 */
section.hero-section a[class*="bg-background"],
section.hero-section button[class*="bg-background"],
section.bg-sky-100 a[class*="bg-background"],
section.bg-sky-100 button[class*="bg-background"] {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

/* 号召区域按钮 - 蓝色背景 */
section.bg-blue-50 button[class*="bg-primary"][class*="text-primary-foreground"],
section.bg-blue-50 button.bg-primary.text-primary-foreground {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

/* 首页加速场景卡片 hover 效果（参考 index1.html 的 solution-card） */
.scenario-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scenario-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

/* 导航栏客户端下载按钮 - 确保蓝色背景 */
header a[class*="bg-primary"][class*="text-primary-foreground"],
header a.bg-primary.text-primary-foreground {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

/* 首页英雄区标题两部分之间的间距 */
.hero-title-spaced .hero-title-part1 {
    margin-right: 0.4em; /* 适中的间距，既不会太紧也不会太松 */
}

/* 首页英雄区平台图标按钮样式 - 亮蓝色渐变背景，增强视觉效果 */
.hero-platform-btn {
    position: relative;
    overflow: hidden;
    /* 亮蓝色渐变：从左上角的亮蓝色到右下角的深蓝色 */
    background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%) !important;
    color: hsl(var(--primary-foreground)) !important;
    border-color: #3B82F6 !important;
    /* 增强阴影效果，让按钮更显眼 */
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4), 0 8px 10px -6px rgba(59, 130, 246, 0.3) !important;
    /* 添加轻微的内阴影，增加立体感 */
    border-width: 2px !important;
    /* 确保按钮有足够的视觉重量 */
    min-height: 56px;
    font-weight: 600 !important;
}

.hero-platform-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
    z-index: 1;
}

.hero-platform-btn:hover::before {
    left: 100%;
}

.hero-platform-btn:hover {
    /* 悬停时使用更亮的渐变 */
    background: linear-gradient(135deg, #7BB3FF 0%, #60A5FA 50%, #3B82F6 100%) !important;
    /* 悬停时增强阴影 */
    box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.5), 0 10px 20px -8px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-2px);
}

.hero-platform-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px -3px rgba(59, 130, 246, 0.3) !important;
}

.hero-platform-btn i,
.hero-platform-btn i.fab,
.hero-platform-btn i.fas {
    transition: transform 0.3s ease;
    color: hsl(var(--primary-foreground)) !important;
    position: relative;
    z-index: 2;
}

.hero-platform-btn span {
    color: hsl(var(--primary-foreground)) !important;
    position: relative;
    z-index: 2;
}

.hero-platform-btn:hover i {
    transform: scale(1.15) rotate(5deg);
}

/* 确保按钮在移动端也显示良好 */
@media (max-width: 640px) {
    .hero-platforms .grid {
        max-width: 100%;
        gap: 0.75rem;
    }
    
    .hero-platform-btn {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        min-height: 48px;
    }
    
    .hero-platform-btn i {
        font-size: 1.125rem;
    }
}

/* 桌面端进一步优化 */
@media (min-width: 768px) {
    .hero-platform-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-height: 60px;
    }
    
    .hero-platform-btn i {
        font-size: 1.5rem;
    }
}

/* ============================================
   关于我们页面卡片样式优化
   ============================================ */
/* 核心优势卡片 hover 效果 */
.about-advantage-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.about-advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border-color: hsl(var(--primary) / 0.3);
}

/* 产品矩阵卡片 hover 效果 */
.about-product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.about-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border-color: hsl(var(--primary) / 0.3);
}

/* 企业文化卡片 hover 效果 */
.about-culture-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.about-culture-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -5px rgba(0, 0, 0, 0.08);
    border-color: hsl(var(--primary) / 0.2);
}

/* ============================================
   链接和标题颜色
   ============================================ */
/* 官方查询、了解更多、阅读更多链接 - 蓝色 */
a.text-primary:not([class*="text-primary-foreground"]),
a[class~="text-primary"]:not([class*="text-primary-foreground"]) {
    color: hsl(var(--primary)) !important;
}

a.text-primary:hover:not([class*="text-primary-foreground"]),
a[class~="text-primary"]:hover:not([class*="text-primary-foreground"]) {
    color: hsl(var(--primary)) !important;
    opacity: 0.8;
}

/* 准备好体验极致的网络自由了吗？标题 - 蓝色 */
h2.text-primary,
h2[class*="text-primary"] {
    color: hsl(var(--primary)) !important;
}

/* 首页场景解决方案模块卡片标题 - 强制黑色 */
section#solutions h3 a,
section#solutions h3 {
    color: #111827 !important; /* 近黑色，和正文标题保持一致 */
}

/* ============================================
   手风琴（Accordion）样式
   ============================================ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

details[open] .accordion-content {
    max-height: 500px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

details[open] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-icon {
    transition: transform 0.3s ease;
}

/* ============================================
   标签页面样式
   ============================================ */
.tag-filter {
    cursor: pointer;
}

.tag-item {
    transition: all 0.3s ease;
}

/* ============================================
   小部件（Widget）样式
   ============================================ */
.widget {
    margin-bottom: 2rem;
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: rgb(17 24 39);
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget li {
    margin-bottom: 0.5rem;
}

.widget a {
    color: rgb(55 65 81);
    text-decoration: none;
    transition: color 0.2s ease;
}

.widget a:hover {
    color: hsl(var(--primary));
}

/* 热门文章小部件链接颜色 */
.widget.popular-posts a {
    color: rgb(55 65 81);
}

.widget.popular-posts a:hover {
    color: hsl(var(--primary));
}

/* ============================================
   文章列表页新样式优化
   ============================================ */
/* 文章卡片样式 */
.archive article.bg-white {
    transition: all 0.3s ease;
}

.archive article.bg-white:hover {
    border-color: #d1d5db; /* 更浅的灰色 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 文章缩略图样式 */
.archive article a img {
    transition: transform 0.3s ease;
}

.archive article:hover a img {
    transform: scale(1.05);
}

/* 文章元数据图标样式 */
.archive article .fa-clock,
.archive article .fa-eye,
.archive article .fa-tag {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.archive article .fa-tag {
    margin-right: 0.375rem;
}

/* 移动端响应式优化 */
@media (max-width: 768px) {
    .archive article {
        flex-direction: column !important;
    }
    
    .archive article > a {
        width: 100% !important;
        height: 200px !important;
    }
    
    .archive article .flex-grow {
        padding: 1rem !important;
    }
    
    .archive article h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .archive article p {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
    
    .archive article .text-xs {
        font-size: 0.75rem !important;
    }
}

/* 标签链接悬停效果 */
.archive article a[href*="tag"]:hover {
    color: hsl(var(--primary)) !important;
}

/* 文章列表页标题和摘要颜色 */
.archive article.bg-white h2 a,
.archive article.bg-white h2 a.text-black {
    color: #000000 !important;
}

.archive article.bg-white h2 a:hover {
    color: hsl(var(--primary)) !important;
}

.archive article.bg-white p.text-gray-500,
.archive article.bg-white .flex-grow p {
    color: #6b7280 !important;
}