/*
 * Mobile safety net.
 *
 * Loaded after the theme so it can correct it. Everything here is deliberately
 * conservative — rules that cannot change the desktop layout, only stop things
 * spilling out of it on a narrow screen.
 *
 * The theme's global img rule sets image-rendering and nothing else, so any image
 * wider than its column pushed the whole page sideways on a phone. That horizontal
 * drift is what makes a site feel broken on mobile more than anything else.
 */

/* Nothing may be wider than its container. */
img,
video,
iframe,
embed,
object,
svg {
    max-width: 100%;
}

/* Keep aspect ratio when width is capped, unless the markup sets both. */
img:not([width]):not([height]) {
    height: auto;
}

/* Long words and URLs are the other common source of sideways scroll. */
p, li, td, th, h1, h2, h3, h4, h5, h6, .card-title, .breadcrumb-item {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Tables cannot wrap, so let them scroll inside themselves rather than
   dragging the page with them. */
.table-responsive,
.calc-copy table,
.table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Preformatted blocks scroll rather than stretch. */
pre {
    overflow-x: auto;
    max-width: 100%;
}

@media (max-width: 767.98px) {

    /* A page should never scroll sideways on a phone. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Bootstrap 4 containers keep their gutters; this just stops any element
       with an inline pixel width from forcing the page wider. */
    [style*="min-width"] {
        min-width: 0 !important;
    }

    /* Tap targets. Anything under about 44px is hard to hit accurately. */
    .btn,
    .nav-link,
    .dropdown-item,
    .page-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .btn-block {
        display: flex;
        justify-content: center;
    }

    /* Cards sat at a fixed min-width in a few listings, which forced a
       horizontal scroll on a 375px screen. */
    .offer-card,
    .card {
        min-width: 0 !important;
    }

    /* Headings set in rem on desktop are oversized on a phone. */
    .font-2rem {
        font-size: 1.5rem !important;
    }

    /* Give the grid a little more room by trimming the outer gutter. */
    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
}