/* ============================================================ SCAMANOT — MOBILE FIX PATCH Version: 1.0 | Date: July 2026 Author: Applied via Cowork/Claude Load AFTER scamanot.css in every . FIXES: 1. Nav "Analyze Now" button cut off on narrow Android screens Root cause: nav padding (0 2rem = 64px) + logo (~168px) + CTA button (~139px) = 307px — overflows a 360px viewport. Also consolidates two competing @media (max-width:768px) blocks that produced inconsistent mobile nav behaviour. 2. Footer horizontal scroll on mobile Root cause: .footer-nav kept display:flex (row) on mobile with gap:3rem across 6 columns — far wider than viewport. Neither .footer-nav nor .footer-col received flex-direction: column at the 768px breakpoint. 3. Footer compliance strip horizontal overflow Root cause: .footer-compliance flex row with separators overflowed on narrow screens. ============================================================ */ /* ── FIX 1: Nav — narrow-screen padding + CTA button ──────── At ≤ 480px reduce nav side-padding from 2rem → 1rem, giving 328px usable width (logo 168px + CTA 139px = 307px ✓). Also tighten the CTA button padding so it breathes on small screens without disappearing. ------------------------------------------------------------ */ @media (max-width: 480px) { body > nav { padding: 0 1rem; } /* Smaller logo image so logo+wordmark takes less horizontal space */ .nav-logo img, .nav-logo-img { height: 28px; } /* Tighter CTA button padding */ .nav-cta { padding: 0.4rem 0.85rem !important; font-size: 0.82rem !important; } } /* Hide the wordmark text on the very smallest screens to guarantee the CTA button always has room */ @media (max-width: 360px) { .nav-wordmark { display: none; } } /* ── FIX 2: Nav — resolve conflicting 768px media queries ──── The existing CSS had two separate @media (max-width:768px) blocks: one that hid .nav-links and one that forced it back with !important. The second (later) block won, but its use of display: list-item !important on a flex child caused unpredictable layout in some Android WebKit builds. This block replaces that behaviour cleanly. ------------------------------------------------------------ */ @media (max-width: 768px) { /* Ensure nav-links shows as a flex row containing only the CTA */ body > nav .nav-links { display: flex !important; align-items: center; gap: 0; } /* Hide all nav items except the last one (CTA button) */ body > nav .nav-links li:not(:last-child) { display: none !important; } /* Show the CTA li as a flex item (not list-item) for safe cross-browser layout inside a flex container */ body > nav .nav-links li:last-child { display: flex !important; align-items: center; } /* Ensure the nav-toggle (hamburger) stays hidden — it exists in the CSS but the current HTML has no toggle button element. Avoids phantom space if a button is ever added later. */ .nav-toggle { display: none !important; } } /* ── FIX 3: Footer — stack columns to single column ───────── .footer-nav contains 6 .footer-col children. At 768px the parent flex container (.footer-top) got flex-direction:column, but .footer-nav itself stayed as a multi-column flex row — the 6 columns plus gap:3rem created a total width far wider than any mobile screen. Fix: on mobile, turn .footer-nav into a vertical stack and give each .footer-col full width so links never overflow. Also fix .footer-top, which also kept row direction in some contexts (flex override from v1.4b patch in main CSS). ------------------------------------------------------------ */ @media (max-width: 768px) { /* Stack brand + nav vertically inside footer-top */ footer .footer-top { flex-direction: column !important; gap: 2rem !important; } /* Stack the 6 footer columns vertically */ .footer-nav { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; width: 100%; min-width: 0; } /* Each column takes full available width */ .footer-col { width: 100%; min-width: 0; } /* Brand column no longer needs a max-width cap on mobile */ .footer-brand, .footer-brand-col { max-width: 100% !important; } } /* ── FIX 4: Footer compliance strip — wrap on narrow screens ─ The GDPR / SOC2 / etc. badge row (.footer-compliance) uses inline separators (.fc-sep) that prevent wrapping. On mobile: allow wrapping and hide the pipe separators. ------------------------------------------------------------ */ @media (max-width: 600px) { .footer-compliance { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem 1rem; justify-content: center; } /* Hide the " | " separator spans between badges */ .fc-sep { display: none !important; } /* Each badge takes natural width and centres itself */ .fc-item { flex-shrink: 0; } }