/* ================================================
   公共移动端响应式样式
   - 顶部导航（include/header.html）
   - 页脚（include/footer.html / include/footer-index.html）
   - 全局图片防溢出 / 表单触控优化
   断点：仅 @media only screen and (max-width: 767px)
   引入位置：include/public-meta.html（全站生效）
   ================================================ */

/* 移动端专属 UI：PC 端默认全部隐藏（非媒体查询内，全局生效） */
.nav-toggle,
.nav-header,
.nav-arrow,
.nav-close,
.nav-overlay {
    display: none;
}

@media only screen and (max-width: 767px) {

    /* ---------- 全局基础 ---------- */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 全局图片防横向溢出（页面内有更高优先级的固定尺寸样式可覆盖） */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ---------- 顶部导航（公共 header.html） ---------- */
    /* z-index 高于遮罩层(1000)：保证抽屉菜单与汉堡按钮始终可点
       !important 防止各内页 PC CSS（如 products.css / products-item.css
       的 header { z-index:1000 }）因引入顺序靠后而覆盖，导致遮罩盖住抽屉菜单 */
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1002 !important;
        height: 60px !important;
        padding: 0 16px !important;
    }
    /* 覆盖首页 index.css 的 z-index:1000 */
    header.common-header {
        z-index: 1002 !important;
    }

    /* 汉堡按钮：触控目标 ≥44px（覆盖首页 index.css 同名规则，全站统一） */
    header .nav-toggle,
    header.common-header .nav-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        z-index: 1001;
        box-sizing: border-box;
    }

    .nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #333;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        box-sizing: border-box;
    }

    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Logo 缩放，保持比例不变形 */
    header .logo-area {
        padding-left: 0 !important;
        gap: 0;
        flex-shrink: 0;
    }

    header .logo-area img,
    header .fake-logo img {
        height: 40px !important;
        width: auto !important;
        max-height: 40px !important;
        max-width: 160px !important;
    }

    /* ================================================
       顶部导航（公共 header.html / 首页 index.htm 独立 header 通用）
       - 抽屉式菜单 + 手风琴二级菜单，全站视觉与交互统一
       ================================================ */

    /* 遮罩层：菜单打开时覆盖页面，点击收起 */
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
    }
    body.nav-open .nav-overlay {
        display: block;
    }
    body.nav-open {
        overflow: hidden;
    }

    /* 导航抽屉：统一重置宽度/边距/定位（fixed 锚定视口），消除各内页自身 CSS 造成的偏移 */
    header nav,
    header.common-header nav {
        display: none !important;
        position: fixed !important;
        top: 64px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: 420px !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        z-index: 1001 !important;
        box-sizing: border-box;
    }
    header nav.open,
    header.common-header nav.open {
        display: block !important;
    }

    /* 抽屉头部：Logo + 关闭按钮（由 common-responsive.js 动态创建） */
    header nav .nav-header,
    header.common-header nav .nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 8px 8px 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #ffffff;
        border-radius: 12px 12px 0 0;
        box-sizing: border-box;
    }
    header nav .nav-header .logo-area,
    header.common-header nav .nav-header .logo-area {
        padding-left: 0 !important;
        margin: 0 !important;
        flex: 1;
        min-width: 0;
    }
    header nav .nav-header .logo-area img,
    header.common-header nav .nav-header .logo-area img {
        display: block;
        height: 32px !important;
        width: auto !important;
        max-height: 32px !important;
        max-width: 150px !important;
    }

    /* 关闭按钮：触控区域 ≥44px，X 形图标 */
    .nav-close {
        display: block;
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .nav-close::before,
    .nav-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        background: #333;
        border-radius: 2px;
    }
    .nav-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .nav-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* 菜单列表：重置各内页对 ul/li 的干扰样式 */
    header nav ul,
    header.common-header nav ul {
        display: block !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        list-style: none !important;
        box-sizing: border-box;
    }

    header nav li,
    header.common-header nav li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box;
    }

    /* 一级菜单项：统一 50px 高、垂直居中、底部 1px 浅灰分隔线 */
    header nav li > a,
    header.common-header nav li > a,
    header nav li > a.menu-item-box,
    header.common-header nav li > a.menu-item-box {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #333 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 50px !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box;
        transition: background 0.3s ease, color 0.3s ease;
    }
    header nav li:last-child > a,
    header.common-header nav li:last-child > a {
        border-bottom: none !important;
    }

    /* 当前选中项：品牌青绿填充 + 白色文字 */
    header nav li > a.active,
    header.common-header nav li > a.active,
    header nav li > a.menu-item-box.active,
    header.common-header nav li > a.menu-item-box.active {
        background: #1bbab8 !important;
        color: #ffffff !important;
    }
    header nav li > a.active .nav-arrow::before,
    header.common-header nav li > a.active .nav-arrow::before {
        border-color: #ffffff;
    }

    /* 中和 PC 端 hover 高亮：移动端普通项点击不改变底色，仅选中项有品牌色 */
    header nav li > a:not(.active):hover,
    header.common-header nav li > a:not(.active):hover,
    header nav li > a.menu-item-box:not(.active):hover,
    header.common-header nav li > a.menu-item-box:not(.active):hover {
        background: transparent !important;
        color: #333 !important;
    }

    /* 下拉箭头：仅带子菜单的一级项由 JS 添加，固定在右侧 */
    .nav-arrow {
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        box-sizing: border-box;
    }
    .nav-arrow::before {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        box-sizing: border-box;
    }
    header nav li.open > a .nav-arrow::before,
    header.common-header nav li.open > a .nav-arrow::before {
        transform: rotate(-135deg);
    }

    /* 二级菜单：默认收起，点击箭头手风琴展开（0.3s 过渡），
       彻底废弃 PC 端的绝对定位与悬浮显示 */
    header nav .dropdown-menu,
    header.common-header nav .dropdown-menu {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        visibility: hidden;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #f4f7f6 !important;
        box-shadow: none !important;
        box-sizing: border-box;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }
    header nav li.open > .dropdown-menu,
    header.common-header nav li.open > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        max-height: 480px;
    }

    /* 二级菜单项：左侧缩进 40px，字号比一级小 2px（14px），背景浅一色阶分层 */
    header nav .dropdown-menu a,
    header.common-header nav .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 16px 0 40px !important;
        border: none !important;
        border-bottom: 1px solid #e9efed !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #666 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 44px !important;
        text-align: left !important;
        text-decoration: none !important;
        box-sizing: border-box;
    }
    header nav .dropdown-menu a:last-child,
    header.common-header nav .dropdown-menu a:last-child {
        border-bottom: none !important;
    }
    header nav .dropdown-menu a:active,
    header.common-header nav .dropdown-menu a:active {
        background: rgba(27, 186, 184, 0.12) !important;
        color: #1bbab8 !important;
    }

    /* 隐藏 PC 顶部搜索框（移动端宽度不足，先隐藏） */
    header .header-actions,
    header .search-container {
        display: none !important;
    }

    /* ---------- 页脚（footer.html / footer-index.html 公共结构） ---------- */
    footer .footer-top {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        gap: 24px;
        padding: 24px 16px;
        box-sizing: border-box;
    }

    footer .footer-left {
        width: 100% !important;
        align-items: center;
        box-sizing: border-box;
    }

    footer .footer-logos img {
        max-width: 220px;
        width: auto !important;
        height: auto !important;
    }

    footer .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        font-size: 15px;
        gap: 4px;
        line-height: 1.8;
    }

    footer .footer-contact {
        align-items: center;
    }

    footer .footer-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    footer .qr-item img {
        width: 76px !important;
        height: 76px !important;
    }

    footer .footer-bottom {
        padding: 16px;
        font-size: 13px;
        line-height: 1.8;
    }

    /* ================================================
       页脚移动端整体优化（在基础适配之上追加覆盖，PC 端不受影响）
       - 保持米白背景(#FCFCFA)与棕色文字品牌调性
       - 压缩纵向留白、统一二维码尺寸、弱化版权信息
       ================================================ */

    /* 整体：压缩上下留白，左右保留适中边距 */
    footer {
        padding: 18px 0 12px !important;
    }
    footer .footer-content {
        width: 92% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    footer .footer-top {
        gap: 14px !important;
        padding: 0 0 12px !important;
        border-bottom: none !important; /* 分割线移至版权区上方 */
    }

    /* 1. 品牌 logo 区：横向左右排列（logo 居左、名称居右的锁字图），压缩纵向高度 */
    footer .footer-left {
        width: 100% !important;
        gap: 8px !important;
    }
    footer .footer-logos {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    footer .footer-logos img {
        max-width: 200px !important;
        max-height: 44px !important;
        width: auto !important;
        height: auto !important;
    }

    /* 2. 快捷链接行：次要信息，缩小字号、收紧间距、保持一行 */
    footer .footer-links {
        font-size: 13px !important;
        letter-spacing: 0 !important;
        gap: 5px !important;
        line-height: 1.6 !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    /* 3. 联系信息区：电话放大加粗突出，地址缩小收紧，整体紧凑 */
    footer .footer-contact {
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    footer .contact-item {
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 30px !important;
    }
    footer .contact-item img.icon {
        width: 18px !important;
        height: 18px !important;
    }
    footer .contact-item:first-child span {
        font-size: 17px !important; /* 电话：核心信息，字号放大加粗 */
        font-weight: 800 !important;
        color: #6b4a1f !important;
        letter-spacing: 1px !important;
    }
    footer .contact-item:last-child span {
        font-size: 12px !important; /* 地址：字号适当缩小，行高收紧 */
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
    }

    /* 4. 二维码区域：统一尺寸、上3下2居中排列、间距与留白压缩 */
    footer .footer-right {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    footer .qr-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        width: 84px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    footer .qr-item img {
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }
    footer .qr-item span {
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #7a6a4f !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 5. 版权备案信息区：缩小字号、调浅颜色、浅灰分割线分隔 */
    footer .footer-bottom {
        padding: 10px 16px 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.6 !important;
        letter-spacing: 0 !important;
        color: #a9947a !important;
        border-top: 1px solid #eee !important;
        gap: 4px !important;
    }
    footer .footer-bottom a {
        color: #a9947a !important;
    }
    footer .footer-bottom .police-icon {
        width: 14px !important;
        height: 14px !important;
    }

    /* 右侧悬浮留言按钮：移动端适当缩小，避免遮挡内容 */
    .float-message-btn .btn-link {
        width: 64px !important;
        height: 64px !important;
        border-radius: 22px !important;
        font-size: 16px !important;
        letter-spacing: 1px !important;
        gap: 2px !important;
    }

    .float-message-btn .btn-link span:first-child,
    .float-message-btn .btn-link span:last-child {
        font-size: 16px !important;
        letter-spacing: 1px !important;
        margin: 0 !important;
    }

    /* ---------- 表单元素：宽度自适应 + 触控标准 ---------- */
    input[type="text"],
    input[type="password"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* 避免 iOS 聚焦自动放大 */
    }

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        max-width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }
}