/* =======================================================================
   ClaraWell Theme — Clean Merge (Sept 2025, Unified)
   One-card-per-question layout + polished nav + safe globals
   ======================================================================= */

/* ---------- Design tokens ---------- */
:root{
  --navy:#0C1A2F;
  --blue-mid:#345679;
  --text-dark:#0C1A2F;
  --text-mid:#333;
  --text-light:#555;
  --bg-soft:#f9f9f9;
  --bg-overlay:#fff;
  --radius:8px;
  --shadow-soft:0 2px 6px rgba(0,0,0,.06);
  --font:'Segoe UI',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* Layout knobs */
  --pageW:980px;     /* overall page max width */
  --cardW:800px;     /* question card max width */
}

/* ---------- Global layout & typography ---------- */
/* === ClaraWell Final Center + Smooth Scroll Fix === */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);

  /* Clean, performance-optimized gradient */
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  will-change: scroll-position;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Center survey container while maintaining GPU smoothness */
.outerframe,
.container-md,
.container,
.survey-container {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}



/* Headings */
h1{
  margin-top:2.5rem; font-size:2.3rem; font-weight:600; letter-spacing:.5px; color:var(--navy);
}

/* Helpful copy blocks */
p.subtitle{font-size:1.15rem; margin:1rem auto .5rem; color:var(--text-mid); line-height:1.7; max-width:680px;}
p.time-note{font-size:.95rem; color:var(--text-light); margin:0 auto 1.5rem;}

/* ---------- Constrain overall width / prevent breakout ---------- */
#outerframeContainer,.top-container,.group-outer-container,.survey-container{
  max-width:var(--pageW); margin-left:auto; margin-right:auto;
  padding-left:16px; padding-right:16px; width:100%; box-sizing:border-box;
}
#outerframeContainer{word-wrap:break-word; overflow-wrap:anywhere;}
.survey-container table{width:100%;}

/* ---------- Face/hero (hub) ---------- */
.face-wrapper{margin:0 auto 2rem;}
.welcoming-face{
  width:140px; max-width:100%; height:auto; border-radius:50%/55%;
  box-shadow:0 6px 16px rgba(0,0,0,.12); border:2px solid #fff; display:block; margin:0 auto;
  content:url('../files/WomanSoftLighting.webp');
}
@media (min-width:768px){.welcoming-face{width:180px;}}

