/* ==========================================================================
   HerpExchange — mobile polish
   Added 2026-07-23.

   Everything here is inside a max-width media query, so desktop rendering is
   completely untouched. Each rule addresses an issue that was measured in a
   real 375-391px viewport, not guessed at:

     - .navbar-toggler rendered at 22x23px (the markup applies .p-0), well under
       the ~44px minimum touch target. It is the primary nav control on phones.
     - The quote card used 48px of padding on each side: 96px, i.e. ~25% of a
       391px viewport, spent on whitespace around the most important element.
     - Nav / footer links rendered 19-34px tall.
     - The "lb" / "in" unit suffixes rendered at 11.2px.

   The site already had no horizontal overflow and a correct viewport meta tag;
   the final block is a defensive guard so future content cannot introduce one.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* 1. Primary mobile nav control ------------------------------------- */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        /* overrides the .p-0 utility applied in the markup */
        padding: 0.5rem !important;
    }

    /* 2. Reclaim horizontal space ---------------------------------------- */
    /* 3rem of padding per side is a desktop value; on a phone it costs a
       quarter of the screen. */
    .row.p-5 {
        padding: 1.25rem !important;
    }

    /* 3. Comfortable tap targets ----------------------------------------- */
    .navbar-nav .nav-link,
    footer .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navbar .btn,
    .navbar .btn-sm {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* 4. Legible unit suffixes ------------------------------------------- */
    .input-group-text.smaller {
        font-size: 0.8125rem;
    }

    /* 5. Overflow guards -------------------------------------------------- */
    img,
    video,
    canvas,
    iframe,
    svg {
        max-width: 100%;
        height: auto;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    table {
        max-width: 100%;
    }
}