/*
 * The public website: touch targets, focus and motion.
 * Round 4, Phase 27.2 (your point 9).
 *
 * The website has a design system of its own (site.css, Bootstrap 5) and this
 * file deliberately does not touch it. It carries only the three things the
 * screenshot run found the site short on, all scoped under body.sd-site so
 * nothing here can reach the app:
 *
 *   • controls a finger can hit on a phone;
 *   • a visible focus ring for anyone using a keyboard;
 *   • respect for "reduce motion", which the site's scroll animations ignore.
 *
 * Kept separate from site.css on purpose: that file is built by Vite, and a
 * plain stylesheet needs no build step to ship.
 */

@media (max-width: 1023.98px) {
    body.sd-site .btn,
    body.sd-site button:not(.navbar-toggler),
    body.sd-site .nav-link,
    body.sd-site .dropdown-item,
    body.sd-site input[type="submit"],
    body.sd-site .sd-tab,
    body.sd-site .sd-toggle__option,
    body.sd-site [role="tab"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    body.sd-site .btn-block,
    body.sd-site .w-100.btn {
        display: flex;
    }

    body.sd-site input,
    body.sd-site select,
    body.sd-site textarea {
        min-height: 44px;
        /* Below 16px, iOS zooms the page in when the field is focused. */
        font-size: 16px;
    }

    body.sd-site textarea {
        min-height: 88px;
    }
}

/* The whole site, every width: nothing should scroll sideways. */
body.sd-site {
    overflow-x: hidden;
}

body.sd-site *:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

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

    /* The scroll-reveal library hides elements until they animate in. With
       motion off, that animation never runs — so they must start visible. */
    body.sd-site [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===================================================================
   The home page's two module panels overflowed on small phones
   ===================================================================
   Found by the Phase 27.4 screenshot run: on a 360px phone the Tailor and
   Rental panels measured 390px and reached 406px, pushing the page sideways.

   The cause is CSS grid's default: a grid item's min-width is auto, so a child
   that cannot shrink — the scrolling feature table inside each panel — makes
   the item wider than its column. minmax(0, 1fr) and min-width: 0 let the
   column decide instead.

   The same fix is in resources/css/site/marketing.css, which is where it
   belongs; it is repeated here because that file needs `npm run build` to take
   effect and this one does not. After a build this block changes nothing.
*/
body.sd-site .mk-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body.sd-site .mk-mod,
body.sd-site .mk-hero-grid > *,
body.sd-site .mk-both > * {
    min-width: 0;
}

@media (max-width: 991.98px) {
    body.sd-site .mk-hero-grid,
    body.sd-site .mk-duo,
    body.sd-site .mk-both,
    body.sd-site .mk-shots {
        grid-template-columns: minmax(0, 1fr);
    }
}