/*
 Theme Name:   B2 Jitheme Child
 Theme URI:    https://7b2.com
 Description:  参照极主题（jitheme.com）设计风格的 B2 子主题 — 活力橙 + 5px 圆角 + 克制美学
 Author:       张总
 Author URI:   https://7b2.com
 Template:     b2
 Version:      3.0.0
 Text Domain:  b2-jitheme-child
*/

/* ============================================
   1. 字体引入 — OPPOSans（jitheme 同款）
   ============================================ */
@font-face {
    font-family: 'jitheme';
    src: url('https://dsfs.oppo.com/store/public/font/OPPOSans-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body, pre, code, input, textarea, select, button {
    font-family: 'jitheme', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ============================================
   2. 全局 CSS 变量 — jitheme 设计系统
   ============================================ */
:root {
    /* ── 品牌色 — 活力橙 #ff6000 ── */
    --brand:           #ff6000;
    --brand-hover:     #e65500;
    --brand-active:    #cc4a00;
    --brand-light:     rgba(255, 96, 0, 0.12);
    --brand-ghost:     rgba(255, 96, 0, 0.04);
    --brand-bg:        rgba(255, 96, 0, 0.03);

    /* ── 文字 — 四级灰阶 ── */
    --text-primary:    #1a1a2e;
    --text-secondary:  #4a4a5a;
    --text-tertiary:   #8e8e9a;
    --text-muted:      #b8b8c0;

    /* ── 背景 — 五级灰阶 ── */
    --bg-page:         #f5f5f7;
    --bg-surface:      #ffffff;
    --bg-subtle:       #f7f8fa;
    --bg-hover:        #fafafa;
    --bg-overlay:      #f0f0f4;

    /* ── 边框 — 三级灰阶 ── */
    --border-strong:   #dcdce0;
    --border-default:  #e8e8ec;
    --border-subtle:   #f0f0f4;

    /* ── 圆角 — 统一 5px（jitheme 风格） ── */
    --radius-xs:  3px;
    --radius-sm:  5px;
    --radius-md:  5px;
    --radius-lg:  8px;
    --radius-xl:  12px;

    /* ── 阴影 — 克制三层 ── */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.08);

    /* ── 间距 — 8px 基准 ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── 过渡 ── */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.35s ease;

    /* ── 兼容 B2 父主题变量 ── */
    --b2color:       var(--brand);
    --b2lightcolor:  rgba(255, 96, 0, 0.2);
    --b2light:       var(--brand-ghost);
    --b2radius:      var(--radius-sm);
}

/* ============================================
   3. 滚动条 — jitheme 同款
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* ============================================
   4. 全局基础元素
   ============================================ */

a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--brand-hover);
}

/* 实心按钮 */
button,
.button,
input[type="submit"],
.b2-btn,
.btn {
    background: var(--brand);
    color: #ffffff;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.5;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.b2-btn:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

button:active,
.button:active {
    background: var(--brand-active);
    border-color: var(--brand-active);
    transform: scale(0.98);
}

/* 空心按钮 */
.button.empty,
.button.text,
button.empty,
.d-weight button.picked.text,
.d-replay button.picked i,
.comment-type button.picked i {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
}

.button.empty:hover,
.button.text:hover,
button.empty:hover {
    background: var(--brand-bg);
}

/* 输入框/文本域 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}

/* ============================================
   5. 卡片系统 — 白底 + 细边框 + 虚线分割
   ============================================ */

.card,
.box,
.post-modules,
.widget > div,
.b2-widget-box,
.post-3 .post-3-li .item-in,
.document-row,
.comment-item,
.topic-card-box li,
.ask-item,
.collection-posts li,
.post-6-jiehsao,
.ji-bg-white,
.jitheme-background-default {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover,
.box:hover,
.post-3 .post-3-li .item-in:hover,
.document-row:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* 虚线分割（jitheme 核心视觉特征） */
.list-footer,
.circle-widget-button,
.comment .comment-item,
.document-row.b2-pd:nth-of-type(odd),
.document-row + .document-row,
.pager-center,
.aside-bar > div > div + div,
.none-comment,
.w-d-role > div + div,
.topic-lv1 + .topic-lv1,
.topic-comments,
.jitheme_slide_tjmk,
.coll-text,
.b2-b-t,
.comments-title,
.ask-write-answer,
.ask-item + .ask-item,
#ji-footer-new {
    border-top: 1px dashed var(--border-default);
}

.jitheme-widget-pl .b2-widget-title h2,
.b2-widget-newsflashes .b2-widget-title h2,
.b2-menu-4 .sub-menu-0 > li > a,
.po-topic-textarea textarea:first-child,
.content-show-roles h2,
.content-show-roles h1,
.comments-title,
.pager-center,
.post-3 .post-3-li .item-in,
.post-5 .post-modules-top,
.topic-comment-list-header,
.info-po-type,
.info-po-attrs-row1,
.tox .tox-toolbar,
.jitheme-widget-post .b2-widget-title h2,
.ask-answer-title,
.shop-single-attr-title {
    border-bottom: 1px dashed var(--border-default);
}

/* ============================================
   6. 导航栏
   ============================================ */

.header,
.site-header,
.post-type-archive-circle .header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}

