From f0f9c73cac27a96775210c662069974d7f7f0af0 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Wed, 15 Jul 2026 20:17:00 -0700
Subject: [PATCH] SEO: collapsible climate hub + mobile formatting fixes (#103)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Climate hub (/climate) now uses native <details> per country — collapsible
  expand/shrink sections with a city count and a rotating marker (top 3 countries
  open by default). Links stay in the DOM, so crawling/SEO is unaffected.
- Fix nested F/C parentheses in the city lede (e.g. 'July (71°F (22°C) average
  high)') by rephrasing so the already-parenthesized temperature isn't wrapped in
  another paren.
- Fix the 5-column records table overlapping on mobile: give it a min-width so it
  scrolls inside .table-wrap on narrow screens instead of colliding.
---
 static/style.css | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/static/style.css b/static/style.css
index f3befdc..41bd287 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1468,6 +1468,9 @@ main.content a { color: var(--accent); }
 
 .table-wrap { overflow-x: auto; }
 table.normals-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 15px; table-layout: fixed; }
+/* Records has 5 columns — give it a floor width so it scrolls inside .table-wrap on
+   narrow screens instead of overlapping. */
+table.records-table { min-width: 560px; }
 table.normals-table th:first-child, table.normals-table td:first-child { width: 26%; }
 table.normals-table th, table.normals-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
 table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
@@ -1488,9 +1491,20 @@ table.normals-table tbody tr:hover { background: var(--surface-2); }
 .travel-note { font-size: 15px; }
 
 /* Hub / directory of cities */
-.hub-country { margin: 22px 0; }
-.hub-country h2 { margin: 0 0 8px; font-size: 18px; }
-.city-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
+/* Collapsible country sections (native <details>). */
+details.hub-country { border-bottom: 1px solid var(--border); }
+details.hub-country > summary {
+  cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px;
+  list-style: none; display: flex; align-items: center; gap: 8px;
+}
+details.hub-country > summary::-webkit-details-marker { display: none; }
+details.hub-country > summary::before {
+  content: "\25B8"; color: var(--muted); transition: transform .15s ease; display: inline-block;
+}
+details.hub-country[open] > summary::before { transform: rotate(90deg); }
+details.hub-country > summary:hover { color: var(--accent); }
+.hub-count { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; }
+.city-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 2px 4px 16px 22px; list-style: none; }
 .city-links a { text-decoration: none; }
 
 /* Glossary / about editorial */