/* ===== CSS自定义变量定义 ===== */
/* 定义网站的全局设计令牌，包括布局比例和主题色彩配置 */
/* 这些变量可以在整个样式表中重复使用，便于维护和主题定制 */
:root {
   /* 页面布局比例配置 - 控制不同页面的图片显示比例和定位 */
   --ratio: 5/1,50% 50%;                        /* 默认布局比例：5:1宽高比，50%水平和垂直居中定位 */
   --ratio-00: auto,center;                     /* 首页比例：自动宽高比，居中对齐 */
   --ratio-01_children: auto,center;            /* 关于我们子页面：自动宽高比，居中对齐 */
   --ratio-02_children: 5/1,center;             /* 服务范围子页面：5:1宽高比，居中对齐 */

   /* Bulma框架主题色彩配置（HSL色彩模式）- 定义网站的主色调 */
   --bulma-primary-h: 201deg;                   /* 主色调色相：201度（蓝色系），确定基础色调 */
   --bulma-primary-s: 85%;                      /* 主色调饱和度：85%，控制颜色的鲜艳程度 */
   --bulma-primary-l: 45%;                      /* 主色调亮度：45%，控制颜色的明暗程度 */
}



/* ===== 主要内容区域样式 ===== */
/* 定义网站主要内容区域的排版和布局规范 */

/* 主内容区域h3标题中的小字样式 - 用于标题的副标题或补充说明 */
main h3 small{
   font-weight: normal;                         /* 字体粗细：正常，与主标题形成对比 */
   font-style: italic;                          /* 字体样式：斜体，突出其辅助性质 */
   font-size: 0.7em;                           /* 字体大小：0.7倍，相对于父元素更小 */
}

/* 主内容区域强调文本样式 - 重新定义em标签的显示效果 */
main em{
   font-style: normal;                          /* 字体样式：正常，取消默认的斜体效果 */
   text-decoration: underline;                  /* 文本装饰：下划线，用下划线代替斜体来表示强调 */
}

/* 主内容区域布局 - 重置主要内容区域的默认样式 */
main{
   padding: 0;                                  /* 内边距：0，移除默认内边距，由子元素控制间距 */
}

/* 组件区域样式 - 为页面组件区域添加顶部间距 */
section#component{
   margin-top: 2rem;                            /* 上外边距：2rem，与上方内容保持适当距离 */
}




/* ===== 内容标题和卡片样式 ===== */
/* 内容标题样式 */
.content_title{
   text-align: center;                          /* 文本对齐：居中 */
   font-weight: 500;                            /* 字体粗细：中等粗体 */
   padding: 1rem 0;                             /* 内边距：上下1rem，左右0 */
}

/* 卡片内容区域h5标题样式 */
.card .card-content h5{
   font-size: 1.2rem;                           /* 字体大小：1.2rem */
}

/* ===== 头部区域和导航样式 ===== */
/* 网站头部区域的整体布局和视觉设计 */

/* 头部区域样式 - 包含Logo和认证标识的头部容器 */
#head{   
   padding: 0.8rem 0;                           /* 内边距：上下0.8rem，为头部内容提供垂直间距 */
   margin: 0.7rem 0;                            /* 外边距：上下0.7rem，与相邻元素保持距离 */
   background: url("../pic/cmacnas.png") no-repeat 68% top;  /* 背景图片：CNAS认证标识，68%水平位置，顶部对齐 */
   background-size: auto 5.5rem;               /* 背景尺寸：宽度自动适应，高度固定5.5rem */
}

/* 头部导航区域样式 - 主导航菜单的容器样式 */
#headNavi{
   padding-left: 1rem;                          /* 左内边距：1rem，为导航菜单提供左侧间距 */
}

/* 导航品牌Logo样式 - 控制网站Logo的尺寸和显示效果 */
.navbar-brand .navbar-item #logo{
   width: 5.5rem;                               /* 宽度：5.5rem，固定Logo宽度 */
   height: auto;                                /* 高度：自动，保持Logo原始比例 */
   max-height: 3.5rem;                         /* 最大高度：3.5rem，限制Logo的最大显示高度 */
}

/* ===== 页面布局区域样式 ===== */
/* 定义页面各个功能区域的布局和间距规范 */

/* 位置导航区域样式 - 面包屑导航的容器样式 */
#position {
   margin:1rem 0;                               /* 外边距：上下1rem，为面包屑导航提供适当的垂直间距 */
}

/* 说明文档区域样式 - 页面说明内容的容器样式 */
#readme {
   margin:2rem 0;                               /* 外边距：上下2rem，为说明文档提供较大的垂直间距 */
}

/* 页脚区域样式 - 网站底部区域的整体样式 */
#footer {
   margin-top: 2rem;                            /* 上外边距：2rem，与主要内容区域保持距离 */
}

