/**
 * Nav dropdown fix: stop the mega-menu panel covering the nav bar.
 *
 * SYMPTOM
 * Hovering along the nav left-to-right works. Right-to-left, once a dropdown
 * opens, the toggles to its left stop responding.
 *
 * CAUSE
 * .nav-wrap is position:fixed, and .nav-dropdown / .dropdown-list are
 * position:static with no offsets, so an open panel is laid out from the top
 * of the fixed bar and spans the full viewport -- painted *over* the toggles
 * beside it. Measured with "Stories" open at 1440px: panel x=0-1440, y=0-533,
 * covering the toggles at x=436, 609 and 714, leaving only "About" at x=1037
 * uncovered. Hover events never reach the covered toggles.
 *
 * FIX
 * Anchor the panel to the viewport, offset by the bar's height, so it opens
 * below the bar rather than across it. position:fixed rather than absolute
 * because both .nav-menu and .navbar are position:relative -- an absolutely
 * positioned panel anchors to .nav-menu and collapses to its width (measured
 * x=332-1108), which fixes the bug but silently breaks the full-bleed design.
 *
 * The offset is set at runtime from the bar's measured height, because
 * .nav-wrap is 69px on desktop and 85px at mobile widths and changes with
 * scroll state. See js/nav-dropdown-fix.js.
 *
 * DESKTOP ONLY. Below 992px the nav collapses to a burger and the Webflow
 * stylesheet deliberately sets .dropdown-list to position:static; display:block
 * so it flows inline inside the menu. Forcing it fixed there tears it out of
 * flow and paints the dropdown over the menu.
 *
 * Kept out of the Webflow stylesheet, which a re-export overwrites.
 */
@media screen and (min-width: 992px) {
  .nav-dropdown .dropdown-list {
    position: fixed;
    top: var(--nav-bar-height, 69px);
    left: 0;
    right: 0;
    width: 100vw;
  }
}

/**
 * Second bug: the panel closed when you moved the pointer down into it.
 *
 * SYMPTOM
 * Hover a nav item, the mega-menu opens; move the pointer straight down
 * towards a link in it and the whole panel disappears before you reach it.
 *
 * CAUSE
 * Introduced by the fix above. The toggle ends at y=52 and the panel was
 * anchored at the bar's full height, y=69 -- a 17px dead band between them
 * belonging to .nav-container, which is neither the toggle nor the panel.
 * Webflow closes on mouseout of the dropdown, so crossing that band closes
 * the menu, and the pointer never gets to the panel to keep it alive.
 * Measured at 1440px: toggle bottom 52, panel top 69, gap 17.
 *
 * FIX
 * Bridge the gap rather than close it: pull the panel up by the gap and give
 * back the same amount as padding-top. The panel's hover area now starts at
 * the toggle's bottom edge, so the pointer is never over dead space, while
 * the content inside still starts below the bar exactly where it did before.
 * background-clip:padding-box keeps the panel's background from painting up
 * behind the bar.
 *
 * Kept as its own declaration rather than folded into the rule above, so the
 * bridging is legible as the deliberate thing it is and does not read as a
 * stray offset.
 */
@media screen and (min-width: 992px) {
  .nav-dropdown .dropdown-list {
    top: calc(var(--nav-bar-height, 69px) - var(--nav-dropdown-bridge, 17px));
    padding-top: var(--nav-dropdown-bridge, 17px);
    background-clip: padding-box;
  }
}