.top-menu ul li a,
.b2-menu-3 .sub-menu-0 > li > a,
.header .menu-item a {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.top-menu ul li a:hover,
.b2-menu-3 .sub-menu-0 > li > a:hover,
.header .menu-item a:hover {
    color: var(--brand);
    background: var(--brand-bg);
}

.top-menu ul li.current-menu-item > a,
.header .menu-item.current-menu-item > a {
    color: var(--brand);
}

.header .login-button button,
.login-button a {
    background: var(--brand-bg);
    color: var(--brand);
    border: 1px solid var(--brand-light);
    border-radius: var(--radius-sm);
    padding: 6px 18px;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.header .login-button button.empty {
    background: var(--brand);
    color: #fff;
}

.header .login-button button:hover {
    background: var(--brand-hover);
    color: #fff;
}

.b2-menu-3 .sub-menu-0 > li:hover > a,
.b2-menu-3 .sub-menu-0 a:hover {
    background: var(--bg-hover);
    color: var(--brand);
}

.b2-menu-4 ul ul li a img {
    border-radius: var(--radius-sm);
}

/* 移动端 */
.mobile-box {
    margin-left: 10px;
}

.mobile-footer-menu a {
    color: var(--text-secondary);
}

.mobile-footer-menu a:hover {
    color: var(--brand);
}

/* ============================================
   7. 文章列表 & 内容区
   ============================================ */

.post-list-item,
.post-3-li,
.post-modules .post-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}

.post-list-item:hover,
.post-modules .post-item:hover {
    box-shadow: var(--shadow-md);
}

.post-title h2 a,
.entry-title a {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
}

.post-title h2 a:hover,
.entry-title a:hover {
    color: var(--brand);
}

.post-excerpt,
.entry-content p,
.document-row h3 a,
.link-desc,
.ask-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.post-list-cats a span,
.collection-posts li span,
.post-list-cat a {
    background: var(--brand-bg);
    color: var(--brand);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}

.post-list-cats a span:hover {
    background: var(--brand);
    color: #fff;
}

.post-meta li span,
.item-author .author-info,
.post-breadcrumb,
.ask-user-info {
    color: var(--text-tertiary);
    font-size: 12px;
}

/* 文章内标签 */
.post-tags-meat a {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 4px 12px;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.post-tags-meat a:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-bg);
}

.post-tags-meat-onecad .tag-img i,
.post-tags-meat-onecad .sub-nav span {
    background: var(--bg-surface);
}

.post-tags-meat a .tag-img {
    background: var(--bg-surface);
}

/* 引用块 */
.entry-content blockquote,
blockquote {
    border-left: 3px solid var(--brand);
    background: var(--brand-bg);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    margin: var(--space-5) 0;
}

.site-content,
.content-area,
.b2-content .content-area,
.post-style-2 .content-area,
.archive .content-area {
    background: transparent;
    width: 100%;
}

/* 节日倒计时日历 */
#Jitheme_index_rili .swiper-slide-text .home-sence-name h6 {
    color: var(--text-primary);
}

#Jitheme_index_rili .calendar-title .right {
    background: var(--bg-surface);
}

/* ============================================
   8. 侧边栏 — 无阴影 + 虚线分割
   ============================================ */

.side-fixed,
.bar-normal,
.bar-footer,
.bar-top {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    overflow: hidden;
}

.bar-middle .bar-normal,
.bar-footer,
.bar-top {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.bar-normal .bar-item,
.bar-footer .bar-item {
    color: var(--text-secondary);
    font-size: 13px;
    padding: var(--space-3) var(--space-4);
    transition: all var(--transition-fast);
}

.bar-normal .bar-item:hover,
.bar-footer .bar-item:hover {
    color: var(--brand);
    background: var(--brand-bg);
}

.bar-item i {
    color: var(--text-primary);
}

.widget-title h2,
.b2-widget-title h2,
.sidebar h3 {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--border-default);
    margin-bottom: var(--space-4);
}

.widget,
.widget > div,
.b2-widget-box {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
}

