/* ==========================================================================
   polish.css — 2026-11-10 视觉美化层（叠加在 style.css + site.css 之后）
   约束：内容不变、版式骨架不变、绿/白/灰配色不变、仍为纯静态（零 JS / 零构建）。
   手法：只调排印节奏、留白、细边框、层次与交互反馈；不引入圆角/渐变/大投影/
        卡片化重排等会改变 2013 年观感的元素。
   可回退：删除各页 head 里的这一行 <link> 即恢复原样。
   ========================================================================== */

:root {
    --sp-green: #009542;        /* 品牌绿，保持原值 */
    --sp-green-deep: #00753a;   /* 同色相加深，仅用于文字/悬停/分隔 */
    --sp-green-tint: #eef7f1;   /* 同色相浅底，仅用于表头与斑马纹 */
    --sp-ink: #2f3a33;          /* 正文：比原 #333 略沉稳 */
    --sp-muted: #6b786f;        /* 次要文字 */
    --sp-line: #e3e9e5;         /* 细分隔线 */
    --sp-bg: #f4f6f4;           /* 页面底灰，仍为浅灰 */
}

::selection {
    background: var(--sp-green);
    color: #fff;
}

body {
    background-color: var(--sp-bg);
    color: var(--sp-ink);
    line-height: 1.75;          /* 原 1.65：正文更松，长段不再糊成一片 */
}

/* --------------------------------------------------------------------------
   1. 页头：多一点呼吸感 + 更明确的悬停反馈
   -------------------------------------------------------------------------- */
#pageheaderback {
    border-bottom: 1px solid var(--sp-line);
}

#pageheader {
    padding-top: 10px;
    padding-bottom: 10px;
}

#nav {
    font-size: 13px;
    line-height: 1.6;
    color: var(--sp-muted);
}

#nav a {
    color: #4a5a50;
    padding: 3px 1px;
    transition: color 0.18s ease;
}

#nav a:hover {
    color: var(--sp-green-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 导航已语义化为 nav > ul > li：分隔符由 CSS 生成，保持原有 " | " 观感，
   同时避免把分隔符当作可访问性内容读出来 */
#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    display: inline;
}

#nav li + li::before {
    content: "|";
    margin: 0 8px;
    color: #9aa8a0;
    font-weight: 400;
}

#nav a[aria-current="page"] {
    color: var(--sp-green-deep);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

a:focus-visible {
    outline-color: var(--sp-green-deep);
}

/* --------------------------------------------------------------------------
   2. 绿色首屏：标题层次、按钮反馈、配图留一道细白边
   -------------------------------------------------------------------------- */
#pagenav {
    padding: 8px 0;
}

/* 首屏绿色背景条：现代浏览器取 WebP。不支持 image-set()/type() 的浏览器
   会丢弃整条声明，自动回落到 style.css 里的 navback.jpg */
#pagenav {
    background-image: image-set(
        url("../images/navback.webp") type("image/webp"),
        url("../images/navback.jpg") type("image/jpeg")
    );
}

.pagenavleft {
    padding: 24px 26px;
}

h1.welcome,
.welcome {
    margin: 0 0 10px;
    font-size: 2em;
    line-height: 1.25;          /* 原 50px 固定行高 */
    letter-spacing: 0.01em;
}

.wel {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
}

.wel2 {
    margin-top: 16px;
    line-height: 1;             /* 原 50px 固定行高 */
}

.wel2 a {
    display: inline-block;
    transition: transform 0.2s ease;
}

.wel2 a:hover {
    transform: translateY(-2px);
}

.pagenavright img {
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   3. 白色内容面板：给一条细边框和极轻的浮起感，正文留白加大
   -------------------------------------------------------------------------- */
#pagecontent {
    border: 1px solid var(--sp-line);
    border-top: 0;
    box-shadow: 0 4px 18px rgba(16, 60, 40, 0.05);
    padding-bottom: 28px;
}

.homecontent {
    padding: 28px 32px;
    line-height: 1.85;
}

.homecontent p {
    margin: 0 0 1.15em;
}

.pagecontentcontent {
    padding: 18px 24px;
    border-right: 1px solid #e9eeea;
    line-height: 1.8;
}

.pagecontentcontent p {
    margin: 0 0 1.05em;
}

/* .pagecontentlink 的样式统一放在第 4 节（侧栏导航重设计） */

