/*
 * Form 3's fallback fields are driven by the NLF finder controller instead of
 * Fluent Forms' hidden-field conditional UI. Before the controller initializes,
 * keep create-only content hidden to prevent a first-load flash. After setup,
 * only elements carrying the native hidden attribute are suppressed. Crucially,
 * create mode does NOT force display:block; Fluent Forms is allowed to restore
 * each field/container's own flex/grid/block layout.
 */
#fluentform_3:not(.nlf-group-finder--ready) .nlf-create-group-only,
form[data-form_id="3"]:not(.nlf-group-finder--ready) .nlf-create-group-only,
#fluentform_3 .nlf-create-group-only[hidden],
form[data-form_id="3"] .nlf-create-group-only[hidden] {
  display: none !important;
}

/*
 * Static create-Group guidance sits directly on the dark navy form panel.
 * Keep it readable and slightly tighter so the primary message stays close
 * to two lines on desktop without changing labels or input text.
 */
#fluentform_3 .nlf-create-group-message,
#fluentform_3 .nlf-create-group-message p,
#fluentform_3 .nlf-create-group-message div,
form[data-form_id="3"] .nlf-create-group-message,
form[data-form_id="3"] .nlf-create-group-message p,
form[data-form_id="3"] .nlf-create-group-message div {
  color: #fff !important;
  font-size: clamp(17px, 1.25vw, 20px) !important;
  line-height: 1.45 !important;
}

/* v0.5.8 — create-Group layout refinements. */

/* The static guidance has no label of its own, so it should not inherit the
 * site's normal label/input two-column geometry. Give it the entire content
 * width of the navy panel. */
#fluentform_3 .nlf-create-group-message,
form[data-form_id="3"] .nlf-create-group-message {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 1fr !important;
  box-sizing: border-box !important;
}

#fluentform_3 .nlf-create-group-message .ff-el-input--content,
form[data-form_id="3"] .nlf-create-group-message .ff-el-input--content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}

#fluentform_3 .nlf-create-group-message p,
form[data-form_id="3"] .nlf-create-group-message p {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* The compound Fluent Forms Name control normally puts First and Last Name in
 * two cells. On this site each nested field itself uses a wide label/input row,
 * so two of those rows cannot safely sit side-by-side. Stack the two cells while
 * retaining the approved blue-label / white-input appearance of each row. */
#fluentform_3 .nlf-create-name-row,
form[data-form_id="3"] .nlf-create-name-row {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

#fluentform_3 .nlf-create-name-row > .ff-t-cell,
form[data-form_id="3"] .nlf-create-name-row > .ff-t-cell {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#fluentform_3 .nlf-create-name-row > .ff-t-cell + .ff-t-cell,
form[data-form_id="3"] .nlf-create-name-row > .ff-t-cell + .ff-t-cell {
  margin-top: 1.35rem !important;
}

/* Let the long topic prompt use two clean lines in its blue label block rather
 * than overflowing or being cut off at the label-column edge. */
#fluentform_3 .nlf-create-topic-field .ff-el-input--label,
#fluentform_3 .nlf-create-topic-field .ff-el-input--label label,
form[data-form_id="3"] .nlf-create-topic-field .ff-el-input--label,
form[data-form_id="3"] .nlf-create-topic-field .ff-el-input--label label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
}

#fluentform_3 .nlf-create-topic-field .ff-el-input--label label,
form[data-form_id="3"] .nlf-create-topic-field .ff-el-input--label label {
  font-size: clamp(18px, 1.35vw, 21px) !important;
}

/* Fluent Forms replaces/hides the form with its confirmation message after a
 * create-Group submission. The wrapper remains on the navy panel, so keep all
 * confirmation copy readable there. */
.fluentform_wrapper_3 .ff-message-success,
.fluentform_wrapper_3 .ff-message-success p,
.fluentform_wrapper_3 .ff-message-success div,
.fluentform_wrapper_3 .ff-message-success span,
#fluentform_3 .ff-message-success,
#fluentform_3 .ff-message-success p,
#fluentform_3 .ff-message-success div,
#fluentform_3 .ff-message-success span {
  color: #fff !important;
}


/* v0.5.9 — prevent Form 3 layout helpers from widening the whole page.
 * The v0.5.8 full-width message/name rules were visually correct but could
 * allow a nested Fluent Forms box to contribute a few extra pixels to the
 * document's intrinsic width. Keep all finder geometry inside its own panel
 * so the site's full-width header/footer remain flush with the viewport. */
.fluentform_wrapper_3,
#fluentform_3,
form[data-form_id="3"] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: clip;
}

