/*!
 * Contact Form — 1:2777 - 1:2818, the enquiry form and the three topics.
 *
 * Figma 1:2769 in the Monal-Pages file AlYDxKHhVoiNp5UI47BElc.
 *
 * Split from design/contact.css, which stays the source of truth. Mobile first;
 * desktop values are the frame's, as --monal-u units (1u == 1 Figma px / 10).
 */



/* ==========================================================================
   2. FORM + TOPICS  1:2777 - 1:2818
   ========================================================================== */
.monal-contact-form { position: relative; padding: var(--monal-page-gap) 0 0; }

.monal-contact-form__grid { display: grid; gap: calc(var(--monal-u) * 5); }

/* 1:2790 — 66/72, two lines. */
.monal-contact-form .monal-contact-form__title { color: var(--monal-c-ink); }


.monal-contact-form__form { margin-top: calc(var(--monal-u) * 3); }

.monal-contact-form__fields {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--monal-u) * 2) calc(var(--monal-u) * 2.02);
}

.monal-contact-field { display: grid; align-content: start; gap: calc(var(--monal-u) * 1); min-width: 0; }

.monal-contact-field--wide { grid-column: 1 / -1; }

/* 1:2792 — Poppins Regular 22/28 at 70%. */
.monal-contact-field__label {
  font-size: max(calc(var(--monal-u) * 1.6), 14px); line-height: 1.4;
  color: var(--monal-c-muted);
}

.monal-contact-field__label b { color: var(--monal-c-orange); font-weight: 500; }

/* Scoped under .monal-contact-form so it outranks the theme's
   input[type=…] / textarea / select rules (border, padding, colours).
   1:2794 — #F2F2F2, radius 10, 61.688 tall; the text sits 23.71 in. */
.monal-contact-form .monal-contact-field__input {
  display: block; width: 100%; min-height: 48px;
  padding: calc(var(--monal-u) * 1.2) calc(var(--monal-u) * 1.6);
  border: 1px solid transparent; border-radius: 10px;
  background: #f2f2f2;
  font: inherit; font-size: max(calc(var(--monal-u) * 1.5), 16px); line-height: 1.4;
  color: var(--monal-c-ink);
  transition: border-color .25s, background-color .25s;
  -webkit-appearance: none; appearance: none;
}

.monal-contact-form .monal-contact-field__input::placeholder { color: rgba(30, 25, 22, .5); opacity: 1; }

