/*
 * Mobile horizontal stability fix for Home, About, Services and Contact only.
 * This stylesheet is loaded conditionally when the body uses
 * the medcare-standard-page class. It does not affect blog/article pages.
 */

@media (max-width: 991.98px) {
    body.medcare-standard-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: relative;
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
        touch-action: pan-y;
        -ms-touch-action: pan-y;
    }

    body.medcare-standard-page > nav,
    body.medcare-standard-page > header,
    body.medcare-standard-page > main,
    body.medcare-standard-page > section,
    body.medcare-standard-page > footer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* Keep the mobile header inside the viewport. The older rule allowed
       the logo to grow to almost the full navbar width on these four pages. */
    body.medcare-standard-page .navbar > .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        padding-left: 12px;
        padding-right: 12px;
    }

    body.medcare-standard-page .navbar-brand {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: calc(100% - 62px) !important;
        margin-right: 0.5rem;
        overflow: hidden;
    }

    body.medcare-standard-page .navbar-brand img {
        display: block;
        width: auto !important;
        max-width: min(180px, 100%) !important;
        height: 50px !important;
        object-fit: contain;
    }

    body.medcare-standard-page .navbar-toggler {
        flex: 0 0 42px;
        width: 42px;
        max-width: 42px;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    body.medcare-standard-page .navbar-collapse,
    body.medcare-standard-page .navbar-nav,
    body.medcare-standard-page .navbar-nav .nav-item,
    body.medcare-standard-page .navbar-nav .nav-link {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Restore Bootstrap's normal gutter calculation instead of forcing rows
       to width:100%, which can behave inconsistently on some mobile browsers. */
    body.medcare-standard-page .row {
        /* g-5 uses a 3rem horizontal gutter, which extends 12px beyond a
           standard mobile container. Keep the generous vertical spacing
           but use a viewport-safe horizontal gutter. */
        --bs-gutter-x: 1.5rem;
        width: auto !important;
        max-width: none !important;
        margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
        margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
    }

    body.medcare-standard-page .row > *,
    body.medcare-standard-page [class*="col-"],
    body.medcare-standard-page .card,
    body.medcare-standard-page .card-body,
    body.medcare-standard-page form,
    body.medcare-standard-page fieldset {
        min-width: 0;
        max-width: 100%;
    }

    /* Undo the previous broad max-width rule on every flex child. It was
       overriding the intended mobile logo size on these pages. */
    body.medcare-standard-page .d-flex > * {
        min-width: 0;
        max-width: none;
    }

    body.medcare-standard-page img,
    body.medcare-standard-page picture,
    body.medcare-standard-page video,
    body.medcare-standard-page iframe,
    body.medcare-standard-page svg,
    body.medcare-standard-page canvas {
        max-width: 100%;
    }

    body.medcare-standard-page p,
    body.medcare-standard-page li,
    body.medcare-standard-page a,
    body.medcare-standard-page h1,
    body.medcare-standard-page h2,
    body.medcare-standard-page h3,
    body.medcare-standard-page h4,
    body.medcare-standard-page h5,
    body.medcare-standard-page h6,
    body.medcare-standard-page label,
    body.medcare-standard-page span {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    body.medcare-standard-page input,
    body.medcare-standard-page select,
    body.medcare-standard-page textarea,
    body.medcare-standard-page button {
        min-width: 0;
        max-width: 100%;
    }

    body.medcare-standard-page .position-fixed {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 359.98px) {
    body.medcare-standard-page .navbar-brand img {
        max-width: min(155px, 100%) !important;
    }
}