/* MMOPRO_READABILITY_V1: additive overrides for MMOPro style 84. */

html body .postbody div[id^="post_message_"] > .postcontent {
    color: #e2e8f0 !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    width: 100% !important;
    max-width: 76ch !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
}

/* Repair only known dark saved BBCode colours; leave code palettes alone. */
html body .postbody .postcontent font:is(
    [color="#000" i], [color="#000000" i], [color="black" i],
    [color="#1a1a1a" i], [color="#1f1f1f" i],
    [color="#222" i], [color="#222222" i],
    [color="#333" i], [color="#333333" i],
    [color="#444" i], [color="#444444" i],
    [color="#555" i], [color="#555555" i],
    [color="#666" i], [color="#666666" i]
):not(pre font, code font, .bbcode_code font, .bbcode_html font, .bbcode_php font) {
    color: #e2e8f0 !important;
}

html body .postbody .postcontent font[color="#800000" i]:not(
    pre font, code font, .bbcode_code font, .bbcode_html font, .bbcode_php font
) {
    color: #fca5a5 !important;
}

html body .postbody .postcontent font:is([size="1"], [size="2"]):not(
    pre font, code font, .bbcode_code font, .bbcode_html font, .bbcode_php font
) {
    font-size: 1em !important;
}

html body #post_48810 .postcontent [style*="margin-left"] {
    margin-left: 0 !important;
}

html body #post_48810 .postcontent font[size="7"] {
    font-size: clamp(24px, 5vw, 36px) !important;
    line-height: 1.25 !important;
}

html body .postbody .postcontent :is(pre, .bbcode_code, .bbcode_html, .bbcode_php) {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-wrap: normal;
}

html body .postbody .postcontent :is(pre, code) {
    overflow-wrap: normal;
}

html body .threadbit :is(.threadmeta, .author, .threadlastpost),
html body #forums :is(.forumdescription, .forumlastpost) {
    color: #b5c0d0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

html body :is(.pagination_top, .pagination_bottom, .pagination) a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    line-height: 1.25 !important;
    font-size: 14px !important;
}

@media (max-width: 1023px) {
    html, html body {
        min-width: 0 !important;
        width: auto !important;
    }

    html body :is(.body_wrapper, #content, #contentMain, .above_body, .below_body,
        #header, #navbar, #footer, #forums, .forumhead, .forumrow, .threadlisthead) {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html body #header {
        flex-wrap: wrap !important;
        gap: 12px !important;
        min-height: 0 !important;
        padding: 12px !important;
    }

    html body #header > div:first-child {
        max-width: 190px;
    }

    html body #header img {
        max-width: 100%;
        height: auto;
    }

    html body #toplinks {
        position: static !important;
        float: none !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body #toplinks > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    html body #toplinks > ul > li {
        float: none !important;
        margin: 0 !important;
    }

    html body #header .ad_global_header {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
    }

    html body #navbar {
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        flex-wrap: wrap !important;
    }

    html body #navbar #navtabs {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 6px !important;
        height: auto !important;
        padding: 8px !important;
        white-space: normal !important;
        overflow: visible !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body #navbar #navtabs > li {
        float: none !important;
        height: auto !important;
        margin: 0 !important;
    }

    html body #navbar #navtabs > ul {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        order: 2;
        gap: 4px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    html body #navbar #navtabs > ul > li {
        float: none !important;
        margin: 0 !important;
    }

    html body #navbar #navtabs > li > a,
    html body #navbar #navtabs > ul > li > a {
        display: inline-flex !important;
        align-items: center;
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        box-sizing: border-box;
    }

    html body #navbar :is(.searchBox, .searchBoxInput) {
        position: static !important;
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 8px !important;
    }

    html body #navbar .searchBox {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    html body #navbar .gsc-input {
        font-size: 16px !important;
    }

    html body :is(#breadcrumb, .breadcrumb, #pagetitle, .pagetitle) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    html body :is(#vsa_fh_stats, .ad_global_header, #ad_global_below_navbar) {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto;
        box-sizing: border-box;
    }

    html body #contentMain > table:has(#vsa_fh_stats),
    html body #contentMain > table:has(#vsa_fh_stats) > tbody,
    html body #contentMain > table:has(#vsa_fh_stats) > tbody > tr,
    html body #contentMain > table:has(#vsa_fh_stats) > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body :is(#ad_global_below_navbar, .body_wrapper) img {
        max-width: 100%;
        height: auto;
    }

    html body :is(#posts, .postcontainer, .postbitlegacy, .postbit,
        .postbitlegacy .postdetails, .postbit .postdetails) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    html body :is(.postbitlegacy, .postbit) .postdetails {
        display: flex !important;
        flex-direction: column !important;
    }

    html body :is(.postbitlegacy, .postbit) .userinfo {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    html body .userinfo :is(dl, .userinfo_extra, .user_rep) {
        display: none !important;
    }

    html body .userinfo .postuseravatar img {
        width: 48px !important;
        height: auto !important;
    }

    html body :is(.postbitlegacy, .postbit) .postdetails .postbody {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    html body .postbody div[id^="post_message_"] > .postcontent {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body #post_48810 .postcontent :is(ol, ul) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 1.25em !important;
        padding-right: 0 !important;
    }

    /* vBulletin reserves 300px for a side ad even when the ad slot is empty. */
    html body .postbody .postrow .content.hasad {
        margin-right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    html body :is(#ad_thread_first_post_content, #ad_thread_last_post_content) {
        float: none !important;
        max-width: 100% !important;
        overflow-x: auto;
    }

    html body .postbody .postcontent :is(img, iframe, video) {
        max-width: 100% !important;
    }

    html body .postbody .postcontent img {
        height: auto !important;
    }

    html body .postfoot {
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }

    html body #forums :is(.foruminfo, .forumlastpost, .forumstats),
    html body .threadbit :is(.threadinfo, .threadstats, .threadlastpost) {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        clear: both;
        box-sizing: border-box;
    }

    html body .threadbit :is(.threadtitle, .threadtitle a),
    html body #forums .forumtitle {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    html body #forum2 .forumrow :is(div, iframe) {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}