/* Mobile compatibility fixes, loaded after all site stylesheets (LTR and RTL).
   html/body/#wrapper use overflow-x:hidden, so anything wider than the screen is
   silently cut off instead of scrolling - keep content within the screen width. */

/* CMS content (Html.Raw of article details): editor-inserted images/videos/tables */
.Custom-Details img,
.Custom-Details video,
.Custom-Details embed,
.Custom-Details object {
    max-width: 100%;
    height: auto;
}

.Custom-Details iframe {
    max-width: 100%;
}

.Custom-Details table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Embedded YouTube videos with a fixed width="420" (clinic, breastfeeding, Care Academy pages) */
iframe[src*="youtube.com/embed"] {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 767.98px) {
    iframe[src*="youtube.com/embed"] {
        width: 100%;
    }

    /* RFQ list: quotation tables inside the accordion scroll horizontally */
    #accordionEx table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Slogan bar: .row inside a container whose padding is removed on mobile */
    .slogen-bar .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Body text was reduced to 10-11px on small screens */
    .about-section p,
    .footer .footer-main .container p,
    #medical-care-blogSection p,
    .timestamp {
        font-size: 12px;
    }
}