/*
 * zibll 子主题默认外观：现代、简洁、扁平
 * 加载于父主题 main.css 之后，可直接覆盖
 * 注意：以下样式为"静态默认值"，后台可配置项（主题色/圆角/字体）由 functions.php 的
 *       zibll_child_head_css() 输出覆盖样式，优先级更高（内联 style 晚于外部样式表）
 */

 /* 标题合理换行 */
 .posts-item .item-heading {
    text-wrap: balance;
 }

 /* 仅对“全屏无背景”页面生效 */
.child-full-page .header {
    margin-bottom: 0 !important;
}

body.child-full-page.nav-fixed {
    padding-top: 68px !important;
}

.child-full-page .navbar-search {
    padding-top: 100px !important;
}

/* ==== 现代无衬线字体栈（后台"字体"设置可覆盖）==== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

/* 悬停反馈：扁平风格下用轻微上浮代替阴影加深 */
.posts-item,
.zib-widget {
    transition: transform .2s ease, border-color .2s ease;
}
.posts-item:hover {
    transform: translateY(-2px);
    border-color: var(--focus-color-opacity3);
}

/* 文章列表卡片：更克制的圆角内边距与间距 */
.posts-item {
    padding: 18px;
}

.pay-box .pay-title {
    font-size: 20px;
}

/* 标题层次更分明：弱化粗体，用字号与颜色区分 */
.item-heading a {
    font-weight: 500;
}
.article-content h1,
.article-content h2,
.article-content h3 {
    font-weight: 600;
    letter-spacing: .2px;
}

/* 按钮：扁平实心，去掉多余阴影 */
.btn,
a.btn {
    box-shadow: none;
}

/* ==== 文章详情页：标题 / 扁平 meta / 分隔 ==== */

/* 标题字号调大 */
.article-header .article-title {
    font-size: 30px;
    line-height: 1.35;
}
.article-header .article-title a {
    color: var(--key-color);
}

/* 标题区与正文之间增加分隔（细线 + 间距） */
.child-article-header {
    border-bottom: 1px solid var(--main-border-color);
    padding-bottom: 22px;
    margin-bottom: 22px;
}

/* 作者行 */
.child-article-header .article-avatar {
    margin-top: 16px;
}
.child-article-header .article-avatar .user-info {
    font-size: 15px;
}
.child-article-header .article-avatar .user-action {
    margin-left: 10px;
}

/* meta：置于标题下方的扁平 tag 列表，每个 item 独立成 tag */
.child-single-metabox {
    margin: 16px 0 0;
    font-size: 13px;
    --meta-color: var(--muted-color);
}
.child-single-metabox .post-metas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    padding: 0;
    border-radius: 0;
    color: var(--meta-color);
}
.child-single-metabox .post-metas item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid var(--main-border-color);
    border-radius: 999px;
    background: var(--muted-bg-2-color);
    color: var(--meta-color);
    line-height: 1.6;
    white-space: nowrap;
}
.child-single-metabox .post-metas item a {
    color: inherit;
}
.child-single-metabox .post-metas item a:hover {
    color: var(--focus-color);
}
.child-single-metabox .post-metas item a:hover,
.child-single-metabox .post-metas item a:hover .icon {
    color: var(--focus-color);
}
.child-single-metabox .post-metas item .fa,
.child-single-metabox .post-metas item .icon {
    margin-right: 0;
    width: 1em;
    height: 1em;
    font-size: 12px;
}
/* 时间 tag：与统计 tag 同一规格，仅文字略深以示区分 */
.child-single-metabox .post-metas item.meta-time {
    color: var(--muted-2-color);
}
.child-single-metabox .post-metas item.meta-time a {
    color: inherit;
}
/* 更多操作按钮：弱化的幽灵按钮，与 tag 视觉层级一致 */
.child-single-metabox .post-drop-meta {
    --this-size: 1.73em;
    --this-color: var(--meta-color);
    --this-bg: transparent;
}

/* ==== 标题居中样式（后台"标题对齐方式"选择居中时生效）==== */
.child-article-header-center .article-title {
    text-align: center;
    text-wrap: balance;
}
.child-article-header-center .article-title a {
    display: inline;
}
/* meta 行整体居中：tag 组与更多按钮一起排布在中央 */
.child-article-header-center .child-single-metabox {
    justify-content: center;
    text-align: center;
}
/* 作者行：居中模式下改为竖向布局（头像在上，作者名、介绍依次在下，整块居中） */
.child-article-header-center .article-avatar .user-info {
    flex-direction: column;
    align-items: center;
}
.child-article-header-center .article-avatar .user-right {
    flex-direction: column;
    margin-left: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
}
.child-article-header-center .article-avatar .user-right .flex1 {
    width: 100%;
    text-align: center;
}
.child-article-header-center .article-avatar .user-right .flex1 name {
    justify-content: center;
}

