/* =====================================================================
   custom.css — minimal overrides on top of main2.css
   Fixes ONLY two specific upstream issues without touching desktop layout:
     1) Mobile burger sidebar (aside.mc1a4b95) sometimes overlays content
        when the obfuscated upstream JS errors out.
     2) Long affiliate URLs / the upstream "white-space:nowrap" rule
        on table cells make tables wider than the viewport on phones.
   ===================================================================== */

/* ---------- 1. Prevent horizontal page overflow ---------- */
html, body {
    overflow-x: hidden;
}

/* ---------- 2. Allow long URLs / unbreakable strings in <a> to wrap ---------- */
a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------- 3. Mobile burger sidebar safety ----------
   In the upstream CSS the aside is positioned at left:-100% and only
   becomes visible when JS sets body[data-menu-open]. If the JS errors
   out, the aside can stay rendered on top of <main>. Force it hidden
   unless the menu is explicitly open. Desktop (>1100px) is untouched. */
@media (max-width: 1100px) {
    aside.mc1a4b95 {
        display: none !important;
    }
    body[data-menu-open] aside.mc1a4b95 {
        display: block !important;
        left: 0 !important;
    }
}

/* ---------- 4. Mobile tables: undo the upstream nowrap ----------
   The upstream rule under @media (max-width:500px) forces
   white-space:nowrap on cells, making 5-column tables wider than the
   viewport. Override with normal wrapping.                             */
@media (max-width: 500px) {
    table tr td,
    table tr th {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        width: auto !important;
        font-size: 0.875rem;
        padding: 6px 4px;
    }
}

/* ---------- 5. Long headings should wrap on narrow viewports ----------
   Without this, "Casino Adrenaline Canada — Full Brand Review for
   Canadian Players" overflows the viewport on small phones.            */
h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 6. Banner CTA: visually identical to original button ---------- */
a.z4958bf6d {
    text-decoration: none;
    cursor: pointer;
}