#fluentform_3 .nlf-create-group-only,
#fluentform_3 .nlf-create-group-message,
#fluentform_3 .nlf-create-group-message .ff-el-input--content,
#fluentform_3 .nlf-create-name-row,
#fluentform_3 .nlf-create-name-row > .ff-t-cell,
#fluentform_3 .nlf-create-topic-field,
form[data-form_id="3"] .nlf-create-group-only,
form[data-form_id="3"] .nlf-create-group-message,
form[data-form_id="3"] .nlf-create-group-message .ff-el-input--content,
form[data-form_id="3"] .nlf-create-name-row,
form[data-form_id="3"] .nlf-create-name-row > .ff-t-cell,
form[data-form_id="3"] .nlf-create-topic-field {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Safari versions that do not support overflow: clip fall back to hidden. */
@supports not (overflow: clip) {
  .fluentform_wrapper_3,
  #fluentform_3,
  form[data-form_id="3"] {
    overflow-x: hidden;
  }
}


/* v0.6.1 — preserve the v0.6.0 homepage overflow fix without breaking About-page sticky motion.
 * The JS now applies nlf-has-group-finder only when Form 3 is embedded as a
 * standalone page form. About Motion pages and modal-only forms are excluded.
 *
 * Original v0.6.0 intent — eliminate the remaining document-level horizontal scroll.
 * v0.5.9 contained Form 3 itself, but Safari can still retain a horizontal
 * scroll range when an ancestor/full-width block has already contributed to
 * the document's scroll width. There is no intentional horizontal scrolling
 * on pages using the Group Finder, so contain it at the document root too. */
html.nlf-has-group-finder,
body.nlf-has-group-finder {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.nlf-has-group-finder {
  margin-left: 0;
  margin-right: 0;
}


/* v0.6.2 — the About Motion modal sits on a light beige surface. Form 3 is
 * shared with the navy homepage panel, so override only modal copies back to
 * dark text while keeping the homepage create-group guidance/confirmation white. */
.nlf-am6__modal .nlf-create-group-message,
.nlf-am6__modal .nlf-create-group-message p,
.nlf-am6__modal .nlf-create-group-message div,
.nlf-am6-modal .nlf-create-group-message,
.nlf-am6-modal .nlf-create-group-message p,
.nlf-am6-modal .nlf-create-group-message div,
.nlf-am6__modal .ff-message-success,
.nlf-am6__modal .ff-message-success p,
.nlf-am6__modal .ff-message-success div,
.nlf-am6__modal .ff-message-success span,
.nlf-am6-modal .ff-message-success,
.nlf-am6-modal .ff-message-success p,
.nlf-am6-modal .ff-message-success div,
.nlf-am6-modal .ff-message-success span {
  color: #1b1b1b !important;
}

/* v0.6.3 — create-Group coordination note. Keep it understated beneath the
 * request fields. The same Form 3 is reused on dark and light surfaces. */
#fluentform_3 .nlf-create-group-timing,
#fluentform_3 .nlf-create-group-timing p,
form[data-form_id="3"] .nlf-create-group-timing,
form[data-form_id="3"] .nlf-create-group-timing p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

#fluentform_3 .nlf-create-group-timing,
form[data-form_id="3"] .nlf-create-group-timing {
  margin: 2px 0 26px !important;
}

/* Form 3 sits on beige inside both the About modal and Session-page modal.
 * Keep create-mode explanatory copy, the timing note, and Fluent Forms'
 * confirmation copy dark there while the homepage copy remains white. */
.nlf-am6__modal .nlf-create-group-timing,
.nlf-am6__modal .nlf-create-group-timing p,
.nlf-am6-modal .nlf-create-group-timing,
.nlf-am6-modal .nlf-create-group-timing p,
.nlf-session-modal .nlf-create-group-message,
.nlf-session-modal .nlf-create-group-message p,
.nlf-session-modal .nlf-create-group-message div,
.nlf-session-modal .nlf-create-group-timing,
.nlf-session-modal .nlf-create-group-timing p,
.nlf-session-modal .ff-message-success,
.nlf-session-modal .ff-message-success p,
.nlf-session-modal .ff-message-success div,
.nlf-session-modal .ff-message-success span {
  color: #17263c !important;
}