/* =============================================================
   assessment-layout.css — STANDALONE layout fix for assessment pages.
   DO NOT DELETE. Loaded from each assessment HTML template directly.
   Fixes form/footer overlap caused by styles.css specificity conflicts.
   ============================================================= */

.assessment-layout { overflow-x: hidden; }
.assessment-layout main { display: block !important; position: relative; z-index: 1; }

/* Override styles.css .section { padding: 80px 0 } — must use longhands + !important */
.assessment-layout .section {
  padding-top: 0 !important;
  padding-right: 32px !important;
  padding-bottom: 80px !important;
  padding-left: 32px !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Override styles.css .form-shell { max-width: 680px; padding: 0 4px } */
.assessment-layout .form-shell {
  max-width: 720px !important;
  padding: 0 !important;
}

/* Override styles.css .form-card { margin-bottom: 24px; padding: 36px } */
.assessment-layout .form-card {
  background: var(--bone, #FAF7F1) !important;
  border: 1px solid var(--rule, #D9D2C2) !important;
  border-radius: 14px !important;
  padding: 36px 40px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(14,22,32,.04), 0 12px 40px -16px rgba(14,22,32,.18) !important;
}

/* Override styles.css .field { margin-bottom: 14px } */
.assessment-layout .field { margin-bottom: 0 !important; }

/* Override styles.css .form-actions { margin-top: 28px } */
.assessment-layout .form-actions {
  margin-top: 0 !important;
  border-top: 1px solid var(--rule-soft, #E5DFD0);
  padding-top: 24px;
}

/* Form step visibility (assessment.js toggles .active) */
.assessment-layout .form-step { display: none; }
.assessment-layout .form-step.active,
.assessment-layout .form-step.is-active { display: grid; gap: 24px; }

/* Footer clear — prevent overlap */
.assessment-layout footer {
  position: relative !important;
  z-index: 1;
  clear: both;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .assessment-layout .section {
    padding-top: 0 !important;
    padding-right: 20px !important;
    padding-bottom: 60px !important;
    padding-left: 20px !important;
  }
  .assessment-layout .form-card {
    padding: 24px 20px !important;
    border-radius: 10px !important;
  }
  .assessment-layout .form-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .assessment-layout .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .assessment-layout .form-card {
    padding: 20px 16px !important;
  }
}