/**
 * DripSafe Theme - 移动端体验优化 CSS
 * Round 9: 触控优化 + 导航优化 + 性能优化
 * 
 * 修复清单:
 * 1. 触控区域优化 (所有按钮 ≥ 44x44px)
 * 2. 轮播指示器触控区域
 * 3. 间距增加避免误触
 * 4. 移动端导航抽屉动画
 * 5. 社交分享功能
 */

/* =====================================================
   1. 触控区域优化 - 全局按钮最小 44x44px
   ===================================================== */

/* 移动端所有可点击按钮最小触控区域 */
@media (max-width: 768px) {
    /* 通用按钮触控增强 */
    button,
    .ds-btn,
    .ds-header__search-btn,
    .ds-header__hamburger,
    .ds-layout-btn,
    .ds-post-list-controls button,
    input[type="submit"],
    .ds-subscribe-button,
    .ds-back-to-top {
        min-width: 44px;
        min-height: 44px;
    }
}

/* =====================================================
   2. 汉堡菜单触控优化 (P1: 36px → 44px)
   ===================================================== */

@media (max-width: 768px) {
    .ds-header__hamburger {
        /* 原: width: 36px; height: 36px */
        width: 44px;
        height: 44px;
        /* 增加触控区域视觉平衡 */
        margin: 0 4px;
        border-radius: var(--ds-radius-md, 8px);
        transition: background-color 0.2s ease;
    }
    
    .ds-header__hamburger:hover {
        background-color: var(--ds-bg-secondary);
    }
    
    .ds-header__hamburger.is-active {
        background-color: var(--ds-bg-secondary);
    }
    
    /* 汉堡图标三线 */
    .ds-ham-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 20px;
        height: 20px;
    }
    
    .ds-ham-line {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--ds-text-primary);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    /* 汉堡动画 - 打开时变X */
    .ds-header__hamburger.is-active .ds-ham-line1 {
        transform: translateY(7px) rotate(45deg);
    }
    
    .ds-header__hamburger.is-active .ds-ham-line2 {
        opacity: 0;
    }
    
    .ds-header__hamburger.is-active .ds-ham-line3 {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* =====================================================
   3. 轮播指示器触控区域优化 (P2: 8px → 44px)
   ===================================================== */

@media (max-width: 768px) {
    .ds-featured-carousel__dots {
        gap: 10px;
        bottom: 16px;
    }
    
    /* 关键: 增加触控区域但不改变视觉大小 */
    .ds-featured-carousel__dot {
        /* 原: width: 8px; height: 8px */
        width: 8px;   /* 保持视觉小圆点 */
        height: 8px;
        /* 增加触控区域到 44px */
        min-width: 44px;
        min-height: 44px;
        /* 水平padding扩展触控区 */
        padding: 18px 0;
        box-sizing: content-box;
        /* 垂直居中对齐 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 指示器内部小圆点保持原样 */
    .ds-featured-carousel__dot::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.45);
        transition: background 0.35s ease, width 0.35s ease;
    }
    
    .ds-featured-carousel__dot.is-active::before {
        width: 24px;  /* 保持与 .ds-featured-carousel__dot.is-active 一致 */
        background: #ffffff;
    }
    
    .ds-featured-carousel__dot.is-active {
        width: 8px;   /* 视觉宽度不变 */
        min-width: 44px;
    }
    
    /* 轮播箭头触控优化 */
    .ds-featured-carousel__arrow {
        /* 原: width: 40px; height: 40px */
        width: 44px;
        height: 44px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    
    .ds-featured-carousel__arrow:hover {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .ds-featured-carousel__arrow:active {
        transform: translateY(-50%) scale(0.95);
    }
}

/* =====================================================
   4. 布局切换按钮触控优化 (P2: 32px → 44px)
   ===================================================== */

@media (max-width: 768px) {
    .ds-post-list-controls {
        gap: 12px;
    }
    
    .ds-layout-btn {
        /* 原: width: 32px; height: 32px */
        width: 44px;
        height: 44px;
        border-radius: var(--ds-radius-md, 8px);
    }
    
    .ds-layout-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* =====================================================
   5. 移动端导航抽屉动画优化 (P1-6)
   ===================================================== */

@media (max-width: 1024px) {
    #ds-header-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--ds-bg-primary);
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        
        /* 抽屉从右侧滑入 */
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* 阴影 */
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }
    
    #ds-header-nav.is-open {
        transform: translateX(0);
    }
    
    /* 遮罩层 */
    .ds-header__overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .ds-header__overlay.is-open {
        opacity: 1;
        visibility: visible;
    }
    
    /* 抽屉打开时禁止背景滚动 */
    body.nav-open {
        overflow: hidden;
    }
}

/* 导航抽屉内部样式 */
@media (max-width: 1024px) {
    .ds-header__nav {
        padding-bottom: 32px;
    }
    
    .ds-header-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--ds-border);
        position: sticky;
        top: 0;
        background: var(--ds-bg-primary);
        z-index: 1;
    }
    
    .ds-header-nav-header span {
        font-size: var(--ds-text-base, 16px);
        font-weight: var(--ds-font-semibold, 600);
        color: var(--ds-text-primary);
    }
    
    .ds-header-nav-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: var(--ds-radius-md, 8px);
        cursor: pointer;
        color: var(--ds-text-secondary);
        transition: background 0.2s ease, color 0.2s ease;
    }
    
    .ds-header-nav-close:hover {
        background: var(--ds-bg-secondary);
        color: var(--ds-text-primary);
    }
    
    .ds-header__menu {
        padding: 12px 0;
    }
    
    .ds-header__menu-item {
        border-bottom: 1px solid var(--ds-border);
    }
    
    .ds-header__menu-item:last-child {
        border-bottom: none;
    }
    
    .ds-header__menu-item a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 20px;
        font-size: var(--ds-text-base, 16px);
        color: var(--ds-text-primary);
        transition: background 0.15s ease, color 0.15s ease;
    }
    
    .ds-header__menu-item a:hover,
    .ds-header__menu-item.current-menu-item a {
        background: var(--ds-bg-secondary);
        color: var(--ds-primary);
    }
    
    .ds-header-nav-footer {
        padding: 20px;
        border-top: 1px solid var(--ds-border);
        margin-top: auto;
    }
    
    .ds-header-nav-search {
        margin-bottom: 16px;
    }
    
    .ds-header-nav-search-input {
        width: 100%;
        padding: 12px 16px;
        font-size: var(--ds-text-base, 16px);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-md, 8px);
        background: var(--ds-bg-secondary);
        color: var(--ds-text-primary);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .ds-header-nav-search-input:focus {
        outline: none;
        border-color: var(--ds-primary);
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
    }
    
    .ds-header-nav-actions {
        display: flex;
        gap: 12px;
    }
    
    .ds-dark-mode-toggle--mobile {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ds-bg-secondary);
        border: none;
        border-radius: var(--ds-radius-md, 8px);
        cursor: pointer;
        color: var(--ds-text-primary);
        transition: background 0.2s ease;
    }
    
    .ds-dark-mode-toggle--mobile:hover {
        background: var(--ds-bg-tertiary);
    }
}

