/* EchoReading Mobile Fix — global stylesheet v4 (2026-09-20)
   v4: 方案B 双行换行导航，取代 v3 的隐藏横滚（内容零隐藏）：
       第一行 = logo 居中；第二行起 = 导航链接 chips 换行居中；
       语言切换器随 chips 同行可见；breadcrumb 保留横滚（位置指示器非功能入口）。
   v3 教训: nowrap+overflow-x:auto+隐藏滚动条 = 内容藏进不可见滚动区，
       nav 高度指标好看但功能入口全灭。禁止回退到隐藏式横滚。 */

table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
a, button, select, input, [role="button"] {
    -webkit-tap-highlight-color: rgba(232, 155, 60, 0.25);
}

@media (max-width: 768px) {
    /* ---------- NAV 方案B: 双行 wrap, 零隐藏 ---------- */
    /* 标准 main-nav: nav > div(外flex) > a.logo + div(内links) */
    nav.main-nav > div {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        row-gap: 4px !important;
    }
    nav.main-nav > div > a:first-child {
        flex: 0 0 100% !important;
        text-align: center !important;
        min-height: 0 !important;
        padding: 2px 0 6px !important;
        font-size: 1.25rem !important;
    }
    nav.main-nav > div > div {
        flex: 0 0 100% !important;
        gap: 2px 14px !important;
        justify-content: center !important;
    }
    /* 所有 nav 链接: 44px 触控 + 词内不断行, 容器负责换行 */
    nav a, .nav-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        padding: 0 6px !important;
    }
    /* CTA 按钮保持按钮形态 */
    nav a[target="_blank"] { padding: 10px 18px !important; }
    /* 语言切换器: 随 chips 可见 */
    #websiteLangSwitcher {
        min-height: 40px !important;
        align-self: center !important;
        padding: 8px 10px !important;
    }

    /* bare nav (链接是 nav 直接子级, 如 free-tarot) */
    nav:has(> a) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2px 12px !important;
        overflow: visible !important;
        padding: 10px 16px !important;
    }

    /* breadcrumb: 保留横滚 (位置指示器, 滚动条可见作提示) */
    nav[aria-label="breadcrumb"], nav.breadcrumb, .breadcrumb {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin !important;
    }

    /* .nav-links 变体 (privacy/contact/faq 系) */
    .nav-links, .nav-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    /* ---------- card / list links ---------- */
    .card-link { display: inline-block !important; padding: 12px 0 !important; min-height: 44px !important; }
    .card { padding: 14px !important; }

    /* ---------- fixed CTA ---------- */
    .mobile-fixed-cta {
        display: block; position: fixed; bottom: 0; left: 0; right: 0;
        background: rgba(15, 27, 46, 0.96);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.35); z-index: 9999;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .mobile-fixed-cta .btn-primary, .mobile-fixed-cta a {
        display: block !important; width: 100%; text-align: center;
        padding: 14px 24px !important; margin: 0 !important; min-height: 48px !important;
        background: linear-gradient(135deg, #E89B3C 0%, #d4842f 100%) !important;
        color: #0F1B2E !important; border-radius: 10px !important;
        font-weight: 700 !important; font-size: 1rem !important;
        text-decoration: none !important; box-sizing: border-box;
    }
    body { padding-bottom: 88px !important; }

    /* ---------- typography / spacing ---------- */
    h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; line-height: 1.25 !important; }
    h2 { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; }
    section, .section { padding-left: 16px !important; padding-right: 16px !important; }
    img { max-width: 100%; height: auto; }

    /* ---------- buttons ---------- */
    .btn, .btn-primary, .btn-secondary, .cta-btn, .cta-button, button {
        min-height: 44px !important;
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
    }
}