/*
Theme Name: RDAI AI Service - Mobile Optimized
Description: Mobile-optimized styles inspired by WeChat optimizer for better readability and dark mode support
Author: RDAI Team
Version: 1.0.0
*/

/* ==========================================
   全局样式 - 所有设备适用
   ========================================== */

/* 隐藏面包屑导航 - BlindCalc 站点不需要面包屑 */
.storefront-breadcrumb,
.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.breadcrumb,
.site-content .storefront-breadcrumb {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ==========================================
   暗色模式支持 - 所有设备
   ========================================== */

@media (prefers-color-scheme: dark) {

    /* 基础背景和文字颜色 */
    body {
        background-color: #1a1a1a !important;
        color: #e5e5e5 !important;
    }

    /* 所有标题 */
    h1, h2, h3, h4, h5, h6,
    .rdai-hero-title-xl,
    .rdai-section-title,
    .rdai-about-hero h1,
    .rdai-contact-hero h1 {
        color: #ffffff !important;
    }

    /* 段落和描述文字 */
    p,
    .rdai-hero-desc,
    .rdai-hero-subtitle-xl,
    .rdai-section-subtitle,
    .rdai-about-text,
    .rdai-feature-box p,
    .rdai-product-card p {
        color: #d4d4d4 !important;
    }

    /* 所有卡片背景 */
    .rdai-card,
    .rdai-feature-box,
    .rdai-product-card,
    .rdai-why-card,
    .rdai-value-card,
    .rdai-business-card,
    .rdai-faq-item,
    .rdai-contact-card,
    .rdai-step,
    .rdai-pricing-item,
    .rdai-contact-form-container {
        background-color: #262626 !important;
        color: #e5e5e5 !important;
        border-color: #404040 !important;
    }

    /* 导航和头部 */
    .site-header {
        background-color: #1a1a1a !important;
        border-bottom-color: #404040 !important;
    }

    .main-navigation ul li a {
        color: #e5e5e5 !important;
    }

    .main-navigation ul li a:hover {
        color: #0066ff !important;
        background-color: #262626 !important;
    }

    /* 底部 */
    .site-footer,
    .rdai-custom-footer {
        background-color: #0d0d0d !important;
        color: #a3a3a3 !important;
    }

    .rdai-footer-links a {
        color: #a3a3a3 !important;
    }

    .rdai-footer-links a:hover {
        color: #00d4aa !important;
    }

    /* 表单元素 */
    input,
    textarea,
    select,
    .rdai-form-group input,
    .rdai-form-group textarea {
        background-color: #262626 !important;
        color: #e5e5e5 !important;
        border-color: #404040 !important;
    }

    .rdai-form-group input:focus,
    .rdai-form-group textarea:focus {
        border-color: #0066ff !important;
        background-color: #1a1a1a !important;
    }

    .rdai-form-group label {
        color: #e5e5e5 !important;
    }

    /* 链接颜色 */
    a {
        color: #0066ff !important;
    }

    a:hover {
        color: #00d4aa !important;
    }

    /* Hero区域（深色背景上的内容） */
    .rdai-hero-modern,
    .rdai-cta-section,
    .rdai-about-hero,
    .rdai-contact-hero {
        background-color: #0d0d0d !important;
    }

    /* 浅色背景区域在夜间模式下 */
    .rdai-section-light,
    .rdai-section-white,
    .rdai-contact-section,
    .rdai-quick-links-section {
        background-color: #1a1a1a !important;
    }

    /* 边框和分隔线 */
    .rdai-border,
    hr,
    .rdai-footer-copyright {
        border-color: #404040 !important;
    }

    /* 图标容器 */
    .rdai-feature-icon,
    .rdai-product-icon,
    .rdai-contact-card-icon,
    .rdai-business-icon,
    .rdai-pricing-icon {
        /* 保持原色或稍微调暗 */
        opacity: 0.9;
    }

    /* 徽章和标签 */
    .rdai-badge,
    .rdai-product-badge,
    .rdai-trust-badges span {
        background-color: #404040 !important;
        color: #e5e5e5 !important;
    }

    /* 价格和重要数字 */
    .rdai-product-price .price,
    .rdai-pricing-price {
        color: #00d4aa !important;
    }

    /* 次要文字 */
    .rdai-product-price .unit,
    .rdai-form-note,
    .rdai-contact-address,
    .rdai-footer-copyright p {
        color: #737373 !important;
    }

    /* 高亮和强调框 */
    .rdai-highlight {
        background-color: #262626 !important;
        border-left-color: #0066ff !important;
        color: #e5e5e5 !important;
    }

    /* 表格 */
    table {
        background-color: #262626 !important;
        color: #e5e5e5 !important;
    }

    th {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border-color: #404040 !important;
    }

    td {
        border-color: #404040 !important;
    }

    /* 列表项 */
    .rdai-product-features li,
    .rdai-business-card ul li {
        color: #d4d4d4 !important;
    }
}

/* ==========================================
   移动端优化样式（借鉴微信优化器策略）
   ========================================== */

/* 1. 全宽容器 - 移除左右padding */
@media (max-width: 768px) {

    /* 强制所有页面容器全宽 */
    .col-full,
    .storefront-full-width-content .col-full,
    .rdai-fullwidth-page .entry-content .col-full,
    .site-main .col-full,
    .site-content,
    .content-area,
    #primary,
    main.site-main,
    .site-main,
    article.page,
    article.post,
    .page article,
    .single article {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 内容区域保持适当的内边距 - 但不应用于特殊表单页面 */
    .entry-content:not(.rdai-user-form-container),
    .page-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 确保body也没有边距 */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* 2. 简化渐变 - 使用实色背景（微信兼容） */
@media (max-width: 768px) {
    /* 替换复杂渐变为简单实色 */
    .rdai-gradient-bg,
    .rdai-hero-modern,
    .rdai-cta-section,
    .rdai-about-hero,
    .rdai-contact-hero {
        background: #0066ff !important; /* 使用主色调实色 */
        background-image: none !important;
    }

    /* 移除复杂动画效果 */
    .rdai-hero-modern::before,
    .rdai-hero-modern::after {
        display: none !important;
    }
}

/* 3. 简化卡片样式 - 使用 h4 + 边框方案 */
@media (max-width: 768px) {
    /* 移除阴影和圆角 */
    .rdai-card,
    .rdai-feature-box,
    .rdai-product-card,
    .rdai-why-card,
    .rdai-value-card,
    .rdai-business-card,
    .rdai-faq-item,
    .rdai-contact-card {
        box-shadow: none !important;
        border-radius: 0 !important;
        border: 1px solid #e0e0e0;
        margin-bottom: 16px;
    }

    /* 简化按钮样式 */
    .button,
    button,
    input[type="button"],
    input[type="submit"],
    .rdai-btn-primary-xl,
    .rdai-btn-outline-xl {
        box-shadow: none !important;
        border-radius: 4px !important;
        transform: none !important;
    }

    .button:hover,
    button:hover,
    .rdai-btn-primary-xl:hover {
        transform: none !important;
    }
}

/* 4. 完整的夜间模式支持 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {

    /* 4.1 基础背景和文字颜色 */
    body {
        background-color: #1a1a1a !important;
        color: #e5e5e5 !important;
    }

    /* 4.2 所有标题 */
    h1, h2, h3, h4, h5, h6,
    .rdai-hero-title-xl,
    .rdai-section-title,
    .rdai-about-hero h1,
    .rdai-contact-hero h1 {
        color: #ffffff !important;
    }

    /* 4.3 段落和描述文字 */
    p,
    .rdai-hero-desc,
    .rdai-hero-subtitle-xl,
    .rdai-section-subtitle,
    .rdai-about-text,
    .rdai-feature-box p,
    .rdai-product-card p {
        color: #d4d4d4 !important;
    }

    /* 4.4 所有卡片背景 */
    .rdai-card,
    .rdai-feature-box,
    .rdai-product-card,
    .rdai-why-card,
    .rdai-value-card,
    .rdai-business-card,
    .rdai-faq-item,
    .rdai-contact-card,
    .rdai-step,
    .rdai-pricing-item,
    .rdai-contact-form-container {
        background-color: #262626 !important;
        color: #e5e5e5 !important;
        border-color: #404040 !important;
    }

    /* 4.5 导航和头部 */
    .site-header {
        background-color: #1a1a1a !important;
        border-bottom-color: #404040 !important;
    }

    .main-navigation ul li a {
        color: #e5e5e5 !important;
    }

    .main-navigation ul li a:hover {
        color: #0066ff !important;
        background-color: #262626 !important;
    }

    /* 4.6 底部 */
    .site-footer,
    .rdai-custom-footer {
        background-color: #0d0d0d !important;
        color: #a3a3a3 !important;
    }

    .rdai-footer-links a {
        color: #a3a3a3 !important;
    }

    .rdai-footer-links a:hover {
        color: #00d4aa !important;
    }

    /* 4.7 表单元素 */
    input,
    textarea,
    select,
    .rdai-form-group input,
    .rdai-form-group textarea {
        background-color: #262626 !important;
        color: #e5e5e5 !important;
        border-color: #404040 !important;
    }

    .rdai-form-group input:focus,
    .rdai-form-group textarea:focus {
        border-color: #0066ff !important;
        background-color: #1a1a1a !important;
    }

    .rdai-form-group label {
        color: #e5e5e5 !important;
    }

    /* 4.8 链接颜色 */
    a {
        color: #0066ff !important;
    }

    a:hover {
        color: #00d4aa !important;
    }

    /* 4.9 Hero区域（深色背景上的内容） */
    .rdai-hero-modern,
    .rdai-cta-section,
    .rdai-about-hero,
    .rdai-contact-hero {
        background-color: #0d0d0d !important;
    }

    /* 4.10 浅色背景区域在夜间模式下 */
    .rdai-section-light,
    .rdai-section-white,
    .rdai-contact-section,
    .rdai-quick-links-section {
        background-color: #1a1a1a !important;
    }

    /* 4.11 边框和分隔线 */
    .rdai-border,
    hr,
    .rdai-footer-copyright {
        border-color: #404040 !important;
    }

    /* 4.12 图标容器 */
    .rdai-feature-icon,
    .rdai-product-icon,
    .rdai-contact-card-icon,
    .rdai-business-icon,
    .rdai-pricing-icon {
        /* 保持原色或稍微调暗 */
        opacity: 0.9;
    }

    /* 4.13 徽章和标签 */
    .rdai-badge,
    .rdai-product-badge,
    .rdai-trust-badges span {
        background-color: #404040 !important;
        color: #e5e5e5 !important;
    }

    /* 4.14 价格和重要数字 */
    .rdai-product-price .price,
    .rdai-pricing-price {
        color: #00d4aa !important;
    }

    /* 4.15 次要文字 */
    .rdai-product-price .unit,
    .rdai-form-note,
    .rdai-contact-address,
    .rdai-footer-copyright p {
        color: #737373 !important;
    }

    /* 4.16 高亮和强调框（使用h4+border方案） */
    .rdai-highlight {
        background-color: #262626 !important;
        border-left-color: #0066ff !important;
        color: #e5e5e5 !important;
    }

    /* 4.17 表格（如果有） */
    table {
        background-color: #262626 !important;
        color: #e5e5e5 !important;
    }

    th {
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border-color: #404040 !important;
    }

    td {
        border-color: #404040 !important;
    }

    /* 4.18 列表项 */
    .rdai-product-features li,
    .rdai-business-card ul li {
        color: #d4d4d4 !important;
    }
}

/* 5. 移除不必要的CSS特效（提升性能） */
@media (max-width: 768px) {
    /* 移除变换动画 */
    .rdai-card:hover,
    .rdai-feature-box:hover,
    .rdai-product-card:hover,
    .rdai-why-card:hover {
        transform: none !important;
    }

    /* 移除复杂的伪元素 */
    .rdai-footer-links a::after {
        display: none !important;
    }

    /* 简化过渡效果 */
    * {
        transition-duration: 0.15s !important;
    }
}

/* 6. 优化文字可读性 */
@media (max-width: 768px) {
    /* 增加行高 */
    body,
    p,
    li {
        line-height: 1.8 !important;
    }

    /* 优化字体大小 */
    body {
        font-size: 16px !important;
    }

    /* 标题尺寸优化 */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.125rem !important; }

    /* 按钮文字大小 */
    .button,
    button,
    input[type="submit"] {
        font-size: 1rem !important;
        min-height: 48px !important;
    }
}

/* 7. Table布局方案（微信兼容性最佳） */
@media (max-width: 768px) {
    /* 对于需要背景色的容器，可选择使用table */
    .rdai-use-table-bg {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }
}

/* 8. 图片响应式优化 */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* 图标保持固定尺寸 */
    .rdai-icon,
    .rdai-feature-icon,
    .rdai-product-icon {
        flex-shrink: 0;
    }
}

