/* bugfix-mobile-p0-1447052.css Task #1447052: CRITICAL — Mobile P0 fixes at 375px viewport Owns: announce bar + header stacking, hamburger visibility, settlement detail grid, sticky bar vs mobile menu. Does NOT own: menu content styling, search autocomplete, desktop layout. */ /* ═══════════════════════════════════════════════════════════ P0 #1: ANNOUNCE BAR COVERS HEADER Root cause: sticky-header-fixes-1318545.css forces header[role='banner'] to position:fixed; top:0. When announce bar is visible (position:fixed; top:0; z-index > header), it covers the top of the header. Fix: When .has-announce-bar is on , push .hn-header down by the announce bar height. Also ensure the mobile menu top offset matches. ═══════════════════════════════════════════════════════════ */ html.has-announce-bar .hn-header { top: 40px !important; } /* Mobile announce bar is shorter (32px at ≤600px, 30px at ≤375px) */ @media (max-width: 600px) { html.has-announce-bar .hn-header { top: 32px !important; } } @media (max-width: 375px) { html.has-announce-bar .hn-header { top: 30px !important; } } /* Mobile menu must also shift down when announce bar is visible */ html.has-announce-bar .hn-mobile-menu { top: calc(64px + 40px) !important; } @media (max-width: 600px) { html.has-announce-bar .hn-mobile-menu { top: calc(64px + 32px) !important; } } @media (max-width: 375px) { html.has-announce-bar .hn-mobile-menu { top: calc(48px + 30px) !important; } } /* ═══════════════════════════════════════════════════════════ P0 #2: HAMBURGER BUTTON CLIPPED OFF RIGHT EDGE Root cause: sticky-header-fixes-1318545.css forces header to position:fixed, and the WCAG file (mobile-contrast-typography) applies min-width:44px to all links. Combined with the logo's white-space:nowrap and flex-shrink:0, the flex row overflows the 375px viewport. overflow-x:hidden on html/body clips the hamburger. Fix: 1. Allow .hn-right to shrink/collapse when children hidden 2. Allow logo text to truncate on very narrow viewports 3. Ensure hamburger is never pushed off-screen 4. Explicitly override position:fixed back to sticky for .hn-header (the component was designed for sticky; the external CSS override breaks the in-flow layout model) ═══════════════════════════════════════════════════════════ */ /* Restore .hn-header to position:sticky as designed in header-new.ejs. sticky-header-fixes-1318545.css forces position:fixed via header[role='banner'], which breaks the in-flow layout and causes body padding issues. The .hn-header was explicitly built for sticky (see design-system.css comment at line 951). */ .hn-header { position: sticky !important; } /* .hn-right should collapse when all children are hidden on mobile */ @media (max-width: 1023px) { .hn-right { display: none !important; } } /* On narrow viewports, allow logo text to shrink */ @media (max-width: 420px) { .hn-logo { flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; } .hn-logo-name { overflow: hidden !important; text-overflow: ellipsis !important; max-width: 180px !important; } .hn-logo-tag { display: none !important; } } @media (max-width: 375px) { .hn-logo-name { max-width: 150px !important; } /* Ensure pricing link doesn't get inflated by WCAG min-width */ .hn-mobile-pricing { min-width: 0 !important; flex-shrink: 1 !important; } } /* Hamburger: always stays at right edge, never clipped */ .hn-hamburger { flex-shrink: 0 !important; margin-left: auto !important; } /* Override the WCAG min-width:44px on header links — these links are hidden on mobile anyway, but the rule can affect the container sizing */ @media (max-width: 1023px) { .hn-header a.hn-login, .hn-header a.hn-cta, .hn-header .hn-search { min-width: 0 !important; min-height: 0 !important; } } /* ═══════════════════════════════════════════════════════════ P0 #3: SETTLEMENT DETAIL GRID ON MOBILE Root cause: settlement-detail-v2.css has correct responsive rules (1fr at ≤900px), but there may be specificity conflicts from other stylesheets. Defensive fix ensures the grid always stacks on mobile regardless of specificity. Fix: Force single-column layout on narrow viewports with highest-specificity selectors. ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .content-with-sidebar, body.page-settlement-detail .content-with-sidebar { display: block !important; grid-template-columns: none !important; max-width: 100% !important; width: 100% !important; padding: 16px !important; overflow-x: hidden !important; } .content-with-sidebar .detail-content, body.page-settlement-detail .detail-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .content-with-sidebar .sidebar, body.page-settlement-detail .sidebar { position: static !important; width: 100% !important; max-width: 100% !important; } } /* ═══════════════════════════════════════════════════════════ P0 #4: STICKY BAR OVERLAPS OPEN MOBILE MENU Root cause: .hn-sticky-bottom has z-index: calc(var(--z-nav)+5) (1005), while mobile menu has z-index: calc(var(--z-nav)-1) (999). The sticky bar renders on top of the open menu. Fix: Hide .hn-sticky-bottom when the hamburger menu is open. The JS adds .open to .hn-hamburger and .hn-mobile-menu when the menu is toggled. We use a sibling/general selector from the hamburger state to hide the sticky bar via JS (class toggle on a parent element). Since .hn-sticky-bottom is outside the header in the DOM, we can't use pure CSS sibling selectors. Instead, we add a class to body via the hamburger toggle JS. The CSS below hides the sticky bar when body.mobile-menu-open is set. ═══════════════════════════════════════════════════════════ */ body.mobile-menu-open .hn-sticky-bottom, body.mobile-menu-open .sr-gcta-bar, body.mobile-menu-open .sr-scta-bar, body.mobile-menu-open #sr-mobile-cta-bar { display: none !important; } /* Also bump mobile menu z-index above sticky bars for safety */ .hn-mobile-menu.open { z-index: calc(var(--z-nav, 1000) + 10) !important; }