/**
 * Snippet Name: RK: Site-wide form rules (Tech Support modal + Total caption)
 * Generated: 2026-11-01 07:47:04
 * Source: Custom
 * AUTO-GENERATED FILE — DO NOT EDIT.
 */

/* ==============================================================
  RK — Site-wide form rules
  Loads on every page (not only CSF/SIC posts): the Technical Support dialog (form 42),
  whose selectors are unscoped (#gform_wrapper_42) because it opens on CSF, SIC and
  main-site pages alike, and the "Total" caption under Gravity Forms product prices
  (/every-cause/ relies on it).
============================================================== */

/* CSF — Technical Support Addendum v3
   REPLACES v2 entirely. Keep v1's sections 33 + 34 in place;
   they style the trigger anchors and overlay visibility and
   still work. Delete v2's sections 35-v2 through 42-v2 before
   appending this — or just append this; v3's specificity is
   higher than v2's where they overlap.
   What v2 got wrong:
   v2 assumed .gform_fields had a flat list of .gfield children
   and forced a 12-col grid on it. But Gravity Forms wraps the
   fields between each <gsection> into a slug-named div:
       .gform_fields
         > .gfield (Username, hidden)
         > .technical-support-request-form
             > .gfield.gsection (the section divider)
             > .gfield  (Name)
             > .gfield  (Email)
             > ...
         > .what-went-wrong?
             > .gfield.gsection
             > .gfield  ...
         > .technical-context
             > ...
         > .steps-to-reproduce
             > ...
   So .gform_fields has 5 direct children (1 hidden + 4 wrappers),
   and v2's grid placed each wrapper into a 12-col grid cell.
   Combined with some upstream rule on .gform_fields that
   flex-row's it, the 4 wrappers laid out side-by-side as the
   "4 columns" we kept seeing.
   v3 fix:
   - Force .gform_fields to be a normal block (no flex, no grid).
   - Force every section-wrapper to be a normal block.
   - Apply the 12-col grid INSIDE each section wrapper, where the
     actual .gfield children live.
   - Size the dialog explicitly (GoModal has no default width
     wide enough for this form).
   Field-id quick reference (form 42):
     38 = section "Technical Support Request Form"
     43 = section "What Went Wrong?"
     47 = section "Technical Context"
     75 = section "Steps to Reproduce"
     4  = Name (width-half)
     6  = Email (width-half)
     31 = Username (hidden)
     39 = Screenshot HTML block
     46 = Browser Details (hidden)
     48 = Console Log (hidden)
     63 = Screenshot base64 (hidden)
     64 = URL base64 (hidden)
     65 = Data Consent checkbox
     69 = "In what browser..." (gf_list_inline)
35-v3. DIALOG SIZING — give it room
   GoModal's default dialog width is too narrow for this form.
   The dialog has no .technicalsupport ancestor (it's reparented
   to <body>), but we can identify it by the form it contains. */

.go-modal__dialog:has(#gform_wrapper_42) {
  width: min(880px, calc(100vw - 32px)) !important;
  max-width: 880px !important;
  max-height: calc(100vh - 48px) !important;
  padding: 0 !important;
  background: #fff !important;
  border-radius: var(--rk-radius-lg, 14px) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.go-modal__dialog:has(#gform_wrapper_42) .go-modal__header {
  flex: 0 0 auto !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--rk-line, #e5e7eb) !important;
  background: #fff !important;
}

.go-modal__dialog:has(#gform_wrapper_42) .go-modal__title {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--rk-text, #222) !important;
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.go-modal__dialog:has(#gform_wrapper_42) .go-modal__body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 22px 26px 26px 26px !important;
  background: #fff !important;
}

/* 36-v3. WRAPPER + FORM — kill any row-flex on the field list
   This is the THE fix for the 4-column rendering. We force
   .gform_fields to behave as a regular block container. Then we
   force each section-wrapper div (the auto-generated slug divs)
   to also be a regular block. NEITHER level should ever flex. */

#gform_wrapper_42,
#gform_wrapper_42.gform_wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#gform_42,
form#gform_42 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: unset !important;
}

#gform_42 .gform-body,
#gform_42 .gform_body {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: unset !important;
}

/* THE critical rule: .gform_fields is a plain block container,
   children stack normally, no grid, no flex. */

