/* mobile_boost.css — Global Mobile Responsiveness Overrides
   Generated by mobilefix.php — DO NOT EDIT MANUALLY
   Last updated: 2026-04-04 11:47:41 */

/* ── Base responsive resets ── */
* { box-sizing: border-box; }
img, video, iframe, embed, object {
    max-width: 100%%;
    height: auto;
}

/* ── Tables ── */
table {
    max-width: 100%%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Pre/Code blocks ── */
pre, code {
    max-width: 100%%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* ── Prevent horizontal overflow ── */
body {
    overflow-x: hidden;
}
.container, .container-fluid, .row {
    max-width: 100%%;
    overflow-x: hidden;
}

/* ── Font rendering ── */
html {
    -webkit-text-size-adjust: 100%%;
    text-size-adjust: 100%%;
}

/* ══ MOBILE (max-width: 768px) ══ */
@media (max-width: 768px) {
    /* Typography */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4, h5, h6 { font-size: 1.1rem; }
    p, li, td, th, dd, dt {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Content padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Images */
    img {
        max-width: 100%% !important;
        height: auto !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Tables */
    table {
        font-size: 14px;
        word-break: break-word;
    }
    th, td {
        padding: 8px 6px;
        min-width: 80px;
    }

    /* Touch targets — minimum 48x48px */
    a, button, input[type="submit"], input[type="button"],
    .btn, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    nav a, .nav-link, .navbar-nav .nav-link {
        padding: 12px 16px;
    }

    /* Fix common overflow issues */
    iframe {
        max-width: 100%% !important;
        width: 100%% !important;
    }
    pre {
        padding: 12px;
        font-size: 13px;
    }
    blockquote {
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px 15px;
    }

    /* Hide unnecessary desktop elements */
    .desktop-only { display: none !important; }

    /* Fix sidebar stacking */
    .blog_content, .blog-content, .post-content, article {
        width: 100%% !important;
        max-width: 100%% !important;
        padding: 0 10px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 13px;
        flex-wrap: wrap;
    }

    /* TOC */
    .toc, #toc, [class*="table-of-contents"] {
        max-width: 100%%;
        overflow-x: auto;
        font-size: 14px;
        padding: 10px;
    }

    /* WhatsApp/Chat floating buttons */
    .whatsapp-btn, .chat-widget, [class*="whatsapp"] {
        bottom: 10px !important;
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
        z-index: 9999;
    }

    /* Scroll to top button */
    .scroll-top, [class*="scroll-top"], .back-to-top {
        bottom: 70px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
    }
}

/* ══ SMALL MOBILE (max-width: 480px) ══ */
@media (max-width: 480px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    table {
        font-size: 12px;
    }
    th, td {
        padding: 6px 4px;
    }

    /* Stack table cells vertically if very small */
    .stack-mobile td {
        display: block;
        width: 100%%;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
    }
}

/* ══ TABLET (max-width: 1024px) ══ */
@media (max-width: 1024px) {
    img {
        max-width: 100%%;
        height: auto;
    }
    table {
        max-width: 100%%;
    }
    iframe {
        max-width: 100%%;
    }
}

/* ── Font display optimization ── */
@font-face {
    font-display: swap !important;
}

/* ── CLS (Cumulative Layout Shift) prevention ── */
img:not([width]):not([height]) {
    aspect-ratio: 16/9;
}

/* ── Tap highlight ── */
a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* ── Smooth scrolling for anchor links ── */
html {
    scroll-behavior: smooth;
}

/* ── Print ── */
@media print {
    nav, .whatsapp-btn, .chat-widget, .scroll-top, .back-to-top,
    [class*="whatsapp"], [class*="floating"] {
        display: none !important;
    }
    body { font-size: 12pt; }
    img { max-width: 100%% !important; }
}