/* ==========================================================================
   子主题全局美化层
   --------------------------------------------------------------------------
   本文件由 functions.php 自动加载（递归扫 css/ 目录），不需要手动 enqueue。
   命名以 z- 开头，避开父主题与插件的类名，便于日后整体剥离。

   这里放「不改父主题源码、但想让全站生效」的调整。
   组件自己的样式请写在 packages/<组件>/style.css，不要往这里塞。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 无障碍：统一的键盘焦点环
   父主题未定义 :focus-visible，键盘 Tab 时几乎看不到焦点。
   只作用于键盘操作，鼠标点击不会出现光圈。
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   2. 滚动行为：锚点跳转平滑 + 避开粘性导航
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    /* 粘性导航高度，锚点跳转时不会被盖住 */
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
   3. 窄屏触摸目标：正文里的链接与按钮加大点击区
   手指点按精度有限，正文内联链接太细容易点空。
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .entry-content a,
    .post-content a {
        padding: 1px 0;
        /* 扩大垂直点击区但不改变视觉行高 */
        box-shadow: 0 -0.35em 0 0 var(--bg-hover) inset;
        background: var(--bg-hover);
        border-radius: 3px;
    }

    /* 触摸设备上取消 hover 抬升，避免"粘住"的悬停态 */
    .dl-channel__btn:hover {
        transform: none;
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   4. 横向滚动容器：细滚动条
   组件里的宽表格在窄屏会横向滚动，默认滚动条过粗。
   -------------------------------------------------------------------------- */

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

.z-scroll-x::-webkit-scrollbar,
.spec-table__scroll::-webkit-scrollbar {
    height: 6px;
}

.z-scroll-x::-webkit-scrollbar-thumb,
.spec-table__scroll::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 3px;
}

.z-scroll-x::-webkit-scrollbar-track,
.spec-table__scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   5. 选中文字：跟随主题色
   父主题的 ::selection 只在后台设置了 text_selected_color 时才输出。
   -------------------------------------------------------------------------- */

::selection {
    background: var(--theme-color);
    color: #fff;
}