#gform_fields_42,
#gform_wrapper_42 .gform_fields {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* belt-and-suspenders: kill any inherited flex/grid */
  flex-direction: unset !important;
  flex-wrap: unset !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  gap: 0 !important;
}

/* Section wrappers — block-level, full width, with vertical
   spacing between them. These are the slug-named divs that
   wrap each section. */

#gform_wrapper_42 .technical-support-request-form,
#gform_wrapper_42 .what-went-wrong\?,
#gform_wrapper_42 [class*="what-went-wrong"],
#gform_wrapper_42 .technical-context,
#gform_wrapper_42 .steps-to-reproduce {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  flex: unset !important;
  float: none !important;
  clear: both !important;
}

#gform_wrapper_42 .steps-to-reproduce {
  margin-bottom: 0 !important;
}

/* 37-v3. SECTION INTERNALS — 12-col grid INSIDE each wrapper
   Each section-wrapper div has its own internal layout. Inside,
   we put the 12-col grid so half-width Name + Email actually
   sit side-by-side, and everything else spans 12.
   Note: the .gsection divider itself is the first child of each
   wrapper; we force it full-width (span 12). */

#gform_wrapper_42 .technical-support-request-form,
#gform_wrapper_42 [class*="what-went-wrong"],
#gform_wrapper_42 .technical-context,
#gform_wrapper_42 .steps-to-reproduce {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
}

#gform_wrapper_42 .technical-support-request-form > .gfield,
#gform_wrapper_42 [class*="what-went-wrong"] > .gfield,
#gform_wrapper_42 .technical-context > .gfield,
#gform_wrapper_42 .steps-to-reproduce > .gfield {
  grid-column: span 12 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: unset !important;
  float: none !important;
  list-style: none !important;
}

#gform_wrapper_42 .gfield--width-full {
  grid-column: span 12 !important;
}

#gform_wrapper_42 .gfield--width-half {
  grid-column: span 6 !important;
}

#gform_wrapper_42 .gfield--width-third {
  grid-column: span 4 !important;
}

#gform_wrapper_42 .gfield--width-two-thirds {
  grid-column: span 8 !important;
}

#gform_wrapper_42 .gfield--width-quarter {
  grid-column: span 3 !important;
}

/* Sections always full width — they're typographic dividers, not
   layout-affecting elements. */

#gform_wrapper_42 .gfield.gsection {
  grid-column: 1 / -1 !important;
  display: block !important;
  margin: 4px 0 4px 0 !important;
  padding: 0 0 6px 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--rk-line, #e5e7eb) !important;
  background: transparent !important;
}

#gform_wrapper_42 .gsection_title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--rk-text, #222) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  font-family: "Merriweather Sans", sans-serif !important;
}

/* The first section's divider has nothing above it inside its
   wrapper — kill the top margin so it doesn't double-space
   below the wrapper's bottom-margin from the previous section. */

#gform_wrapper_42 .technical-support-request-form > .gfield.gsection:first-child,
#gform_wrapper_42 [class*="what-went-wrong"] > .gfield.gsection:first-child,
#gform_wrapper_42 .technical-context > .gfield.gsection:first-child,
#gform_wrapper_42 .steps-to-reproduce > .gfield.gsection:first-child {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  #gform_wrapper_42 .technical-support-request-form,
  #gform_wrapper_42 [class*="what-went-wrong"],
  #gform_wrapper_42 .technical-context,
  #gform_wrapper_42 .steps-to-reproduce {
    grid-template-columns: 1fr !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
  }
  #gform_wrapper_42 .technical-support-request-form > .gfield,
  #gform_wrapper_42 [class*="what-went-wrong"] > .gfield,
  #gform_wrapper_42 .technical-context > .gfield,
  #gform_wrapper_42 .steps-to-reproduce > .gfield,
  #gform_wrapper_42 .gfield--width-full,
  #gform_wrapper_42 .gfield--width-half,
  #gform_wrapper_42 .gfield--width-third,
  #gform_wrapper_42 .gfield--width-two-thirds,
  #gform_wrapper_42 .gfield--width-quarter {
    grid-column: 1 !important;
  }
}

/* 38-v3. LABELS / TYPOGRAPHY inside the form
   Pin everything to expected size + color. The base stylesheet's
   .csfposttitle (giant brand-blue) was bleeding onto the h4
   inside field 39's HTML content ("Screenshot (required but
   easy)") — kill that bleed by setting the h4 explicitly. */

