/*--------------------------------------------------------------
# FreightIntel mobile fixes
# Audit: every page at 360px, 390px and 768px (Oct 2026).
# Loaded after onpoint-responsive.css so these rules win at equal
# specificity. Theme vendor files stay untouched.
--------------------------------------------------------------*/

/* Wide content guards ---------------------------------------*/

/* Legal pages (privacy, terms, cookies, data-sources) render raw
   HTML tables; at 360px the cookie table forced a 377px row and
   clipped its last column. Let tables scroll inside the page. */
.legal-page table,
.blog-details table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep prose media inside the viewport. */
.blog-details img,
.legal-page img {
  max-width: 100%;
  height: auto;
}

/* Contact page: the design overlaps the photo under the form with
   margin-left:-220px. Below xl that pushes the 550px image off the
   left edge of a 360px/768px screen. */
@media only screen and (max-width: 1199px) {
  .contact-two__right {
    margin-left: 0;
    z-index: auto;
  }
  .contact-two__img img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* 44px tap targets ------------------------------------------*/
/* Apple HIG / WCAG 2.5.5 target size. All elements below measured
   18-30px tall at 360-768px before this sheet. */
@media only screen and (max-width: 991px) {
  /* Hamburger was 18x26px. */
  .mobile-nav__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Header logo link was 26px tall. */
  .main-menu__logo a {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Footer link lists and bottom legal menu were 26px tall. */
  .footer-widget__company-list li a,
  .footer-widget__services-list li a,
  .site-footer__bottom-menu li a {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Feature card titles were 28px tall. */
  .project-one__title a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Blog "Read More" links were 25px tall. */
  .blog-one__read-more a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Phone links in the hero and CTA band were 30px tall. */
  .main-slider__call-number h5 a,
  .cta-one__contact-box .content h3 a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Short footer words (FAQ) were 33px wide. */
  .footer-widget__company-list li a,
  .footer-widget__services-list li a,
  .site-footer__bottom-menu li a {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Breadcrumbs were 26px tall; "Home" was 36px wide, "Blog" 27px. */
  .thm-breadcrumb li a {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: 9px;
    padding-right: 9px;
  }

  /* Blog card author/date meta links were 26px tall. */
  .blog-page__meta li a {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Blog pagination was 40x40px. */
  .pg-pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Feature list titles were 30px tall at 768px. */
  .services-one__title a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* Header "Open the app" button was 38px tall. */
  .main-menu__btn-box .thm-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Sidebar toggle was 30x30px. */
  .navSidebar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Mobile drawer social icons were 44x33px. */
  .mobile-nav__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Blog card titles were 30px tall at 768px. */
  .blog-one__title a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* Blog post author/date meta links were 26px tall. */
  .blog-details__meta li a {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Footer decorative shape is a 539px image; clip it on small
     screens instead of letting it stick out past the footer. */
  .site-footer__shape-1 {
    max-width: 100%;
    overflow: hidden;
  }

  /* Hero slider dots are 14x14px; keep the dot, grow the hit area. */
  .main-slider .swiper-pagination-bullet {
    position: relative;
  }
  .main-slider .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset: -15px;
  }
}

/* Cookie table: 4 columns at 360px need tighter cells so the whole
   table fits instead of clipping the last column. */
@media only screen and (max-width: 480px) {
  /* !important: must override the Astro-scoped cell styles in
     LegalPage.astro, which win on specificity otherwise. */
  .legal-page table {
    font-size: 0.85rem !important;
  }
  .legal-page th,
  .legal-page td {
    padding: 0.45rem 0.35rem !important;
    overflow-wrap: break-word;
  }
}