/* ==========================================================================
   Mindspace - inner page mobile corrections
   (/about-us, /services, /services/*, /blog, /blog/*, /contact-us)

   Loaded last on each inner page. EVERY rule lives inside a max-width query at
   900px or below, so no viewport above 900px - the whole desktop layout -
   resolves a single declaration from here.

   Each fix below was measured in a headless phone viewport, not guessed.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. /services: the menu button was sliced off the right edge

   Measured at 390px: the document was 417px wide. The scroll-reveal animations
   park their elements at translateX(72px) / translateX(86px) until the reveal
   fires, and those parked elements widen the page by 27px.

   `body.services-page { overflow-x: hidden }` (in mindspace-services.css)
   already stopped the page being dragged sideways, so the overflow was
   invisible - except for one thing. On a phone, when content is wider than the
   screen the layout viewport widens to match it, and `.mindspace-nav` is
   `position: fixed; width: 100%`. The header was therefore laid out 417px
   wide, which pushed its menu button from 374px out to 401px: permanently
   sliced by the 390px screen edge, at every scroll position, on a page where
   that button is the only way to navigate.

   Clipping the overflow where it happens returns the document to the screen
   width, and the header follows it back to 390px. `clip` rather than `hidden`
   on purpose: /services and /contact-us both pin panels with
   `position: sticky`, and `hidden` would turn `main` into a scroll container
   and change what those panels stick to. `clip` suppresses the overflow
   without creating a scroll container, so the sticky panels are untouched.
   Where `clip` is unsupported the declaration is dropped and the page behaves
   exactly as it does today.
--------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .about-page main,
    .services-page main,
    .blog-page main,
    .contact-page main,
    .sectors-page main {
        overflow-x: clip;
    }

    /* /blog is the one inner page whose sheet never declared the guard the
       other three have. It does not overflow today; this is the same safety
       net its siblings already carry. */
    body.blog-page {
        overflow-x: clip;
    }
}


/* ---------------------------------------------------------------------------
   2. Form fields: stop iOS zooming the page in on focus

   Every field on the site computes to 14.72px. Safari on iPhone zooms the
   whole page in whenever a field under 16px is focused, and it does not zoom
   back out afterwards - so tapping the first field of the contact form leaves
   the visitor stranded at 1.3x for the rest of the session, scrolling
   sideways to read. 16px is the exact threshold that stops it.
--------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .mindspace-footer__form input,
    .blog-subscribe__form input {
        font-size: 16px;
    }

    /* The footer newsletter input measured only 20px tall inside its 48px
       pill, so most of the control was not a tap target. 42px is the pill
       height less its 3px padding, so the field fills it exactly.
       (The blog subscribe input already stands 60px tall - left alone.) */
    .mindspace-footer__form input {
        min-height: 42px;
    }
}