/* =====================================================
   6. 触控间距优化 - 避免误触
   ===================================================== */

@media (max-width: 768px) {
    /* 文章卡片间距增加 */
    .ds-post-card,
    .ds-article-card,
    .post-item {
        margin-bottom: 16px;
    }
    
    /* 分类Tab间距优化 */
    .ds-cat-tab {
        min-height: 44px;
        padding: 8px 16px;
    }
    
    /* 热门文章/标签列表项 */
    .ds-sidebar-widget__list li {
        padding: 10px 0;
    }
    
    /* Featured链接卡片间距 */
    .ds-featured-link-card {
        margin-bottom: 12px;
        padding: 14px 16px;
    }
    
    /* 订阅表单按钮 */
    .ds-subscribe-button {
        min-height: 44px;
        padding: 0 20px;
    }
    
    /* Footer链接间距 */
    .ds-footer-nav__link {
        padding: 8px 0;
        display: block;
    }
}

/* =====================================================
   7. 移动端性能优化 - 图片延迟加载区域
   ===================================================== */

/* 非首屏图片添加懒加载占位 */
@media (max-width: 768px) {
    /* 文章列表中的图片使用渐进加载 */
    .ds-post-card__thumbnail img,
    .ds-article-card__image img,
    .post-item__image img {
        loading: lazy;
    }
    
    /* 侧边栏图片懒加载 */
    .ds-sidebar-widget img {
        loading: lazy;
    }
    
    /* 首屏Hero图片不懒加载(优先加载) */
    .ds-hero img,
    .ds-featured-carousel__img {
        /* 首屏图片 eager 加载 */
    }
}