/* 9. 触摸优化 */
@media (max-width: 768px) {
    /* 增大点击区域 */
    a,
    button,
    .button,
    input[type="submit"] {
        min-height: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 导航链接 */
    .main-navigation ul li a {
        padding: 16px 20px !important;
    }
}

/* 10. 打印样式保持不变 */
@media print {
    /* 打印时不使用移动优化 */
    .col-full {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* ==========================================
   特殊组件的移动优化
   ========================================== */

/* Hero区域全宽优化 */
@media (max-width: 768px) {
    .rdai-hero-modern,
    .rdai-about-hero,
    .rdai-contact-hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* CTA按钮组全宽 */
@media (max-width: 768px) {
    .rdai-hero-cta,
    .rdai-cta-buttons {
        width: 100%;
        padding: 0 16px;
    }

    .rdai-btn-primary-xl,
    .rdai-btn-outline-xl,
    .rdai-btn-white-xl,
    .rdai-btn-outline-white-xl {
        width: 100%;
        justify-content: center;
    }
}

/* Grid布局移动优化 */
@media (max-width: 768px) {
    .rdai-features-grid,
    .rdai-features-grid-4,
    .rdai-why-us-grid,
    .rdai-products-grid,
    .rdai-business-grid,
    .rdai-values-grid,
    .rdai-pricing-table,
    .rdai-contact-cards,
    .rdai-contact-info,
    .rdai-contact-faq,
    .rdai-quick-links {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 16px !important;
    }
}

/* 表单优化 */
@media (max-width: 768px) {
    .rdai-form-row {
        grid-template-columns: 1fr !important;
    }

    .rdai-contact-form-container {
        padding: 24px 16px !important;
    }
}

/* Footer优化 */
@media (max-width: 768px) {
    .rdai-custom-footer {
        padding: 32px 16px 16px !important;
    }
}