/*
 * 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.
 */

/*
 * Fluid display sizes.
 *
 * The theme sets .font-5rem to a flat 80px with no responsive override, so the
 * site title could not fit a phone at all — "Recipesbible" wrapped mid-word into
 * "Recipesbib / le". clamp() keeps the desktop size exactly as it was and scales
 * down only where there is no room.
 */
.font-5rem { font-size: clamp(2.25rem, 9vw, 5rem) !important; line-height: 1.05; }
.font-3rem { font-size: clamp(1.75rem, 6.5vw, 3rem) !important; line-height: 1.1; }
.font-2rem { font-size: clamp(1.35rem, 4.5vw, 2rem) !important; line-height: 1.15; }

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

/* Keep the aspect ratio when max-width caps the width.
   This used to exclude anything carrying a width attribute — but the rich-text
   editor writes width="1254" on every image it inserts, so those got squeezed
   narrower while keeping their full intrinsic height, which looks exactly like a
   corrupted image. Any image without an explicit height needs height:auto. */
img: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 they need a scrolling wrapper. Note the wrapper, not
   the table: `overflow` on display:table is unreliable and is ignored outright
   on iOS Safari, which is why the earlier version of this did not work. */
.table-responsive,
.table-scroll,
.calc-copy {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll > table,
.calc-copy > table {
    min-width: 32rem;
}

/* 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;
    }

    /* Scoped to the nav dropdowns this was written for. It used to hit every
       inline min-width on the page, which flattened the habit tracker grid and
       the reminders meta column — both of which set a min-width deliberately
       inside their own horizontally scrolling container. */
    .dropdown-menu[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;
    }

    /* The featured card is padded for a wide desktop column — 30px all round plus
       a 25px gap under the description leaves a conspicuous hole above the button
       on a phone. */
    .featured-content {
        padding: 20px;
    }

    .featured-description {
        margin-bottom: 16px;
    }

    .featured-title {
        font-size: 22px;
    }

    /* Do NOT drop this below 15px. Bootstrap rows use margin: 0 -15px, so a
       narrower container padding lets every row hang over the edge — that was
       a measured +3px of horizontal scroll on every page on the site. */
    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Images placed inside a rich-text field carry the natural pixel width the editor
   recorded — 1254px on a 700px column. Cap them to the container. */
.entry-content img,
.meal-body img,
.calc-copy img,
.card-body img[width] {
    max-width: 100%;
    height: auto;
}

/* Pagination is display:flex with no wrap in Bootstrap 4, so a listing with a
   dozen pages rendered a 615px-wide strip on a 375px phone. Measured as the
   single largest source of horizontal scroll across the category pages. */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .35rem;
}

@media (max-width: 575.98px) {
    .pagination .page-link {
        padding: .35rem .6rem;
        font-size: .85rem;
    }
}

/* Diet plan food lists. These used class="food-item", which the theme defines as
   a 35x35px icon box, so each entry wrapped to one character per line. */
.diet-list-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    line-height: 1.45;
}
.diet-list-item i { margin-top: .2rem; flex-shrink: 0; }