/* Our own styles. Nothing here restyles the site — it exists only to make the mobile
   menu render, which it never has: Elementor's JavaScript never bound a handler to the
   toggle, so the dropdown had no correct appearance to inherit. See DECISIONS.md D-018.

   The nav widget sits in a one-third-width column, so the absolutely positioned dropdown
   inherited that narrow width and wrapped every label to one letter per line. */

@media (max-width: 767px) {
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    /* Sit below the toggle rather than on top of it: Elementor anchors the panel to the
       widget's top-left, which is the toggle itself, so the button you just tapped
       disappeared underneath the menu. */
    top: 100%;
    margin-top: 8px;

    width: max-content;
    min-width: 15rem;
    max-width: 90vw;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    overflow: hidden;
    z-index: 100;
  }

  /* Elementor's own dropdown rules assume its JS set a height. Let the panel size to its
     contents instead, and give the links a normal tap target. */
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown ul {
    width: 100%;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-sub-item {
    white-space: nowrap;
    padding: 0.85rem 1.25rem;
    line-height: 1.3;
  }
}

/* Contact form states. The form itself is styled by the site; these two are ours because
   Gravity Forms used to draw them. */
.pt-form-confirmation {
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 4px;
  background: #fff;
  color: #1f2933;
}
.pt-form-confirmation p { margin: .5rem 0 0; }
.pt-form-error {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-left: 4px solid #b3261e;
  background: #fdecea;
  color: #5f1512;
}