/* ==============================================
   2KO ENGINEERING - 自定义样式
   ============================================== */

/* 
 * 此文件用于2KO Engineering网站的品牌定制化
 * 包括颜色、字体、布局调整等
 * 
 * 使用说明：
 * 1. 保持原有模板样式的完整性
 * 2. 通过CSS优先级覆盖需要修改的样式
 * 3. 添加新的自定义组件样式
 */

/* ==============================================
   品牌颜色定义
   ============================================== */
:root {
    /* ==================== 2KO客户品牌主题色 ==================== */
    /* 主品牌色 #7030a0 - 客户指定的紫色 */
    --brand-primary: #7030a0;
    
    /* 主题色变体（用于不同交互状态） */
    --brand-primary-light: #9050c0;          /* 悬停状态 - 提亮20% */
    --brand-primary-lighter: #b080d0;        /* 轻微背景 - 提亮40% */
    --brand-primary-dark: #5a2680;           /* 按下状态 - 降暗20% */
    
    /* 主题色透明度变体（用于背景和遮罩） */
    --brand-primary-alpha-10: rgba(112, 48, 160, 0.1);   /* 10%透明度 - 微妙背景 */
    --brand-primary-alpha-20: rgba(112, 48, 160, 0.2);   /* 20%透明度 - 遮罩层 */
    --brand-primary-alpha-50: rgba(112, 48, 160, 0.5);   /* 50%透明度 - 半透明 */
    
    /* ==================== 原有颜色定义（保留以向后兼容）==================== */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --accent-color: #28a745;
    
    /* 辅助颜色 */
    --text-dark: #343a40;
    --text-light: #6c757d;
    --bg-light: #f8f9fa;
    --bg-dark: #343a40;
}

/* ==============================================
   Logo和品牌元素自定义
   ============================================== */
/* 
.logo img {
    // Logo尺寸调整
    // max-height: 50px;
}
*/

/* ==============================================
   标题和文本自定义
   ============================================== */
/* 
h1, h2, h3, h4, h5, h6 {
    // 自定义标题样式
}

.hero-title {
    // 主标题样式调整
}
*/

/* ==============================================
   按钮样式自定义
   ============================================== */
/* 
.btn-primary {
    // 主按钮样式
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    // 悬停效果
}
*/

/* Revolution Slider 按钮 - 主题色样式 */
.rev-btn-2 {
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
    background: transparent;
    transition: all 0.3s ease;
}

.rev-btn-2:hover {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border: 2px solid var(--brand-primary) !important;
}

/* 浅色背景下保持相同的主题色 */
[data-background="light"] .rev-btn-2 {
    color: var(--brand-primary) !important;
    border: 2px solid var(--brand-primary) !important;
    background: transparent;
}

[data-background="light"] .rev-btn-2:hover {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border: 2px solid var(--brand-primary) !important;
}

/* ==============================================
   导航栏自定义
   ============================================== */
/* 
.navbar {
    // 导航栏样式调整
}
*/

/* ==============================================
   响应式调整
   ============================================== */
/* 移动设备 */
@media (max-width: 768px) {
    /* 移动端特定样式 */
}

/* 平板设备 */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 平板端特定样式 */
}

/* 桌面设备 */
@media (min-width: 1025px) {
    /* 桌面端特定样式 */
}

/* ==============================================
   工具类
   ============================================== */

/* ==================== 主题色工具类 ==================== */
/* 这些类可以直接在HTML中使用，快速应用主题色 */

/* 文字颜色 */
.theme-text {
    color: var(--brand-primary) !important;
}

/* 边框颜色 */
.theme-border {
    border-color: var(--brand-primary) !important;
}

/* 背景颜色（适用于图标、按钮等小面积元素） */
.theme-bg {
    background-color: var(--brand-primary) !important;
}

/* 微妙背景（10%透明度，适合大面积使用） */
.theme-bg-subtle {
    background-color: var(--brand-primary-alpha-10) !important;
}

/* 悬停时变为主题色 */
.theme-hover:hover {
    color: var(--brand-primary-light) !important;
    transition: color 0.3s ease;
}

