/* =========================================================
   移动端适配样式表  mobile-fix.css
   ---------------------------------------------------------
   作用：为“花都公证处”官网补齐手机/平板适配。
   加载位置：每个页面 <head> 末尾，故层叠优先级最高。
   作用范围：仅 max-width:991px（导航在此断点收起，启用侧边菜单）。
   不影响桌面端（>991px）任何既有样式。
   如需撤除：删除本文件 + 各页面 <head> 中的对应 <link> 即可。
   ========================================================= */

/* ---------- 0. 全局：防横向溢出 + 媒体自适应 ---------- */
@media (max-width: 991px) {
    html { -webkit-text-size-adjust: 100%; }

    /* 兜底：避免任何遗漏的写死宽度把页面撑出横向滚动 */
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 致命写死宽度容器：手机端改为自适应（price 的 .w1200 / about 时间轴的 .w1150） */
    .w1200,
    .w1150 {
        width: auto !important;
        max-width: 100% !important;
    }

    /* 所有图片/媒体默认自适应，杜绝横向溢出 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ---------- 1. 顶部导航：移动端统一为"白底固定栏"，保证 Logo 与汉堡可见可点 ---------- */
    header,
    .navbar-top-default {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 60px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        z-index: 9999 !important;
    }

    /* 首页（body.home-page）：手机端与桌面一致 —— 顶部导航栏置于普通流(吸顶)，大图在其下方，二者分离（不再透明叠在图上） */
    body.home-page header {
        position: sticky !important;
        top: 0;
        height: 60px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        z-index: 9999 !important;
    }
    /* 内层 nav 入普通流，跟随 header（否则 header 塌成 0 高、nav 仍浮顶叠图） */
    body.home-page .navbar-top-default {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* 大图高度减去导航高度，使其完整展示在导航正下方、首屏恰好铺满 */
    body.home-page .hero-section {
        height: calc(100dvh - 60px) !important;
        min-height: 420px !important;
        padding-top: 0 !important;
    }
    /* 关闭“从顶部滑入”动画，避免白栏固定时闪动 */
    body.home-page .header-appear .navbar-top-default {
        position: relative !important;
        top: auto !important;
        animation: none !important;
    }

    /* 白底上显示“深色 Logo”，隐藏浅色 Logo（避免浅色 logo 白底不可见） */
    .navbar .logo-scrolled { display: none !important; }
    .navbar .logo-default  { display: inline-block !important; }
    header .logo img,
    .navbar .logo img {
        height: 38px !important;
        width: auto !important;
    }

    /* 汉堡按钮：放大为 44x44 点击区，黑色线条在白底清晰可见 */
    .sidemenu_btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        margin-left: auto !important;
    }
    .sidemenu_btn span {
        background: #111111 !important;
        width: 24px !important;
    }

    /* 桌面横向导航在移动端隐藏（Bootstrap 已收起，此处双重保险） */
    .navbar-collapse { display: none !important; }

    /* 各页顶部留白收敛，避免被固定头部遮挡（保留原 banner 视觉） */
    .about-banner { padding-top: 72px !important; }
    .bobys       { padding: 90px 0 60px !important; }
    /* hero-section 由下文 body.home-page 规则单独处理，此处不加 padding-top */

    /* 首页 hero：高度已在上文按导航高度扣减，这里仅做兜底（内容垂直居中） */
    body.home-page .hero-section {
        min-height: 420px !important;
        padding-top: 0 !important;
    }
    /* 手机端使用竖屏版大图（覆盖 index.html 内联的 canton-tower.jpg） */
    body.home-page .hero-bg {
        background-image: url('../images/banners/hero-mobile.jpg') !important;
        background-position: center top !important;
    }

    /* ---------- 2. 内容排版：缩放字号、收紧间距 ---------- */
    .container { padding-left: 15px; padding-right: 15px; }

    h1, .h1 { font-size: 26px !important; line-height: 1.3 !important; }
    h2, .h2 { font-size: 22px !important; line-height: 1.3 !important; }
    h3, .h3 { font-size: 19px !important; line-height: 1.35 !important; }
    h4, .h4 { font-size: 16px !important; line-height: 1.4 !important; }
    h5, .h5 { font-size: 14px !important; }
    p, li, td, th, .about-p, .newcon p, .article-meta {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .font-42 { font-size: 24px !important; }

    /* 行/列间距兜底（Bootstrap 列在 <992 已堆叠，这里统一内边距） */
    .row { margin-left: -10px; margin-right: -10px; }
    [class*="col-"] { padding-left: 10px; padding-right: 10px; }

    /* 区块上下留白收敛 */
    .about,
    .contact-section,
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* about 时间轴：去掉浮动、改为纵向堆叠，图片自适应 */
    .about_main li { overflow: hidden; }
    .about_main .about_word_left,
    .about_main .about_word_right,
    .about_main .about_time_left,
    .about_main .about_time_right,
    .about_main .about_word,
    .about_main .about_time {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
    }
    .about_main li .about_word img { width: 100% !important; height: auto !important; }

    /* 两列信息卡堆叠 */
    .info-cards .col-md-6 { width: 100% !important; max-width: 100% !important; }

    /* ---------- 3. 表格（收费标准）：单元格自动换行，不再横向溢出 ---------- */
    .newcon { padding: 0 4px; overflow-x: auto; }
    .price-table {
        width: 100% !important;
        font-size: 13px;
        table-layout: fixed;
    }
    .price-table th,
    .price-table td {
        padding: 6px 8px !important;
        word-break: break-word;
    }
    .price-table td:first-child { width: 14% !important; white-space: nowrap; }
    .price-table td + td { width: 60% !important; }
    .price-table td + td + td { width: 26% !important; }

    /* ---------- 4. 地图 / 表单区 ---------- */
    #ct, .map-wrapper { height: 300px !important; }
    .info-card { margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
    .info-card-header h4 { font-size: 15px; }

    /* ---------- 5. 侧边菜单：宽一点、点击区更大 ---------- */
    .side-menu { width: 78% !important; max-width: 320px; }
    .side-nav .navbar-nav .nav-link { font-size: 16px; padding: 12px 0; }
    .side-menu .inner-wrapper { padding: 3.5rem 1.5rem !important; }
    .side-footer { margin-top: 20px; }

    /* ---------- 6. 页脚 ---------- */
    .company-about {
        font-size: 12px !important;
        line-height: 1.6 !important;
        text-transform: none !important;   /* 中文版权信息不宜全大写 */
    }
    .company-about a { display: inline-block; }
    .footer-social li { margin: 0 4px; }

    /* 回到顶部按钮贴边 */
    .go-top { right: 12px; bottom: 12px; }

    /* 链接/按钮点击反馈 */
    a, button { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }
}

/* ---------- 小屏手机 (<=575px) ---------- */
@media (max-width: 575px) {
    .hero-title    { font-size: 26px !important; letter-spacing: 1px !important; }
    .hero-subtitle { font-size: 14px !important; letter-spacing: 2px !important; }
    /* 快捷服务卡片：3 列网格紧凑布局 */
    .hero-services { gap: 6px !important; margin-top: 18px !important; }
    .hero-service-card { padding: 10px 4px !important; border-radius: 10px !important; }
    .hsc-icon { width: 36px !important; height: 36px !important; font-size: 15px !important; margin-bottom: 5px !important; }
    .hsc-title { font-size: 11.5px !important; white-space: nowrap; }
    .hsc-desc { display: none !important; }
    .hero-qrcode { margin-top: 14px !important; }
    .hero-qrcode .qrcode-img { width: 122px; height: 122px; }
    .hero-qrcode .qrcode-text { font-size: 14px !important; }

    .price-table td:first-child { width: 16% !important; }
    .company-about { font-size: 11px !important; }
    .about-banner { padding-top: 68px !important; }
}

/* ---------- 超小屏 (<=400px) ---------- */
@media (max-width: 400px) {
    .side-menu { width: 85% !important; }
    h1, .h1 { font-size: 23px !important; }
    .container { padding-left: 12px; padding-right: 12px; }
}

/* ================================================================
   桌面端（>=992px）首页导航栏
   目标：导航栏与大图上下分离（导航置于顶部普通流，大图在其下方），与 about.html 等内页一致
   作用：仅在 <body class="home-page"> 且视口 >=992px 时生效；手机端（<=991px）保持透明大图风格，不受影响
   ================================================================ */
@media (min-width: 992px) {
    /* 导航栏改为置顶 sticky 普通流：位于大图上方，不再固定叠在 hero 上（覆盖 index.html 内联的 fixed） */
    body.home-page header {
        position: sticky !important;
        top: 0;
        z-index: 9999 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
    }
    /* 内层 nav 从默认 absolute 改为普通流，跟随 header（否则 header 会塌成 0 高、nav 仍浮在顶部叠图上） */
    body.home-page .navbar-top-default {
        position: relative !important;
        top: auto !important;
    }
    /* 大图去掉为“固定导航”预留的 80px 内边距，让图片完整展示在导航正下方 */
    body.home-page .hero-section {
        padding-top: 0 !important;
    }
    /* 白底上用深色 Logo（logo.png 本身为深色，确保清晰可见） */
    body.home-page .logo-scrolled { display: none !important; }
    body.home-page .logo-default  { display: inline-block !important; }
    body.home-page header .logo img { filter: none !important; }
    /* 导航文字深色，白底可读 */
    body.home-page .navbar-top-default .navbar-nav .nav-link {
        color: #1a1a1a !important;
    }
    body.home-page .sidemenu_btn span { background: #111111 !important; }
    /* 滚动（header-appear）时仍保持普通流 sticky，不重新变 fixed 覆盖大图，也不播放滑入动画 */
    body.home-page .header-appear .navbar-top-default {
        position: relative !important;
        top: auto !important;
        animation: none !important;
    }
}