/* ============================================================
   Mobile Optimizations
   Loaded after style.css — refines touch targets, prevents
   horizontal scroll/CLS, and improves small-screen readability.
   ============================================================ */

/* Prevent accidental horizontal scrollbars on narrow viewports */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, .img {
  max-width: 100%;
}

/* Hero: use dvh so mobile browser toolbars don't cause jumpy
   height changes; JS still overrides for older browsers */
.hero-wrap.js-fullheight,
.slider-text.js-fullheight {
  min-height: 100vh;
}
@supports (height: 100dvh) {
  .hero-wrap.js-fullheight,
  .slider-text.js-fullheight {
    min-height: 100dvh;
  }
}

@media (max-width: 767.98px) {
  .hero-wrap.js-fullheight,
  .slider-text.js-fullheight {
    min-height: 78vh;
  }
  @supports (height: 100dvh) {
    .hero-wrap.js-fullheight,
    .slider-text.js-fullheight {
      min-height: 78dvh;
    }
  }
}

/* Slightly smaller hero heading on very small phones so it
   never fights the paragraph/button for space */
@media (max-width: 575.98px) {
  .slider-text h1 {
    font-size: 32px;
  }
  .slider-text p {
    font-size: 16px;
  }
}

/* Bigger, easier to tap navbar toggle button */
.ftco-navbar-light .navbar-toggler {
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Comfortable tap targets for the main nav links on mobile
   (collapsed menu) */
@media (max-width: 991.98px) {
  #ftco-nav .nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Social icons: keep them comfortably tappable */
.social-media a {
  min-width: 40px;
  min-height: 40px;
}

/* Footer social icons */
.ftco-footer-social li a {
  min-width: 40px;
  min-height: 40px;
}

/* Buttons: ensure a comfortable tap height on small screens */
@media (max-width: 767.98px) {
  .btn, .btn-primary, .btn-custom {
    min-height: 44px;
  }
}

/* Prevent iOS Safari from auto-zooming into inputs
   (inputs already at 18px via .form-control, this covers any
   smaller custom inputs added later) */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* Gallery / project background-image cards: avoid them
   collapsing to 0 height if content is empty on very small
   screens */
@media (max-width: 575.98px) {
  .blog-entry {
    min-height: 220px !important;
  }
}

/* Reduce large section paddings a bit on mobile so more
   content is visible per scroll, without feeling cramped */
@media (max-width: 575.98px) {
  .ftco-section {
    padding: 5em 0;
  }
  .ftco-no-pt {
    padding-top: 0;
  }
  .ftco-no-pb {
    padding-bottom: 0;
  }
}

/* Avoid layout shift from the logo image before it loads */
.navbar-brand img {
  aspect-ratio: 1 / 1;
}