/* ═══════════════════════════════════════════════════════════════════════════ Critical Path Partners: site navigation (v2, 2026-09-26) ─────────────────────────────────────────────────────────────────────────── One menu on every page: Services, For Lawyers, For Contractors, Samples, Case Studies, Pricing, Blog, a Free Tools menu (Free Claim Check, Schedule Health Report, Free P6 Viewer) and the Talk to CPP button. Before this sheet the menu carried nine links and a button with no white-space rule, so every laptop width between 900 and about 1,500 px broke each label over two lines; the buyer pages and Pricing were not in it. Pages carry their own copies of the base nav styles, so this sheet is linked LAST in and states what it needs with enough specificity to win. Below 1,180 px the menu collapses behind the burger; the pages' own mobile rules collapse at 900 px, so the collapsed-menu rules are repeated here for the 900-1,180 px band. ═══════════════════════════════════════════════════════════════════════════ */ nav.nav .nav-brand-text, nav.nav .nav-links a, nav.nav .nav-drop-btn { white-space: nowrap; } nav.nav .nav-links { display: flex; gap: 18px; align-items: center; } /* Free Tools menu: opens on hover and on keyboard focus, no script needed. */ nav.nav .nav-drop { position: relative; } nav.nav .nav-drop-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; color: var(--slate-700, #334155); display: inline-flex; align-items: center; gap: 5px; } nav.nav .nav-drop-btn::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } nav.nav .nav-drop-btn:hover, nav.nav .nav-drop.active .nav-drop-btn { color: var(--red, #C8392F); } nav.nav .nav-drop-menu { display: none; position: absolute; top: calc(100% + 12px); right: 0; min-width: 230px; padding: 6px 0; background: #fff; border: 1px solid var(--slate-100, #e2e8f0); border-radius: 6px; box-shadow: 0 12px 32px rgba(15, 37, 64, 0.12); z-index: 120; } /* A transparent bridge so the pointer can travel from the button to the menu. */ nav.nav .nav-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } nav.nav .nav-drop:hover .nav-drop-menu, nav.nav .nav-drop:focus-within .nav-drop-menu { display: block; } nav.nav .nav-drop-menu a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--slate-700, #334155); } nav.nav .nav-drop-menu a:hover, nav.nav .nav-drop-menu a.active { color: var(--red, #C8392F); background: var(--slate-50, #f1f5f9); } /* Collapsed menu, 0-1,180 px. */ @media (max-width: 1180px) { nav.nav .nav-links a:not(.nav-cta), nav.nav .nav-links .nav-drop { display: none; } nav.nav .nav-burger { display: inline-flex !important; } nav.nav .nav-links.open { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 8px 20px 14px; border-bottom: 1px solid var(--slate-200, #cbd5e1); box-shadow: 0 8px 24px rgba(15, 37, 64, 0.06); z-index: 100; } nav.nav .nav-links.open a, nav.nav .nav-links.open .nav-drop { display: block !important; width: 100%; box-sizing: border-box; text-align: left; } nav.nav .nav-links.open a { padding: 13px 0; } nav.nav .nav-links.open > a + a, nav.nav .nav-links.open > .nav-drop, nav.nav .nav-links.open > .nav-drop + a { border-top: 1px solid var(--slate-100, #e2e8f0); } /* In the open menu the three free tools are listed, not hidden behind a button. */ nav.nav .nav-links.open .nav-drop-btn { width: 100%; padding: 13px 0 4px; cursor: default; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-500, #64748b); } nav.nav .nav-links.open .nav-drop-btn::after { display: none; } nav.nav .nav-links.open .nav-drop-menu { display: block; position: static; min-width: 0; padding: 0 0 6px 12px; border: 0; box-shadow: none; background: none; } nav.nav .nav-links.open .nav-drop-menu::before { display: none; } nav.nav .nav-links.open .nav-drop-menu a { padding: 10px 0; background: none; } nav.nav .nav-links.open a.nav-cta { margin-top: 12px; padding: 13px 18px; text-align: center; border-top: none; } }