/**
 * bitmall 默认主题响应式 / 可访问性补丁 - v1.0
 *
 * 目的：ui-review-patch.css 的全部优化都限定在 .apple-style-enabled 命名空间下，
 *       默认主题（未启用 Apple 风格）完全拿不到这些改进。本文件提供一套
 *       **主题无关、零视觉侵入** 的响应式与可访问性规则，全局生效，
 *       让默认主题也能受益，同时不破坏 RiPro 默认皮肤的视觉设计。
 *
 * 设计原则（防回归）：
 *  - 不覆盖 .container 的 Bootstrap 最大宽度（避免与栅格冲突）
 *  - 不修改 .card/.post-item 的 padding、border-radius、字体排印（那是 Apple 风格专属）
 *  - 不使用 --apple-* 变量；焦点色等用中性值（带 CSS 变量回退）
 *  - 只启用“缺失的能力”：焦点可见、触控尺寸、标题缩放、减少动画、打印、高对比度、工具类
 *
 * @version 1.0.0
 */

/* 焦点色变量（默认主题可覆盖；不存在则用中性蓝） */
:root {
    --ripro-focus: #0d6efd;
    --ripro-focus-ring: rgba(13, 110, 253, 0.18);
}

/* ============================================
   1. 可访问性 - 键盘焦点可见（WCAG 2.1 AA）
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--ripro-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ripro-focus);
    outline-offset: 2px;
}

/* 鼠标点击时不显示焦点框，避免二次点击残留 */
*:focus:not(:focus-visible) {
    outline: none;
}

/* 屏幕阅读器专用文本 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 跳转主内容链接 */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ripro-focus);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 16px;
}

/* ============================================
   2. 表单控件聚焦态（中性蓝，不依赖 Apple 变量）
   ============================================ */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--ripro-focus);
    box-shadow: 0 0 0 3px var(--ripro-focus-ring);
    outline: none;
}

/* ============================================
   3. 移动端标题缩放（Bootstrap 不带 clamp）
   ============================================ */
@media (max-width: 576px) {
    h1 { font-size: clamp(1.6rem, 5vw, 2rem); }
    h2 { font-size: clamp(1.3rem, 4.5vw, 1.6rem); }
    h3 { font-size: clamp(1.15rem, 4vw, 1.4rem); }
}

/* ============================================
   4. 触控目标最小尺寸（移动端 >=44x44，Apple HIG / WCAG 2.5.5）
   ============================================ */
@media (max-width: 768px) {
    .site-header .actions .btn,
    .site-header .actions button,
    .site-header .actions a,
    .navbar .nav-link,
    .navbar a,
    .btn,
    button,
    .form-control,
    select,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    /* 列表/菜单里的触控项也保证可点 */
    .menu-item a,
    .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================
   5. 尊重“减少动画”偏好
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   6. 触控设备（hover: none）优化
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .nav-link,
    .menu-item a {
        padding: 12px 16px;
    }

    .btn:active {
        transform: scale(0.96);
    }

    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

/* ============================================
   7. Retina 高分辨率屏幕（轻微优化，不影响布局）
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fa-icon-base,
    .fa-icon-lg {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================
   8. 打印样式（默认主题原缺失）
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .back-top,
    .navbar-search,
    #ripro-cs-container,
    .dimmer,
    .m-navbar,
    .cart-offcanvas,
    .offcanvas {
        display: none !important;
    }

    body {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .container { max-width: 100%; padding: 0; }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
    img, figure, table { page-break-inside: avoid; }

    .post-content,
    .article-content {
        max-width: 100%;
        padding: 0;
    }
    .post-content img { max-width: 100%; page-break-inside: avoid; }
}

/* ============================================
   9. 高对比度模式支持
   ============================================ */
@media (prefers-contrast: high) {
    .card,
    .post-item,
    .input,
    .form-control {
        border: 2px solid currentColor;
    }
    *:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ============================================
   10. 工具类（默认主题缺失，组件复用）
   ============================================ */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visible-mobile { display: block !important; }
.hidden-mobile { display: none !important; }
@media (min-width: 769px) {
    .visible-mobile { display: none !important; }
    .hidden-mobile { display: block !important; }
}

.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 16px; }
.gap-xl { gap: 20px; }

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-column-center { display: flex; flex-direction: column; align-items: center; }