/* KBG UI 2.0 —— 桌面端基础视觉系统（阶段1）
 * 范围：CSS变量/品牌色、PC容器宽度、导航基础视觉、字体圆角边框阴影、
 * Footer基础统一。不改首页卡片/Banner/栏目列表/文章正文——那些留给后续阶段。
 * 全部规则以 body.kbg-ui-preview 开头，不使用无作用域的全局选择器。
 */

/* ---------- 1. CSS变量与品牌基础色 ----------
 * 深蓝/科技蓝为主，金色和橙色只用于强调（按钮/高亮/当前栏目），不做大面积
 * 黑色压抑风格。变量挂在 body.kbg-ui-preview 上而不是 :root，这样预览模式
 * 关闭时这些变量完全不存在，不会有任何"意外继承"的可能。
 */
body.kbg-ui-preview {
    --kbg-primary: #123a70;       /* 深蓝，导航/标题类主色 */
    --kbg-primary-dark: #0b2547;  /* 深蓝的更深阶，用于hover/active */
    --kbg-accent: #2f7dff;        /* 科技蓝，用于链接/hover高亮 */
    --kbg-gold: #c9a227;          /* 金色，强调/当前栏目 */
    --kbg-orange: #e08a2c;        /* 橙色，次强调（比如投稿按钮） */
    --kbg-bg: #f5f7fa;            /* 页面背景，浅灰蓝，不是纯白也不是黑 */
    --kbg-surface: #ffffff;       /* 卡片/面板表面色 */
    --kbg-text: #1a2333;          /* 正文深色，不用纯黑 */
    --kbg-muted: #6b7688;         /* 次要文字（时间/分类等） */
    --kbg-border: #e2e6ec;        /* 基础描边色 */
    --kbg-radius: 10px;           /* 全站统一圆角 */
    --kbg-radius-sm: 6px;
    --kbg-shadow: 0 2px 12px rgba(18, 58, 112, .08);
    --kbg-shadow-hover: 0 6px 20px rgba(18, 58, 112, .14);
    --kbg-transition: all .25s ease;
    --kbg-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Helvetica Neue", Helvetica, Arial, sans-serif; /* 中文优先字体栈，不引入外部字体文件 */

    /* 2026-07-22 修订：真实核对编译CSS发现 .header{background-color:var(--header-bg-color)}
       这条父主题规则，--header-bg-color 的真实值是 #9c4dff（紫色）。下面 header.header
       规则本身的选择器特异性（0,1,1）已经高于 .header（0,1,0），理论上已经能覆盖，
       这里再顺手把变量本身也接管一遍，双重保险，不依赖"谁的CSS后加载"这种脆弱前提。 */
    --header-bg-color: var(--kbg-surface);
}

/* ---------- 2. 基础字体 ----------（只调字体族/正文可读性，不改任何具体
   页面的排版结构——标题层级由各阶段的具体模块自己定义） */
body.kbg-ui-preview {
    font-family: var(--kbg-font);
    color: var(--kbg-text);
    background-color: var(--kbg-bg);
}

/* ---------- 3. PC端容器宽度 ----------
 * 复用父主题自己的 --theme-container-width 变量（.container 本来就读这个
 * 变量），只在这里往上加宽，不直接改写 .container 本身的宽度/位置/显示方式，
 * 避免"无作用域覆盖 .container"。
 *
 * 2026-07-22 Stage 5.2.2 Re-Test 修订：真实浏览器在1280px（Laptop视口）
 * 复现横向溢出——根因是这里原来写的是固定像素值（1320px），断点阈值
 * min-width:1240px 只保证"至少1240px宽才生效"，却没保证"生效时这个固定
 * 值不会比当前视口更宽"——1240~1319px这个区间内的真实视口（比如1280px）
 * 套用固定1320px后，容器天然比视口本身还宽40px，这就是真实溢出的来源，
 * 不是Swiper或任何轮播组件（上一轮诊断有误，这次用逐元素真实扫描重新核实
 * 过）。改用 min(固定值, calc(100vw - 40px)) ——两个断点内的固定值继续
 * 作为"宽屏时的上限"生效，同时永远不会超过当前视口减去安全边距，从数值
 * 关系上保证不了再发生这类"固定值 > 视口宽度"的情况，而不是加
 * overflow-x:hidden 之类只藏住滚动条、放任内部元素继续溢出的掩盖式修复。 */
