/* ============================================================
   Mobile menu backdrop (tablet and phone)
   While the menu is open, the overlay Webflow creates for it is
   stretched to the full width and to the bottom of the screen and
   dimmed, so the menu panel stands out from the page behind it.
   Tapping the dimmed area closes the menu. Webflow writes the
   overlay's height inline (it matches the menu), which is why
   !important is needed here.
   The navbar sits in a container 90% of the screen wide, centred,
   so the overlay reaches out 50vw either side of its middle, and the
   menu panel inside it runs edge to edge.

   Fading: Webflow shows the overlay the moment the menu opens and
   hides it only once the closing slide has finished (400ms, set on
   the navbar). The dim colour fades in from clear as the overlay
   appears (@starting-style), and fades back to clear as soon as the
   hamburger loses its open state, so it is gone by the time Webflow
   hides the overlay. Both fades match the menu's 400ms slide.
   ============================================================ */

@media (max-width: 991px) {
  .navbar .w-nav-overlay {
    left: calc(50% - 50vw);
    right: auto;
    width: 100vw;
    height: 100vh !important;
    /* With a dropdown expanded the menu can run past the bottom of a
       phone screen, so let it scroll. */
    overflow-y: auto;
    background-color: rgba(11, 43, 48, .55);
    transition: background-color .4s cubic-bezier(.25, 1, .5, 1);
  }

  @starting-style {
    .navbar .w-nav-overlay {
      background-color: rgba(11, 43, 48, 0);
    }
  }

  .navbar:has(.w-nav-button:not(.w--open)) .w-nav-overlay {
    background-color: rgba(11, 43, 48, 0);
  }
}