/* 主题色下划线装饰 */
.theme-underline {
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 5px;
    display: inline-block;
}

/* SVG图标填充色 */
.theme-fill {
    fill: var(--brand-primary) !important;
}

/* 组合类：主题色按钮样式 */
.theme-btn {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

.theme-btn:hover {
    background-color: var(--brand-primary-light) !important;
    border-color: var(--brand-primary-light) !important;
    color: #fff !important;
}

/* ==================== 原有工具类（注释保留）==================== */
/* .text-primary-custom {
    color: var(--primary-color) !important;
} */

/* .bg-primary-custom {
    background-color: var(--primary-color) !important;
} */

/* 隐藏元素工具类 */
/* .hide-element {
    display: none !important;
} */

/* ==============================================
   视频背景加载优化 （28 Oct）
   ============================================== */
/* 确保视频容器有浅灰色背景作为兜底 */
.rs-background-video-layer {
    background-color: #f5f5f5 !important;
}

/* 视频默认可见，让浏览器自然加载 */
.rs-background-video-layer video {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* ==============================================
   临时调试样式（上线前删除）
   ============================================== */
/* 
.debug-border {
    border: 1px solid red !important;
}
*/

/* 自定义样式 */
/* 导航栏 */
.header__content .logo img {
    width: 120px;
}

/* 移动端导航栏 Logo */
.header-mobile .logo img {
    width: 100px;
    max-width: 100px;
}

/* 防御性隐藏：确保小屏幕不显示pagePiling导航点 */
@media (max-width: 1500px) {
    #pp-nav {
        display: none !important;
    }
}

/* 页脚自定义 */
/* 移除背景图片，使用纯黑色背景 */
.footer.bg-parallax {
    background-image: none !important;
    background-color: #000000 !important;
}

/* Footer Logo 尺寸 */
.footer .footer-col .widget img {
    width: 150px;
    max-width: 150px;
}

/* 修复Mechanical Services圆形显示问题 */
.media-service-1 .media__img-inner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.media-about img {
    object-fit: cover;
}

/* ==============================================
   About页面Banner图片响应式
   ============================================== */
.page-banner-img {
    width: 100%;
    height: 800px;
    object-fit: cover;
    object-position: center;
}

/* 移动端：降低图片高度 */
@media (max-width: 768px) {
    .page-banner-img {
        height: 400px;
    }
}

/* 平板端 */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-banner-img {
        height: 600px;
    }
}

/* ==============================================
   项目网格图片尺寸控制
   ============================================== */
.media-project .media__img {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.media-project .media__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .media-project .media__img {
        height: 200px;
    }
}

/* 修复统计图标被截断的问题 */
.media-statistic {
    overflow: visible;
}

.media-statistic .media__icon {
    margin-left: 0;
    padding-right: 10px;
}

/* Expertise内容样式 */
.expertise-content {
    text-align: left;
}