#gform_wrapper_42 .gform_heading {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
}

#gform_wrapper_42 .gform_required_legend {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.78rem !important;
  color: var(--rk-muted, #6b7280) !important;
  text-align: left !important;
}

#gform_wrapper_42 .gfield_label,
#gform_wrapper_42 legend.gfield_label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--rk-text, #222) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.35 !important;
  border: none !important;
  font-family: "Merriweather Sans", sans-serif !important;
}

#gform_wrapper_42 .gfield_required {
  color: var(--rk-accent, #1e73be) !important;
  margin-left: 3px !important;
}

#gform_wrapper_42 .gfield_description {
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  color: var(--rk-muted, #6b7280) !important;
  text-align: left !important;
  line-height: 1.45 !important;
  font-family: "Merriweather Sans", sans-serif !important;
}

/* The "Screenshot (required but easy)" h4 lives inside a
   gfield_html block. Kill the .csfposttitle-like inherited
   treatment. */

#gform_wrapper_42 .gfield_html h4 {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--rk-text, #222) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: "Merriweather Sans", sans-serif !important;
}

#gform_wrapper_42 .gfield_html p {
  margin: 0 0 8px 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: var(--rk-text-soft, #575760) !important;
}

#gform_wrapper_42 .gfield_html p:last-child {
  margin-bottom: 0 !important;
}

/* 39-v3. INPUTS — width + box-sizing only
   The base stylesheet's input rules (height, border, padding,
   focus ring) look correct. Don't restate them — just contain
   the inputs to their grid cells. */

#gform_wrapper_42 input[type="text"],
#gform_wrapper_42 input[type="email"],
#gform_wrapper_42 input[type="tel"],
#gform_wrapper_42 input[type="url"],
#gform_wrapper_42 input[type="number"],
#gform_wrapper_42 input.large,
#gform_wrapper_42 input.medium,
#gform_wrapper_42 input.small,
#gform_wrapper_42 select,
#gform_wrapper_42 textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#gform_wrapper_42 textarea {
  height: auto !important;
  min-height: 110px !important;
  resize: vertical !important;
}

#gform_wrapper_42 .ginput_complex {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}

#gform_wrapper_42 .ginput_complex > .gform-grid-col,
#gform_wrapper_42 .ginput_complex > span,
#gform_wrapper_42 .ginput_complex > div {
  width: 100% !important;
  min-width: 0 !important;
  grid-column: span 1 !important;
  flex: unset !important;
}

#gform_wrapper_42 .ginput_complex .gform-field-label--type-sub {
  display: none !important;
}

#gform_wrapper_42 .gf_clear,
#gform_wrapper_42 .gf_clear_complex {
  display: none !important;
}

#gform_wrapper_42 .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  flex-direction: unset !important;
}

#gform_wrapper_42 .gfield_checkbox {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

#gform_wrapper_42 .gfield.gf_list_inline .gfield_checkbox {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#gform_wrapper_42 .gfield.gf_list_inline .gfield_checkbox .gchoice {
  flex: 0 1 auto !important;
  width: auto !important;
}

#gform_wrapper_42 .gfield.gf_list_inline .gfield_checkbox .gchoice label {
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
}

@media (max-width: 600px) {
  #gform_wrapper_42 .gfield_radio {
    grid-template-columns: 1fr !important;
  }
}

/* 42-v3. DATA CONSENT (field 65) — small native checkbox
   The base stylesheet turns every checkbox into a giant
   button-pill. That's right for the donate form's "cover the
   fee" choice but wrong for an agreement checkbox. Restore a
   normal checkbox-with-text layout. */

#gform_wrapper_42 #field_42_65 {
  margin-top: 4px !important;
}

/* Hide the redundant "Data Consent" legend — the choice label
   already carries the consent text. */

#gform_wrapper_42 #field_42_65 > .gfield_label,
#gform_wrapper_42 #field_42_65 > legend.gfield_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#gform_wrapper_42 #field_42_65 .gfield_checkbox {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

#gform_wrapper_42 #field_42_65 .gfield_checkbox .gchoice {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

#gform_wrapper_42 #field_42_65 input[type="checkbox"] {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 2px 10px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  accent-color: var(--rk-accent, #1e73be) !important;
  cursor: pointer !important;
}

