/* ==========================================================================
   responsive-fixes.css
   Cross-device mobile usability hardening (Android phones, iPads, Mac/desktop).
   Loaded AFTER style.css so these targeted rules win. Scoped to be low-risk:
   nothing here changes desktop layout except the media safety net.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. iOS input zoom fix (the big one)
   Mobile Safari auto-zooms when a focused <input>/<textarea>/<select> has a
   font-size below 16px. Several form fields on the site are 13px, so tapping
   any field on an iPhone jarringly zooms the page. Bump the known small fields
   to 16px on phones only. The intentionally-large .subs_label input (26px) is
   left untouched (already >=16px, so no zoom).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .form-control,
    .form-select,
    section.contact-popup input,
    section.contact-popup textarea,
    section.contact-popup select,
    section.contact-popup select#services,
    section.contact-popup textarea#message,
    .apply_form input,
    .apply_form textarea,
    .apply_form select.form-select,
    footer .subscibe_btn input,
    .subscribe_div input,
    .contactUSForm input,
    .contactUSForm textarea,
    .contactUSForm select,
    .contactUSForm1 input,
    .contactUSForm1 textarea,
    .contactUSForm1B input,
    .contactUSForm1B textarea {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   2. Media overflow safety net
   Prevents any image / video / iframe / table from forcing horizontal scroll
   on small screens (a common source of mobile "sideways scroll"). Harmless on
   desktop — only caps elements that would exceed their container.
   -------------------------------------------------------------------------- */
img,
svg,
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* Long unbreakable strings (URLs, emails) shouldn't push layout wide on phones. */
@media (max-width: 767.98px) {

    p,
    h1,
    h2,
    h3,
    h4,
    li,
    a,
    td,
    span {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Wide tables scroll inside their own box instead of stretching the page. */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   3. Tap-target sizing (improves mobile usability + accessibility score)
   Give small text links in the top bar and footer enough vertical hit area
   on touch devices. Padding-based so it enlarges the touch zone without
   noticeably changing the visual layout.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Top utility bar phone-number links */
    .blue-bar-contact a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    /* Footer link lists: more comfortable spacing + larger tap zone */
    footer ul li a {
        display: inline-block;
        padding: 4px 0;
        line-height: 1.4;
    }

    /* Footer social / contact icons */
    footer .social-icons a,
    footer .footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }
}

/* --------------------------------------------------------------------------
   4. Horizontal-overflow guard
   Stops any stray full-bleed / 100vw element or negative margin from making the
   whole page scroll sideways on phones — one of the most common mobile UX
   complaints. Uses overflow-x: clip (NOT hidden) so it does not break
   position: sticky / fixed descendants and creates no extra scroll container.
   Tables and carousels keep their own intentional horizontal scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    html,
    body {
        overflow-x: clip;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5. iOS text-inflation fix + tap polish
   Prevents Mobile Safari from auto-enlarging body text in landscape, and
   removes the grey flash box iOS paints over tapped links/buttons.
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a,
button,
.btn,
[role="button"],
.nav-link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* --------------------------------------------------------------------------
   6. Tap-target sizing for primary nav + buttons (WCAG 2.5.5: 44x44 minimum)
   Extends the existing footer/top-bar coverage to the hamburger toggler, the
   main menu links and the primary call-to-action buttons so they are
   comfortable to tap on touch screens. Padding/min-height based — no visual
   change on desktop (guarded by the media query / touch-sized defaults).
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    .main-menu .nav-link.menu-link {
        min-height: 44px;
    }

    .btn.main_btn,
    .btn.get-btn,
    a.demo-btn,
    .cta-button,
    .tm-cta,
    .freeconsultbtn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}