/* Fluent Forms in the site's clothes.

   The plugin's stylesheets are not loaded (inc/forms.php). Its markup is
   a wrapper div (which carries our `tcc-form`), then the form, then one
   `.ff-el-group` per field holding `.ff-el-input--label` and
   `.ff-el-input--content`. These rules give that markup the look of the
   static build's `.tcc-form` / `.tcc-field` (site.css), rule for rule. */

.tcc-form.fluentform { max-width: 40rem; margin-inline: auto; }
.tcc-download .tcc-form.fluentform,
.tcc-lead__form .tcc-form.fluentform { max-width: none; }

/* The fields sit in a fieldset inside the form; that is the grid. Its
   screen-reader legend is taken out of the flow so it takes no cell. */
.tcc-form .frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.tcc-form .frm-fluent-form > fieldset > legend { position: absolute; }
@media (max-width: 640px) { .tcc-form .frm-fluent-form > fieldset { grid-template-columns: 1fr; } }
.tcc-download .tcc-form .frm-fluent-form > fieldset,
.tcc-lead__form .tcc-form .frm-fluent-form > fieldset { grid-template-columns: 1fr; gap: var(--s-2); }

.tcc-form .ff-el-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tcc-form .ff-el-group.tcc-field--full,
.tcc-form .ff-el-group:has(textarea),
.tcc-form .ff_submit_btn_wrapper,
.tcc-form .ff-message-success,
.tcc-form .ff-errors-in-stack { grid-column: 1 / -1; }

.tcc-form .ff-el-input--label { margin: 0; padding: 0; }
.tcc-form .ff-el-input--label label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tcc-charcoal);
}
.tcc-band--deep .tcc-form .ff-el-input--label label { color: rgba(255, 255, 255, 0.86); }
.tcc-form .ff-el-input--label .ff-el-required,
.tcc-form .ff-el-input--label .text-danger { color: inherit; }

.tcc-form .ff-el-form-control {
  width: 100%;
  padding: 14px var(--s-2);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-input);
  border-radius: var(--tcc-radius);
}
.tcc-form textarea.ff-el-form-control { min-height: 128px; resize: vertical; }
.tcc-form .ff-el-form-control:focus { border-color: var(--tcc-blue); outline: none; }
.tcc-form .ff-el-is-error .ff-el-form-control { border-color: var(--tcc-ink); border-width: 2px; }
.tcc-form .ff-el-is-error .error,
.tcc-form .text-danger.error { font-size: var(--t-small); font-weight: 700; color: var(--tcc-ink); }
.tcc-band--deep .tcc-form .ff-el-is-error .error { color: rgba(255, 255, 255, 0.92); }

.tcc-form .ff-el-is-required.asterisk-right label::after { content: " *"; }
.tcc-form .ff-el-is-required.asterisk-left label::before { content: "* "; }

.tcc-form .ff_submit_btn_wrapper { display: block; text-align: center; margin: 0; }
.tcc-download .tcc-form .ff_submit_btn_wrapper { text-align: left; }
.tcc-form .ff-btn-submit { font: inherit; }
.tcc-form .ff-btn-submit[disabled] { opacity: 0.6; cursor: wait; }

.tcc-form .tcc-note { margin-top: var(--s-2); }
.tcc-form .ff-message-success {
  padding: var(--s-3);
  border: 1px solid var(--rule-input);
  border-radius: var(--tcc-radius);
  text-align: center;
}
.tcc-form .ff-el-help-message { font-size: var(--t-small); color: var(--ink-muted); }
.tcc-form .ff-el-input--content { position: relative; }
.tcc-form .ff-el-group.ff_hidden,
.tcc-form input[type="hidden"] { display: none; }