/* ====================================================================
 * mobile-robustness.css — global hardening for real-mobile-only issues
 * that desktop emulation never reproduces.
 *
 * Loaded last so it can override the precompiled Tailwind output without
 * rebuilding the source. Keep this file additive: every rule here exists
 * to fix a specific class of real-device breakage.
 * ==================================================================== */

/* --- 1. Page-level overflow & viewport guards ------------------------ */

/* Stops any single overflowing child (a too-wide table, an oversized
 * image, a horizontally-scrolling carousel that didn't get its wrapper)
 * from creating a page-wide horizontal scrollbar on phones. `clip` is
 * preferred over `hidden` because it doesn't establish a containing
 * block for `position: fixed` (so our fixed header keeps working). */
html, body {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* iOS Safari's URL bar collapses on scroll — `100vh` is wrong everywhere
 * a viewport-height intent was meant. Remap dynamic and small-viewport
 * units transparently for elements that opted into 100vh. */
.min-h-screen {
    min-height: 100vh; /* fallback */
    min-height: 100dvh;
}
.h-screen {
    height: 100vh;
    height: 100dvh;
}

/* --- 2. Form-input zoom prevention (iOS Safari) --------------------- */

/* Below 16px, iOS Safari zooms in on focus and breaks the layout until
 * the user manually zooms out. Apply 16px floor on all interactive form
 * fields below the md breakpoint. We override Tailwind utilities like
 * text-sm/text-xs ONLY on form fields, not body text. */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --- 3. Touch-friendly interaction --------------------------------- */

/* Removes the 300ms tap delay on older mobile browsers and prevents
 * double-tap-to-zoom on interactive elements where it isn't useful. */
a, button, [role="button"], input[type="submit"], input[type="button"], summary {
    touch-action: manipulation;
}

/* Hover-induced lift/scale animations are designed for cursors. On touch
 * devices they fire on tap and persist, causing the tapped card to
 * cover its neighbour ("weird overlap"). Suppress every Tailwind
 * `hover:scale-*` and `hover:-translate-*` utility on devices without
 * a real hover capability. (`(hover: hover)` is the only reliable
 * pointer test — the old `(pointer: coarse)` matches some hybrid
 * laptops too.) */
@media not (hover: hover) {
    .hover\:scale-105:hover,
    .hover\:scale-110:hover,
    .group:hover .group-hover\:scale-105,
    .group:hover .group-hover\:scale-110,
    .hover\:-translate-y-1:hover,
    .hover\:-translate-y-2:hover,
    .group:hover .group-hover\:-translate-y-1,
    .group:hover .group-hover\:-translate-y-2 {
        transform: none !important;
    }
}

/* --- 4. Card grid containment -------------------------------------- */

/* Any direct child of a Tailwind `grid-cols-*` container that holds
 * long single-line content (a city/airport/route name with no spaces)
 * could push its column wider than its track. `min-w-0` on grid items
 * is the documented fix; apply it generically so we don't have to
 * remember it on every new template. */
[class*="grid-cols-"] > * {
    min-width: 0;
}

/* Same idea for flex children: long words shouldn't push a row wider
 * than its parent. `min-width: 0` on a flex child + `overflow-wrap`
 * on its text covers 99% of accidental overflow. */
.flex > *,
.inline-flex > * {
    min-width: 0;
}

/* Breaks long city names / URLs that would otherwise blow out a card
 * on narrow widths. Scoped to common content blocks so it doesn't
 * affect deliberate layouts (badges, code blocks, etc.). */
p, h1, h2, h3, h4, h5, h6, li, dt, dd, td, th {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* --- 5. Scrollable-table safety net -------------------------------- */

/* Templates that render a wide table without an explicit
 * `overflow-x-auto` wrapper still need to not break the page on
 * mobile. Wrap-on-children is impossible from CSS, so this rule
 * forces the table itself to be horizontally scrollable as a last
 * resort. */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* --- 6. Image safety ----------------------------------------------- */

/* Any image without explicit width/height shouldn't push its container
 * wider than the viewport. */
img, video, svg {
    max-width: 100%;
    height: auto;
}

/* --- 7. Reduce-motion fallback ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}