/**
 * EvalShare 浏览器兼容性样式
 * 为旧浏览器提供降级方案
 *
 * @package EvalShare
 * @since 1.0.0
 */

/* ==================== CSS 变量降级方案 ==================== */

/* 为不支持 CSS 变量的浏览器提供默认值 */
.no-css-variables .btn-primary {
    background-color: #FF6B35;
}

.no-css-variables .btn-primary:hover {
    background-color: #E55A2B;
}

/* ==================== Flexbox 降级方案 ==================== */

/* IE 11 部分支持 Flexbox，需要前缀 */
.flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* ==================== Grid 降级方案 ==================== */

/* 为不支持 Grid 的浏览器提供 Flexbox 降级 */
@supports not (display: grid) {
    .grid-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .grid-item {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 300px;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px;
        margin: 15px;
    }
}

/* ==================== Backdrop Filter 降级方案 ==================== */

/* 为不支持 backdrop-filter 的浏览器提供半透明背景 */
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg {
    background-color: rgba(255, 255, 255, 0.95);
}

/* 支持 backdrop-filter 的浏览器 */
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .backdrop-blur {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    .backdrop-blur-sm {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.9);
    }
    
    .backdrop-blur-md {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.85);
    }
    
    .backdrop-blur-lg {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        background-color: rgba(255, 255, 255, 0.75);
    }
}

/* ==================== Clip Path 降级方案 ==================== */

/* 为不支持 clip-path 的浏览器提供降级 */
.clip-path-slant {
    /* 降级：使用渐变背景模拟 */
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
}

@supports ((-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%))) {
    .clip-path-slant {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }
}

/* ==================== CSS Scroll Snap 降级方案 ==================== */

.scroll-snap-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@supports ((scroll-snap-type: x mandatory) or (-webkit-scroll-snap-type: x mandatory)) {
    .scroll-snap-container {
        -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    }
    
    .scroll-snap-item {
        -webkit-scroll-snap-align: start;
        -ms-scroll-snap-align: start;
        scroll-snap-align: start;
    }
}

/* ==================== Sticky Position 降级方案 ==================== */

.sticky-top {
    position: relative;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

/* ==================== Object Fit 降级方案 ==================== */

.img-cover {
    width: 100%;
    height: 100%;
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
    .img-cover {
        -o-object-fit: cover;
        object-fit: cover;
    }
}

/* 降级方案：使用背景图片 */
.no-object-fit .img-cover-wrapper {
    background-size: cover;
    background-position: center;
}

.no-object-fit .img-cover {
    display: none;
}

/* ==================== CSS Transforms 3D 降级方案 ==================== */

.transform-3d {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.transform-gpu {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==================== Transition 降级方案 ==================== */

/* 为不支持 transition 的浏览器提供即时变化 */
.hover-lift,
.hover-scale,
.hover-glow {
    /* 基础样式 */
}

@supports ((-webkit-transition: all 0.3s) or (transition: all 0.3s)) {
    .hover-lift {
        -webkit-transition: -webkit-transform 0.3s ease, box-shadow 0.3s ease;
        transition: -webkit-transform 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-scale {
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease, transform 0.3s ease;
    }
    
    .hover-glow {
        -webkit-transition: box-shadow 0.3s ease;
        transition: box-shadow 0.3s ease;
    }
}

/* ==================== Animation 降级方案 ==================== */

/* 为不支持 animation 的浏览器提供静态样式 */
.animate-fadeIn,
.animate-slideUp,
.animate-scaleIn {
    opacity: 1;
}

@supports ((-webkit-animation: fadeIn 0.3s) or (animation: fadeIn 0.3s)) {
    .animate-fadeIn {
        -webkit-animation: fadeIn 0.3s ease-in-out;
        animation: fadeIn 0.3s ease-in-out;
    }
    
    .animate-slideUp {
        -webkit-animation: slideUp 0.4s ease-out;
        animation: slideUp 0.4s ease-out;
    }
    
    .animate-scaleIn {
        -webkit-animation: scaleIn 0.3s ease-out;
        animation: scaleIn 0.3s ease-out;
    }
}

/* ==================== Custom Properties (CSS 变量) 降级方案 ==================== */

/* 使用硬编码值作为降级 */
:root {
    --es-primary: #FF6B35;
    --es-primary-dark: #E55A2B;
    --es-accent: #4ECDC4;
    --es-dark: #1A1A2E;
}

/* 为不支持 CSS 变量的浏览器 */
.no-css-variables .btn-primary {
    background-color: #FF6B35;
}

.no-css-variables .btn-primary:hover {
    background-color: #E55A2B;
}

.no-css-variables .text-accent {
    color: #4ECDC4;
}

/* ==================== Modernizr 检测类支持 ==================== */

/* Touch 设备优化 */
.touch .hover-lift:hover,
.touch .hover-scale:hover {
    -webkit-transform: none;
    transform: none;
}

/* 减少动画（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== IE 11 特定修复 ==================== */

/* IE 11 不支持 :focus-visible */
_:-ms-fullscreen,
:root .focus-visible {
    outline: 2px solid #FF6B35;
    outline-offset: 2px;
}

/* IE 11 Flexbox 修复 */
_:-ms-fullscreen,
:root .flex-container {
    display: block;
}

_:-ms-fullscreen,
:root .flex-container::after {
    content: '';
    display: table;
    clear: both;
}

_:-ms-fullscreen,
:root .flex-item {
    float: left;
    width: 50%;
}

/* ==================== 打印样式优化 ==================== */

@media print {
    /* 移除背景色和阴影 */
    * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* 确保文本可读 */
    body {
        color: #000;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* 隐藏不必要元素 */
    .no-print,
    .premium-header,
    .premium-footer,
    .ph-announcement-bar,
    .ph-mobile-toggle,
    .ph-mobile-menu,
    .btn {
        display: none !important;
    }
    
    /* 确保链接显示 URL */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
        opacity: 0.8;
    }
    
    /* 分页控制 */
    .page-break {
        page-break-before: always;
    }
    
    .no-page-break {
        page-break-inside: avoid;
    }
}

/* ==================== 高对比度模式支持 ==================== */

@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor;
    }
    
    .card,
    .panel {
        border: 1px solid currentColor;
    }
    
    a:focus,
    button:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ==================== 深色模式支持 ==================== */

@media (prefers-color-scheme: dark) {
    .supports-dark-mode {
        color-scheme: dark;
    }
}