/* ============================================================================
   responsive-fixes.css
   ----------------------------------------------------------------------------
   Conservative, additive mobile / responsiveness fixes for the Pilgrim World
   ASP.NET MVC site. This file is intentionally loaded LAST in <head> on both
   _Layout.cshtml and _Layout_Shrines.cshtml so its rules win over the existing
   framework and inline styles WITHOUT having to edit the legacy CSS.

   It only adds safe global guards (fluid images/tables, larger touch targets,
   slightly larger base font on phones, and de-fixing of hard-coded form/control
   widths on small screens). Nothing here changes desktop layout meaningfully.

   Escape hatches:
     - Add class "no-fluid" to any container whose images must keep their
       intrinsic width (e.g. fixed sprites / logos that break when scaled).
     - Use the ".table-responsive" wrapper for wide tables that should scroll
       horizontally on small screens instead of overflowing the viewport.
   ============================================================================ */

/* --- Fluid images: never let an image overflow its container ------------- */
img {
    max-width: 100%;
    height: auto;
}

/* Opt-out for images that must keep their natural size. */
.no-fluid img {
    max-width: none;
}

/* --- Fluid tables -------------------------------------------------------- */
table {
    max-width: 100%;
}

/* Horizontal-scroll wrapper for wide data tables on narrow screens. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Full-bleed Google map embed ----------------------------------------- */
#AbstractMap {
    width: 100%;
    height: 60vh;
}

/* ========================================================================== */
/* Mobile / small-screen adjustments                                          */
/* ========================================================================== */
@media (max-width: 768px) {

    /* Slightly larger, more legible base font on phones. */
    body {
        font-size: 15px;
    }

    /* Comfortable touch targets (WCAG / mobile guideline ~44px). */
    button,
    .btn,
    input,
    select,
    textarea {
        min-height: 44px;
    }

    /* A bit more tap padding on actual clickable controls. */
    button,
    .btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Let hard-coded pixel-width form controls (login/registration/donation
       forms use inline widths) collapse to fit the screen. */
    select,
    input,
    textarea,
    .input-bg {
        max-width: 100% !important;
    }

    /* Stack right-floated controls instead of overflowing on mobile. */
    .pull-right {
        float: none !important;
    }
}