/**
 * mobile.css - 移动端优化样式
 * 
 * 注意：此文件通过 functions.php 使用媒体查询条件加载
 * 仅在 max-width: 768px 时生效
 */

/* ============================================
   基础排版
   ============================================ */
body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

/* ============================================
   触摸友好的交互元素
   ============================================ */
.button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
    padding: 12px 24px;
    min-height: 48px; /* Google 推荐的最小触摸目标 */
    margin: 8px 0;
}

/* 链接间距 */
a {
    padding: 4px 0;
}

/* ============================================
   图片优化
   ============================================ */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   内容区域优化
   ============================================ */
.entry-content,
.post-content {
    padding: 0 15px;
}

/* 表格响应式 */
table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 代码块响应式 */
pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 14px;
}

/* ============================================
   侧边栏优化（移动端隐藏或调整）
   ============================================ */
.sidebar {
    margin-top: 30px;
}

/* ============================================
   搜索框优化
   ============================================ */
.search-field {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* 防止 iOS 自动缩放 */
}

/* ============================================
   导航优化
   ============================================ */
.posts-navigation .nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.posts-navigation a {
    display: block;
    padding: 12px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 4px;
}

/* ============================================
   性能优化：减少不必要的动画
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}