/*
 * Replaces the parts of Webflow's runtime the navbar depended on.
 *
 * The navbar uses data-collapse="all", so Webflow's stylesheet hides
 * .w-nav-menu at every breakpoint and relied on JS to reveal it. Webflow's IX2
 * interactions also handled the menu's hover states, so those are reimplemented
 * in CSS here. Toggled by components/NavToggle.tsx.
 */

/* ---------------------------------------------------------------- open state */

.w-nav.nav-open .w-nav-menu {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
}

/*
 * The stock heights (103vh, plus 1200px of bottom padding) exist to give IX2
 * room to animate the panel in. Without the animation they are just dead space,
 * so the panel is sized to its content instead.
 */
.w-nav.nav-open .nav-menu-gimo-2-0,
.w-nav.nav-open .nav-right-gimo-2-0 {
  height: auto;
  min-height: 0;
  padding-bottom: 6vh;
}

body.nav-open-lock {
  overflow: hidden;
}

/*
 * The links are meant to sit flush right, with the hover art opening to their
 * left. .side-menu-gimo-2-0 already sets text-align: right, but that has no
 * effect unless the flex container actually spans the panel — as a flex item it
 * otherwise shrinks to fit its content and the links end up hugging the left.
 */
.w-nav.nav-open .nav-flex-container-gimo-2-0 {
  flex: 1 1 100%;
  width: 100%;
}

/* ------------------------------------------------- hover art (was IX2-driven) */

/*
 * Each link has a decorative illustration positioned absolutely over the menu.
 * IX2 faded these in on hover; by default they must be hidden or all of them
 * stack on top of the links at once.
 */
/*
 * Stock Webflow positions each illustration relative to its own link, with a
 * different offset per link, so they pop up in four different places. Anchoring
 * them to the panel instead keeps every image in one fixed spot, so hovering
 * down the list swaps the artwork without moving it.
 */
.w-nav.nav-open .side-menu-gimo-2-0 {
  position: static;
}

.w-nav .menu-image-gimo-2-0 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 0;

  /* One shared position, vertically centred in the panel and to the left of
     the links. Overrides the per-link inset/margin from Webflow's stylesheet. */
  position: absolute;
  top: 50%;
  left: 35%;
  right: auto;
  bottom: auto;
  margin-left: 0;
  transform: translate(-50%, -50%);
}

/* Keep the link text above the illustration that fades in behind it. */
.side-menu-gimo-2-0 > a {
  position: relative;
  z-index: 1;
}

.side-menu-gimo-2-0:hover .menu-image-gimo-2-0 {
  opacity: 1;
}

/* The underline sweeps out from the left on hover rather than sitting there. */
.underline-hover-gimo-2-0 {
  width: 0;
  transition: width 0.25s ease;
}

.side-menu-gimo-2-0:hover .underline-hover-gimo-2-0 {
  width: 100%;
}

/* Touch devices have no hover, so keep the links unobstructed. */
@media (hover: none) {
  .menu-image-gimo-2-0 {
    display: none;
  }
}

/* ------------------------------------------------------------------- burger */

.burger-line-gimo-2-0,
.burger-line-2-gimo-2-0 {
  transition: transform 0.3s ease;
}

.w-nav.nav-open .burger-line-gimo-2-0 {
  transform: translateY(4px) rotate(45deg);
}

.w-nav.nav-open .burger-line-2-gimo-2-0 {
  transform: translateY(-4px) rotate(-45deg);
}