/* ====================== 3.导航组件 nav-page-container / navbar 主导航栏（支持MD预览） ====================== */
/* padding和 border都算在 width 里面，不会撑出去 */
* {
    box-sizing: border-box;
}

/* 页面级导航容器：用于整体居中、限制最大宽度 */
.nav-page-container {
    width: 960px;          /* 固定宽度，适配传统桌面布局 */
    margin: 0 auto;        /* 上下外边距为0，左右自动（实现水平居中） */
}

/* 导航栏主体样式 */
.navbar {
    width: 100%;          /* 与容器同宽，保证对齐 */
    min-height: 100px;     /* 最小高度，防止内容过少时过矮 */
    background-color: #3a2610; /* 深棕色背景，适合咖啡/复古风格 */

    display: flex;         /* 使用 Flex 布局 */
    align-items: center;   /* 子元素在垂直方向居中 */
    justify-content: space-between; /* 左右两端对齐（logo 在左，菜单在右） */

    padding: 5px 5px;    /* 上下内边距12px，左右20px，避免内容贴边 */
   /* box-shadow: 0 2px 4px rgba(0,0,0,0.25);  底部轻微阴影，增加层次感 */
    /*  gap: 8px;             子元素之间的间距（Flex 布局生效） */
}
/* ======================
   网站标题 & 导航栏元素
   ====================== */

/* 网站标题容器 */
.site-title {
    color: #FFFFFF;     /* 标题文字颜色：白色 */
    flex-shrink: 0;     /* 防止在空间不足时被压缩 */
}
/* 网站主标题文字 */
.site-title h1 {
    font-size: 28px;            /* 字号 */
    font-weight: bold;          /* 加粗 */
    letter-spacing: 1px;        /* 字间距，提升可读性 */
    white-space: nowrap;        /* 禁止换行，保持单行 */
}

/* 导航栏中的图片（如 logo） */
.navbar img {
    flex-shrink: 0;     /* 保证 logo 不被挤压变形 */
}

/* 网站标题中的辅助链接（如：首页 / 返回） */
.site-title a {
    font-size: 16px;
    font-weight: normal;
    margin-left: 12px;          /* 与主标题保持间距 */
    text-decoration: underline; /* 下划线 */
    color: #ffdd00;            /* 金黄色，醒目 */
}

/* ======================
   导航分割线
   ====================== */

/* 导航栏下方的浅色分割线 */
.nav-divider {
    width: 960px;              /* 固定宽度 */
    margin: 0 auto;            /* 居中 */
    height: 1px;               /* 细线 */
    background-color: rgba(255,255,255,0.22); /* 半透明白色 */
}

/* ======================
   8. iframe 容器组件
   ====================== */

/* iframe 外层容器 */
.iframe-wrap {
    width: 960px;               /* ⚠️ 这里重复定义了 width */
  /*  max-width: 960px;           ✅ 建议用 max-width 控制最大宽度 */
    margin: 0 auto;            /* 居中 */
}

/* 主 iframe 框架 */
#main-frame {
    width: 960px;		 /* 原来是100% */
    border: none;              /* 去除默认边框 */
    min-height: calc(100vh - 160px); /* 至少占满视口高度（减去头部/底部） */
    background: #222;          /* 深色背景 */
}

/* 内容 iframe（如顶部/底部嵌套页） */
#content {
    display: block;
    width: 100%;
    height: 125px;             /* 固定高度 */
    border: none;
    margin: 0;
    overflow: hidden;          /* 隐藏溢出内容 */
}

/* ======================
   14. 标签页导航


/* 标签页容器 */
.nav-tabs {
    display: flex;             /* Flex 布局 */
    align-items: center;       /* 垂直居中 */
    gap: 4px;                  /* 标签之间间距 */
    padding: 6px 12px;         /* 内边距 */
    background: #3b1200;       /* 深红棕色背景 */
}

/*   ====================== 
   16. 通用辅助工具类
   ====================== */



/* Markdown 页面内的导航链接 */
.md-nav-link {
    font-size: 16px;
    color: #ffdd00;
    text-decoration: underline;
    cursor: pointer;
    margin: 0 12px;
}

.md-nav-link:hover {
    color: #fff280;
}

/* Markdown 主内容区域 */
.md-main-wrap {
    margin-top: 100px;         /* 避开顶部导航 */
    height: calc(100% - 100px);
    overflow-y: auto;          /* 垂直滚动 */
    scroll-padding-top: 110px; /* 滚动锚点偏移 */
}

/* 给所有带 id 的元素设置滚动偏移 */
#markdownContent [id] {
    scroll-margin-top: 110px;
}

/* Markdown 内容主体 */
#markdownContent {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    background-color: #37383a; /* 深灰背景 */
    color: #eeeeee;            /* 浅色文字 */
    border-radius: 6px;        /* 圆角 */
}