/**
 * Contact Us form (Ninja Forms #15) — compact layout and branded checkboxes.
 *
 * The "Which of these omni topics are important to you right now?" question
 * added 11 stacked checkboxes. That field alone rendered 378px tall and pushed
 * the submit button roughly 400px below the fold on /join/.
 *
 * Scoped by form container id rather than by page, so the rules follow form 15
 * wherever it is embedded. `nf-form-15_1-cont` is the second instance on
 * /join/ (the sticky panel that appears once you scroll past the hero).
 *
 * Enqueued on the front page, /join/ and /contact-us/ — see
 * enqueue_parent_styles() in functions.php.
 *
 * Note on the checkbox markup: Ninja Forms' display-opinions-light.css draws
 * the visible control with two absolutely positioned pseudo-elements on the
 * label — `::after` is the box, `::before` is a FontAwesome tick — while the
 * real input sits underneath. Styling therefore targets the pseudo-elements,
 * not the input.
 */

/* Visual Composer's per-element CSS sets this at (1,3,0) specificity. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .nf-field-container {
  margin-bottom: 10px !important;
}

/* Ninja Forms sizes option labels at 18px/700 (.nf-form-content label), which
   made them larger than the question label above them. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-label-span {
  font-size: 14px;
  line-height: 18px;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}

/* Ninja Forms zeroes both margins with `margin: 0 !important` at (0,3,0), and
   Visual Composer pins the label to 2px, so the gap under the question is set
   from the list side: 2px + 6px = 8px. `.list-checkbox-wrap` in the chain is
   what carries these past Ninja Forms. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .list-checkbox-wrap .nf-field-element ul {
  margin-top: 6px !important;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .list-checkbox-wrap .nf-field-element li {
  margin-bottom: 6px !important;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element label {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  margin-bottom: 0;
}

/* The native input grew from 17px to 39px once checked — that is what read as
   the checked state being bigger, and it stretched the whole grid row.
   `appearance: none` stops it drawing (and growing), and pinning it out of flow
   over the pseudo box keeps every row 18px. It stays exactly over the visible
   box so that clicks and the focus state line up with what the user sees. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element li {
  position: relative;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  /* The label sits 30px into the row and draws its box at -28px, so 2px puts
     the ring exactly around the visible box. */
  left: 2px !important;
  top: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* The heavy black ring on focus is not an outline on the input, it is a shadow
   Ninja Forms paints on the box (display-opinions-light.css):

     input[type=checkbox]:focus+label:after,
     input[type=radio]:focus+label:after { box-shadow: 0 0 0 3px #333; }

   Text inputs get no such rule, and because this keys off `:focus` rather than
   `:focus-visible` it fires on click as well as on keyboard navigation.
   Bootstrap separately gives checkboxes `outline: 5px auto`
   (insivia-parent/css/bootstrap.css). Both are dropped, leaving a border colour
   change as the focus indicator on the visible box. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element input[type="checkbox"]:focus {
  outline: none;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element input[type="checkbox"]:focus + label::after {
  border-color: #4f89ae;
  box-shadow: none;
}

/* The box. Ninja Forms offsets it 3px down, which was tuned for its own larger
   option label; against the 18px line box used here that left the text sitting
   high of the box, so both pseudo-elements start at the top of the line. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element label::after {
  top: 0;
  background-color: #fff;
  border-color: #c4c4c4;
  border-radius: 3px;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element label:hover::after {
  border-color: #4f89ae;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element label.nf-checked-label::after {
  background-color: #4f89ae;
  border-color: #4f89ae;
}

/* The tick — Ninja Forms sets it at 24px, which overflowed the 18px box. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element label::before {
  left: -28px;
  top: 0;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element label.nf-checked-label::before {
  color: #fff;
}

/* Ninja Forms ships a 200px textarea; VC overrides it to 126px. */
:is([id^="nf-form-15-"], [id^="nf-form-15_"]) .nf-form-content .textarea-container .nf-field-element textarea {
  height: 80px !important;
  min-height: 80px !important;
}

@media (max-width: 600px) {
  :is([id^="nf-form-15-"], [id^="nf-form-15_"]) .listcheckbox-container .nf-field-element ul {
    grid-template-columns: 1fr;
  }
}