/* =========================================
   CRITICAL FIXES FOR CHINESE PAGES (TABLES)
   ========================================= */

/* 1. Force all layout tables to be fluid */
table.responsive-table, 
table.maintable, 
table.bottom-nav-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto; /* Allows content to dictate width, then shrink */
    border-collapse: collapse;
}

/* 2. Remove fixed widths from cells */
td.spacer-cell, 
td.content-cell, 
td.img-col {
    width: auto !important;
    min-width: 5px; /* Prevent collapse */
}

/* 3. Fix the "Quote" Section (The biggest issue) 
   The original code used float:left on a table inside a TD. 
   We force it to stack on mobile. */
.quote-container {
    display: block; /* Breaks table cell behavior slightly to allow flex */
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px !important;
}

/* The image wrapper inside the quote */
.quote-image-wrap {
    float: none !important; /* Kill the float */
    text-align: center;
    margin: 0 auto 20px auto;
    display: block;
    width: 100%;
}

/* Ensure the image inside scales */
.quote-image-wrap img, 
.responsive-img, 
.mj2 img {
    max-width: 100%;
    height: auto;
    width: auto; /* Override HTML width="311" */
    display: block;
    margin: 0 auto;
}

/* 4. Fix the Article Lists (Index 1 & 2) 
   These are tables with Text on Left, Image on Right. 
   On mobile, we want them to stack. */
@media (max-width: 500px) {
    /* Force table rows to act like blocks */
    .article-lists table tr {
        display: block;
        width: 100%;
    }

    .article-lists table td {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 10px 0;
    }

    /* Ensure the image drops below or above text nicely */
    .img-col {
        margin-top: 15px;
    }
    
    /* Fix the bottom nav table stacking */
    table.bottom-nav-table td {
        display: block;
        width: 100% !important;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

/* 5. General Safety Nets */
body, #wrapper {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Ensure fonts scale slightly on very small screens */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    .font-forum, .verdana {
        font-size: 0.95em;
    }
}