/* 页脚版权信息样式 - 版权声明文本的样式设置 */
#footer #copyright {
   margin:1rem 0;                               /* 外边距：上下1rem，为版权信息提供适当间距 */
}



/* ===== 特定功能区域样式 ===== */
/* 针对特定页面和功能模块的专用样式定义 */

/* 文化页面奇数项图片排序 - 实现图文交替布局效果 */
#culture .article-item:nth-of-type(odd) figure {   
   order: 1;                                    /* Flexbox排序：1，调整奇数项图片位置，实现左右交替布局 */
}

/* 报告查询结果区域样式 - 查询结果显示的样式设置 */
/* 报告结果中的强调文本样式 */
#rptResult strong{
   margin: 0 0.3rem;                            /* 外边距：左右0.3rem，为强调文本添加适当间距 */
}

/* 报告结果表格整体样式 */
#rptResult table {
   font-size: 0.9em;                            /* 字体大小：0.9倍，使表格内容更紧凑 */
}

/* 报告结果表格表头样式 */
#rptResult table th {
   white-space: nowrap;                         /* 空白处理：不换行，保持表头文本在一行显示 */
   width: fit-content;                          /* 宽度：适应内容，根据文本长度自动调整 */
}

/* 报告结果表格顶部间距 */
#rptResult table{
   margin-top: 1rem;                            /* 上外边距：1rem，与上方内容保持距离 */
}

/* ===== 首页特定样式 ===== */
/* 首页专用的样式设置，用于定制首页的特殊显示效果 */

/* 隐藏首页的位置导航 - 首页不需要显示面包屑导航 */
body.home #position{
   display: none;                               /* 显示：隐藏，在首页隐藏位置导航元素 */
}

/* ===== 主容器样式 ===== */
/* 页面主要内容容器的布局样式设置 */

/* 主容器布局 - 控制整体页面内容的最大宽度和居中对齐 */
#container{
   max-width: 1200px;                          /* 最大宽度：1200px，限制内容区域的最大显示宽度 */
   margin: 0 auto;                             /* 外边距：上下0，左右自动居中，实现水平居中布局 */
}

/* ===== 联系页面样式 ===== */
/* 联系我们页面的专用样式设置 */

/* 联系页面英文公司名和地址样式 - 英文信息的显示格式 */
.contact .company_en, .contact .addr_en {
   list-style-type: none;                       /* 列表样式：无，移除默认的列表标记 */
   font-style: italic;                          /* 字体样式：斜体，区分于中文信息的显示 */
}

/* ===== 页脚导航样式 ===== */
/* 网站底部导航区域的样式设置 */

/* 页脚查询导航项：隐藏 - 在页脚区域隐藏查询功能入口 */
#footer .navbar-item.query {
   display: none;                               /* 显示：隐藏，在页脚隐藏查询导航项 */
}

/* 页脚导航项样式 - 页脚导航链接的基础样式 */
#footer .navbar-item {
   border-bottom-width: 0;                      /* 下边框宽度：0，移除导航项的下边框线 */
}

/* ===== 响应式设计：平板和手机端样式 ===== */
/* 针对不同屏幕尺寸的适配样式，确保在各种设备上的良好显示效果 */

/* 平板端样式 - 适配中等屏幕尺寸设备（1024px以下） */
@media screen and (max-width: 1023px) {
   /* 小屏幕下的头部区域调整 - 减少头部区域占用空间 */
   #head{   
      padding: 0.5rem 0;                        /* 内边距：上下0.5rem，左右0，减少垂直间距 */
      margin-bottom: 0.5rem;                    /* 下外边距：0.5rem，与下方内容保持适当距离 */
      background-size: auto 4rem;               /* 背景尺寸：宽度自动，高度4rem，缩小认证标识 */
   }
   
   /* 小屏幕下的导航品牌项调整 - 优化Logo区域的间距 */
   .navbar-brand .navbar-item{
      padding:0 ;                                /* 内边距：0，移除多余间距以节省空间 */
   }
   
   /* 小屏幕下的页脚导航项调整 - 压缩页脚导航项间距 */
   #footer .navbar-item {
      padding-left:0.4rem;                      /* 左内边距：0.4rem，减少水平间距 */
      padding-right:0.4rem;                     /* 右内边距：0.4rem，保持对称布局 */
   }
   
   /* 小屏幕下隐藏头部导航查询项 - 在小屏幕上隐藏查询功能以节省空间 */
   #headNavi .navbar-item.query {
      display: none;                             /* 显示：隐藏，在平板端隐藏查询导航项 */
   }
   
   /* 小屏幕下的主容器调整 - 为小屏幕设备添加适当的内边距 */
   #container{
      padding: 1rem;                             /* 内边距：1rem，为内容提供统一的边距 */
   }
}