/* ============================================================
   Learning Success — SCREENER FORMS (Fluent conversational)
   Layout repairs for the inline conversational forms that run
   /dyslexia-screener/ and /dyscalculia-screener/ (Fluent Forms
   forms 36 and 43). No page-unique classes exist here: the
   markup is the plugin's, so the selectors are the plugin's
   too, scoped to .ff_conv_app_frame / .ffc_inline_form so no
   other Fluent form on the site is touched.

   Why this file exists — on phones the plugin spends ~180px of
   vertical and ~120px of horizontal padding on every question.
   Long option lists (dyslexia Q "any of these symptoms", the
   age picker, etc.) then run 950–1250px tall on a 375px screen,
   pushing OK / Submit far below the fold. Every declaration
   below buys that space back. The companion gesture guard is
   assets/js/screener-form.js.

   !important is used deliberately: Fluent's conversational CSS
   is enqueued when the shortcode renders, i.e. AFTER the theme
   stylesheets, so plain specificity is not enough.
   ============================================================ */

/* ---- Page chrome on screener pages ---------------------------------- */
/* Body class added by ls_conversational_body_class() in functions.php (and by
   screener-form.js as a fallback). The H1 repeats what the first question
   already says and costs a line of screen. */
body.ls-conv-form .entry-header,
body.ls-conv-form .ast-single-post .entry-title { display: none; }

@media (max-width: 782px) {
  /* Let the form use the full width; it carries its own gutters below. */
  body.ls-conv-form .site-content .ast-container { padding-left: 0; padding-right: 0; }
}

/* ---- The question frame on phones ----------------------------------- */
@media (max-width: 782px) {
  /* Outer gutters: plugin ships 5%/7% + a 6% inner inset + 40px of
     padding on .ff_conv_input, leaving a 255px text column inside a
     375px screen. 14px flat gives back ~90px, which is the difference
     between one-line and two-line answer options. */
  .ff_conv_app_frame .vff,
  .ff_conv_app_frame .vff.vff_layout_default {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Vertical: 60px top + 60px bottom (inner) and 30px + 30px (section). */
  .ffc_inline_form.ffc_conv_wrapper .ff_conv_app .ff_conv_input,
  .ff_conv_app_frame .vff .ff_conv_input {
    padding: 18px 0 26px !important;
  }
  .ff_conv_app_frame .vff .ff_conv_section_wrapper { padding: 8px 0 !important; }

  /* Question heading — keep the type size (dyslexic readers), cut the gap. */
  .ff_conv_app_frame .vff .fh2 { margin-bottom: 14px !important; }
  .ff_conv_app_frame .vff .ffc_q_header { margin-bottom: 0 !important; }

  /* Answer rows: tighter, but never below the 40px touch target. */
  .ff_conv_app_frame .vff ul.f-radios li {
    margin-bottom: 7px !important;
    padding: 8px 10px !important;
    min-height: 42px;
  }
  .ff_conv_app_frame .vff .f-answer { margin-top: 0 !important; }

  /* "OK / Press Enter" row sits right under the last option. */
  .ff_conv_app_frame .vff .f-enter { margin-bottom: 8px !important; }
  .ff_conv_app_frame .vff .f-enter-desc { display: none; }  /* "press Enter ↵" — no keyboard here */
}

/* ---- Never clip the answer block ------------------------------------ */
/* .ffc_inline_form … .ff_conv_app is overflow:hidden and the questions
   animate in from 100px below, so the bottom of a tall question can be
   cropped mid-animation with no way to scroll to it. The frame sizes
   itself to the active question, so letting it overflow costs nothing. */
.ffc_inline_form.ffc_conv_wrapper .ff_conv_app { overflow: visible !important; }
.ff_conv_app_frame .vff .q-form { overflow: visible; }