/**
 * Mobile nav dropdown.
 *
 * webflow.js used to build this panel at runtime, sizing the overlay and the
 * menu with inline styles that aren't in the exported stylesheet. It's no
 * longer loaded (it mutated the DOM before React hydrated and cost us the
 * map), so the panel is described here instead.
 *
 * Everything is scoped to .w-nav-overlay and to the collapse breakpoint. The
 * desktop nav is a translucent pill floating over the hero, drawn entirely by
 * the exported stylesheet -- .navbar-3 is position:fixed with a transparent
 * background, and .nav-menu-2 supplies the pill. Nothing here may touch
 * either. (An earlier version set .navbar-3 to position:relative to anchor
 * this overlay; that dropped the navbar back into flow, so the hero no longer
 * ran underneath it and the bar rendered as a solid white band. A fixed
 * ancestor is already a positioning context -- no such rule is needed.)
 */

@media screen and (max-width: 991px) {
  /* Exported as display:none; shown here so it can transition rather than
     appear and vanish outright. */
  .w-nav-overlay {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0s linear 0.25s;
  }

  .w-nav-overlay.cxw-nav-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  /* The exported .nav-menu-2 mobile rule already carries the translucent
     white-over-blur that reads as light purple against the hero; it just
     needs to actually lay out as a column.
     Selector is deliberately over-qualified: the collapse rule
     `.w-nav[data-collapse=medium] .w-nav-menu{display:none}` is three
     compound selectors and outranks a plainer `.w-nav-overlay .nav-menu-2`,
     which leaves the panel invisible even though it's in the DOM. */
  .w-nav.navbar-3 .w-nav-overlay .nav-menu-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 20px 24px;
  }

  /* .w-nav-link is inline-block, so without this the links flow as a wrapped
     paragraph instead of stacking. */
  .w-nav.navbar-3 .w-nav-overlay .nav-link-2 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 6px;
    text-align: center;
    border-radius: 0;
  }
}