/* ════════════════════════════════════════════════════════════════
   MOBILE FIXES — loaded LAST on every page (after chatbot.css)
   Fixes found in the mobile responsiveness audit.
════════════════════════════════════════════════════════════════ */

/* 1 ─ Baked-in image text: the hero/terminal photos contain a UI card in
   their middle 40–60%. On narrow screens `cover` crops to exactly that
   spot and the text collides with real headlines. Pin the crop to the
   clean right-hand side and drop the decorative text-bearing bg. */
@media (max-width:768px){
  .hero-v2-bg,.capabilities-strip-bg,.stats-v2-bg,.testi-v2-bg,
  [style*="hero-port.jpg"],[style*="nhava-terminal.jpg"]{
    background-position:96% center !important;
  }
  .stats-bar-photo::before{background-position:96% center !important}
  .estimator-v2-bg{display:none !important}   /* gateway-coverage.webp has text baked in */
}

/* 2 ─ Link colours: a global `a{color:var(--primary)!important}` turned the
   mobile-menu links blue-on-navy and the article breadcrumbs invisible. */
.mobile-nav a.mobile-nav-link{color:#fff !important}
.mobile-nav a.mobile-nav-link:hover{color:var(--navy-light,#3FA9F5) !important}
.article-crumb a,.article-hero a{color:rgba(255,255,255,.85) !important}

/* 3 ─ Mobile-menu CTAs: wrapper was being painted solid blue (merging both
   buttons into one block). Style the buttons, not the wrapper. */
.mobile-nav .mobile-nav-cta{background:transparent !important;display:flex;flex-direction:column;gap:12px;margin-top:28px}
.mobile-nav .mobile-nav-cta > div{margin:0 !important}
.mobile-nav .mobile-nav-cta .btn,
.mobile-nav .mobile-nav-cta .btn-whatsapp{
  display:flex;align-items:center;justify-content:center;text-align:center;width:100%;
  min-height:48px;padding:12px 16px;border-radius:8px;font-weight:700;box-sizing:border-box}
.mobile-nav .mobile-nav-cta .btn-whatsapp{
  background:transparent !important;color:#fff !important;border:1.5px solid rgba(255,255,255,.55) !important}

/* 4 ─ Quote-form service buttons: the card-badge `.service-icon` rule was
   leaking in and pulling all 13 emoji out of their buttons. */
.service-btn{position:relative}
.service-btn .service-icon{
  position:static !important;width:auto !important;height:auto !important;
  background:none !important;border:0 !important;box-shadow:none !important;
  inset:auto !important;font-size:18px !important;margin:0}
@media (max-width:480px){
  .service-buttons-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .service-btn{min-height:52px;padding:8px 10px !important;gap:6px;text-align:left}
  .service-label{font-size:12px !important;line-height:1.25;min-width:0;overflow-wrap:anywhere}
  .service-btn{min-width:0}
  .service-btn .service-icon{font-size:16px !important}
}

/* 5 ─ Floating widgets */
.lead-pop-overlay{z-index:10000 !important}             /* popup above chat launcher/teaser */
body.sq-visible .xy-chat-launcher{bottom:108px !important}
body.sq-visible .xy-chat-teaser{bottom:176px !important}
.xy-chat-teaser{max-width:min(240px,calc(100vw - 100px))}
.xy-chat-teaser button,.xy-chat-teaser .xy-chat-teaser-close{min-width:44px;min-height:44px}
.xy-chat-head-close{min-width:44px !important;min-height:44px !important}
.xy-chat-input{text-overflow:ellipsis;font-size:16px !important}
@media (max-width:768px){
  .footer{padding-bottom:104px !important}              /* keep legal links clear of sticky bar */
  .xy-chat-window{height:100dvh !important}
}
@media (max-width:480px){
  .xy-chat-window{height:100dvh !important}
  /* WhatsApp already lives in the sticky bar — avoid a duplicate floating button */
  body.sq-visible .float-whatsapp{display:none !important}
}

/* 6 ─ Top promo bar: slim single line on phones (was ~95px tall: wrapped
   text + a 44px button underneath). Keeps the bold headline + a small CTA. */
@media (max-width:768px){
  .promo-bar{padding:0 !important}
  .promo-bar .container{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:center !important;justify-content:space-between !important;gap:10px !important;
    min-height:0 !important;height:auto !important;padding-top:5px !important;padding-bottom:5px !important}
  .promo-bar p{font-size:0 !important;line-height:0 !important;margin:0 !important;min-width:0;flex:1 1 auto}
  .promo-bar p strong{font-size:12px !important;line-height:1.3;display:block;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .promo-bar .promo-cta,.promo-bar .btn-sm{flex:0 0 auto !important;min-height:30px !important;height:30px;
    padding:0 12px !important;font-size:12px !important;line-height:30px !important;margin:0 !important;
    white-space:nowrap;display:inline-flex !important;align-items:center}
}

/* 7 ─ Legibility: nothing below 12px, body copy ≥14px */
@media (max-width:768px){
  .process-v2-desc,.ind-desc,.est-disclaimer,.form-note{font-size:14px !important;line-height:1.55}
  .service-card-v2-link,.stats-v2-label,.office-v2-badge-text,.insight-v2-tag,
  .section-tag,.eyebrow,.page-hero-eyebrow,.service-card-v2-num,.nav-logo-sub,
  [style*="font-size:10px"],[style*="font-size:11px"],[style*="font-size:11.5px"]{font-size:12px !important}
  .nav-logo-sub{line-height:1.2}
}

/* 8 ─ Tap targets */
@media (max-width:768px){
  .breadcrumb-inner a,.article-crumb a{display:inline-block;padding:12px 4px}
  a[href^="blog/"][style*="font-size:13px"],a[href^="../blog/"][style*="font-size:13px"]{display:inline-block;padding:12px 0;min-height:44px}
}

/* 9 ─ Inner-page & article hero photos also carry baked-in UI cards
   ("OPERATIONS HUB", "PROJECT CARGO HUB"…). On phones the text lands behind
   the headline, so soften the photo into an atmospheric blur. */
@media (max-width:768px){
  .page-hero-media img,.article-hero-media img{
    filter:blur(6px) saturate(.9);transform:scale(1.12);object-position:right center}
}

/* 10 ─ Footer on phones: compact 2-column link grid, tighter rows.
   (Was ~1,970px tall: every link on its own 52px row in one column.) */
@media (max-width:768px){
  .footer{padding-top:36px !important;padding-bottom:104px !important}
  .footer .footer-grid{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:22px !important;padding-bottom:24px !important}
  .footer .footer-desc{margin-bottom:12px !important}
  .footer .footer-contact-item{margin-bottom:0 !important;align-items:center !important}
  .footer .footer-contact-item a[href^="tel:"],.footer .footer-contact-item a[href^="mailto:"]{padding:8px 0 !important;min-height:40px !important}
  .footer .footer-socials{margin-top:8px !important}
  .footer .footer-col-title{margin-bottom:4px !important}
  .footer .footer-col-title[style]{margin-top:14px !important}
  .footer .footer-links{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;column-gap:12px !important;row-gap:0 !important}
  .footer .footer-link{display:flex !important;align-items:center;padding:10px 0 !important;min-height:40px !important;line-height:1.3 !important;font-size:13px}
  .footer .footer-bottom{gap:6px !important;padding:16px 0 !important}
  .footer .footer-bottom-links{gap:16px !important;flex-wrap:wrap;justify-content:center}
}