/* ================================================================ responsive.css — COHO Analytics Mobile-first responsive design: breakpoints, touch targets, typography scaling, and grid adjustments. ================================================================ */ /* ---------------------------------------------------------------- 1. VIEWPORT & BASE ---------------------------------------------------------------- */ :root { /* Breakpoint references (documentation, not used in CSS directly) */ /* --bp-sm: 640px */ /* --bp-md: 768px */ /* --bp-lg: 1024px */ /* --bp-xl: 1280px */ } /* Prevent horizontal overflow on small viewports. Use clip (not hidden) so doesn't become a scroll container, which would break position:sticky on the site header and workflow bar. */ html { overflow-x: clip; width: 100%; } body { width: 100%; } /* ---------------------------------------------------------------- 2. RESPONSIVE TYPOGRAPHY Font sizes scale down on narrow screens via clamp() in site-theme.css variables. These add explicit floor values. ---------------------------------------------------------------- */ @media (max-width: 639px) { /* < 640px — small mobile */ :root { --h1: clamp(1.4rem, 6vw, 1.8rem); --h2: clamp(1.05rem, 4vw, 1.25rem); --h3: 0.95rem; --body: 0.9375rem; --small: 0.8125rem; --sp4: 1rem; --sp5: 1.5rem; --sp6: 2rem; } p, li { line-height: 1.6; } } @media (max-width: 767px) { /* < 768px — mobile */ h1 { letter-spacing: -0.015em; } .container, .wrap, .page-container { padding-left: var(--sp3); padding-right: var(--sp3); } } /* ---------------------------------------------------------------- 3. TOUCH-FRIENDLY TARGETS (WCAG 2.5.5 — 44 × 44px minimum) ---------------------------------------------------------------- */ a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], select, label, summary, .btn, nav.site-nav > a, .mobile-menu-toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Navigation links are inline-flex but allow wrapping label text */ nav.site-nav > a { white-space: nowrap; padding: 10px 12px; } /* Restore natural display for purely textual inline anchors */ p a, li a, td a, .note a, .sub a, .footer-wrap a { display: inline; min-height: unset; min-width: unset; } /* ---------------------------------------------------------------- 4. MOBILE NAVIGATION ---------------------------------------------------------------- */ @media (max-width: 767px) { .nav-wrap { flex-wrap: wrap; gap: 8px; } nav.site-nav { width: 100%; gap: 4px; } nav.site-nav > a { font-size: var(--small); padding: 8px 8px; } /* Hamburger-ready: hide nav when .nav-collapsed is set by mobile-menu.js */ nav.site-nav.nav-collapsed { display: none; } nav.site-nav.nav-expanded { display: flex; flex-direction: column; width: 100%; } /* Hamburger button */ .mobile-menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 8px; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; } .mobile-menu-btn span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } @media (min-width: 768px) { .mobile-menu-btn { display: none !important; } } /* ---------------------------------------------------------------- 5. GRID ADJUSTMENTS ---------------------------------------------------------------- */ /* KPI / stat grids: 1-column on mobile */ @media (max-width: 639px) { .kpi-grid, .census-grid, .metric-grid { grid-template-columns: 1fr !important; } .metric { grid-column: span 12 !important; } } /* Feature / content grids: 1-column on mobile. Intentionally named classes only — the [class*="grid"] glob was removed because it collapsed deal-calculator, scenario-builder, and HNA results panels unintentionally on narrow screens. */ @media (max-width: 639px) { .features-grid, .cards-grid, .home-steps-grid, .policy-grid, .lender-grid, .resource-grid { grid-template-columns: 1fr !important; } } /* Tablet: 2-column KPI grid */ @media (min-width: 640px) and (max-width: 1023px) { .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ---------------------------------------------------------------- 6. MAIN SHELL — responsive padding / margins ---------------------------------------------------------------- */ @media (max-width: 639px) { main { margin: 0.5rem auto; padding: var(--sp3); border-radius: var(--radius); } } @media (max-width: 767px) { main { margin: 0.5rem; } .footer-wrap { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ---------------------------------------------------------------- 7. TOUCH SPACING — larger gaps between interactive elements ---------------------------------------------------------------- */ @media (max-width: 767px) { .toolbar { gap: 12px; } .controls-row { gap: 14px; } .btn { padding: 10px 18px; } select, input, textarea { padding: 10px 14px; font-size: 1rem; /* Prevent iOS zoom on focus */ } label { margin-bottom: 8px; } } /* ---------------------------------------------------------------- 8. TABLE — horizontal scroll on narrow screens ---------------------------------------------------------------- */ @media (max-width: 767px) { .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 540px; } } /* ---------------------------------------------------------------- 9. IMAGES — responsive defaults ---------------------------------------------------------------- */ img:not(.leaflet-tile):not(.leaflet-marker-icon):not(.leaflet-marker-shadow) { max-width: 100%; height: auto; } /* ---------------------------------------------------------------- 10. PRINT — basic page-break and hide interactive elements (Detailed print styles live in print.css) ---------------------------------------------------------------- */ @media print { .mobile-menu-btn, .dark-mode-toggle { display: none !important; } }