/* ───────────────────────────────────────────────────────────── */
/* h305_LS_Survey_Layout.css - LS5 Question Layout & Responsiveness */
/* Updated: 2025-08-05                                           */
/* ───────────────────────────────────────────────────────────── */

/* === Base Reset for Question Containers === */
.question-container {
  margin: 0 !important;
  border: none !important;
}

/* === Desktop: Side-by-Side Layout === */
@media screen and (min-width: 768px) {
  .question-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #ccc; /* Visual aid (remove later) */
  }

  .question-container .question-title-container {
    flex: 0 0 35%;
    max-width: 35%;
    padding-right: 1rem;
  }

  .question-container .answer-container {
    flex: 1 1 65%;
    max-width: 65%;
  }

  /* Prevent long question text from crowding */
  .question-title-container .question-text {
    font-weight: bold;
  }

  /* Labels & inputs: expand full width */
  .answer-container input,
  .answer-container label {
    width: 100%;
  }
}

/* === Typography & Spacing === */
.question-number {
  font-size: 1rem;
  font-weight: bold;
  color: #555;
  margin-right: 0.5rem;
}

.question-title-container .question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
}

.question-title-container {
  display: block !important;
}

.question-help-container {
  display: block !important;
  width: 100%;
  margin-top: 0.25rem;
  margin-left: 1.5rem;
}

.question-help-container .ls-questionhelp {
  font-size: 0.95rem;
  color: #666;
}

.question-valid-container {
  font-size: 0.9rem;
  color: #c00;
  margin-top: 0.25rem;
}

.answer-container {
  font-size: 1rem;
}

.answer-container input[type="text"],
.answer-container input[type="email"],
.answer-container input[type="number"],
.answer-container input[type="tel"] {
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.answer-container label.radio-label,
.answer-container label.checkbox-label {
  font-size: 1rem;
  font-weight: normal;
  margin-left: 0.5rem;
}

.ls-input-group-extra.prefix-text,
.ls-input-group-extra.suffix-text {
  font-size: 0.95rem;
  color: #888;
}

.ls-input-group input[type="text"],
.ls-input-group input[type="number"],
.ls-input-group input[type="email"] {
  text-align: left !important;
}

/* === Question Labels === */
.question-text .ls-label-question,
div.question-text > div.ls-label-question {
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  color: #000 !important;
  margin-left: 5% !important;
}

/* === Group Titles (Desktop) === */
.group-title.text-center.h3.space-col {
  color: blue; /* DEBUG (remove/change later) */
  margin: 0.5em 0 !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  text-align: left !important;
  margin-left: 55% !important;
}

/* === Mobile Refinements (≤768px) === */
@media screen and (max-width: 768px) {
  /* Maintain mobile layout, but respect LS relevance hiding */
  .question-container:not(.ls-hidden) {
    padding: 0;
    display: block !important;
  }

  /* Hidden containers collapse fully */
  .question-container.ls-hidden {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Alignment fix: stack title & answer cleanly */
  .question-container:not(.ls-hidden) {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
  }
  .question-title-container,
  .answer-container {
    margin: 0 !important;
    padding: 0.25rem 0 !important;
  }
  .question-text .ls-label-question,
  div.question-text > div.ls-label-question {
    line-height: 1.4 !important;
    display: block;
    margin-left: 2% !important;
    font-size: 1.2rem !important;
  }

  /* Group title: reduced offset & responsive */
  .group-title.text-center.h3.space-col {
    margin-left: 40% !important;
    max-width: calc(100% - 15%) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: ellipsis;
    font-size: 1rem !important;
  }

  /* Inputs: touch-friendly spacing */
  .answer-container input[type="text"],
  .answer-container input[type="email"],
  .answer-container input[type="number"],
  .answer-container input[type="tel"] {
    min-height: 2.4em !important;
  }
}

/* === Flatten Unnecessary Wrappers === */
.answer-container .ls-answers,
.answer-container .ls-answers.row,
.answer-container .ls-input-maxchars,
.answer-container .ls-input-group-extra.prefix-text,
.answer-container .ls-input-group-extra.suffix-text {
  display: contents !important;
}

.answer-container .ls-input-group-extra:empty {
  display: none !important;
}

/* === User Input Text Styling === */
.answer-container input[type="text"],
.answer-container input[type="email"],
.answer-container input[type="number"],
.answer-container input[type="tel"],
input.form-control {
  font-size: 1.5rem !important;
  color: #000 !important;
  font-weight: 500 !important;
  text-align: left !important;
  line-height: 1.4 !important;
  padding: 0.4rem 0.6rem;
}

/* === Inline alignment for single-line inputs (Frame & Engine fields) === */
.answer-container .ls-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem; /* small spacing between label and input */
}

.answer-container .ls-input-group label {
  margin: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
}

.answer-container .ls-input-group input[type="text"],
.answer-container .ls-input-group input[type="number"] {
  flex: 1 1 auto !important;
  max-width: 250px; /* limit width for better inline balance */
}

/* Force radio/checkbox label font size (desktop) */
.question-container .answer-container label.radio-label,
.question-container .answer-container label.checkbox-label,
.question-container .answer-container label.control-label.radio-label {
    font-size: 1.3rem !important;   /* Larger font size */
    font-weight: 500 !important;    /* Emphasis */
    color: #000 !important;         /* Enforce text color */
    line-height: 1.0 !important;    /* Readable spacing */
}