/* ============================================
   Mobile footer layout improvements (global)
   Targets your existing footer markup/classes
   WITHOUT requiring HTML changes.
   ============================================ */

/* Only apply on small screens */
@media (max-width: 640px) {

  /* Main footer columns: turn the default single-column stack
     into a more compact 2-column layout, while keeping the brand
     section full width at the top. */
  footer .grid.grid-cols-1.md\:grid-cols-6.gap-8 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    align-items: start;
  }

  /* Brand section is typically the first child and has md:col-span-2.
     Force it to span both columns on mobile. */
  footer .grid.grid-cols-1.md\:grid-cols-6.gap-8 > .md\:col-span-2 {
    grid-column: 1 / -1 !important;
  }

  /* Ensure link lists don't look cramped */
  footer h5 {
    margin-bottom: 0.6rem !important;
  }
  footer ul.space-y-2 > li {
    margin-top: 0.4rem !important;
  }

  /* Bottom row: currently a flex-wrap line.
     Convert it to a centered, tidy stacked layout. */
  footer .mt-8.pt-6.border-t.border-slate-100.text-xs.text-slate-500.flex.flex-wrap.gap-3.items-center {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    justify-items: center !important;
    text-align: center !important;
  }

  /* Hide the separator pipes that are only meaningful on desktop */
  footer .mt-8.pt-6.border-t.border-slate-100.text-xs.text-slate-500.flex.flex-wrap.gap-3.items-center
  .hidden.sm\:inline.text-slate-300 {
    display: none !important;
  }

  /* The dot separators (·) can also be hidden to clean up wrapping */
  footer .mt-8.pt-6.border-t.border-slate-100.text-xs.text-slate-500.flex.flex-wrap.gap-3.items-center
  .text-slate-300 {
    display: none !important;
  }

  /* Make the bottom links sit nicely centered and wrap */
  footer .mt-8.pt-6.border-t.border-slate-100.text-xs.text-slate-500.flex.flex-wrap.gap-3.items-center a {
    display: inline-block;
    padding: 0.2rem 0.35rem;
  }
}