/* ==========================================================================
   site.css — 2026-11-09 优化层（叠加在 style.css 之上，不改动原规则）
   目标：移动端可用（viewport 已在各页 head 添加）、去 jQuery 悬停、
        图片自适应、内容表格可横向滚动。桌面端观感与原版一致。
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 14px;
    line-height: 1.65;
}

img {
    max-width: 100%;
    height: auto;
}

a:focus-visible {
    outline: 2px solid #009542;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   页头：2026-11-09 起各页面已将页头表格改为 .headerlogo + #nav 两个 div，
   #pageheader 直接作 flex 容器（logo 左、导航右、底端对齐）。
   历史教训：flex 放 <table> 上时唯一 flex 项是整个 tr；display:block 又会触发
   匿名表格修复把 tr 包进收缩宽度的表格 —— 两条路都走不通，只能改标记。
   -------------------------------------------------------------------------- */
#pageheader {
    width: min(1000px, 100% - 24px);
    box-sizing: border-box;
    display: flex;
    align-items: flex-end; /* 与 logo 底端对齐（原版表格 valign="bottom" 的效果） */
    gap: 12px;
}

.headerlogo {
    flex: 0 0 160px;
}

.headerlogo img {
    display: block;
}

#nav {
    margin-left: auto; /* 导航始终贴右 */
    text-align: right;
    line-height: 1.9;
}

/* --------------------------------------------------------------------------
   首屏横幅（绿色区）：高度自适应，右侧图片不溢出
   -------------------------------------------------------------------------- */
#pagenavback {
    height: auto;
    min-height: 200px;
}

#pagenav {
    width: min(1000px, 100% - 24px);
    height: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-size: cover;
    background-position: center;
}

.pagenavleft {
    float: none;
    box-sizing: border-box;
    flex: 1 1 280px;
    padding: 20px;
}

.pagenavright {
    float: none;
    box-sizing: border-box;
    flex: 1 1 320px;
    padding: 15px 20px;
    text-align: center;
}

.pagenavright img {
    display: block;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   正文与侧栏
   -------------------------------------------------------------------------- */
#pagecontent {
    width: min(1000px, 100% - 24px);
    box-sizing: border-box;
}

.pagecontentcontent {
    box-sizing: border-box;
    width: min(700px, 100%);
    padding: 10px 16px;
}

.pagecontentlink {
    box-sizing: border-box;
    width: min(285px, 100%);
    padding: 5px 16px 5px 8px;
}

.homecontent {
    box-sizing: border-box;
    width: auto;
    max-width: 950px;
    padding: 20px 16px;
}

h1.pagetitle {
    margin: 0 0 6px;
    font-size: 1.4em;
    line-height: 1.4;
}

h1.welcome {
    margin: 0;
    font-size: 1.8em;
    line-height: 50px;
    font-weight: bold;
}

#footer {
    width: 100%;
    height: auto;
}

#footer p {
    padding-right: 16px;
}

/* --------------------------------------------------------------------------
   替代 jQuery LinkOver/LinkOut 的纯 CSS 悬停（配色与原 JS 交换后的类一致）
   -------------------------------------------------------------------------- */
.linkdiv:hover {
    background-color: #006600;
}

.linkdivsub:hover,
.linkdiv.linkdivsub:hover {
    background-color: #009542;
}

/* --------------------------------------------------------------------------
   响应式：≤820px 收为单列
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    #pageheader {
        flex-direction: column;
        align-items: center;
        padding: 8px 0;
    }

    /* 单列时取消桌面端的「贴右」，否则 auto 外边距会把导航顶到右边 */
    #nav {
        margin-left: 0;
        text-align: center;
        line-height: 1.9;
    }

    /* 列方向下 flex-basis 会变成高度基准，160px 会在 logo 下撑出空白 */
    .headerlogo {
        flex: none;
    }

    #pagenav {
        flex-direction: column;
    }

    /* 列方向下 flex-basis 会变成高度基准，改回 auto 由内容决定 */
    .pagenavleft,
    .pagenavright {
        flex-basis: auto;
    }

    .pagecontentcontent,
    .pagecontentlink {
        float: none;
        width: 100%;
        border-right: 0;
    }

    .productdiv {
        width: 46%;
        margin-right: 2%;
    }

    .framediv {
        width: 46%;
        margin-right: 2%;
    }

    .bannerdiv {
        width: 100%;
        float: none;
    }

    /* 内容规格表：窄屏下横向滚动，避免撑破布局 */
    .pagecontentcontent table,
    .pagecontentlink table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .productdiv,
    .framediv {
        width: 100%;
        margin-right: 0;
    }

    .frametitle,
    .frameline {
        padding-left: 12px;
    }
}