/* =============================================
   TCB Mobile / Responsive Fixes
   Targets: phones (≤575px) and small tablets (≤767px)
   ============================================= */

/* ---- Prevent horizontal scroll on all pages ---- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---- Hero section (home page) ---- */
@media (max-width: 767px) {
  /* Hide the background photo — show plain white on mobile */
  .heroslider-image {
    display: none !important;
  }

  /* Make overlay white so text is fully readable */
  .heroslider-overlay {
    background-image: none !important;
    background-color: #fff !important;
    height: 100% !important;
    opacity: 1 !important;
  }

  /* Hero section: clean white, auto height */
  #hero {
    background: #fff !important;
    padding-top: 90px !important;
    padding-bottom: 2rem !important;
    min-height: unset !important;
  }

  /* Text column: full width, left-aligned, proper padding */
  #hero .col-lg-6,
  #hero .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 1rem 1rem 0.5rem !important;
  }

  /* Scale down hero headings */
  #hero h2 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    color: #123F6D !important;
  }

  /* Fix fixed-width content box from old WP theme */
  #hero .banner .content {
    width: 100% !important;
    padding: 20px 15px !important;
    display: block !important;
  }

  /* talk to us button */
  #hero .btn-primary {
    margin-top: 1rem;
    display: inline-block;
  }
}

/* ---- Approach section — 4 feature cards ---- */
@media (max-width: 480px) {
  /* On very small phones, stack the 2-col cards to full width */
  #approach .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---- Section headings — prevent overflow ---- */
@media (max-width: 575px) {
  .section-title h2 {
    font-size: 1.4rem !important;
    line-height: 1.35 !important;
  }

  .section-title span {
    font-size: 12px !important;
  }

  /* General heading scale-down */
  h2 {
    font-size: 1.4rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  /* CTA buttons */
  .btn-primary {
    display: inline-block;
    font-size: 13px !important;
    padding: 8px 18px !important;
  }
}

/* ---- Team page cards — 2-per-row on phones instead of 1 ---- */
@media (max-width: 767px) {
  .col-lg-4.col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 480px) {
  .col-lg-4.col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---- Subpage inner-banner / page-header ---- */
@media (max-width: 767px) {
  .breadcrumbs,
  .breadcrumbs .d-flex {
    flex-direction: column !important;
    text-align: center;
  }

  .breadcrumbs h2 {
    font-size: 1.3rem !important;
  }

  /* Page hero banner font size */
  .inner-page h1,
  .inner-page h2,
  .page-header h1,
  .page-header h2 {
    font-size: 1.5rem !important;
  }
}

/* ---- Navbar — ensure hamburger is always visible ---- */
@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block !important;
    font-size: 28px;
    cursor: pointer;
    color: #123F6D;
  }

  #navbar ul {
    display: none;
  }

  #navbar.navbar-mobile ul {
    display: block;
  }
}

/* ---- Footer — stack on mobile ---- */
@media (max-width: 767px) {
  #footer .footer-top .col-lg-4 {
    margin-bottom: 1.5rem;
  }

  #footer .footer-bottom {
    text-align: center;
  }

  #footer .footer-bottom .copyright,
  #footer .footer-bottom .credits {
    display: block;
    text-align: center;
  }
}

/* ---- Contact & Careers forms ---- */
@media (max-width: 575px) {
  .col-md-6,
  .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  form .btn,
  form button[type="submit"] {
    width: 100%;
  }
}

/* ---- Our Products page ---- */
@media (max-width: 767px) {
  .col-lg-7,
  .col-lg-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---- Tables / wide content ---- */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Images ---- */
img {
  max-width: 100%;
  height: auto;
}
