/* =====================================================================
   Tech Fluent Agency - mobile fixes
   ===================================================================== */

/* --- Header: keep the hamburger vertically centered, flush right --- */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-2c32240 { align-self: center !important; margin: 0 !important; display: flex !important; }
  .elementor-element.elementor-element-2c32240 .elementor-widget-container,
  .elementor-element.elementor-element-2c32240 .elementor-icon-wrapper { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
  .elementor-element.elementor-element-2c32240 .elementor-icon { line-height: 0; }
}

/* --- Mobile menu overlay --- */
#tf-mobile-nav {
  position: fixed; inset: 0; background: #0f1214; z-index: 100000;
  display: none; padding: 26px 22px 44px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#tf-mobile-nav.tf-open { display: block; }
#tf-mobile-nav .tf-mobile-nav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
#tf-mobile-nav .tf-mobile-nav__title { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .08em; }
#tf-mobile-nav .tf-mobile-nav__close {
  background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; padding: 0 6px;
}
#tf-mobile-nav a.tf-mobile-nav__link {
  display: block; color: #fff; text-decoration: none; font-weight: 700;
  font-size: clamp(19px, 5.6vw, 24px); padding: 15px 2px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#tf-mobile-nav a.tf-mobile-nav__link:active,
#tf-mobile-nav a.tf-mobile-nav__link:hover { color: #f52343; }
#tf-mobile-nav .tf-mobile-nav__cta {
  display: block; margin-top: 26px; text-align: center; background: #f52343; color: #fff;
  text-decoration: none; font-weight: 700; padding: 16px; border-radius: 999px;
}
body.tf-nav-open { overflow: hidden !important; }

/* --- Backgrounds: `background-attachment: fixed` is unreliable/broken on
       mobile browsers (the hero image often doesn't render at all). --- */
@media (max-width: 1024px) {
  .elementor,
  .elementor *,
  .elementor::before,
  .elementor *::before { background-attachment: scroll !important; }
}

/* --- Phone typography / spacing safety --- */
@media (max-width: 767px) {
  /* "What We Do" 4-disciplines grid: responsive columns + breathing room */
  .elementor-element.elementor-element-6e9b896 {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    row-gap: 46px !important;
    padding: 0 22px !important;
    box-sizing: border-box;
  }
  .elementor-element.elementor-element-6e9b896 > * { min-width: 0 !important; }

  /* Smaller discipline headings so "Development" / "AI Solutions" fit on one line */
  .elementor-element.elementor-element-6e9b896 .elementor-heading-title {
    font-size: clamp(19px, 5.4vw, 25px) !important;
    line-height: 1.08 !important;
  }

  /* Never let words spill out of their box */
  .elementor-heading-title,
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor div { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  img, svg, video { max-width: 100%; height: auto; }
}