/* ==================== iOS专用优化 CSS文件 ==================== */
/* 文件名：ios-optimizations.css */
/* 创建日期：2024-02-07 */
/* 目的：针对iOS设备，特别是iPhone 15+进行优化 */

/* ==================== 1. 安全区域适配（刘海屏/Home条） ==================== */

/* 头部安全区域适配 */
.site-header {
    /* 顶部安全区域 */
    padding-top: env(safe-area-inset-top);
    /* 确保背景延伸到安全区域 */
    background: rgba(255, 255, 255, 0.8) content-box;
}

/* 内容区域安全间距 */
@media (max-width: 768px) {
    body:not(.home) .site-content {
        margin-top: calc(3vh + env(safe-area-inset-top));
    }
    
    .site-header.scrolled {
        /* 滚动时保持安全区域 */
        padding-top: env(safe-area-inset-top);
    }
}

/* 底部安全区域适配 */
.site-footer {
    padding-bottom: env(safe-area-inset-bottom);
    /* height: calc(85px + env(safe-area-inset-bottom)); */
    min-height: auto;
}

/* ==================== 2. iOS Safari特定优化 ==================== */

/* 修复iOS Safari的滚动惯性问题 */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 修复iOS上fixed定位的bug */
.site-header {
    position: fixed;
    /* iOS Safari fixed定位优化 */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* 防止iOS上的点击延迟 */
* {
    touch-action: manipulation;
}

/* 禁用iOS的文本选择/缩放 */
.primary-menu a,
.my-account-icon,
.cart-icon,
.search-toggle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ==================== 3. 触摸目标大小优化（苹果要求至少44x44px） ==================== */

/* 确保所有可点击元素满足最小触摸目标 */
@media (max-width: 768px) {
    .primary-menu a {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
    }
    
    .my-account-icon,
    .cart-icon,
    search-toggle {
        min-height: 44px;
        min-width: 44px;
    }
    
    .header-menu,
    .header-extras {
        gap: 15px; /* 增加移动端间距 */
    }
}

/* ==================== 4. iOS输入框优化 ==================== */

/* 针对搜索表单的iOS优化 */
.custom-search-form input[type="text"] {
    -webkit-appearance: none; /* 移除iOS默认样式 */
    border-radius: 8px; /* iOS风格圆角 */
    font-size: 16px; /* 防止iOS缩放 */
}

/* 修复iOS上输入框获得焦点时的样式 */
input:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ==================== 5. iPhone 15+ 专用优化（动态岛） ==================== */

/* 动态岛安全区域适配 */
@supports (padding: max(0px)) {
    /* iPhone 15 Pro/Pro Max 的特别适配 */
    @media (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3),
           (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) {
        
        .site-header {
            /* 动态岛区域额外增加安全间距 */
            padding-top: max(15px, env(safe-area-inset-top));
            /* 确保内容完全避开动态岛 */
            padding-left: max(3.75dvw, env(safe-area-inset-left) + 5px);
            padding-right: max(3.75dvw, env(safe-area-inset-right) + 5px);
        }
        
        /* 头部高度调整，确保logo不靠近动态岛 */
        .header-inner {
            min-height: 80px;
        }
        
        .header-logo {
            height: 65px;
            margin-top: calc(env(safe-area-inset-top) / 2); /* 动态岛下移logo */
        }
        
        .header-logo img {
            height: 65px;
        }
        
        .site-header.scrolled .header-logo {
            height: 55px;
            margin-top: 0; /* 滚动时恢复原位置 */
        }
        
        .site-header.scrolled .header-logo img {
            height: 55px;
        }
    }
}

/* ==================== 6. 灵动岛动画适配 ==================== */

@media (max-width: 430px) {
    /* 避免内容在灵动岛动画时被遮挡 */
    .site-header,
    .site-footer {
        transition: all 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
    }
    
    /* 当动态岛展开时，调整头部位置 */
    @media (prefers-reduced-motion: no-preference) {
        body.dynamic-island-expanded .site-header {
            transform: translateY(calc(env(safe-area-inset-top) * 0.5));
        }
    }
}

/* ==================== 7. 常亮显示适配（iPhone 14 Pro+） ==================== */

@media (prefers-color-scheme: dark) and (max-width: 430px) {
    /* 为常亮显示优化深色模式 */
    .site-header {
        background: rgba(20, 20, 20, 0.85);
        backdrop-filter: saturate(180%) blur(20px);
    }
    
    .site-header.scrolled {
        background: rgba(10, 10, 10, 0.95);
    }
    
    .primary-menu a,
    .my-account-icon,
    .cart-icon,
    .search-toggle {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .primary-menu a:hover,
    .my-account-icon:hover,
    .cart-icon:hover,
    .search-toggle:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ==================== 8. 高刷新率优化（ProMotion 120Hz） ==================== */

@media (max-width: 430px) {
    /* 确保动画在高刷新率下流畅 */
    .site-header,
    .primary-menu a,
    .header-logo img {
        transition-duration: 0.3s;
        animation-duration: 0.3s;
    }
    
    /* 滚动动画优化 */
    .site-header.scrolled {
        animation: headerScroll 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes headerScroll {
        0% { transform: translateY(0); }
        100% { transform: translateY(0); }
    }
}

/* ==================== 9. iPhone 15+ 相机岛区域适配 ==================== */

@supports (padding: env(safe-area-inset-left)) {
    /* 确保内容不靠近相机岛 */
    .site-content {
        padding-right: max(0px, env(safe-area-inset-right) - 10px);
    }
}

/* ==================== 10. 横屏模式优化 ==================== */

@media (max-width: 932px) and (orientation: landscape) {
    /* iPhone 15 Pro Max 横屏 */
    .site-header {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(5px, env(safe-area-inset-bottom));
    }
    
    .header-inner {
        min-height: 60px;
    }
    
    .header-logo {
        height: 50px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .header-logo img {
        height: 50px;
    }
    
    /* 横屏时简化菜单 */
    .primary-menu {
        gap: 15px;
    }
    
    .primary-menu a {
        font-size: 11px;
        padding: 5px 8px;
    }
    
    /* 横屏时内容区域调整 */
    body:not(.home) .site-content {
        margin-top: calc(60px + env(safe-area-inset-top));
    }
}

/* ==================== 11. 触感反馈优化（Haptic Touch） ==================== */

@media (hover: none) and (pointer: coarse) {
    .primary-menu a,
    .my-account-icon,
    .cart-icon,
    .search-toggle {
        /* 为Haptic Touch提供视觉反馈 */
        position: relative;
        overflow: hidden;
    }
    
    .primary-menu a:active::after,
    .my-account-icon:active::after,
    .cart-icon:active::after,
    .search-toggle:active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        animation: hapticRipple 0.4s ease-out;
    }
    
    @keyframes hapticRipple {
        0% {
            transform: translate(-50%, -50%) scale(0);
            opacity: 0.5;
        }
        100% {
            transform: translate(-50%, -50%) scale(10);
            opacity: 0;
        }
    }
}

/* ==================== 12. 超视网膜 XDR 显示屏优化 ==================== */

@media (-webkit-min-device-pixel-ratio: 3) and (max-width: 430px) {
    /* 针对iPhone 15 Pro的OLED优化 */
    .site-header {
        background: rgba(255, 255, 255, 0.88); /* 稍微降低透明度减少烧屏风险 */
    }
    
    /* 文本抗锯齿优化 */
    .primary-menu a,
    .footer-menu-list a,
    .copyright {
        -webkit-font-smoothing: subpixel-antialiased;
        text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.1);
    }
    
    /* 图片和图标优化 */
    .header-logo img,
    .footer-logo-image {
        image-rendering: optimizeQuality;
    }
}

/* ==================== 13. 焦点环优化（对于辅助功能） ==================== */

@media (max-width: 430px) {
    /* 为VoiceOver等辅助功能优化焦点显示 */
    .primary-menu a:focus-visible,
    .my-account-icon:focus-visible,
    .cart-icon:focus-visible,
    .search-toggle:focus-visible {
        outline: 2px solid #007AFF;
        outline-offset: 2px;
        border-radius: 8px;
    }
}

/* ==================== 14. 移动端特定优化 ==================== */

/* 小屏幕iPhone优化 */
@media (max-width: 375px) { /* iPhone SE/6/7/8 */
    .header-menu {
        margin-left: 2%;
        gap: 8px;
    }
    
    .header-extras {
        margin-right: 2%;
        gap: 8px;
    }
    
    .primary-menu {
        gap: 8px;
    }
    
    .primary-menu a {
        font-size: 10px;
        letter-spacing: 0.5px;
        padding: 0 8px;
    }
    
    .header-logo {
        height: 40px;
    }
    
    .header-logo img {
        height: 40px;
    }
    
    .site-footer {
        height: calc(60px + env(safe-area-inset-bottom));
    }
    
    .footer-menu-list a {
        font-size: 10px;
        letter-spacing: 1px;
    }
}

/* 超小屏幕（iPhone 5/SE第一代） */
@media (max-width: 320px) {
    .header-menu,
    .header-extras {
        gap: 5px;
    }
    
    .primary-menu a {
        font-size: 9px;
        padding: 0 6px;
    }
    
    .footer-menu-list {
        gap: 5px;
    }
    
    .footer-menu-list a {
        font-size: 9px;
    }
}

/* ==================== 15. 备用方案：检测不支持某些CSS功能的设备 ==================== */

@supports not (padding: env(safe-area-inset-top)) {
    /* 为不支持安全区域API的浏览器提供备用方案 */
    @media (max-width: 430px) {
        .site-header {
            padding-top: 47px; /* iPhone 15 Pro的标准状态栏高度 */
        }
        
        body:not(.home) .site-content {
            margin-top: 120px; /* 头部高度 + 状态栏高度 */
        }
        
        .site-footer {
            padding-bottom: 34px; /* Home条高度 */
        }
    }
}