/* ══════════════════════════════════════════════════════════════════════════
   Muck Inn — responsive core (shared safety net + tokens)
   Linked by every active page AFTER its own styles.

   CANONICAL BREAKPOINTS (CSS variables can't be used in media queries, so these
   are the convention every page follows — no other widths allowed):
     - 480px   phones                    @media (max-width: 480px)
     - 768px   tablets / layout collapse @media (max-width: 768px)
     - 1024px  compact desktop           @media (max-width: 1024px)
   Pages are desktop-first (max-width queries) by existing convention.

   SPACING SCALE (use these steps for new work; existing px map onto them):
     4 / 8 / 12 / 16 / 24 / 32 / 48
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --bp-phone: 480px;   /* documentation tokens — see note above */
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
}

/* ── Viewport hygiene ─────────────────────────────────────────────────────
   overflow-x: clip kills stray horizontal scroll WITHOUT creating a scroll
   container, so position: sticky (farm booking card, dashboard sidebars,
   checkout summary) keeps working — overflow-x: hidden would break those. */
html, body { overflow-x: clip; }

/* Stop iOS inflating text when rotating to landscape */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Media intrinsic sizing ───────────────────────────────────────────────
   Content media can never force horizontal scroll. Map tiles are excluded:
   Google Maps and Leaflet position fixed-size tile images absolutely and
   max-width: 100% visually shreds them. */
img, video, canvas { max-width: 100%; }
img { height: auto; }
.gm-style img,
.leaflet-container img,
.leaflet-pane img { max-width: none !important; height: initial; }

/* Generic wrapper for any wide table/content: scrolls itself, not the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Date/time inputs: strip native chrome ────────────────────────────────
   iOS Safari gives date/time inputs their OWN native sizing — they ignore the
   page's padding/border rules, so they render taller and wider than sibling
   text inputs (visible as a misaligned search card on iPhone: WHERE narrow,
   CHECK-IN/OUT fat). appearance: none makes them obey the same box rules as
   every other field. Desktop pickers keep working (the calendar control is a
   pseudo-element, unaffected). */
input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
}
/* iOS-only (@supports guard): WebKit needs flex to vertically centre the value
   text once native chrome is stripped. Nonstandard on inputs but the documented
   Safari fix; other engines ignore it via the guard. */
@supports (-webkit-touch-callout: none) {
    input[type="date"], input[type="time"], input[type="datetime-local"] {
        display: flex;
        align-items: center;
    }
}

/* ── Phone & tablet ergonomics (≤768px only — desktop rendering untouched) ── */
@media (max-width: 768px) {

    /* iOS Safari zooms the whole page when focusing any input under 16px —
       the single biggest cause of "the layout jumps around on my iPhone".
       16px inputs on mobile also means forms are readable without zooming. */
    input, select, textarea { font-size: 16px !important; }
    input[type="checkbox"], input[type="radio"] { font-size: inherit !important; }

    /* Finger-friendly touch targets (~44px) for the shared control classes.
       Height only — widths stay fluid so layouts don't change. */
    .btn, .btn-primary, .btn-ghost, .btn-sm, .btn-add,
    .btn-action, .pagination-btn,
    .mih-links a, .mih-cta {
        min-height: 44px;
    }
    button.rm { min-height: 44px; min-width: 44px; }
}