@media (min-width: 1240px) {
    body.kbg-ui-preview { --theme-container-width: min(1320px, calc(100vw - 40px)); }
}
@media (min-width: 1600px) {
    body.kbg-ui-preview { --theme-container-width: min(1480px, calc(100vw - 40px)); }
}
@media (min-width: 1920px) {
    body.kbg-ui-preview { --theme-container-width: min(1560px, calc(100vw - 40px)); }
}

/* ---------- 4. 顶部导航基础视觉 ----------
 * 现状确认：父主题目前没有独立的"顶部公告条"组件（真实检查过 header.php /
 * functions.php，wpcom_tougao_notice() 只是投稿成功后的一次性提示条，不是
 * 常驻公告条）——本阶段没有公告条可以改，如实说明，不虚构这个模块。
 * Sticky 本身父主题已经默认开启（.header-fixed），这里只做静态视觉：底色/
 * 阴影/字重/当前栏目高亮/轻微hover，不加滚动透明这类需要JS的效果（本阶段
 * 范围内没有请求这个，也没有引入额外JS）。 */
body.kbg-ui-preview header.header {
    background-color: var(--kbg-surface);
    box-shadow: 0 1px 8px rgba(18, 58, 112, .08);
}
body.kbg-ui-preview .nav.navbar-nav > li.menu-item > a {
    color: var(--kbg-text);
    transition: var(--kbg-transition);
    position: relative;
}
body.kbg-ui-preview .nav.navbar-nav > li.menu-item > a:hover {
    color: var(--kbg-accent);
}
body.kbg-ui-preview .nav.navbar-nav > li.menu-item.current-menu-item > a,
body.kbg-ui-preview .nav.navbar-nav > li.current_page_item > a {
    color: var(--kbg-primary);
    font-weight: 700;
}
/* 下划线高亮条只在父主题自己"横向导航"生效的断点（>=992px，真实核对过
   navbar-collapse/navbar-toggle 的切换点）内出现——手机/平板端导航是纵向
   折叠列表，绝对定位的下划线条放在纵向列表里会显示错位，所以不在小屏生效，
   小屏只保留文字变色，不做这个装饰。 */
@media (min-width: 992px) {
    body.kbg-ui-preview .nav.navbar-nav > li.menu-item.current-menu-item > a::after,
    body.kbg-ui-preview .nav.navbar-nav > li.current_page_item > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 2px;
        background: var(--kbg-gold);
        border-radius: 2px;
    }
}
/* 投稿按钮（wpcom_addpost_url 生成的 .publish 按钮）用橙色强调，其它逻辑不动 */
body.kbg-ui-preview .navbar-action .publish {
    background: var(--kbg-orange);
    border-color: var(--kbg-orange);
    border-radius: var(--kbg-radius-sm);
    transition: var(--kbg-transition);
}
body.kbg-ui-preview .navbar-action .publish:hover {
    filter: brightness(0.92);
}
/* 2026-07-22 修订：导航区适度加高（58~68px区间），跟阶段1一样是站点级规则
   （不限定.home），栏目页/文章页导航同步生效，保持全站一致。不改Logo比例——
   --logo-height 仍然是父主题自己的变量，这里没有覆盖它，img只受height控制，
   宽度始终 auto 跟随比例。 */
body.kbg-ui-preview header.header .navbar {
    min-height: 64px;
}

/* ---------- 5. Footer基础统一 ----------（只统一间距/颜色，不改任何链接/
   文案/结构） */
body.kbg-ui-preview .footer {
    background-color: var(--kbg-primary-dark);
    color: rgba(255, 255, 255, .82);
}
body.kbg-ui-preview .footer a {
    color: rgba(255, 255, 255, .82);
    transition: var(--kbg-transition);
}
body.kbg-ui-preview .footer a:hover {
    color: var(--kbg-gold);
}
body.kbg-ui-preview .footer .copyright {
    color: rgba(255, 255, 255, .55);
}