/* =========================================================================
   STICKY NAV FIX — 2026-05-22 (v2 — fixed declaration order)
   Loaded LAST after every other stylesheet on every consulting page so
   the navigation bar reliably stays at the top of the viewport when the
   user scrolls.

   v2 (2026-05-23) — Playwright verification on the live homepage showed
   `position: sticky` was computed but sticky behavior was NOT engaging:
   after a 1000px scroll the nav's getBoundingClientRect().top was -1000
   (i.e. the nav scrolled off-viewport along with the page). Sticky was
   silently failing because some ancestor (likely #main, #root, or a
   wrapper rendered by index-v2.jsx.js) does not behave as a stable
   containing block for sticky resolution.

   Fix: drop the sticky-as-primary approach. `position: fixed !important`
   is the AUTHORITATIVE rule. It is viewport-relative and always works
   regardless of containing-block resolution. Page layout already
   reserves space via `<main style="padding-top:100px">` or similar, so
   moving from sticky → fixed produces no visible reflow on pages where
   sticky was actually working.
   ========================================================================= */

html body nav.nav,
html body .nav,
html body #main #root > nav,
html body #root > nav,
html body main > nav,
html body .v2-nav-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    /* Defensive: block any ancestor-transform contamination */
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

/* 2026-05-23 — .v2-nav-container (the React Container inside the homepage
   <nav>) is ALSO position:fixed per the rule above, which floats it out of
   the <nav> parent. The parent <nav> collapses to ~0.8px height, so its
   white background is invisible. The visible bar is the .v2-nav-container
   itself, which had no background of its own — page content scrolled
   visibly behind the nav links. Give .v2-nav-container the same opaque
   white background + soft elevation as the sub-page nav. */
html body .v2-nav-container {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Reserve space under the fixed nav on legacy pages whose main element
   does not already declare padding-top. The 80px matches the desktop
   nav height set in global-layout.css. */
html body main.main-content {
    padding-top: max(80px, var(--nav-height, 80px)) !important;
}

/* Mobile (<=768px) — same authoritative fixed rule. The 70px height
   matches what global-layout.css declares for mobile. */
@media (max-width: 768px) {
    html body nav.nav,
    html body .nav,
    html body #main #root > nav,
    html body #root > nav,
    html body main > nav,
    html body .v2-nav-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 70px !important;
        z-index: 10000 !important;
    }
}