#gform_wrapper_42 #field_42_65 .gchoice label {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  background: var(--rk-surface-2, #f7f8f9) !important;
  border: 1px solid var(--rk-line, #e5e7eb) !important;
  border-radius: var(--rk-radius, 10px) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--rk-text-soft, #575760) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  font-family: "Merriweather Sans", sans-serif !important;
  transition: background .2s ease, border-color .2s ease !important;
}

#gform_wrapper_42 #field_42_65 .gchoice label:hover {
  background: #fff !important;
  border-color: var(--rk-accent, #1e73be) !important;
  color: var(--rk-text, #222) !important;
}

#gform_wrapper_42 #field_42_65 .gchoice:has(input:checked) label {
  background: var(--rk-accent-soft, #e7f1fa) !important;
  border-color: var(--rk-accent, #1e73be) !important;
  color: var(--rk-text, #222) !important;
}

#gform_wrapper_42 #field_42_65 input[type="checkbox"]:checked + label::before {
  content: none !important;
  display: none !important;
}

#bl-screenshot-paste-zone {
  display: block !important;
  border: 1.5px dashed var(--rk-accent, #1e73be) !important;
  background: var(--rk-accent-soft, #e7f1fa) !important;
  color: var(--rk-text, #222) !important;
  border-radius: var(--rk-radius, 10px) !important;
  padding: 14px 16px !important;
  margin: 4px 0 0 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  cursor: text !important;
  outline: none !important;
  font-family: "Merriweather Sans", sans-serif !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

#bl-screenshot-paste-zone:focus {
  background: #fff !important;
  border-color: var(--rk-accent-dark, #114576) !important;
  box-shadow: 0 0 0 3px var(--rk-accent-glow, rgba(30,115,190,.18)) !important;
}

#bl-screenshot-paste-zone strong {
  color: var(--rk-accent-dark, #114576) !important;
}

#bl-screenshot-status {
  margin-top: 8px !important;
  font-size: 0.82rem !important;
  color: var(--rk-text-soft, #575760) !important;
  min-height: 1em !important;
}

#bl-screenshot-preview img {
  max-width: 100% !important;
  height: auto !important;
  margin-top: 10px !important;
  border-radius: var(--rk-radius-sm, 6px) !important;
  border: 1px solid var(--rk-line, #e5e7eb) !important;
}

#gform_wrapper_42 .ginput_container_fileupload {
  width: 100% !important;
}

#gform_wrapper_42 .gform_drop_area {
  padding: 22px 16px !important;
  background: var(--rk-surface-2, #f7f8f9) !important;
  border: 1.5px dashed var(--rk-line, #e5e7eb) !important;
  border-radius: var(--rk-radius, 10px) !important;
  color: var(--rk-text-soft, #575760) !important;
  text-align: center !important;
}

#gform_wrapper_42 .gform_drop_instructions {
  margin: 0 0 8px 0 !important;
  font-size: 0.9rem !important;
  color: var(--rk-text-soft, #575760) !important;
}

#gform_wrapper_42 .gform_button_select_files {
  display: inline-block !important;
  padding: 9px 18px !important;
  margin: 0 !important;
  background: var(--rk-neutral-btn, #55555e) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--rk-radius-full, 9999px) !important;
  font-family: "Merriweather Sans", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .2s ease, transform .2s ease !important;
}

#gform_wrapper_42 .gform_button_select_files:hover {
  background: var(--rk-neutral-btn-h, #3f4047) !important;
  transform: translateY(-1px) !important;
}

#gform_wrapper_42 .gform_footer,
#gform_wrapper_42 .gform-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 20px 0 0 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px solid var(--rk-line, #e5e7eb) !important;
}

#gform_wrapper_42 input[type="submit"],
#gform_wrapper_42 .gform_button {
  width: auto !important;
  min-width: 240px !important;
  max-width: 100% !important;
  padding: 14px 32px !important;
  font-size: 1rem !important;
}

@media (max-width: 600px) {
  .go-modal__dialog:has(#gform_wrapper_42) {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 24px) !important;
  }
  .go-modal__dialog:has(#gform_wrapper_42) .go-modal__body {
    padding: 18px 18px 22px 18px !important;
  }
  #gform_wrapper_42 input[type="submit"],
  #gform_wrapper_42 .gform_button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* "Total" caption under Gravity Forms product prices (site-wide; was in the CSF sheet) */
.ginput_product_price::after {
  content: "Total";
  display: block;
  margin-top: 0.5em;
  font-size: 0.5em;
}