/* ============================================================
   Mobile usability, added 2026-08-08 via Customizer Additional CSS.
   The theme hid every nav link except the CTA under 720px, which
   left phones with no way to reach About / Services / Blog / Contact.
   These rules restore a wrapping tap-friendly menu and guard
   against horizontal overflow. No parent theme files touched.
   ============================================================ */

@media (max-width: 720px) {

  /* --- Navigation: restore the menu on phones --- */
  .site-header .wrap {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  nav.main {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
    column-gap: 6px;
  }
  nav.main .nav-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
  }
  /* Theme sets display:none at this width; restore with a real tap target */
  nav.main a:not(.cta) {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 4px 12px;
    font-size: 13px;
  }
  nav.main a.cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    margin-top: 2px;
  }

  /* --- Overflow guards --- */
  body { overflow-x: hidden; }
  img, video, embed { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  /* Blog post tables scroll sideways instead of squeezing or overflowing */
  .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wp-block-table table { min-width: 520px; }

  /* Contact page details table: let long values wrap */
  .wrap.read table td { word-break: break-word; }

  /* --- Comfortable reading --- */
  .btn-row { gap: 10px; }
  .btn { min-height: 44px; }
  .callout { padding: 26px 20px; }
}

@media (max-width: 480px) {
  /* Stats grid: single column so numbers stay legible */
  .stats { grid-template-columns: 1fr; gap: 20px; }
}