.pageline {
    line-height: 1.75;
}

.pagenavi {
    margin: 0 0 18px;
    padding-left: 0;
    font-size: 12px;
    color: var(--sp-muted);
}

.pagenavi a {
    color: var(--sp-green-deep);
}

/* 面包屑统一：当前页为不可点文本，与可点层级形成层次 */
.pagenavi a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pagenavi span[aria-current="page"] {
    color: var(--sp-muted);
    font-weight: 600;
}

/* 页内标题：保留黑色，只在下方加一道品牌绿细线建立层次 */
h1.pagetitle,
.pagetitle {
    margin: 0 0 16px;
    padding: 0 0 10px;
    font-size: 1.55em;
    line-height: 1.35;
    color: #1f2a23;
    border-bottom: 2px solid var(--sp-green);
}

.homecontent a:hover,
.pagecontentcontent a:hover {
    color: var(--sp-green-deep);
}

/* --------------------------------------------------------------------------
   4. 侧栏导航重设计：白底细边框分组菜单（替代 2013 年实心绿砖墙）
   品牌绿只用于顶条、引导线、hover 与当前项；层级靠缩进 + 浅底表达，
   不再靠两种饱和绿和 &nbsp; 硬凑。零 JS、零构建、可见正文不变。
   -------------------------------------------------------------------------- */
.pagecontentlink {
    box-sizing: border-box;
    width: min(285px, 100%);
    padding: 0;
    background: #fff;
    border: 1px solid var(--sp-line);
    border-top: 3px solid var(--sp-green);
    box-shadow: 0 1px 3px rgba(31, 60, 42, 0.07);
    overflow: hidden;
}

/* 侧栏里原本只有一个 &nbsp; 的空占位块，不再占一行 */
.pagecontentlink > .pagenavi {
    display: none;
}

.linkdiv,
.linkdivsub,
.linkdivover,
.linkdivoversub {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    line-height: 1.5;
    padding: 10px 15px;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #edf2ef;
    font-size: 13px;
    overflow: visible;          /* 原 overflow:hidden 会截断长的水泥规格名 */
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.linkdiv a,
.linkdivsub a,
.linkdivover a,
.linkdivoversub a {
    display: block;
    color: var(--sp-ink);
    text-decoration: none;
}

/* 一级项：右侧细箭头，hover 才转品牌绿并轻微右移 */
.linkdiv a::after,
.linkdivover a::after {
    content: "\203A";           /* › */
    float: right;
    margin-left: 8px;
    color: #b3c4b9;
    font-size: 16px;
    line-height: 1.15;
    transition: color 0.18s ease, transform 0.18s ease;
}

/* 二级项：内缩成一块浅绿子列表，左侧 2px 引导竖线 + 小圆点 */
.linkdivsub,
.linkdivoversub {
    width: auto;
    margin: 0 10px 0 16px;
    padding: 7px 8px 7px 13px;
    background: var(--sp-green-tint);
    border-bottom: 1px solid #e0eee5;
    border-left: 2px solid #bcdcc7;
    font-size: 12px;
}

.linkdivsub a::before,
.linkdivoversub a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: var(--sp-green);
    opacity: 0.5;
    vertical-align: middle;
}

/* 子列表与上下一级项之间留一点呼吸，形成「内嵌一块」的层次 */
.linkdiv + .linkdivsub,
.linkdivover + .linkdivsub {
    margin-top: 7px;
}

.linkdivsub + .linkdiv,
.linkdivsub + .linkdivover {
    margin-top: 7px;
}

