/* Mobile + baseline guardrails for the imported CRA site. NOTE: the export styles everything inline, so mobile overrides that touch an inline property MUST use !important. */ /* Clip horizontal overflow on only. Setting overflow-x on too turns the body into the scroll container, which kills window scroll events (and with them the sticky-header condense). */ html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; } img, video, iframe, table, pre { max-width: 100%; } img { height: auto; } /* ---------- Hamburger mobile nav (matches NJPFB header action) ---------- */ .cra-nav-toggle { display: none; background: #0D1F30; color: #fff; border: 0; border-radius: 8px; font-size: 18px; line-height: 1; padding: 11px 13px; cursor: pointer; flex: none; } .cra-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; background: #fff; border-bottom: 1px solid #E2E7EE; box-shadow: 0 24px 48px rgba(13, 31, 48, 0.18); padding: 14px 20px 24px; max-height: 100vh; overflow-y: auto; z-index: 70; } .cra-mobile-menu.open { display: block; } .cra-mm-group { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid #F0F3F7; } .cra-mm-top { font-family: var(--font-display, inherit); font-weight: 700; font-size: 16px; color: #0D1F30; text-decoration: none; padding: 10px 0; } .cra-mm-kids { display: flex; flex-direction: column; padding-left: 10px; } .cra-mm-kids a { display: flex; gap: 10px; font-size: 14px; color: #556275; text-decoration: none; padding: 9px 0; } .cra-mm-kids a span { font-weight: 700; color: #1B3A5C; width: 22px; flex: none; } .cra-mm-cta { display: flex; align-items: center; justify-content: center; margin-top: 16px; background: #E8853D; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; padding: 14px 18px; border-radius: 8px; } .cra-mm-phone { display: flex; justify-content: center; margin-top: 12px; font-weight: 700; font-size: 15px; color: #0D1F30; text-decoration: none; padding: 8px; } /* ---------- Header: logo + phone + CTA + hamburger on one row ---------- */ @media (max-width: 900px) { .cra-nav-toggle { display: inline-flex; } [data-cra-header] > div { flex-wrap: nowrap !important; padding: 8px 16px !important; gap: 10px !important; justify-content: space-between !important; } [data-cra-header] > div > a:first-child img { height: 32px !important; } [data-cra-header] nav { display: none !important; } /* single-column layout for auto-fit grids with large minmax tracks */ [style*="grid-template-columns"][style*="minmax("] { grid-template-columns: 1fr !important; } } @media (max-width: 560px) { [data-cra-header] > div > div a[href^="tel"] { display: none !important; } } @media (max-width: 480px) { [data-cra-header] a[href^="tel"] { font-size: 14px !important; } } /* ---------- Tap targets ---------- */ @media (max-width: 768px) { footer a, a[role="button"], button { min-height: 44px; display: inline-flex; align-items: center; } } /* ---------- Long headline / content safety ---------- */ @media (max-width: 900px) { main :where(div, section, article) > * { min-width: 0; } main h1, main h2, main h3, main p, main li { overflow-wrap: anywhere; } } /* Keep the CTA compact on narrow phones */ @media (max-width: 480px) { [data-cra-header] > div > div > a:last-of-type { padding: 10px 12px !important; font-size: 12px !important; } } @media (max-width: 900px) { [data-cra-header] > div { max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; } [data-cra-header] > div > *:not(nav) { min-width: 0 !important; } } /* ---------- Sticky header condense on scroll ---------- */ [data-cra-header] > div { transition: padding 200ms cubic-bezier(0.2, 0, 0, 1), gap 200ms cubic-bezier(0.2, 0, 0, 1); } [data-cra-header] img, [data-cra-header] a[role="button"], [data-cra-header] > div > div > a:last-of-type { transition: height 200ms cubic-bezier(0.2, 0, 0, 1), padding 200ms cubic-bezier(0.2, 0, 0, 1); } [data-cra-header].cra-scrolled { background: rgba(255, 255, 255, 0.97) !important; } [data-cra-header].cra-scrolled > div { padding-top: 4px !important; padding-bottom: 4px !important; } [data-cra-header].cra-scrolled > div > a:first-child img { height: 34px !important; } @media (max-width: 900px) { [data-cra-header].cra-scrolled > div > a:first-child img { height: 28px !important; } [data-cra-header].cra-scrolled { min-height: 0 !important; } } /* Silo closing CTA */ @media (max-width: 480px) { .cra-silo-close-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .cra-silo-close-actions > a { width: 100%; box-sizing: border-box; } .cra-silo-close-tertiary { justify-content: center; padding-top: 8px !important; padding-bottom: 8px !important; } }