/* [hap_form_modal] — Gravity Forms in a native <dialog>.
   Tokens resolve to site.css / theme.json; the literal fallbacks keep the modal
   readable if it is ever rendered outside the theme's cascade.
   The dialog is DISPLAY-TOGGLED rather than left to the UA sheet so the same
   rules cover browsers with no HTMLDialogElement (see .hap-modal--fallback). */

.hap-modal {
  background: transparent;
  border: 0;
  color: var(--ink, #3c1f11);
  display: none;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  position: fixed;
  width: 100%;
}

.hap-modal[open] {
  align-items: center;
  display: flex;
  justify-content: center;
  /* Gutter lives on the dialog so the panel can grow to the full remaining box. */
  padding:
    calc(1.25rem + env(safe-area-inset-top, 0px))
    calc(1.25rem + env(safe-area-inset-right, 0px))
    calc(1.25rem + env(safe-area-inset-bottom, 0px))
    calc(1.25rem + env(safe-area-inset-left, 0px));
}

.hap-modal::backdrop {
  background: rgba(60, 31, 17, 0.58);
}

/* No ::backdrop without native dialog support — the element dims itself. */
.hap-modal--fallback[open] {
  background: rgba(60, 31, 17, 0.58);
  z-index: 100000;
}

.hap-modal__panel {
  background:
    linear-gradient(135deg, rgba(255, 250, 244, 0.99), rgba(248, 232, 209, 0.97));
  border: 1px solid var(--line, rgba(122, 74, 46, 0.14));
  border-radius: 1.6rem;
  box-shadow: var(--shadow, 0 18px 40px rgba(60, 31, 17, 0.12));
  display: flex;
  flex-direction: column;
  /* Panel never exceeds the dialog's content box, so the body scrolls, not the page. */
  max-height: 100%;
  max-width: 34rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.hap-modal--small .hap-modal__panel {
  max-width: 26rem;
}

.hap-modal--large .hap-modal__panel {
  max-width: 46rem;
}

.hap-modal__header {
  align-items: flex-start;
  border-bottom: 1px solid var(--line, rgba(122, 74, 46, 0.14));
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
}

.hap-modal__title {
  color: var(--ink, #3c1f11);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}

.hap-modal__title:focus-visible {
  outline: 2px solid var(--rust, #b5532d);
  outline-offset: 4px;
}

.hap-modal__close {
  align-items: center;
  background: rgba(122, 74, 46, 0.07);
  border: 1px solid var(--line, rgba(122, 74, 46, 0.14));
  border-radius: 999px;
  color: var(--rust-deep, #7a4a2e);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  /* 44px minimum touch target. */
  height: 2.75rem;
  justify-content: center;
  margin: -0.35rem -0.35rem 0 0;
  padding: 0;
  transition: background-color 0.18s ease, color 0.18s ease;
  width: 2.75rem;
}

.hap-modal__close:hover,
.hap-modal__close:focus-visible {
  background: var(--rust, #b5532d);
  color: var(--wp--preset--color--white, #fff);
}

.hap-modal__body {
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  /* Contain the rubber band so a scroll at the end does not move the page. */
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.hap-modal__status {
  color: var(--muted, #654e40);
  margin: 0;
  padding: 1.25rem 0;
  text-align: center;
}

.hap-modal__status--error {
  color: var(--rust-deep, #8e371c);
}

/* Give the shell a stable height while the form is in flight so the panel does
   not snap from one line of text to a full form. */
.hap-modal[data-hap-loaded="0"] .hap-modal__body,
.hap-modal:not([data-hap-loaded]) .hap-modal__body {
  min-height: 7rem;
}

.hap-modal__intro {
  color: var(--muted, #7a6a5d);
  margin: 0 0 1.1rem;
}

.hap-form-modal__trigger,
.hap-open-form,
[class*="hap-open-form-"] {
  cursor: pointer;
}

a.hap-form-modal__trigger {
  text-decoration: underline;
}

.hap-form-modal__notice {
  background: #fff4e5;
  border-left: 3px solid var(--rust, #b5532d);
  color: var(--rust-deep, #7a4a2e);
  font-size: 0.9rem;
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
}

/* Scroll lock. Set on <html> while any modal is open; the gap replaces the
   scrollbar width so the page behind does not jump sideways. */
.hap-modal-scroll-lock,
.hap-modal-scroll-lock body {
  overflow: hidden !important;
}

.hap-modal-scroll-lock body {
  padding-right: var(--hap-modal-scroll-gap, 0px);
}

/* ---- Gravity Forms inside the modal ---------------------------------------
   Low-specificity nudges only: GF's own form theme keeps ownership of the
   field furniture. These stop horizontal overflow in a narrow panel and align
   the submit button with the theme's .button. */

/* Accent colours come from the shortcode's style_settings (GF scopes its own
   inline block behind an ID selector), so nothing here re-declares --gf-* vars. */
.hap-modal__body .gform_wrapper {
  margin: 0;
}

.hap-modal__body .gform_wrapper form {
  margin: 0;
}

.hap-modal__body .gform_wrapper .gform_fields {
  grid-row-gap: 1rem;
}

.hap-modal__body .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hap-modal__body .gform_wrapper select,
.hap-modal__body .gform_wrapper textarea {
  max-width: 100%;
  width: 100%;
}

.hap-modal__body .gform_wrapper textarea {
  resize: vertical;
}

.hap-modal__body .gform_wrapper .gform_footer {
  margin: 1.35rem 0 0;
  padding: 0;
}

.hap-modal__body .gform_wrapper .gform_footer .gform_button,
.hap-modal__body .gform_wrapper .gform_page_footer .gform_button,
.hap-modal__body .gform_wrapper .gform_page_footer .gform_next_button,
.hap-modal__body .gform_wrapper .gform_page_footer .gform_previous_button {
  background: linear-gradient(135deg, var(--rust, #b5532d), #d87538);
  border: none;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(181, 83, 45, 0.24);
  color: var(--wp--preset--color--white, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  min-height: 2.9rem;
  padding: 0.78rem 1.5rem;
  width: auto;
}

.hap-modal__body .gform_confirmation_wrapper,
.hap-modal__body .gform_confirmation_message {
  color: var(--ink, #3c1f11);
}

.hap-modal__body .gform_confirmation_wrapper:focus-visible {
  outline: 2px solid var(--rust, #b5532d);
  outline-offset: 4px;
}

.hap-modal__body .gform_wrapper .gform-phone__dropdown {
  /* Absolutely positioned inside .hap-modal__body's scroll container, so it is
     clipped rather than overlaying the page. Cap it to a fraction of the panel
     so the list scrolls itself instead of pushing the sheet taller. */
  max-height: 40vh;
  max-width: 100%;
}

.hap-modal__body .gform_wrapper .gform-grid-row {
  /* GF's name/date rows are multi-column; let them wrap in a narrow panel. */
  flex-wrap: wrap;
}

/* GF's ajax transport iframe: keep it out of the flow so it cannot add height
   to the panel or open a scrollbar of its own. */
.hap-modal__body iframe[name^="gform_ajax_frame_"] {
  border: 0;
  height: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
}

/* ---- Mobile: bottom sheet -------------------------------------------------- */
@media (max-width: 640px) {
  .hap-modal[open] {
    align-items: flex-end;
    padding: 0;
  }

  .hap-modal__panel {
    border-radius: 1.4rem 1.4rem 0 0;
    max-height: 92vh;
    max-height: 92dvh; /* Follows the collapsing mobile URL bar. */
    max-width: 100%;
  }

  .hap-modal__header {
    padding: 1.1rem 1.15rem 0.9rem;
  }

  .hap-modal__body {
    padding: 1.1rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
  }

  /* >=16px keeps iOS Safari from zooming the viewport on field focus. */
  .hap-modal__body .gform_wrapper input:not([type="checkbox"]):not([type="radio"]),
  .hap-modal__body .gform_wrapper select,
  .hap-modal__body .gform_wrapper textarea {
    font-size: 16px;
  }

  .hap-modal__body .gform_wrapper .gform_footer .gform_button,
  .hap-modal__body .gform_wrapper .gform_page_footer .gform_button {
    width: 100%;
  }
}

/* Short landscape phones: the sheet would otherwise leave no room to scroll. */
@media (max-height: 460px) and (max-width: 900px) {
  .hap-modal__panel {
    max-height: 100%;
  }

  .hap-modal__header {
    padding-bottom: 0.7rem;
    padding-top: 0.8rem;
  }
}

/* ---- Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hap-modal[open] .hap-modal__panel {
    animation: hap-modal-rise 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hap-modal[open]::backdrop {
    animation: hap-modal-fade 0.24s ease both;
  }

  .hap-modal.is-closing .hap-modal__panel {
    animation: hap-modal-rise 0.18s ease reverse both;
  }

  .hap-modal.is-closing::backdrop {
    animation: hap-modal-fade 0.18s ease reverse both;
  }
}

@keyframes hap-modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hap-modal-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}