/* =======================================================================
   ClaraWell Custom CSS — Light Override Layer (Final, Oct 2025)
   Extends unified theme.css with thank-you tone + hover blue variant
   ======================================================================= */

/* Thank-you section */
.thank-you {
  margin: 1.5rem auto 0.75rem;
  font-size: 0.9rem;
  color: #777;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  max-width: 640px;
}

/* Hover blue variant for answer items */
.survey-container .answers-list .answer-item label:hover {
  background: var(--blue-mid);
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Checked state stays consistent */
.survey-container .answers-list .answer-item input:checked ~ label {
  background: var(--blue-mid);
  color: #fff;
  font-weight: 600;
}

/* ================================
   ClaraWell Micro Footer
   ================================ */
footer {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border-top: 1px solid #eee;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9rem;
  color: #555;
}

footer .azure-badge {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #555;
}
footer .azure-badge strong {
  color: #345679; /* ClaraWell blue */
}

footer .limesurvey-credit {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.5rem;
}
footer .limesurvey-credit a {
  color: #888;
  text-decoration: none;
}
footer .limesurvey-credit a:hover {
  color: #345679;
  text-decoration: underline;
}

footer .cw-footer-link {
  color: #555;
  text-decoration: none;
  font-weight: 500;
}
footer .cw-footer-link:hover {
  color: #345679;
  text-decoration: underline;
}

footer .footer-links {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #888;
}
footer .footer-links a {
  margin: 0 4px;
  color: #888;
  text-decoration: none;
}
footer .footer-links a:hover {
  color: #345679;
  text-decoration: underline;
}
/* ===== ClaraWell Fix: Force show Submit Button ===== */
#navigator-container,
.ls-move-submit,
#ls-button-submit {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  bottom: auto !important;
  z-index: 1000 !important;
  width: auto !important;
  margin: 1.5rem auto !important;
  text-align: center !important;
}

#navigator-container {
  text-align: center !important;
  padding-bottom: 2rem !important;
}

#navigator-container input[type="submit"],
#navigator-container button[type="submit"] {
  display: inline-block !important;
  background: var(--blue-mid) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 1rem 2.2rem !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  box-shadow: 0 6px 16px rgba(52,86,121,0.25) !important;
  transition: background .25s ease, transform .2s ease !important;
}

#navigator-container input[type="submit"]:hover,
#navigator-container button[type="submit"]:hover {
  background: #26415a !important;
  transform: translateY(-2px);
}
/* ===== ClaraWell Fix: Mobile alignment and spacing for Submit ===== */

/* Ensure container takes full width and centers contents */
#navigator-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;
  margin: 2rem auto 3rem !important;
  padding: 0 1rem 4rem !important; /* add bottom padding to clear footer overlap */
  box-sizing: border-box;
}

/* Force button to center and never overflow */
#navigator-container input[type="submit"],
#navigator-container button[type="submit"] {
  float: none !important;
  margin: 0 auto !important;
  max-width: 90% !important; /* ensures it stays inside viewport */
  width: fit-content !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* On small screens: add breathing room at bottom */
@media (max-width: 600px) {
  #navigator-container {
    padding-bottom: 6rem !important;
  }
  #navigator-container input[type="submit"],
  #navigator-container button[type="submit"] {
    font-size: 1rem !important;
    padding: 0.9rem 2rem !important;
  }
}

/* Make sure footer doesn't overlap or push upward */
footer {
  clear: both !important;
  position: relative !important;
  z-index: 10 !important;
  margin-top: 1rem !important;
}
/* === ClaraWell Centering Fix === */
.container-md,
.container,
.survey-container,
#outerframeContainer,
#outerframeContainer .outerframe {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 900px !important;
  display: block !important;
}

/* prevent transform on body from creating new stacking/positioning context */
html, body {
  transform: none !important;
  will-change: auto !important;
}
/* === ClaraHeart Instruction Line Emphasis ===
   Makes instructional text like “Choose one of the following answers”
   or “Check all that apply” bold and on-brand.
-------------------------------------------------- */
.question-help,
.ls-questionhelp,
.help-block,
.question-valid-container .text-info {
  font-weight: 600 !important;     /* bold emphasis */
  color: var(--navy) !important;   /* ClaraHeart brand color */
  opacity: 0.95;                   /* softer than full black */
  letter-spacing: 0.2px;           /* subtle readability tweak */
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
.group-title,
.grouptitle,
div[class*="grouptitle"],
div[id^="group-"] .h3,
div[id^="group-"] h2 {
  text-align: center !important;
  display: block !important;
  margin: 1.2rem auto 0.8rem !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  opacity: 0.95;
}