/* 响应式优化 - Expertise section */
@media (max-width: 991px) {
    .media-about-2 {
        flex-direction: column !important;
    }
    
    .expertise-content {
        padding: 0 !important;
        margin-bottom: 30px;
        min-width: 100% !important;
    }
    
    .media-about-2 .media__img {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Fix slick carousel flash before initialization */
/* Only apply these styles BEFORE Slick initializes */
.slick-wrap.slick-testi:not(.slick-initialized) .slick-wrap-content {
    overflow: hidden;
}

.slick-wrap.slick-testi:not(.slick-initialized) .slick-content {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -25px;
}

.slick-wrap.slick-testi:not(.slick-initialized) .slick-item {
    width: 50%;
    padding: 0 25px;
    box-sizing: border-box;
}

/* Mobile: show only 1 item before initialization */  
@media (max-width: 991px) {
    .slick-wrap.slick-testi:not(.slick-initialized) .slick-item {
        width: 100%;
    }
    
    /* Show arrows on mobile for Problems carousel */
    .slick-wrap.slick-testi .arrows-1 {
        display: block !important;
    }
    
    /* Adjust arrow position for mobile */
    .slick-wrap.slick-testi .arrows-1 .slick-prev {
        left: 10px;
    }
    
    .slick-wrap.slick-testi .arrows-1 .slick-next {
        right: 10px;
    }
}

/* ==============================================
   Expertise 页面 - 主题色应用
   ============================================== */

/* 副标题 - 应用主题色 */
.title-sub {
    color: var(--brand-primary) !important;
}

/* 紫色背景区域的副标题使用白色（允许行内样式覆盖）*/
section[style*="var(--brand-primary)"] .title-sub,
section[style*="background-color: var(--brand-primary)"] .title-sub,
section[style*="backgroundColor: 'var(--brand-primary')"] .title-sub {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* 按钮样式 - 主题色边框和悬停效果 */
.au-btn.au-btn--arrow {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transition: all 0.3s ease;
}

.au-btn.au-btn--arrow:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.au-btn.au-btn--arrow:hover .ic-arrow {
    color: #fff;
}

/* 浅色按钮样式（用于深色背景）- 默认紫色背景 */
.au-btn.au-btn--light {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    transition: all 0.3s ease;
}

.au-btn.au-btn--light:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--brand-primary);
}

/* 带箭头的白色按钮样式（用于深色/紫色背景） */
.au-btn.au-btn--arrow.au-btn--light {
    border-color: white;
    color: white;
    background: transparent;
}

.au-btn.au-btn--arrow.au-btn--light:hover {
    background-color: white;
    border-color: white;
    color: var(--brand-primary);
}

.au-btn.au-btn--arrow.au-btn--light:hover .ic-arrow {
    color: var(--brand-primary);
}

/* 提交按钮 - 主题色背景 */
.au-btn.au-btn--solid {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.au-btn.au-btn--solid:hover {
    background-color: var(--brand-primary-light);
    border-color: var(--brand-primary-light);
}

/* 统计区域图标 - 保持原模板浅灰色 */
.media-statistic .media__icon {
    color: #ebebeb !important;
}

/* 统计数字 - 主题色 */
.media-statistic .number {
    color: var(--brand-primary) !important;
}

/* 专业领域图标 - 主题色（深色背景下的图标）*/
.section.bg-pattern-01 .ti-settings,
.section.bg-pattern-01 .ti-bolt,
.section.bg-pattern-01 .ti-droplet,
.section.bg-pattern-01 .ti-layout,
.section.bg-pattern-01 .ti-shield,
.section.bg-pattern-01 .ti-pulse {
    color: var(--brand-primary) !important;
}

/* Our Approach 部分的图标 - 主题色 */
.media-service-2 .media__icon .ti-comments,
.media-service-2 .media__icon .ti-ruler-pencil,
.media-service-2 .media__icon .ti-harddrives,
.media-service-2 .media__icon .ti-check-box,
.media-service-2 .media__icon .ti-headphone-alt {
    color: var(--brand-primary) !important;
}

/* 项目卡片链接悬停 - 主题色 */
.media-project-4 .media__title a:hover {
    color: var(--brand-primary);
}

/* 表单输入框聚焦状态 - 主题色边框 */
.form-contact .au-input:focus,
.form-contact .au-textarea:focus {
    border-color: var(--brand-primary);
    outline: none;
}

/* 联系信息标题 - 主题色 */
.contact-info__item .title--sm2 {
    color: var(--brand-primary);
    text-transform: uppercase;
    font-weight: 600;
}

/* ==============================================
   Projects 页面 - 主题色应用
   ============================================== */

/* 副标题 - 应用主题色 */
.title-sub--c8 {
    color: var(--brand-primary) !important;
}

/* Load More 按钮 - 主题色边框和悬停效果 */
.au-btn--c6 {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transition: all 0.3s ease;
}

.au-btn--c6:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* View Project 按钮 - 正常状态白色边框，悬停时紫色背景 */
.view-project-btn {
    border-bottom: 1px solid white !important;
    color: white !important;
    padding: 8px 16px 8px 0 !important;
    transition: all 0.3s ease;
}

.view-project-btn:hover {
    background-color: var(--brand-primary) !important;
    border-bottom: 1px solid transparent !important;
    color: white !important;
    padding: 8px 16px !important;
}

/* View Project 按钮内的箭头图标 */
.view-project-btn:hover .ti-arrow-right {
    color: white !important;
}

/* 项目卡片标题链接悬停 - 主题色 */
.media-project .media__body .title a:hover {
    color: var(--brand-primary);
}

/* ==============================================
   About 页面 - 主题色应用
   ============================================== */

/* 统计数字 - 应用主题色 */
.media-statistic-2 .media__number {
    color: var(--brand-primary) !important;
}

/* 统计描述文字 - 恢复默认灰色（覆盖全局 .title-sub 的紫色）*/
.media-statistic-2 .media__title.title-sub {
    color: #555 !important;
}

/* 加粗文字 - 应用主题色 */
.text--c2 {
    color: var(--brand-primary) !important;
}

/* Vision & Mission 部分的图标 - 应用最浅紫色 */
.media-service .media__img .fas {
    color: var(--brand-primary-lighter) !important;
}

/* Meet the Team - 团队成员名字应用主题色 */
.media-team .media__body .title--sm a {
    color: var(--brand-primary) !important;
}

.media-team .media__body .title--sm a:hover {
    color: var(--brand-primary-light) !important;
}

/* ==============================================
   主页 - Why Choose Us 区块主题色应用
   ============================================== */

/* 数字 - 应用主题色 */
.media-about-3 .media__number {
    color: var(--brand-primary) !important;
}

/* 数字外边框 - 浅灰色 */
.media-about-3 .media__number-wrap {
    border-color: #d0d0d0 !important;
}

/* 装饰线 - 浅灰色 */
.media-about-3 .line {
    border-top-color: #d0d0d0 !important;
    border-left-color: #d0d0d0 !important;
}

.media-about-3 .line--bottom {
    border-right-color: #d0d0d0 !important;
    border-bottom-color: #d0d0d0 !important;
}

/* 标题文字 - 应用主题色 */
.media-about-3 .media__title a {
    color: var(--brand-primary) !important;
}

.media-about-3 .media__title a:hover {
    color: var(--brand-primary-light) !important;
}

/* ==============================================
   主页 - Testimonial 区块主题色应用
   ============================================== */

/* 人名 - 应用主题色 */
.media-testi .name a {
    color: var(--brand-primary) !important;
}

.media-testi .name a:hover {
    color: var(--brand-primary-light) !important;
}

/* ==============================================
   项目详情页 - 主题色应用
   ============================================== */

/* 返回按钮 - 应用主题色 */
.back-to-projects-btn {
    color: var(--brand-primary) !important;
}

.back-to-projects-btn:hover {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Share 标题 - 应用主题色 */
.entry-share .key {
    color: var(--brand-primary) !important;
}

/* 项目信息标题（DATE, CLIENT, STATUS, LOCATION）- 应用主题色 */
.entry-meta__item .key {
    color: var(--brand-primary) !important;
}

/* ==============================================
   导航栏 - 当前页面高亮主题色应用
   ============================================== */

/* 所有导航链接 - 添加过渡效果 */
.header-nav-menu .menu-item > a,
.header-nav-menu-mobile .menu-item > a,
.menu-sidebar-nav-menu .menu-item > a {
    transition: color 0.3s ease;
}

/* 桌面端导航 - 当前页面链接 */
.header-nav-menu .menu-item.current-menu-item > a {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

/* 桌面端导航 - hover状态 */
.header-nav-menu .menu-item > a:hover {
    color: var(--brand-primary-light) !important;
}

/* 移动端导航 - 当前页面链接 */
.header-nav-menu-mobile .menu-item.current-menu-item > a {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

/* 移动端导航 - hover状态 */
.header-nav-menu-mobile .menu-item > a:hover {
    color: var(--brand-primary-light) !important;
}

/* 首页侧边栏导航 - 当前页面链接 */
.menu-sidebar-nav-menu .menu-item.current-menu-item > a {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

/* 首页侧边栏导航 - hover状态 */
.menu-sidebar-nav-menu .menu-item > a:hover {
    color: var(--brand-primary-light) !important;
}