.monal-contact-form .monal-contact-field__input:hover { background-color: #ececec; }

.monal-contact-form .monal-contact-field__input:focus { outline: none; border-color: var(--monal-c-orange); background-color: #fff; }

.monal-contact-form .monal-contact-field__input:focus-visible { box-shadow: 0 0 0 3px rgba(237, 120, 44, .25); }

.monal-contact-form .monal-contact-field__input[aria-invalid="true"] { border-color: #c0392b; }

/* The subject select shows its placeholder in the placeholder colour until a
   real topic is chosen, and draws its own chevron. */
.monal-contact-form select.monal-contact-field__input {
  padding-right: calc(var(--monal-u) * 4.4); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(30, 25, 22, .6) 50%), linear-gradient(135deg, rgba(30, 25, 22, .6) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

.monal-contact-form select.monal-contact-field__input:invalid { color: rgba(30, 25, 22, .5); }

/* 1:2814 — 160.624 tall. */
.monal-contact-form textarea.monal-contact-field__input { min-height: calc(var(--monal-u) * 14); resize: vertical; }

/* The honeypot: present for bots, never for people. */
.monal-contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; font-size: 12px; }


/* 1:2817 — #ED782C, 760 x 57.223, the leaf corner (TL / BR 15.43);
   1:2818 Poppins SemiBold 14/21.606 uppercase, white. */
.monal-contact-form__submit {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--monal-u) * 1);
  width: 100%; min-height: calc(var(--monal-u) * 5.2);
  margin-top: calc(var(--monal-u) * 1.2); padding: 0 calc(var(--monal-u) * 2);
  border: 0; border-radius: 15.43px 0 15.43px 0;
  background: var(--monal-c-orange); color: #fff; cursor: pointer;
  font: inherit; font-weight: 600; font-size: max(calc(var(--monal-u) * 1.4), 13px); line-height: 1.55;
  text-transform: uppercase;
  transition: background-color .3s, box-shadow .3s;
}

/* Hello Elementor's reset paints every [type=submit] / button #C36 with white
   text on :hover and :focus, so every state is restated here, scoped one
   class deeper to outrank it. Hover darkens to the site's solid-orange hover
   (.monal-round-btn--solid) and lifts a soft orange shadow. */
.monal-contact-form .monal-contact-form__submit,
.monal-contact-form .monal-contact-form__submit:focus { background-color: var(--monal-c-orange); color: #fff; }

.monal-contact-form .monal-contact-form__submit:hover {
  background-color: #d9661d; color: #fff;
  box-shadow: 0 calc(var(--monal-u) * .8) calc(var(--monal-u) * 2) rgba(237, 120, 44, .28);
}

.monal-contact-form .monal-contact-form__submit:active { background-color: #c85a15; box-shadow: none; }

.monal-contact-form__submit:focus-visible { outline: 2px solid var(--monal-c-ink); outline-offset: 3px; }

.monal-contact-form .monal-contact-form__submit[disabled] { background-color: var(--monal-c-orange); box-shadow: none; opacity: .6; cursor: progress; }

/* Result line under the button (success / error), announced politely. */
.monal-contact-form__status { margin: calc(var(--monal-u) * 1.4) 0 0; font-size: max(calc(var(--monal-u) * 1.5), 14px); line-height: 1.5; }

.monal-contact-form__status:empty { display: none; }

.monal-contact-form__status.monal-is-ok { color: var(--monal-c-green); }

.monal-contact-form__status.monal-is-error { color: #c0392b; }


/* 1:2778 — intro 22/36 at 70%, two paragraphs a blank line apart. */
.monal-contact-form__intro p + p { margin-top: calc(var(--monal-u) * 2); }

.monal-contact-topics { margin: calc(var(--monal-u) * 3.4) 0 0; padding: 0; list-style: none; display: grid; gap: calc(var(--monal-u) * 3); }

/* 1:2782 — Poppins Bold 22/28 uppercase #2C5A4F; 1:2781 24/36 at 70%. */
.monal-contact-topic__title {
  margin: 0; font-weight: 700; text-transform: uppercase;
  font-size: max(calc(var(--monal-u) * 1.5), 14px); line-height: 1.4;
  color: var(--monal-c-green);
}

.monal-contact-topic__text { margin: calc(var(--monal-u) * .8) 0 0; color: var(--monal-c-muted); }

@media (min-width: 768px) {
  
    .monal-contact-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  
  
    /* --- form + topics --------------------------------------------------- */
    /* 1:2790 at y641.2: 103.3 under the band's end (537.9). */
    .monal-contact-form { padding-top: calc(var(--monal-u) * 10.33); }
  
    .monal-contact-form__grid {
      grid-template-columns: calc(var(--monal-u) * 76) calc(var(--monal-u) * 67.2);
      gap: 0; justify-content: space-between; align-items: start;
    }
  
    .monal-contact-form .monal-contact-form__title {
      width: calc(var(--monal-u) * 58.42);
      font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.2);
      letter-spacing: calc(var(--monal-u) * -.264);
    }
  
    /* First label at y855.2: 70 under the two-line title (641.2 + 144). */
    .monal-contact-form__form { margin-top: calc(var(--monal-u) * 7); }
  
    /* Rows: label 28 + 15 + field 61.688, then 30 to the next label. */
    .monal-contact-form__fields { gap: calc(var(--monal-u) * 3) calc(var(--monal-u) * 2.022); }
  
    .monal-contact-field { gap: calc(var(--monal-u) * 1.5); }
  
    .monal-contact-field__label { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8); }
  
    .monal-contact-form .monal-contact-field__input {
      min-height: calc(var(--monal-u) * 6.169); padding: calc(var(--monal-u) * 1.684) calc(var(--monal-u) * 2.371);
      font-size: calc(var(--monal-u) * 2); line-height: calc(var(--monal-u) * 2.8);
    }
  
    /* A select draws its own content box; a fixed height keeps it level with
       the text inputs beside it. */
    .monal-contact-form input.monal-contact-field__input,
    .monal-contact-form select.monal-contact-field__input { height: calc(var(--monal-u) * 6.169); }
  
    .monal-contact-form textarea.monal-contact-field__input { height: calc(var(--monal-u) * 16.062); min-height: 0; }
  
    /* 1:2817 at y1340.2, 12 under the message box (1167.58 + 160.624). */
    .monal-contact-form__submit {
      min-height: calc(var(--monal-u) * 5.722); margin-top: calc(var(--monal-u) * 1.2);
      font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.161);
    }
  
    .monal-contact-form__intro { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3.6); }
  
    .monal-contact-form__intro p + p { margin-top: calc(var(--monal-u) * 3.6); }
  
    /* 1:2782 at y927.2 — 70 under the intro's last line (641.2 + 6 x 36:
       two lines, a blank one, three lines). */
    .monal-contact-topics { margin-top: calc(var(--monal-u) * 7); gap: calc(var(--monal-u) * 5); }
  
    .monal-contact-topic__title { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8); }
  
    /* 1:2781 — 25 under the title, 24/36, w617.393. */
    .monal-contact-topic__text {
      margin-top: calc(var(--monal-u) * 2.5); width: calc(var(--monal-u) * 61.74);
      font-size: calc(var(--monal-u) * 2.4); line-height: calc(var(--monal-u) * 3.6);
    }
  
    /* 1:2971 / 1:2970 — the blurred orange ellipse (653.357 once blurred) off
       the right edge at y849.73 (beside the form) and y2464.21 (beside the
       FAQs). Each is drawn by the section it sits beside: Elementor's lazy-load
       blanks backgrounds in a container until that container nears the screen. */
    .monal-contact-form::before,
    .monal-contact-faq::before {
      content: ""; position: absolute; z-index: -1; pointer-events: none;
      left: 50%; margin-left: calc(var(--monal-u) * 64.332);
      width: calc(var(--monal-u) * 65.336); height: calc(var(--monal-u) * 65.336);
      background: url(../../assets/monal/img/pages/lead-ellipse.svg) center / 100% 100% no-repeat;
    }
  
    /* The form section starts at y537.9 (the band's end). */
    .monal-contact-form::before { top: calc(var(--monal-u) * 31.183); }
}