Collapsible industry filter on mobile

index.html

@@ -29,6 +29,11 @@
       <div class="search-wrapper">
         <input type="text" id="searchInput" placeholder="Search by name, industry, or location…" aria-label="Search businesses">
       </div>
+      <button class="filter-toggle" id="filterToggle" aria-expanded="true" onclick="toggleFilters()">
+        <span class="filter-toggle-label">Industry</span>
+        <span class="filter-toggle-badge" id="filterBadge">All</span>
+        <svg class="filter-toggle-arrow" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
+      </button>
       <div class="industry-filters" id="industryFilters">
         <button class="industry-btn active" data-filter="all">All</button>
       </div>
@@ -267,7 +272,14 @@
 
     // ─── Initial Render ───────────────────────────────────────────────
     render();
-  </script>
+  
+function toggleFilters() {
+  const container = document.getElementById('industryFilters');
+  const toggle = document.getElementById('filterToggle');
+  const isOpen = toggle.getAttribute('aria-expanded') === 'true';
+  container.classList.toggle('collapsed', isOpen);
+  toggle.setAttribute('aria-expanded', !isOpen);
+}</script>
 
 </body>
 </html>

style.css

@@ -373,4 +373,68 @@ main {
   .filter-bar { display: none; }
   .business-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
   .site-header { break-after: avoid; padding: 1rem; }
-}
+}
+
+/* ===== Industry Filter Toggle (Mobile) ===== */
+.filter-toggle {
+  display: none;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.8rem;
+  border: 1.5px solid var(--light-gray);
+  border-radius: 6px;
+  background: var(--white);
+  font-size: 0.85rem;
+  font-family: inherit;
+  font-weight: 600;
+  color: var(--dark-gray);
+  cursor: pointer;
+  transition: all 0.15s;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.filter-toggle:hover {
+  border-color: var(--miami-red-light);
+}
+
+.filter-toggle-badge {
+  background: var(--miami-red);
+  color: var(--white);
+  font-size: 0.7rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 100px;
+  font-weight: 600;
+}
+
+.filter-toggle-arrow {
+  transition: transform 0.2s;
+  color: var(--medium-gray);
+}
+
+.filter-toggle[aria-expanded="true"] .filter-toggle-arrow {
+  transform: rotate(180deg);
+}
+
+/* Only show toggle and hide filters behind it on mobile */
+@media (max-width: 768px) {
+  .filter-toggle {
+    display: flex;
+  }
+  .industry-filters {
+    display: flex !important;
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
+    opacity: 1;
+    margin-top: 0.5rem;
+  }
+  .industry-filters.collapsed {
+    max-height: 0 !important;
+    opacity: 0;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+  }
+}