/* MoltoGusto huisstijl voor Fluent Forms.

   Kleuren uit het thema: #616136 primary, #b5b58b primary-light,
   #5b707b secondary, #565656 tertiary.

   Geldt voor elk Fluent Forms formulier op de site (.frm-fluent-form), dus ook
   voor formulieren die later worden toegevoegd.

   !important is nodig: public/css/app.css zet alle invoervelden met !important
   vast op 2rem hoog met een grijze rand, en die stylesheet kan niet opnieuw
   gebouwd worden (zie README).

   Ingeladen vanuit app/setup.php. */

form.frm-fluent-form {
  --fluentform-primary: #616136;
  --fluentform-secondary: #565656;
  --fluentform-danger: #9c5a4a;
  --fluentform-border-color: #5b707b;
  --fluentform-border-radius: 0;
  --fluentform-input-select-height: auto;

  /* Lucht tussen het kopje boven het formulier en het eerste label. Beide zijn
     in hoofdletters, zonder deze ruimte lopen ze in elkaar over. */
  margin-top: 28px;
}

/* Ruimte tussen de velden */
form.frm-fluent-form .ff-el-group {
  margin-bottom: 28px;
}

/* Labels: klein, vet en in hoofdletters, zoals de kopjes elders op de site */
/* app.css bevat
   "label,legend{font-size:.75rem!important;font-weight:400!important;letter-spacing:-.02em!important}",
   dus deze drie regels hebben ook !important nodig. De negatieve letterafstand
   uit app.css maakt kleine hoofdletters juist slechter leesbaar. */
form.frm-fluent-form .ff-el-input--label label {
  color: #5b707b;
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 16px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

form.frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
  color: #b5b58b;
}

/* Invoervelden: vierkant en in de lijn van de knoppen op de contactpagina.
   !important is nodig omdat app.css alle invoervelden met !important vastzet
   op 2rem hoog met een grijze rand. */
form.frm-fluent-form .ff-el-form-control {
  background-color: #fff !important;
  border: 1px solid #5b707b !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #565656 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  height: 56px !important;
  letter-spacing: -0.02em !important;
  line-height: 20px !important;
  padding: 0 16px !important;
  width: 100% !important;
}

form.frm-fluent-form .ff-el-form-control::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

form.frm-fluent-form .ff-el-form-control:focus {
  border-color: #616136 !important;
  box-shadow: inset 0 0 0 1px #616136 !important;
  outline: none !important;
}

/* Het tekstvlak mag hoger zijn dan een gewoon veld */
form.frm-fluent-form textarea.ff-el-form-control {
  height: auto !important;
  min-height: 160px !important;
  padding: 16px !important;
  resize: vertical;
}

/* Keuzelijst met een zelfgetekend pijltje */
form.frm-fluent-form select.ff-el-form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 44px !important;
}

form.frm-fluent-form .ff-el-input--content:has(select) {
  position: relative;
}

form.frm-fluent-form .ff-el-input--content:has(select):after {
  border-bottom: 1px solid #5b707b;
  border-right: 1px solid #5b707b;
  content: "";
  height: 8px;
  margin-top: -6px;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: rotate(45deg);
  width: 8px;
}

/* Keuzerondjes */
form.frm-fluent-form .ff-el-form-check {
  margin-bottom: 10px;
}

form.frm-fluent-form .ff-el-form-check-label {
  color: #565656;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 24px;
}

form.frm-fluent-form .ff-el-form-check-input {
  accent-color: #616136;
  height: 16px !important;
  margin-right: 6px;
  width: 16px !important;
}

/* Verzendknop, gelijk aan .btn .btn-secondary uit het thema */
form.frm-fluent-form .ff_submit_btn_wrapper {
  margin-top: 36px;
}

form.frm-fluent-form .ff-btn-submit {
  background-color: #5b707b !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  height: auto !important;
  letter-spacing: 0.06em;
  line-height: 14px !important;
  /* 14px regelhoogte plus 2x21px maakt 56px: even hoog als de bel- en
     mailknop op de contactpagina (h-14). */
  padding: 21px 40px !important;
  text-transform: uppercase;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: auto !important;
}

form.frm-fluent-form .ff-btn-submit:hover,
form.frm-fluent-form .ff-btn-submit:focus {
  background-color: #616136 !important;
}

/* Foutmeldingen */
form.frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: #9c5a4a !important;
}

form.frm-fluent-form .text-danger {
  color: #9c5a4a;
  font-size: 12px;
  letter-spacing: -0.02em;
}

/* Bevestiging na verzenden */
.fluentform .ff-message-success {
  background-color: #f6f4ef;
  border: 1px solid #b5b58b;
  border-radius: 0;
  box-shadow: none;
  color: #565656;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 26px;
  padding: 20px 24px;
}