/* =====================================================
   8. 移动端社交分享功能
   ===================================================== */

/* 分享按钮组 - 基础样式 */
.ds-share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ds-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--ds-radius-md, 8px);
    border: 1px solid var(--ds-border);
    background: var(--ds-bg-secondary);
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-sm, 14px);
    font-weight: var(--ds-font-medium, 500);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 6px;
}

.ds-share-btn:hover {
    background: var(--ds-bg-tertiary);
    color: var(--ds-text-primary);
    border-color: var(--ds-border-hover);
}

/* 微博分享 */
.ds-share-weibo {
    background: #E6162D;
    border-color: #E6162D;
    color: white;
}

.ds-share-weibo:hover {
    background: #D11429;
    color: white;
}

/* Twitter分享 */
.ds-share-twitter {
    background: #1DA1F2;
    border-color: #1DA1F2;
    color: white;
}

.ds-share-twitter:hover {
    background: #0C8AD4;
    color: white;
}

/* LinkedIn分享 */
.ds-share-linkedin {
    background: #0A66C2;
    border-color: #0A66C2;
    color: white;
}

.ds-share-linkedin:hover {
    background: #08549A;
    color: white;
}

/* Facebook分享 */
.ds-share-facebook {
    background: #1877F2;
    border-color: #1877F2;
    color: white;
}

.ds-share-facebook:hover {
    background: #166FE5;
    color: white;
}

/* 复制链接 */
.ds-share-copy {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: white;
}

.ds-share-copy:hover {
    background: var(--ds-primary-dark, #0052A3);
    color: white;
}

.ds-share-copy.copied {
    background: #10B981;
    border-color: #10B981;
}

/* 移动端分享栏 - 图标模式 */
@media (max-width: 768px) {
    .ds-share-buttons {
        justify-content: flex-start;
    }
    
    .ds-share-btn span:not(.ds-share-label) {
        /* 隐藏文字，仅显示图标 */
        display: none;
    }
    
    .ds-share-btn {
        min-width: 44px;
        padding: 0;
        border-radius: 50%;
    }
}

/* =====================================================
   9. 移动端体验增强
   ===================================================== */

/* 移动端优化滚动 */
@media (max-width: 768px) {
    /* 原生平滑滚动 + iOS弹性滚动 */
    #ds-page {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 禁用长按菜单 */
    * {
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 输入框优化 */
    input, textarea, select {
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    /* 按钮去除默认:focus外边框(用box-shadow代替) */
    button:focus,
    .ds-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
    }
    
    /* 点击高亮(但不要太明显) */
    button:active,
    a:active {
        opacity: 0.85;
    }
}

/* =====================================================
   10. 暗黑模式移动端适配
   ===================================================== */

@media (max-width: 768px) {
    [data-theme="dark"] .ds-header__hamburger:hover,
    [data-theme="dark"] .ds-header__hamburger.is-active {
        background-color: var(--ds-bg-secondary);
    }
    
    [data-theme="dark"] .ds-header-nav-close:hover {
        background: var(--ds-bg-secondary);
    }
    
    [data-theme="dark"] #ds-header-nav {
        background: var(--ds-bg-primary);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    }
    
    [data-theme="dark"] .ds-header-nav-header {
        background: var(--ds-bg-primary);
        border-color: var(--ds-border);
    }
    
    [data-theme="dark"] .ds-share-btn {
        border-color: var(--ds-border);
    }
    
    [data-theme="dark"] .ds-share-btn:hover {
        border-color: var(--ds-border-hover);
    }
}

/* =====================================================
   桌面端导航恢复 - 确保nav在桌面端恢复正常布局
   ===================================================== */
@media (min-width: 1025px) {
    /* 桌面端确保nav恢复正常flex布局 */
    #ds-header-nav,
    .ds-header__nav {
        position: relative !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* 桌面端确保overlay不显示 */
    .ds-header__overlay {
        display: none !important;
    }
}