.widget .tagcloud a,
.tagcloud a {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.widget .tagcloud a:hover,
.tagcloud a:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* 用户动态 */
.user-widget-content .user-w-rw,
.widget-comment-contnet {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}

.user-w-logon::after {
    background-image: linear-gradient(0deg, var(--bg-surface) 0, rgba(247, 248, 249, 0) 100%);
}

/* 热度图标 */
[class*="icon-fire-"] {
    color: #c1c1c1;
}

.icon-fire-1 { color: #e20000; }
.icon-fire-2 { color: #ff6000; }
.icon-fire-3 { color: #f90; }

.icon-talk-hot-1 { color: #fa455f; }
.icon-talk-hot-2 { color: #f90; }
.icon-talk-hot-3 { color: #ff6000; }

/* ============================================
   9. 评论系统
   ============================================ */

.comment .comment-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-3);
}

.comment-author .user-title {
    color: var(--text-secondary);
    font-size: 12px;
}

.comment-content-text p {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.7;
}

.comment-info span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.com-form-textarea textarea,
.com-form-input input {
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    font-size: 14px;
    transition: border-color var(--transition-fast);
}

.com-form-textarea textarea:focus,
.com-form-input input:focus {
    border-style: solid;
    border-color: var(--brand);
}

/* ============================================
   10. 分页
   ============================================ */

.pager-center,
.ajax-pager {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}

.ajax-pager .button {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    margin-right: 15px;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.ajax-pager .button:hover {
    background: var(--brand-bg);
    color: var(--brand);
    border-color: var(--brand-light);
}

.ajax-pager .button.selected,
.ajax-pager .button[disabled] {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* ============================================
   11. 表格
   ============================================ */

table,
.wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

th {
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-strong);
}

td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 14px;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--bg-hover);
}

/* ============================================
   12. 代码块
   ============================================ */

pre,
code,
.wp-block-code {
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    font-size: 13px;
    line-height: 1.6;
    overflow-x: auto;
    border: none;
}

:not(pre) > code {
    background: var(--bg-subtle);
    color: var(--brand);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 0.9em;
    border: 1px solid var(--border-default);
}

/* ============================================
   13. 图片 & 媒体
   ============================================ */

.entry-content img,
.post-content img,
.comment-content img {
    border-radius: var(--radius-sm);
    max-width: 100%;
    height: auto;
}

.post-thumbnail img,
.wp-post-image,
.coll-3-top img {
    border-radius: var(--radius-sm);
}

.coll-3-top img {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.coll-3-bottom li:first-child img {
    border-bottom-left-radius: var(--radius-sm);
}

.coll-3-bottom li:last-child img {
    border-bottom-right-radius: var(--radius-sm);
}

.avatar,
.user-avatar img,
.comment-avatar img,
.author-avatar img {
    border-radius: 50%;
}

/* 图片弹窗 */
.fancybox-thumbs {
    background: var(--bg-surface);
}

.topic-image-light {
    background: var(--bg-surface);
}

/* ============================================
   14. 表单 & 搜索
   ============================================ */

.search-form input[type="search"],
.search-box input {
    border-radius: 20px;
    background: var(--bg-subtle);
    border: 1px solid transparent;
    padding: 8px 18px;
    transition: all var(--transition-fast);
}

.search-form input[type="search"]:focus,
.search-box input:focus {
    background: var(--bg-surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238e8e9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ============================================
   15. 提示消息 & 状态
   ============================================ */

.message-success,
.alert-success,
.b2-alert-success {
    background: #f0faf4;
    border: 1px solid #b7ebce;
    border-radius: var(--radius-sm);
    color: #1a7a3a;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}

.message-warning,
.alert-warning {
    background: #fff8ed;
    border: 1px solid #fdd4a0;
    border-radius: var(--radius-sm);
    color: #b25e00;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}

.message-error,
.alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    color: #dc2626;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}

.message-info,
.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    color: #1d4ed8;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}

/* ============================================
   16. 模态框
   ============================================ */

.modal-content,
.fancybox-content {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-default);
}

/* ============================================
   17. 加载骨架屏
   ============================================ */

.b2-loading,
.loading {
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-page) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   18. Footer
   ============================================ */

.footer,
.site-footer,
#ji-footer-new {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    padding: var(--space-8) 0;
    color: var(--text-tertiary);
    font-size: 13px;
}

.footer a {
    color: var(--text-secondary);
}

.footer a:hover {
    color: var(--brand);
}

/* ============================================
   19. 暗色模式
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page:         #111118;
        --bg-surface:      #1a1a24;
        --bg-subtle:       #1e1e2a;
        --bg-hover:        #22222e;
        --bg-overlay:      #16161e;

        --text-primary:    #e4e4ec;
        --text-secondary:  #a0a0b0;
        --text-tertiary:   #6a6a7a;
        --text-muted:      #4a4a58;

        --border-strong:   #333340;
        --border-default:  #2a2a36;
        --border-subtle:   #22222e;

        --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
    }

    ::-webkit-scrollbar-track { background-color: #1a1a24; }
    ::-webkit-scrollbar-thumb { background-color: #3a3a48; }
    ::-webkit-scrollbar-thumb:hover { background-color: #4a4a58; }

    * {
        scrollbar-color: #3a3a48 #1a1a24;
    }

    pre, code, .wp-block-code {
        background: #0d0d14;
    }
}

/* ============================================
   20. 辅助工具类
   ============================================ */

.text-brand { color: var(--brand); }
.bg-brand   { background: var(--brand); color: #fff; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}