/* ==== 文章尾部：分类/标签区（分类在上、标签在下）====
 * 与顶部 meta 的 pill tag 同一视觉语言：细边框圆角小标签、弱对比色，不加彩色 */
.article-content .article-tags {
    padding: 14px 18px;
    background: var(--muted-bg-2-color);
    border: 1px solid var(--main-border-color);
    border-radius: 8px;
    line-height: 2.4;
}
.article-content .article-tags a {
    font-size: 13px;
    margin: 3px 4px 3px 0;
    padding: 3px 12px;
    border: 1px solid var(--main-border-color);
    border-radius: 999px;
    background: var(--main-bg-color);
    color: var(--muted-2-color);
    transition: color .2s ease, border-color .2s ease;
}
.article-content .article-tags a .fa {
    font-size: 12px;
    margin-right: 4px;
}
.article-content .article-tags a:hover {
    color: var(--focus-color);
    border-color: var(--focus-color-opacity3);
}
.child-article-header-center .article-avatar .user-action {
    margin-left: 0;
    margin-top: 8px;
}

/* ==== 弹窗隐藏态护栏（全站）====
 * atomic-wind 等块携带的 Tailwind 工具类带 !important（.flex{display:flex!important}），
 * 会压过 pay.js 创建 #zibpay_modal 时的内联 display:none → 全屏 fixed 弹窗隐形覆盖页面、
 * 拦截一切点击（2026-08-31 真机实测，默认模板/含页眉页脚页均中招）。
 * ⚠️ 必须放进 @layer base：CSS 层级对 !important 的优先序反转——后声明的 utilities 层
 * 赢过未分层规则，但输给更早声明的 base 层（tailwind 预声明 theme,base,components,utilities）。
 * ⚠️ 必须用 visibility 而非 display:none（2026-09-02 修正，遮罩残留根因）：
 * 子比魔改的 bootstrap Modal.hide 监听 transitionstart（.modal-dialog 的 transform 过渡
 * 冒泡而来）才执行 hideModal 清理遮罩/modal-open；此前此处用 display:none 会在关闭瞬间
 * 杀死过渡 → transitionstart 永不触发 → 遮罩层永不移除，刷新页面才消失（全带 flex 类的
 * 弹窗中招）。visibility:hidden 不杀子树过渡、不可见/不可点击/不可聚焦，与 Tailwind 的
 * display 之争也彻底脱钩；:not(.in) 只作用于隐藏态，显示态不受影响 */
@layer base {
    .modal.flex:not(.in) {
        visibility: hidden !important;
    }

    /* ==== collapse 类名撞名护栏（全站）====
     * atomic-wind 等块携带的 Tailwind .collapse 工具类（visibility:collapse!important，
     * 语义是 visibility 属性）撞父主题 bootstrap 的折叠类 .collapse（显隐纯 display 驱动：
     * main.min.css .collapse{display:none} / bootstrap .collapse.in{display:block}）——
     * 展开态 display:block 生效但被 visibility:collapse 压住 → 页眉导航等所有带 collapse
     * 类的折叠组件整体不可见不可点（2026-09-04 真机实测，空白页眉页脚模板页中招）。
     * 恢复 visibility 不影响隐藏态（隐藏态靠 display:none），与 modal 护栏同层同机制 */
    .collapse {
        visibility: visible !important;
    }

    /* ==== .block 内联隐藏护栏（全站）====
     * atomic-wind 的 .block 工具类（display:block!important）压父主题 .block{display:block}；
     * 若父主题 .block 元素（badg block / but block 等）被 JS 以内联 display:none 动态隐藏，
     * !important 会压住内联样式 → 元素隐形但占位/拦截点击（与 modal 事故同向量，2026-09-04
     * 全量比对 44 个 aw 工具类时发现的潜伏点）。仅作用于显式内联隐藏的 .block，不碰显示态 */
    .block[style*="display: none"],
    .block[style*="display:none"] {
        display: none !important;
    }
}

/* ==== flex 型弹窗显示态用 flex 居中 ====
 * bootstrap 的 .modal('show') 会写入内联 display:block，压掉元素上的 flex/jc 工具类——
 * jc（justify-content+align-items 居中）在块级布局下完全不生效，支付确认弹窗等 flex 型弹窗
 * 因此不居中（2026-08-31 用户实测：手动改 display:flex 即恢复）。
 * !important 压过内联 display:block；限 .modal.flex.in：只影响带 flex 类的弹窗显示态，
 * 与上面 :not(.in) 隐藏态护栏互补，普通 bootstrap 弹窗（无 flex 类）不受影响 */
.modal.flex.in {
    display: flex !important;
}