/* ---------- Hub buttons / generic .btn ---------- */
.btn-block{margin-bottom:2rem;}
.btn,.survey-container .btn-primary{
  display:inline-block; padding:1rem 2.2rem; min-width:280px; max-width:420px; text-align:center;
  margin:.5rem auto; background:#fff; color:var(--navy);
  border:1px solid rgba(0,0,0,.08); border-radius:999px; font-size:1.05rem; font-weight:500; text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover,.survey-container .btn-primary:hover{
  background:var(--blue-mid); color:#fff; box-shadow:0 8px 24px rgba(52,86,121,.3); transform:translateY(-2px);
}
.micro{font-size:.9rem; color:var(--text-light); margin-top:.5rem;}

/* =======================================================================
   Questionnaire: ONE CARD PER QUESTION
   ======================================================================= */

/* Neutralize group wrapper (no double card) */
.survey-container .group-container{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 auto 1rem !important; width:100%;
}

/* Question card unified block */
.survey-container .question-container,
.survey-container .ls-question-wrapper{
  box-sizing:border-box;
  width:min(100%, var(--cardW)); max-width:var(--cardW);
  margin-left:auto !important; margin-right:auto !important; float:none !important;

  background:#fff !important;
  border:1px solid transparent !important;
  border-radius:var(--radius) !important;
  border-image:linear-gradient(90deg,var(--navy),var(--blue-mid)) 1 !important;
  box-shadow:var(--shadow-soft) !important;
  text-align:left;
  padding:1.25rem 1.25rem;
  overflow:hidden;
}

/* Hard stop against flex grids pushing left */
.group-outer-container{display:block !important;}
.row .col-12.question-container,.row .col-12.ls-question-wrapper{padding-left:0 !important; padding-right:0 !important;}

/* Titles inside the card */
.survey-container .question-title-container h3,
.ls-question-title,.question-title h3{
  font-family:var(--font); font-size:1.2rem; font-weight:600; color:var(--navy); margin-bottom:.6rem;
}

/* Simple answer list (no chip/pill styles) */
.survey-container .answers-list .answer-item,
ul.ls-answers li.answer-item,.checkbox-item,.radio-item{
  position:relative; list-style:none; margin:.45rem 0;
}
.survey-container .answers-list .answer-item label,
ul.ls-answers li.answer-item label,.checkbox-item label,.radio-item label{
  display:block; width:100%; margin:0;
  padding:.45rem .25rem .45rem 1.9rem;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:var(--text-mid); cursor:pointer; border-radius:6px;
  transition:background .15s ease, color .15s ease;
}
.survey-container .answers-list .answer-item label:hover,
ul.ls-answers li.answer-item label:hover,.checkbox-list label:hover,.radio-list label:hover{
  background:rgba(52,86,121,.06);
}
.survey-container .answers-list input:checked + label,
ul.ls-answers input:checked + label,.checkbox-item input:checked + label,.radio-item input:checked + label{
  background:rgba(52,86,121,.10); color:var(--navy); font-weight:600;
}

/* Inputs */
.survey-container .answers-list input[type="checkbox"],
.survey-container .answers-list input[type="radio"],
ul.ls-answers input[type="checkbox"],ul.ls-answers input[type="radio"],
.checkbox-item input[type="checkbox"],.radio-item input[type="radio"]{
  position:static !important; transform:none !important; margin-right:.55rem; accent-color:var(--blue-mid);
}

/* No answer */
.answer-item.noanswer label,.ls-no-answer label,li.noanswer label,li.noanswer .btn{
  background:transparent !important; color:var(--text-mid) !important; box-shadow:none !important;
}
.answer-item.noanswer input:checked + label,
.ls-no-answer input:checked + label,li.noanswer input:checked + label,li.noanswer input:checked + .btn{
  background:rgba(52,86,121,.10) !important; color:var(--navy) !important; font-weight:600 !important;
}

/* Inputs & focus */
.survey-container input[type="text"],
.survey-container input[type="email"],
.survey-container input[type="number"],
.survey-container textarea,.survey-container select{
  border:1px solid #ccc; border-radius:var(--radius); padding:.6rem .8rem;
  width:100%; max-width:600px; font-family:var(--font); box-shadow:var(--shadow-soft);
}
.survey-container input:focus,.survey-container textarea:focus,.survey-container select:focus,
.answer-item:focus-within label,.checkbox-item:focus-within label,.radio-item:focus-within label{
  outline:none; border-color:var(--blue-mid); box-shadow:0 0 0 2px rgba(52,86,121,.18);
}

/* Help text */
.ls-questionhelp,.questionhelp{font-size:.9rem; color:var(--text-light); font-weight:400; font-style:italic; margin-top:.5rem;}

/* Validation */
.text-danger,.input-error .asterisk{color:var(--blue-mid) !important; font-weight:600;}
.input-error input,.input-error textarea,.input-error select{border-color:var(--blue-mid); box-shadow:0 0 0 2px rgba(52,86,121,.2);}

/* Progress */
.progress,.ls-progress{height:8px; border-radius:var(--radius); background:#e5e8eb;}
.progress-bar,.ls-progress-bar{background:var(--blue-mid); border-radius:var(--radius); transition:width .3s ease;}

/* ---------- Navigator buttons (unified ClaraWell style) ---------- */
#navigator-container{
  box-sizing:border-box;
  width:min(100%, 800px);
  margin:0 auto !important;
  text-align:center !important;
  clear:both;
}
#navigator-container .btn,
#navigator-container button,
#navigator-container input[type="submit"],
.ls-move-btn,.ls-move-next,.ls-move-previous,.ls-move-submit,#ls-button-submit{
  -webkit-appearance:none; appearance:none;
  display:inline-block !important;
  padding:1rem 2.2rem !important;
  min-width:280px; max-width:420px;
  margin:1rem .5rem !important;
  background:#fff !important;
  color:var(--navy) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  border-radius:999px !important;
  font-size:1.05rem !important;
  font-weight:500 !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:var(--shadow-soft) !important;
  transition:all .25s ease !important;
}
#navigator-container .btn-primary{
  background:#fff !important;
  color:var(--navy) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}
#navigator-container .btn:hover,
#navigator-container button:hover,
#navigator-container input[type="submit"]:hover,
.ls-move-btn:hover,.ls-move-next:hover,.ls-move-previous:hover,.ls-move-submit:hover,#ls-button-submit:hover{
  background:var(--blue-mid) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(52,86,121,.3) !important;
  transform:translateY(-2px);
}
#ls-button-submit,.ls-move-submit{
  display:block !important;
  margin:1.5rem auto !important;
}
@media (max-width:600px){
  #navigator-container .btn,
  #navigator-container button,
  #navigator-container input[type="submit"],
  .ls-move-btn,.ls-move-next,.ls-move-previous,.ls-move-submit,#ls-button-submit{
    display:block !important;
    width:100% !important;
    margin:.75rem 0 !important;
  }
}

/* ---------- Mobile adjustments ---------- */
@media (max-width:600px){
  h1{font-size:1.9rem; margin-top:2rem;}
  p.subtitle{font-size:1rem; margin-bottom:.5rem; padding:0 1rem;}
  p.time-note{font-size:.9rem; margin-bottom:1.2rem;}
  .face-wrapper{margin:0 auto 1.2rem;}
  .btn-block{margin-bottom:1.2rem;}
  .btn{width:100%; max-width:none; padding:.85rem 1.2rem; font-size:.95rem;}
  .survey-container .question-container,.survey-container .ls-question-wrapper{margin:1rem; padding:1rem;}
  footer{margin-top:.5rem; padding:1.2rem;}
}

/* ---------- Large screens ---------- */
@media (min-width:1200px){
  h1{font-size:2.6rem;}
  p.subtitle{font-size:1.25rem;}
  p.time-note{font-size:1rem;}
  footer{font-size:1rem; padding:2rem; margin-top:1.5rem;}
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important;}
}

/* ================================
   ClaraWell Micro Footer (Final)
   ================================ */
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;}
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 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 Visibility Fix === */
.group-title,
.group-name {
  display: block !important;
  font-weight: 600;
  color: var(--navy) !important;
  font-size: 1.4rem;
  margin: 1.5rem auto 0.5rem;
  text-align: center;
}