/* =========================================================
   CONTACT FORM 7: "main-form" layout (.tf-form)
   Used in the Home hero, the Contact page and the
   Book Free Class modal. Columns follow the width of the
   form itself, so it is two columns where there is room
   and one column in the modal and on phones.
========================================================= */

.tf-form__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:18px 20px;
  margin-bottom:22px;
}
.tf-form__field{ display:flex; flex-direction:column; gap:7px; margin:0; min-width:0; }
.tf-form__field--full{ grid-column:1 / -1; }

.tf-form__label{
  font-family:var(--font-heading);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--color-black);
}
.tf-form__req{ color:var(--color-red); }
.tf-form__opt{ color:#999; font-weight:400; text-transform:none; letter-spacing:0; }

/* CF7 wraps every control in a span; make it fill the cell */
.tf-form .wpcf7-form-control-wrap{ display:block; width:100%; }

.tf-form .form-control,
.tf-form .form-select{
  display:block;
  width:100%;
  height:50px;
  margin:0;
  padding:0 16px;
  font-size:.95rem;
  color:var(--color-black);
  background-color:#fafafa;
  border:1px solid #dcdcdc;
  border-radius:6px;
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tf-form .form-select{ padding-right:40px; background-position:right 16px center; cursor:pointer; }
.tf-form textarea.form-control{ height:auto; min-height:120px; padding:14px 16px; resize:vertical; line-height:1.5; }
.tf-form .form-control::placeholder{ color:#a3a3a3; }

.tf-form .form-control:hover,
.tf-form .form-select:hover{ border-color:#c4c4c4; }
.tf-form .form-control:focus,
.tf-form .form-select:focus{
  outline:0;
  background-color:#fff;
  border-color:var(--color-red);
  box-shadow:0 0 0 3px rgba(233,29,38,.15);
}

/* Submit button. The parent theme (Twenty Twenty-One) styles every <button>
   with its own dark colors and high-specificity selectors, so the brand
   colors are forced here for every state. */
.tf-form .tf-form__submit,
.tf-form .tf-form__submit:not(:hover):not(:active):not(.has-background){
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:54px;
  padding:0 24px;
  border:2px solid var(--color-red) !important;
  border-radius:6px;
  background:var(--color-red) !important;
  background-color:var(--color-red) !important;
  color:#fff !important;
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.tf-form .tf-form__submit:hover,
.tf-form .tf-form__submit:active{
  background:#c8141c !important;
  background-color:#c8141c !important;
  border-color:#c8141c !important;
  color:#fff !important;
  transform:translateY(-1px);
}
.tf-form .tf-form__submit:focus,
.tf-form .tf-form__submit:focus-visible{
  background-color:var(--color-red) !important;
  color:#fff !important;
  outline:3px solid rgba(233,29,38,.35) !important;
  outline-offset:2px;
  text-decoration:none;
}
.tf-form .tf-form__submit i{ color:#fff !important; }
.wpcf7-form.submitting .tf-form__submit{ opacity:.7; pointer-events:none; }
.tf-form .wpcf7-spinner{ display:none; }

.tf-form__note{
  margin:14px 0 0;
  text-align:center;
  font-size:.8rem;
  color:#8a8a8a;
}
.tf-form__note i{ margin-right:5px; color:#b5b5b5; }

/* Validation + response messages */
.tf-form .wpcf7-not-valid{ border-color:var(--color-red) !important; background-color:#fff6f6; }
.tf-form .wpcf7-not-valid-tip{ margin-top:5px; font-size:.78rem; color:var(--color-red); }
.wpcf7 form .wpcf7-response-output{
  margin:16px 0 0;
  padding:12px 16px;
  border-radius:6px;
  font-size:.88rem;
  text-align:center;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:#2e9e5b; background:#effaf3; color:#1e6b3d; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{ border-color:var(--color-red); background:#fff6f6; color:#a3121a; }

@media (max-width:575.98px){
  .tf-form__grid{ grid-template-columns:1fr; gap:16px; }
}

/* Give the form more width on phones */
@media (max-width:575.98px){
  .contact-form .contact-form__card,
  .hero .hero-form{ padding:26px 18px; }
  .modal--contact .modal-body{ padding:22px 18px; }
}