/* Mobile layout fixes — loaded after the main stylesheet so these rules win. */

@media (max-width: 640px) {

  /* ---- Leadership / data tables: stop sideways overflow, stack as cards ---- */
  table.data-table {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }
  table.data-table thead {
    display: none !important;
  }
  table.data-table tr {
    display: block !important;
    border-bottom: 1px solid #dbeafe;
    padding: 0.65rem 0;
  }
  table.data-table tr:last-child {
    border-bottom: none;
  }
  table.data-table td {
    display: block !important;
    padding: 0.15rem 0 !important;
    white-space: normal !important;
  }
  table.data-table td:first-child {
    font-weight: 700;
  }
  .overflow-x-auto {
    overflow-x: visible !important;
  }

  /* ---- Footer: tighter, less repetitive ---- */
  footer .grid {
    gap: 1.25rem !important;
  }
  footer {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  footer p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }
  footer h3 {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }
  footer ul {
    font-size: 0.85rem !important;
  }
  footer ul.space-y-2 > li,
  footer ul.space-y-3 > li {
    margin-bottom: 0.4rem !important;
  }
  /* Quick Links duplicates the main nav — collapse it on mobile since the
     hamburger menu already covers the same links. It's the 2nd of 3 footer
     columns (logo/tagline, Quick Links, Get in Touch). */
  footer .grid > div:nth-child(2) {
    display: none !important;
  }

  /* ---- Mobile nav menu: tighter rows so more fits without scrolling ---- */
  nav[aria-label="Main"] a,
  header .lg\:hidden ~ div a,
  #mobile-menu a {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 0.95rem !important;
  }
}