/* 有二级项的侧栏：首项作为分组标题行（仍是链接，可点回栏目首页） */
.pagecontentlink.has-subnav > .pagenavi + .linkdiv {
    background: #f7faf8;
    border-bottom: 1px solid var(--sp-line);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pagecontentlink.has-subnav > .pagenavi + .linkdiv a {
    color: var(--sp-green-deep);
}

.pagecontentlink.has-subnav > .pagenavi + .linkdiv.is-current {
    background: var(--sp-green-tint);
}

/* 当前页：浅绿底 + 左侧品牌绿竖条 + 绿字加粗 */
.linkdiv.is-current,
.linkdivsub.is-current,
.linkdivover.is-current,
.linkdivoversub.is-current {
    background: #e4f2e9;
    box-shadow: inset 3px 0 0 var(--sp-green);
}

.linkdivsub.is-current,
.linkdivoversub.is-current {
    background: #cde8d9;
}

.linkdiv.is-current a::after,
.linkdivover.is-current a::after {
    color: var(--sp-green);
}

.linkdiv.is-current a,
.linkdivsub.is-current a,
.linkdivover.is-current a,
.linkdivoversub.is-current a {
    color: var(--sp-green-deep);
    font-weight: 700;
}

.linkdivsub.is-current a::before,
.linkdivoversub.is-current a::before {
    opacity: 1;
}

/* 悬停：浅绿底 + 左侧竖条（特异度与 site.css 的旧 hover 持平，靠后加载覆盖） */
.linkdiv:hover,
.linkdivover:hover,
.linkdiv.linkdivsub:hover {
    background: #f3faf6;
    box-shadow: inset 3px 0 0 var(--sp-green);
}

.linkdiv:hover a,
.linkdivover:hover a {
    color: var(--sp-green-deep);
}

.linkdiv:hover a::after,
.linkdivover:hover a::after {
    color: var(--sp-green);
    transform: translateX(2px);
}

.linkdivsub:hover,
.linkdivoversub:hover {
    background: #e4f2e9;
    box-shadow: inset 2px 0 0 var(--sp-green);
}

.linkdivsub:hover a,
.linkdivoversub:hover a {
    color: var(--sp-green-deep);
}

/* --------------------------------------------------------------------------
   5. 技术参数表：表头区分、斑马纹、行悬停、单元格留白
      原表靠 cellspacing=1 + 灰底做网格，这里保留该结构，只改单元格观感
   -------------------------------------------------------------------------- */
#tectable {
    font-size: 12.5px;
    line-height: 1.55;
}

#tectable td {
    padding: 5px 6px;           /* 只多给纵向呼吸，横向留窄以免 20% 列折行 */
    background-color: #fff;
    vertical-align: top;
}

#tectable tr:nth-child(even) td {
    background-color: #f7faf8;
}

#tectable tr:hover td {
    background-color: var(--sp-green-tint);
}

#tectable tr:first-child td {
    background-color: #e4f2e9;
    color: #155c34;
    font-weight: 700;
    font-size: 11.5px;
    white-space: nowrap;
}

/* 表内分组行（Chemical Analysis / Physical Properties 等） */
#tectable tr td[colspan] {
    background-color: #f0f6f2 !important;
    color: #2f5c40;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. 产品图卡：细边框 + 悬停响应，标题字重提升
   -------------------------------------------------------------------------- */
.productdiv {
    margin-bottom: 16px;
}

.productdiv img {
    border: 1px solid var(--sp-line);
    padding: 3px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.productdiv a:hover img {
    border-color: var(--sp-green);
}

.productdiv > div:last-child {
    margin-top: 8px;
    font-size: 13px;
}

.productdiv a {
    color: #3c4a41;
}

/* --------------------------------------------------------------------------
   7. 页脚：加一点上下空间与深色压边，版权信息更易读
   -------------------------------------------------------------------------- */
#footer {
    padding: 14px 0 18px;
    border-top: 3px solid var(--sp-green-deep);
}

#footer p {
    padding: 0 24px;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   8. 窄屏微调 & 无障碍
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    #pageheader {
        padding: 8px 0;
    }

    .pagenavleft {
        padding: 20px;
    }
}

@media (max-width: 560px) {
    .homecontent {
        padding: 20px 16px;
    }

    .pagecontentcontent,
    .pagecontentlink {
        padding: 16px;
    }

    #footer p {
        padding: 0 14px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   9. 首屏 hero 高度统一（对齐首页 219px）
   各页横幅图原始高度 131~252px 不等，flex 容器被撑成 200~258px。
   固定容器高度，图片按原比例等比缩放并限制最大高度 145px（不拉伸、不裁切，
   白边框贴合图片本身），在绿色区内居中；较矮的横幅四周留白露出 navback 纹理。
   -------------------------------------------------------------------------- */
#pagenavback {
    height: 219px;
    min-height: 0;
}

#pagenav {
    height: 100%;
    min-height: 0;
}

.pagenavright {
    padding: 15px 20px;
}

.pagenavright img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 145px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   10. Product 页产品网格：2 行 x 3 列，图片统一 4:3
   原 .productdiv 为 float + 230px 定宽，6 张图原始高度 150~202px 不等，
   float 遇到高卡片会卡住，实际错位成 2 列 4 行。改 CSS Grid 行列严格对齐。
   -------------------------------------------------------------------------- */
.productgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 12px;
    padding-left: 0;
}

.productgrid picture {
    display: block;
}

.productgrid .productdiv {
    float: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.productgrid .productdiv img {
    display: block;
    box-sizing: border-box; /* 原有 3px padding + 1px border，content-box 会撑破列宽 */
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.productgrid .productdiv > div:last-child {
    margin-top: auto;
    padding-top: 8px;
}

@media (max-width: 820px) {
    /* 窄屏 hero 上下堆叠，固定高度会溢出，恢复自适应 */
    #pagenavback {
        height: auto;
        min-height: 200px;
    }

    #pagenav {
        height: auto;
    }

    .pagenavright img {
        max-height: 130px;
    }

    .productgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .pagenavright img {
        max-height: 110px;
    }

    .productgrid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   11. Cement 页水泥产品网格：同样 2 行 x 3 列，但图片是 2:3 竖版包装袋
   复用 .productgrid 的网格与卡片骨架，只替换图片框比例。
   用 object-fit: contain 而非 cover —— 袋身印有规格文字，裁切会切掉文字；
   图片本身是浅色底，contain 的留白与底色融合，看不出边框内的空隙。
   -------------------------------------------------------------------------- */
.productgrid.productgrid-portrait .productdiv img {
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

/* 标题长短不一（1~2 行），统一到两行高度，保证 6 张卡片等高、标题起点一致 */
.productgrid.productgrid-portrait .productdiv > div:last-child {
    min-height: 3.5em;
}

@media (max-width: 820px) {
    /* 列宽变大后竖版图按 2:3 会过高（>440px），限制宽度并居中 */
    .productgrid.productgrid-portrait .productdiv img {
        max-width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --------------------------------------------------------------------------
   12. 侧栏重设计的窄屏补充（置于文件末尾，覆盖第 8 节的旧 padding 规则）
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    /* site.css 已令侧栏 float:none；这里让新卡片铺满内容区宽度 */
    .pagecontentlink {
        width: 100%;
    }

    /* 全宽侧栏里子列表内缩多一点，层级才看得出来 */
    .linkdivsub,
    .linkdivoversub {
        margin-left: 24px;
        margin-right: 24px;
    }
}

@media (max-width: 560px) {
    /* 第 8 节曾给 .pagecontentlink 加 16px padding，会破坏全宽列表 */
    .pagecontentlink {
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   13. 全幅栏目 hero 主视觉（2026-11-10）
       8 个主栏目各一张绿色主视觉，铺满整条绿色区；子栏目沿用所属主栏目的图。
       纯 CSS：image-set 取 WebP/JPG，多重背景叠一层薄绿统一色调；1000px 内容
       容器叠左侧深绿渐变，右端 alpha=0 与两侧图无缝衔接，白字在任何图上都清晰。
       零 JS、零构建、不改 style.css / site.css、旧 banner DOM 保留仅隐藏。
       可回退：删掉本节，即恢复第 2/9 节的 navback 纯绿首屏。
   -------------------------------------------------------------------------- */
#pagenavback {
    /* 默认兜底图；下面 8 个栏目 class 各自覆盖 --sp-hero */
    --sp-hero: image-set(
        url("../images/hero/hero-home.webp") type("image/webp"),
        url("../images/hero/hero-home.jpg") type("image/jpeg")
    );
    background-color: #006b32;      /* 图未加载 / 不支持 image-set 时的兜底绿 */
    background-image:
        linear-gradient(rgba(0, 105, 55, 0.12), rgba(0, 105, 55, 0.12)),
        var(--sp-hero);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#pagenavback.hero-home {
    --sp-hero: image-set(
        url("../images/hero/hero-home.webp") type("image/webp"),
        url("../images/hero/hero-home.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-about {
    --sp-hero: image-set(
        url("../images/hero/hero-about.webp") type("image/webp"),
        url("../images/hero/hero-about.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-product {
    --sp-hero: image-set(
        url("../images/hero/hero-product.webp") type("image/webp"),
        url("../images/hero/hero-product.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-quality {
    --sp-hero: image-set(
        url("../images/hero/hero-quality.webp") type("image/webp"),
        url("../images/hero/hero-quality.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-quarry {
    --sp-hero: image-set(
        url("../images/hero/hero-quarry.webp") type("image/webp"),
        url("../images/hero/hero-quarry.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-environmental {
    --sp-hero: image-set(
        url("../images/hero/hero-environmental.webp") type("image/webp"),
        url("../images/hero/hero-environmental.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-careers {
    --sp-hero: image-set(
        url("../images/hero/hero-careers.webp") type("image/webp"),
        url("../images/hero/hero-careers.jpg") type("image/jpeg")
    );
}

#pagenavback.hero-contact {
    --sp-hero: image-set(
        url("../images/hero/hero-contact.webp") type("image/webp"),
        url("../images/hero/hero-contact.jpg") type("image/jpeg")
    );
}

/* 内容容器透明，只叠左侧深绿渐变；图片在 #pagenavback 上连续铺满整条 */
#pagenav {
    background-color: transparent;
    background-image: linear-gradient(90deg,
        rgba(0, 52, 28, 0.90) 0%,
        rgba(0, 86, 44, 0.66) 42%,
        rgba(0, 110, 58, 0.10) 82%,
        rgba(0, 120, 62, 0) 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 主视觉已铺满整条，右侧旧的小 banner 图不再需要 */
.pagenavright {
    display: none;
}

.pagenavleft {
    padding: 24px 30px;
}

/* 新增副标题：标题与副标题之间一道短横线建立层次 */
.herosub {
    margin: 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 30, 15, 0.5);
}

.herosub::before {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin: 0 0 10px;
    background: rgba(255, 255, 255, 0.75);
}

.pagenavleft .wel2 {
    margin-top: 18px;
}

@media (max-width: 820px) {
    /* 窄屏按高度裁切，主体偏右，背景焦点略右移 */
    #pagenavback {
        background-position: 62% center;
    }

    /* 单列时整块都压深绿，保证白字对比度 */
    #pagenav {
        background-image: linear-gradient(90deg,
            rgba(0, 52, 28, 0.92) 0%,
            rgba(0, 86, 44, 0.78) 55%,
            rgba(0, 110, 58, 0.38) 100%);
    }

    .pagenavleft {
        padding: 20px;
    }

    .herosub {
        max-width: none;
        font-size: 13.5px;
    }
}

/* --------------------------------------------------------------------------
   14. 页脚版权信息收进 1000px 主显示区、贴右且无间距（2026-11-10）
       site.css 把 #footer 改成全宽绿条后，#footer p 也变成全宽，文字虽然
       text-align:right，右边缘却贴到屏幕最右（1280 视口下 1256px），脱离了
       #pagecontent 的 140~1140px 主显示区。
       绿条仍保持全宽（不改现有风格），文字容器与主显示区同宽并居中；
       padding 归零，让版权文字右边缘正好落在 1140px，不再留 24px / 14px 空隙。
       需显式覆盖第 7 节的 24px、site.css 的 16px 与第 8 节窄屏的 14px / 居中。
       可回退：删掉本节即恢复第 7/8 节的全宽页脚文字。
   -------------------------------------------------------------------------- */
#footer p {
    box-sizing: border-box;
    width: min(1000px, 100% - 24px);
    margin: 0 auto;
    padding: 0;
    text-align: right;
}

@media (max-width: 820px) {
    /* 覆盖第 8 节的窄屏居中与 14px 内边距，保持贴右、无间距 */
    #footer p {
        padding: 0;
        text-align: right;
    }
}

/* --------------------------------------------------------------------------
   15. 无子栏目的页面不显示二级导航栏（2026-11-10）
       Careers / Contact / Environmental 三页的侧栏原本只有一个 &nbsp; 占位，
       第 4 节美化后会残留 3px 绿顶条 + 1px 边框，看起来像一条空导航栏；
       Quarry 本就没有侧栏。这里隐藏任何不含链接的侧栏，并去掉两栏布局
       残留的右侧 1px 分隔线，让这些页面呈干净的单栏（正文宽度仍为 700px）。
       三个空 <nav> 已从 HTML 删除；:has() 只作兜底，现代浏览器全支持。
       可回退：删掉本节即恢复竖线；空导航需同时恢复 HTML。
   -------------------------------------------------------------------------- */
.pagecontentlink:not(:has(a)) {
    display: none;
}

#pagecontent:not(:has(.pagecontentlink a)) .pagecontentcontent {
    border-right: 0;
}