/**
 * 关于我们页面强制颜色修复 - 版本 16
 * 
 * 使用最高优先级的 !important 规则强制覆盖所有可能的样式冲突
 * 
 * @package Corporate_Theme
 * @since 1.0.0
 * @version 16.0
 */

/* ==========================================================================
   强制移除所有可能导致文字不可见的样式
   注意：只针对特定元素，不使用通配符选择器
   ========================================================================== */

/* 移除可能导致文字不可见的渐变效果 - 仅针对标题和段落 */
.page-about h1,
.page-about h2,
.page-about h3,
.page-about h4,
.page-about h5,
.page-about h6,
.page-about p {
    -webkit-text-fill-color: unset !important;
    text-fill-color: unset !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

/* ==========================================================================
   Banner 区域 - 白色文字（在蓝色背景上）
   ========================================================================== */

.page-about .page-hero {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.page-about .page-hero *,
.page-about .page-title,
.page-about .page-subtitle {
    color: #ffffff !important;
}

/* ==========================================================================
   公司介绍区域 - 深色文字（在白色背景上）
   ========================================================================== */

.about-intro {
    background: #ffffff !important;
}

.about-intro *,
.about-intro .entry-content,
.about-intro .entry-content * {
    color: #333333 !important;
}

.about-intro .entry-content h1,
.about-intro .entry-content h2,
.about-intro .entry-content h3,
.about-intro .entry-content h4,
.about-intro .entry-content h5,
.about-intro .entry-content h6 {
    color: #1a1a1a !important;
}

.about-intro .entry-content p,
.about-intro .entry-content li {
    color: #555555 !important;
}

.about-intro .entry-content strong,
.about-intro .entry-content b {
    color: #1976d2 !important;
}

.about-intro .entry-content a {
    color: #1976d2 !important;
}

/* ==========================================================================
   时间线区域 - 深色文字（在浅灰背景上）
   ========================================================================== */

.about-timeline {
    background: #fafbfc !important;
}

.about-timeline .section-title {
    color: #1a1a1a !important;
}

.timeline-item {
    background: #ffffff !important;
}

.timeline-year {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: #ffffff !important;
}

.timeline-title {
    color: #1a1a1a !important;
}

.timeline-description {
    color: #666666 !important;
}

/* ==========================================================================
   全球布局区域 - 深色文字（在白色背景上）
   ========================================================================== */

.about-global {
    background: #ffffff !important;
}

.about-global .section-title {
    color: #1a1a1a !important;
}

.location-card {
    background: #ffffff !important;
}

.location-city {
    color: #1a1a1a !important;
}

.location-country {
    color: #1976d2 !important;
}

.location-address {
    color: #666666 !important;
}

.location-icon,
.location-icon * {
    color: #1976d2 !important;
}

.location-card:hover .location-icon,
.location-card:hover .location-icon * {
    color: #ffffff !important;
}

/* ==========================================================================
   企业数据区域 - 深色文字（在浅灰背景上）
   仅应用于中文、英文、日文站点，不影响越南语和阿拉伯语站点
   ========================================================================== */

body:not(.lang-vi):not(.lang-ar) .about-stats {
    background: linear-gradient(135deg, #f5f7fa 0%, #e3f2fd 100%) !important;
}

.about-stats .section-title {
    color: #1a1a1a !important;
    background: transparent !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

body:not(.lang-vi):not(.lang-ar) .about-stats .stat-item,
body:not(.lang-vi):not(.lang-ar) .about-stats .stat-card {
    background: #ffffff !important;
}

.about-stats .stat-number,
.about-stats .stat-card__number {
    /* 强制使用纯色，不使用渐变 */
    color: #1976d2 !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-text-fill-color: #1976d2 !important;
    text-fill-color: #1976d2 !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

.about-stats .stat-icon,
.about-stats .stat-icon *,
.about-stats .stat-icon .dashicons,
.about-stats .stat-card__icon,
.about-stats .stat-card__icon * {
    color: #1976d2 !important;
    background: transparent !important;
}

.about-stats .stat-label,
.about-stats .stat-card__label {
    color: #666666 !important;
    background: transparent !important;
    -webkit-text-fill-color: #666666 !important;
}

.about-stats .stat-item:hover .stat-icon,
.about-stats .stat-item:hover .stat-icon * {
    color: #ffffff !important;
}

/* ==========================================================================
   企业价值观区域 - 深色文字（在白色背景上）
   仅应用于中文、英文、日文站点，不影响越南语和阿拉伯语站点
   ========================================================================== */

body:not(.lang-vi):not(.lang-ar) .about-values {
    background: #ffffff !important;
}

.about-values .section-title {
    color: #1a1a1a !important;
    background: transparent !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

body:not(.lang-vi):not(.lang-ar) .value-card {
    background: #ffffff !important;
}

.value-card__icon,
.value-icon {
    background: #ffffff !important;
    color: #1976d2 !important;
    border: 2px solid #e8eaed !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.value-card__icon *,
.value-icon * {
    color: #1976d2 !important;
    stroke: #1976d2 !important;
}

/* 悬停效果 - 更高端的交互 */
.value-card:hover .value-card__icon,
.value-card:hover .value-icon {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
    box-shadow: 0 8px 24px rgba(25, 118, 210, 0.25), 0 4px 8px rgba(25, 118, 210, 0.15) !important;
    transform: translateY(-4px) !important;
}

.value-card:hover .value-card__icon *,
.value-card:hover .value-icon * {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* 强制覆盖深色模式样式 */
@media (prefers-color-scheme: dark) {
    body:not(.lang-vi):not(.lang-ar) .value-card__icon,
    body:not(.lang-vi):not(.lang-ar) .value-icon {
        background: #ffffff !important;
        color: #1976d2 !important;
        border: 2px solid #e8eaed !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }
    
    body:not(.lang-vi):not(.lang-ar) .value-card__icon *,
    body:not(.lang-vi):not(.lang-ar) .value-icon * {
        color: #1976d2 !important;
        stroke: #1976d2 !important;
    }
    
    body:not(.lang-vi):not(.lang-ar) .value-card:hover .value-card__icon,
    body:not(.lang-vi):not(.lang-ar) .value-card:hover .value-icon {
        background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
        color: #ffffff !important;
        border-color: #1976d2 !important;
    }
    
    body:not(.lang-vi):not(.lang-ar) .value-card:hover .value-card__icon *,
    body:not(.lang-vi):not(.lang-ar) .value-card:hover .value-icon * {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }
}

.value-title,
.value-card__title {
    color: #1a1a1a !important;
    background: transparent !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

.value-description,
.value-card__description {
    color: #666666 !important;
    background: transparent !important;
    -webkit-text-fill-color: #666666 !important;
}

/* ==========================================================================
   CTA 区域 - 白色文字（在蓝色背景上）
   ========================================================================== */

.about-cta {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.about-cta *,
.about-cta h1,
.about-cta h2,
.about-cta h3,
.about-cta p {
    color: #ffffff !important;
}

.about-cta .btn-primary {
    background: #ffffff !important;
    color: #1976d2 !important;
    border-color: #ffffff !important;
}

.about-cta .btn-primary:hover {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.about-cta .btn-outline {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.about-cta .btn-outline:hover {
    background: #ffffff !important;
    color: #1976d2 !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   响应式调整
   ========================================================================== */

/* iPad 端优化 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 核心优势模块 - 减少内距，覆盖 about-values-infographic-design.css 的 100px */
    /* 使用更高优先级的选择器 */
    html body:not(.lang-vi):not(.lang-ar) .about-values,
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .about-values {
        padding: 40px 0 !important;
        min-height: auto !important;
    }
    
    /* 禁用信息图布局，改用简单卡片布局 */
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .values-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        margin-top: 30px !important;
        min-height: auto !important;
        max-width: 100% !important;
    }
    
    /* 隐藏中心装饰元素 */
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .values-grid::before,
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .values-grid::after {
        display: none !important;
    }
    
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        background: #ffffff !important;
        padding: 20px 15px !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* 移除箭头和连接线 */
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card::before,
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card__icon::after {
        display: none !important;
    }
    
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card__icon {
        position: relative !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 12px !important;
        border-width: 2px !important;
        border-radius: 10px !important;
    }
    
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card__icon svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card__title {
        font-size: 0.95rem !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
        padding: 0 !important;
    }
    
    html body:not(.lang-vi):not(.lang-ar) .page-about-modern .value-card__description {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }
    
    /* 通用卡片样式（非 .page-about-modern） */
    html body:not(.lang-vi):not(.lang-ar) .value-card {
        padding: 20px 15px !important;
    }
    
    html .value-card__icon,
    html .value-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 12px !important;
    }
    
    html .value-card__icon svg,
    html .value-icon svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    html .value-card__title,
    html .value-title {
        font-size: 0.95rem !important;
        margin-bottom: 6px !important;
    }
    
    html .value-card__description,
    html .value-description {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    /* 企业数据模块 - 减少内距 */
    html body:not(.lang-vi):not(.lang-ar) .about-stats {
        padding: 40px 0 !important;
    }
    
    html body:not(.lang-vi):not(.lang-ar) .about-stats .stat-item,
    html body:not(.lang-vi):not(.lang-ar) .about-stats .stat-card {
        padding: 20px 15px !important;
    }
}

@media (max-width: 768px) {
    .page-about .page-title {
        font-size: 2.25rem !important;
    }
    
    .page-about .page-subtitle {
        font-size: 1.0625rem !important;
    }
    
    .about-stats .stat-number {
        font-size: 2.5rem !important;
    }
    
    /* 核心优势模块 - 移动端优化 */
    body:not(.lang-vi):not(.lang-ar) .about-values {
        padding: 40px 0 !important;
    }
    
    body:not(.lang-vi):not(.lang-ar) .value-card {
        padding: 20px 15px !important;
    }
}

@media (max-width: 480px) {
    .page-about .page-title {
        font-size: 1.875rem !important;
    }
    
    .page-about .page-subtitle {
        font-size: 1rem !important;
    }
    
    .about-stats .stat-number {
        font-size: 2rem !important;
    }
}

/* ==========================================================================
   打印样式
   ========================================================================== */

@media print {
    .about-cta {
        background: #f5f5f5 !important;
    }
    
    .about-cta *,
    .about-cta h2,
    .about-cta p {
        color: #000000 !important;
    }
}