/**
 * DripSafe Theme - Mobile Optimization CSS
 * 2026-04-20 萧峰修复
 * 
 * 1. Header仅移动端吸顶（PC端普通流）
 * 2. 分类Tab仅吸顶
 * 3. 移动端隐藏侧边栏，Footer仅显示备案信息
 * 4. PC端文章目录小工具吸顶（随滚动固定在右侧）
 * 5. 文章详情页分享按钮改为左侧悬浮
 */

/* ============================
   1. Header：PC端普通流，移动端吸顶
   ============================ */

/* PC端（默认）：header普通流，不sticky */
.ds-header {
    position: relative;  /* 原来是 sticky */
    z-index: var(--ds-z-sticky);
}

/* 移动端吸顶 */
@media (max-width: 768px) {
    .ds-header {
        position: sticky;
        top: 0;
    }
}

/* ============================
   2. 分类Tab：仅移动端吸顶（PC端不需要）
   ============================ */

/* PC端：分类Tab普通流 */
.ds-category-tabs {
    position: relative;  /* 原来是 sticky */
    top: auto;
}

/* 移动端吸顶 */
@media (max-width: 768px) {
    .ds-category-tabs {
        position: sticky;
        top: var(--ds-nav-height, 56px);
        z-index: 100;
    }
}

/* ============================
   3. 移动端：隐藏侧边栏
   ============================ */

@media (max-width: 768px) {
    .ds-sidebar {
        display: none !important;
    }
    
    .ds-content {
        grid-template-columns: 1fr !important;
    }
}

/* ============================
   4. 移动端：Footer仅显示备案信息
   ============================ */

@media (max-width: 768px) {
    .ds-footer {
        padding: var(--ds-spacing-6) 0 var(--ds-spacing-4);
    }
    
    /* 隐藏品牌区 */
    .ds-footer-grid {
        display: none !important;
    }
    
    /* 隐藏社交图标 */
    .ds-footer-social {
        display: none !important;
    }
    
    /* 隐藏优秀同行 */
    .ds-footer-friends {
        display: none !important;
    }
    
    /* 底部栏仅备案信息 */
    .ds-footer-bottom {
        padding-top: var(--ds-spacing-4);
        justify-content: center;
    }
    
    .ds-footer-copyright {
        text-align: center;
        width: 100%;
    }
}

/* ============================
   5. PC端文章目录小工具吸顶（右侧）
   ============================ */

@media (min-width: 769px) {
    .ds-toc {
        position: sticky;
        top: calc(var(--ds-nav-height, 72px) + var(--ds-spacing-6, 24px));
        max-height: calc(100vh - var(--ds-nav-height, 72px) - var(--ds-spacing-12, 48px));
        overflow-y: auto;
        scrollbar-width: thin;
    }
    
    .ds-toc::-webkit-scrollbar {
        width: 4px;
    }
    
    .ds-toc::-webkit-scrollbar-thumb {
        background: var(--ds-color-border);
        border-radius: 2px;
    }
}

/* ============================
   6. 文章详情页分享按钮改为左侧悬浮
   ============================ */

@media (min-width: 769px) {
    /* 分享按钮容器改为左侧固定悬浮 */
    .ds-share-buttons {
        position: fixed;
        left: var(--ds-spacing-4, 16px);
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        align-items: center;
        width: auto;
        padding: var(--ds-spacing-3, 12px);
        margin: 0;
        background: var(--ds-bg-primary);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-lg);
        box-shadow: var(--ds-shadow-md);
        z-index: 90;
        gap: var(--ds-spacing-2, 8px);
    }
    
    /* 内容区去掉分享按钮的下边距 */
    .ds-single__content {
        margin-left: 0;
    }
    
    .ds-share-btn {
        width: 36px;
        height: 36px;
    }
}

/* 移动端保持原样（居中） */
@media (max-width: 768px) {
    .ds-share-buttons {
        position: static;
        transform: none;
        width: 100%;
        margin: var(--ds-spacing-4) 0;
    }
}