/* ============================================================
   FRAMED MINDS — Inventory Pages (Fluent Forms)
   
   Requires: fm-tokens.css (brand variables)
   
   Styles for the Introductory and Full FMI assessment
   form pages powered by Fluent Forms.
   
   Page IDs:
     - Introductory Assessment: 617626
     - Full Assessment:         617624
   
   Last updated: April 4, 2026
   ============================================================ */

/* --- Shorthand selectors ---
   .fm-page-intro = body.page-id-617626
   .fm-page-full  = body.page-id-617624
   We list both page-id and slug-based selectors for resilience.
   ------------------------------------------------------------ */


/* ---------- PAGE BACKGROUND & LAYOUT ---------- */

body.page-id-617626,
body.page-id-617624 {
  background: linear-gradient(180deg, #F4F1E8 0%, #F9FDF3 45%, #FFFFFF 100%) !important;
}

body.page-id-617626 .entry-content,
body.page-id-617624 .entry-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 20px 80px;
}

/* --- Page Title --- */
body.page-id-617626 .entry-title,
body.page-id-617624 .entry-title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--fm-neutral, #151515);
  text-align: center;
  margin-bottom: 32px;
}


/* ---------- MAIN CARD AROUND THE FORM ---------- */

body.page-id-617626 .fluentform,
body.page-id-617624 .fluentform {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid var(--fm-border, #E7EAED);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  padding: 36px 32px 32px;
}

@media (max-width: 768px) {
  body.page-id-617626 .entry-content,
  body.page-id-617624 .entry-content {
    padding: 40px 16px 60px;
  }

  body.page-id-617626 .fluentform,
  body.page-id-617624 .fluentform {
    padding: 24px 20px;
    border-radius: 20px;
  }
}


/* ---------- FORM TITLES & DESCRIPTION ---------- */

body.page-id-617626 .fluentform .ff_t-container h3,
body.page-id-617624 .fluentform .ff_t-container h3,
body.page-id-617626 .fluentform h3.ff-el-heading,
body.page-id-617624 .fluentform h3.ff-el-heading {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fm-neutral, #151515);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

body.page-id-617626 .fluentform .ff_t-container p,
body.page-id-617624 .fluentform .ff_t-container p,
body.page-id-617626 .fluentform .ff-form-description,
body.page-id-617624 .fluentform .ff-form-description {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 0.95rem;
  color: var(--fm-body-secondary, #4A5560);
  margin-bottom: 16px;
  line-height: 1.6;
}


/* ---------- SECTIONS / GROUP BREAKS ---------- */

body.page-id-617626 .fluentform .ff-el-section-break,
body.page-id-617624 .fluentform .ff-el-section-break {
  background: var(--fm-warm-neutral, #F4F1E8);
  border-radius: 16px;
  border: 1px solid #E5E2D7;
  padding: 16px 20px;
  margin: 28px 0 20px;
}

body.page-id-617626 .fluentform .ff-el-section-break-title,
body.page-id-617624 .fluentform .ff-el-section-break-title {
  font-family: var(--fm-font-heading, 'Avenir', 'Nunito Sans', -apple-system, sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--fm-heal-teal, #3A5A40);
  margin-bottom: 4px;
}

body.page-id-617626 .fluentform .ff-el-section-break-subtitle,
body.page-id-617624 .fluentform .ff-el-section-break-subtitle {
  font-size: 0.9rem;
  color: var(--fm-body-secondary, #4A5560);
}


/* ---------- INDIVIDUAL FIELDS ---------- */

body.page-id-617626 .fluentform .ff-el-group,
body.page-id-617624 .fluentform .ff-el-group {
  margin-bottom: 22px;
}

/* Labels — the question text */
body.page-id-617626 .fluentform .ff-el-input--label,
body.page-id-617624 .fluentform .ff-el-input--label {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fm-neutral, #151515);
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Helper text */
body.page-id-617626 .fluentform .ff-el-help-text,
body.page-id-617624 .fluentform .ff-el-help-text {
  font-size: 0.85rem;
  color: var(--fm-meta, #A0A7B0);
}

/* Text inputs, textarea, select */
body.page-id-617626 .fluentform input[type="text"],
body.page-id-617626 .fluentform input[type="email"],
body.page-id-617626 .fluentform input[type="number"],
body.page-id-617626 .fluentform textarea,
body.page-id-617626 .fluentform select,
body.page-id-617624 .fluentform input[type="text"],
body.page-id-617624 .fluentform input[type="email"],
body.page-id-617624 .fluentform input[type="number"],
body.page-id-617624 .fluentform textarea,
body.page-id-617624 .fluentform select {
  border-radius: 12px;
  border: 1px solid var(--fm-border, #E7EAED);
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  background: var(--fm-warm-neutral, #F4F1E8);
  color: var(--fm-neutral, #151515);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.page-id-617626 .fluentform input:focus,
body.page-id-617626 .fluentform textarea:focus,
body.page-id-617626 .fluentform select:focus,
body.page-id-617624 .fluentform input:focus,
body.page-id-617624 .fluentform textarea:focus,
body.page-id-617624 .fluentform select:focus {
  outline: none;
  border-color: var(--fm-cta-green, #BCCF97);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(188, 207, 151, 0.25);
}


/* ---------- RADIO / CHECKBOX OPTIONS ---------- */

body.page-id-617626 .fluentform .ff-el-form-check,
body.page-id-617624 .fluentform .ff-el-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.page-id-617626 .fluentform .ff-el-form-check:hover,
body.page-id-617624 .fluentform .ff-el-form-check:hover {
  background: #faf9f5;
  border-color: var(--fm-border, #E7EAED);
}

/* Native controls */
body.page-id-617626 .fluentform .ff-el-form-check input[type="checkbox"],
body.page-id-617626 .fluentform .ff-el-form-check input[type="radio"],
body.page-id-617624 .fluentform .ff-el-form-check input[type="checkbox"],
body.page-id-617624 .fluentform .ff-el-form-check input[type="radio"] {
  margin: 3px 0 0;
  accent-color: var(--fm-heal-teal, #3A5A40);
}

/* Labels */
body.page-id-617626 .fluentform .ff-el-form-check-label,
body.page-id-617624 .fluentform .ff-el-form-check-label {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 0.92rem;
  color: var(--fm-body-secondary, #4A5560);
  transition: color 0.15s ease;
  cursor: pointer;
  line-height: 1.5;
}

/* Selected state */
body.page-id-617626 .fluentform .ff-el-form-check input:checked + .ff-el-form-check-label,
body.page-id-617624 .fluentform .ff-el-form-check input:checked + .ff-el-form-check-label {
  color: var(--fm-neutral, #151515);
  font-weight: 500;
}

body.page-id-617626 .fluentform .ff-el-form-check:has(input:checked),
body.page-id-617624 .fluentform .ff-el-form-check:has(input:checked) {
  background: #f0f7df;
  border-color: var(--fm-cta-green, #BCCF97);
}


/* ---------- MULTI-STEP PROGRESS ---------- */

body.page-id-617626 .fluentform .ff-step-breadcrumb,
body.page-id-617624 .fluentform .ff-step-breadcrumb {
  margin-bottom: 24px;
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--fm-warm-neutral, #F4F1E8);
  border: 1px solid #E5E2D7;
}

body.page-id-617626 .fluentform .ff-step-breadcrumb li,
body.page-id-617624 .fluentform .ff-step-breadcrumb li {
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--fm-meta, #A0A7B0);
}

body.page-id-617626 .fluentform .ff-step-breadcrumb li.ff-step-active,
body.page-id-617624 .fluentform .ff-step-breadcrumb li.ff-step-active {
  background: var(--fm-heal-teal, #3A5A40);
  color: #FFFFFF;
  font-weight: 600;
}


/* ---------- BUTTONS ---------- */

body.page-id-617626 .fluentform .ff-btn,
body.page-id-617624 .fluentform .ff-btn {
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--fm-font-body, 'Work Sans', 'DM Sans', -apple-system, sans-serif);
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-height: 44px;
}

/* Submit — Introductory (sage) */
body.page-id-617626 .fluentform .ff-btn-submit {
  background: var(--fm-cta-green, #BCCF97);
  color: var(--fm-neutral, #151515);
  box-shadow: 0 2px 12px rgba(188, 207, 151, 0.3);
}

/* Submit — Full (forest green) */
body.page-id-617624 .fluentform .ff-btn-submit {
  background: var(--fm-heal-teal, #3A5A40);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(58, 90, 64, 0.25);
}

body.page-id-617626 .fluentform .ff-btn-submit:hover {
  background: var(--fm-cta-green-hover, #9FAF80);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(159, 175, 128, 0.35);
}

body.page-id-617624 .fluentform .ff-btn-submit:hover {
  background: #2d4833;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(58, 90, 64, 0.35);
}

body.page-id-617626 .fluentform .ff-btn-submit:active,
body.page-id-617624 .fluentform .ff-btn-submit:active {
  transform: translateY(0);
}

/* Previous / Next step buttons */
body.page-id-617626 .fluentform .ff-btn.ff-btn-secondary,
body.page-id-617624 .fluentform .ff-btn.ff-btn-secondary {
  background: var(--fm-warm-neutral, #F4F1E8);
  color: var(--fm-heal-teal, #3A5A40);
  border: 1px solid var(--fm-border, #E7EAED);
  box-shadow: none;
}

body.page-id-617626 .fluentform .ff-btn.ff-btn-secondary:hover,
body.page-id-617624 .fluentform .ff-btn.ff-btn-secondary:hover {
  background: #eae5d4;
}

/* Button wrapper */
body.page-id-617626 .fluentform .ff_submit_btn_wrapper,
body.page-id-617624 .fluentform .ff_submit_btn_wrapper {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* ---------- SUCCESS / ERROR MESSAGES ---------- */

body.page-id-617626 .fluentform .ff-message-success,
body.page-id-617624 .fluentform .ff-message-success {
  background: #f0f7df;
  border-radius: 14px;
  border: 1px solid var(--fm-cta-green, #BCCF97);
  color: var(--fm-heal-teal, #3A5A40);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
}

body.page-id-617626 .fluentform .ff-message-error,
body.page-id-617624 .fluentform .ff-message-error {
  background: #fdf2f2;
  border-radius: 14px;
  border: 1px solid #f5c6cb;
  color: #c0392b;
  padding: 16px 20px;
  font-size: 15px;
}

body.page-id-617626 .fluentform .ff-el-is-error .text-danger,
body.page-id-617624 .fluentform .ff-el-is-error .text-danger {
  font-size: 0.82rem;
  color: #c0392b;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 480px) {
  body.page-id-617626 .entry-title,
  body.page-id-617624 .entry-title {
    font-size: 22px;
  }

  body.page-id-617626 .fluentform .ff-el-section-break,
  body.page-id-617624 .fluentform .ff-el-section-break {
    padding: 14px 14px;
  }

  body.page-id-617626 .fluentform .ff-el-form-check,
  body.page-id-617624 .fluentform .ff-el-form-check {
    padding: 8px 10px;
  }

  body.page-id-617626 .fluentform .ff-btn,
  body.page-id-617624 .fluentform .ff-btn {
    width: 100%;
    text-align: center;
  }
}