/* Post-migration fixes that intentionally improve on the WordPress original. */

/* Mobile menu: the contact info rows (icon + phone / icon + email) were wider
   than small screens because flex items refuse to shrink below content width.
   Let them shrink and wrap so nothing is ever clipped. */
@media (max-width: 991px) {
  .wh-electrician-header-mobile-contact-info-wrapper {
    width: 100%;
    min-width: 0;
  }
  .wh-electrician-header-mobile-contact-info-wrapper .wh-electrician-header-top-bar__info-box {
    gap: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .wh-electrician-header-mobile-contact-info-wrapper .wh-electrician-header-top-bar__info-box .content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .wh-electrician-header-mobile-contact-info-wrapper .wh-electrician-header-top-bar__info-box .content a {
    font-size: 15px;
  }
}

/* Footer: below 992px the contact block used a 2-column grid, and the email
   address overflowed its half-width column, widening the page (horizontal
   scroll on phones). Stack the contact info in a single column on mobile and
   let long strings wrap instead of overflowing. */
@media (max-width: 991px) {
  .wh-electrician-footer__contact-wrapper {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 20px;
  }
  .wh-electrician-footer__contact-info-box {
    min-width: 0;
    max-width: 100%;
  }
  .wh-electrician-footer__contact-info-box .content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}