/*
 * NexCheck 组件级品牌层 —— Typecho-Theme-Once-main
 *
 * 分工：配色与形状令牌全部在 skin.css 的 :root / :root.dark（该文件即单站皮肤），
 *       本文件只做 skin.css 共享层没有的结构性品牌细节，不重复声明任何 --once-* 令牌。
 * 挂载：partials/site.php 的 extra_css 键，加载顺序在 skin.css 之后（header.php:86-88）。
 * 作用域：全部选择器限定在 body.nexcheck-blog 之下，Once 基础主题保持可复用。
 *
 * 设计依据（对齐 nexcheck.net 静态站）：
 *   胶囊标签   静态站 rounded-full 出现 9 次，是其最显著的形状语言
 *   渐变强调   from-primary-500 to-primary-700 出现 4 次，是签名渐变
 *   卡片浮起   静态站 shadow-lg + border-slate-200，卡片浮于 slate-50 底色之上
 */

/* ---------- 顶栏：毛玻璃 + 品牌渐变发丝线 ---------- */
body.nexcheck-blog .header {
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    position: relative;
}

body.nexcheck-blog .header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--once-brand-gradient);
    opacity: .85;
}

body.nexcheck-blog .top .top_r .top_r_an:hover {
    box-shadow: 0 0 0 4px var(--once-brand-soft);
}

/* ---------- 「返回主站」做成品牌胶囊 ---------- */
body.nexcheck-blog .back-to-site {
    background: var(--once-brand-gradient);
    color: var(--once-on-brand);
    border: 0;
    box-shadow: var(--once-btn-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

body.nexcheck-blog .back-to-site:hover {
    color: var(--once-on-brand);
    transform: translateY(-1px);
}

/* ---------- 文章卡片浮起 ---------- */
body.nexcheck-blog .post_def {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

body.nexcheck-blog .post_def:hover {
    transform: translateY(-2px);
    border-color: var(--once-brand-soft);
    box-shadow: var(--once-shadow-lg);
}

/* ---------- 标题 hover 走品牌渐变下划线 ---------- */
body.nexcheck-blog .post_container_title a,
body.nexcheck-blog .post_def h2 a {
    background-image: var(--once-brand-gradient);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition: background-size .24s ease, color .18s ease;
}

body.nexcheck-blog .post_container_title a:hover,
body.nexcheck-blog .post_def h2 a:hover {
    background-size: 100% 2px;
}

/* ---------- 侧栏标题：渐变竖条 ---------- */
body.nexcheck-blog .widget-title {
    position: relative;
    padding-left: 12px;
}

body.nexcheck-blog .widget-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1em;
    border-radius: 999px;
    background: var(--once-brand-gradient);
}

/* ---------- 标签胶囊化（呼应静态站 rounded-full） ---------- */
body.nexcheck-blog .tagcloud a,
body.nexcheck-blog .widget_hot_tags a {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 6px 8px 0;
    border-radius: 999px;
    background: var(--once-subtle);
    color: var(--once-brand);
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.nexcheck-blog .tagcloud a:hover,
body.nexcheck-blog .widget_hot_tags a:hover {
    background: var(--once-surface);
    border-color: var(--once-brand);
    color: var(--once-brand-hover);
}

/* ---------- 分页与「阅读更多」用渐变 ---------- */
body.nexcheck-blog .post-read-more a {
    background: var(--once-brand-gradient);
    color: var(--once-on-brand);
    border: 0;
    box-shadow: var(--once-btn-shadow);
    transition: transform .18s ease;
}

body.nexcheck-blog .post-read-more a:hover {
    color: var(--once-on-brand);
    transform: translateY(-1px);
}

body.nexcheck-blog .posts-nav .current {
    background: var(--once-brand-gradient);
    border-color: transparent;
    color: var(--once-on-brand);
}

body.nexcheck-blog .scrollToTopBtn {
    background: var(--once-brand-gradient);
    color: var(--once-on-brand);
    border: 0;
    box-shadow: var(--once-btn-shadow);
}

/* ---------- 正文引用块 ---------- */
body.nexcheck-blog .wznrys blockquote {
    border-left: 3px solid var(--once-brand);
    background: var(--once-subtle);
    border-radius: 0 var(--once-radius-sm) var(--once-radius-sm) 0;
}

/* ---------- 焦点可见与动效偏好 ---------- */
body.nexcheck-blog a:focus-visible,
body.nexcheck-blog button:focus-visible,
body.nexcheck-blog input:focus-visible {
    outline: 2px solid var(--once-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    body.nexcheck-blog *,
    body.nexcheck-blog *::before,
    body.nexcheck-blog *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    body.nexcheck-blog .post_def:hover,
    body.nexcheck-blog .back-to-site:hover,
    body.nexcheck-blog .post-read-more a:hover {
        transform: none;
    }
}