/* qke responsive & spacing overrides (injected by mirror.sh) */

/* ---------- 0. Mobile text wrapping & float clearfix ----------
   Original site CSS (nav-m.css, nav-p.css, nav2.css) sets white-space:nowrap
   on html,body, which prevents ALL text from wrapping on mobile — causing
   horizontal overflow, content clipping, and element overlap.
   Override with word-break:break-all (same as nav1.css) so text wraps
   naturally on narrow viewports. Navigation menus retain their own
   white-space:nowrap and are unaffected.
   Also add a clearfix to .navso (search panel) to contain floated
   .nav-span1 icons, preventing the panel from collapsing to zero height
   and causing subsequent content to overlap. */
html, body {
    word-break: break-all !important;
}
.navso {
    overflow: hidden;
}

/* ---------- 1. Donation images: clear spacing between WeChat & Alipay ---------- */
.juanzu img {
    margin-bottom: 16px !important;
}
.juanzu img:last-of-type,
.juanzu img:last-child {
    margin-bottom: 0 !important;
}

/* ---------- 2. Footer gap: collapse the forced 100% height so the footer sits
                just below the homepage icon grid, not a full viewport away.
                Also contain the floated icons so the right column / footer
                don't slide into the icon grid on narrow widths. ---------- */
.main-page,
.page-center,
.left,
.right,
.kuai-z,
.kuai {
    height: auto !important;
    min-height: auto !important;
}

/* NOTE: no !important here. setTab() hides inactive panels via inline
   display:none; an !important display would defeat that and leave the
   search-icon grid (con_one_1 == .navso) visible after switching tabs.
   flow-root (without !important) still contains the floated icons when shown. */
.navso,
.navso > div {
    display: flow-root;
}

/* Keep the footer padding modest and consistent */
.main-page + div,
.main-page ~ div {
    clear: both !important;
    margin-top: 0 !important;
}
.main-page + div > div,
.main-page ~ div > div {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* ---------- 3. Responsive layout for narrow desktops / tablets / phones ---------- */

/* Narrow viewports: undo the fixed 992px width that causes horizontal clipping.
   Real phones are redirected to /zh/m.html by the existing JS guard, but this
   makes the page usable in narrow desktop windows and tablets as well. */
@media screen and (max-width: 991px) {
    html, body, .menu-p {
        width: 100% !important;
        min-width: 100% !important;
    }
    body {
        overflow-x: hidden !important;
    }

    /* Stack the three columns vertically */
    .main-page,
    .page-center,
    .left,
    .right {
        width: 100% !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Logo centered above content */
    .left {
        padding: 16px 0 8px !important;
        text-align: center !important;
    }
    .logo {
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Donation box moved below the content, no absolute positioning */
    .right {
        position: relative !important;
        height: auto !important;
        padding: 16px 0 !important;
    }
    .juanzu-k {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        text-align: center !important;
    }
    .juanzu {
        display: inline-block !important;
    }
    .juanzu img {
        width: 120px !important;
        margin: 0 8px 16px !important;
    }
    .juanzu img:last-of-type,
    .juanzu img:last-child {
        margin-bottom: 0 !important;
    }

    /* Icon grid: 4 icons per row on narrow screens (more comfortable than 8) */
    .nav-span1 {
        width: 25% !important;
    }

    /* Search bar uses the full width */
    .navso > div {
        width: 100% !important;
        padding: 0 12px !important;
    }
    .sotext {
        width: 100% !important;
    }

    /* Menu bar can wrap and is not clipped */
    .menu-p {
        white-space: normal !important;
        height: auto !important;
        text-align: left !important;
    }
    .menu-p span {
        width: auto !important;
        padding: 0 6px !important;
        font-size: 13px !important;
    }

    /* Category cards stack vertically */
    .kuai-z {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .kuai {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .card {
        width: 96% !important;
    }
    .nav-span {
        width: 50% !important;
    }
}

/* Small desktop / tablet landscape: give the side columns a bit more room so
   the donation QR codes don't overflow their 10% column. The original 122px
   image fits comfortably inside 12% at these widths. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .left, .right {
        width: 12% !important;
    }
    .page-center {
        width: 76% !important;
    }
}