/* =========================================================
   Root Cause Dental Group, Self-assessment questionnaires
   Shares the core design system in styles.css
   ========================================================= */

.q-wrap{max-width:880px;margin:0 auto;}

/* Intro / instructions card */
.q-note{display:flex;gap:16px;align-items:flex-start;background:var(--sage);
  border-radius:var(--radius);padding:22px 26px;margin:0 0 30px;}
.q-note svg{width:26px;height:26px;color:var(--forest);flex:none;margin-top:2px;}
.q-note p{margin:0;font-size:1rem;color:#3c4036;}
.q-note p+p{margin-top:10px;}

/* Scale legend (Epworth) */
.q-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 30px;}
.q-legend .lg{display:flex;align-items:center;gap:12px;font-size:.98rem;color:#3c4036;}
.q-legend .lg b{font-family:"Newsreader",serif;font-size:1.25rem;color:var(--forest);
  width:34px;height:34px;border-radius:9px;background:var(--sage);display:grid;place-items:center;flex:none;}

/* Section sub-heading inside a questionnaire */
.q-section{font-family:"Barlow",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin:36px 0 14px;}
.q-section:first-of-type{margin-top:0;}

/* Question list */
.q-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.q-item{display:flex;align-items:center;gap:20px;padding:18px 24px;border-top:1px solid var(--line);}
.q-item:first-child{border-top:none;}
.q-item .q-text{flex:1;font-size:1.04rem;line-height:1.45;color:var(--ink);}
.q-item .q-num{font-family:"Newsreader",serif;color:var(--muted);font-size:1.05rem;margin-right:2px;}

/* Options */
.q-opts{display:flex;gap:8px;flex:none;}
.q-opts.q-scale .q-opt{width:46px;justify-content:center;}
.q-opt{position:relative;cursor:pointer;}
.q-opt input{position:absolute;opacity:0;width:0;height:0;}
.q-opt span{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:11px 14px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--cream-2);
  font-family:"Barlow",sans-serif;font-weight:600;font-size:.95rem;color:var(--muted);
  transition:.18s var(--ease);line-height:1;text-align:center;}
.q-opt:hover span{border-color:var(--forest);color:var(--forest);}
.q-opt input:checked+span{background:var(--forest);border-color:var(--forest);color:#fff;}
.q-opt input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px;}

/* Result panel */
.q-result{position:sticky;bottom:18px;margin-top:30px;background:var(--forest);color:#fff;
  border-radius:var(--radius-lg);padding:26px 30px;display:flex;align-items:center;gap:26px;
  flex-wrap:wrap;box-shadow:var(--shadow);}
.q-result .q-score{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.12);flex:none;}
.q-result .q-score b{font-family:"Newsreader",serif;font-size:2.6rem;line-height:1;font-weight:600;}
.q-result .q-score small{font-size:.78rem;letter-spacing:.08em;opacity:.8;margin-top:4px;}
.q-result .q-msg{flex:1 1 280px;}
.q-result .q-msg h3{color:#fff;font-size:1.4rem;margin:0 0 6px;}
.q-result .q-msg p{margin:0;color:rgba(255,255,255,.85);font-size:1rem;}
.q-result.is-flag{background:var(--clay);}
.q-result.is-flag .q-score{background:rgba(255,255,255,.18);}
.q-result .q-actions{display:flex;flex-direction:column;gap:10px;flex:none;}
.q-result .btn-print{background:#fff;color:var(--forest);border:none;font-family:"Barlow",sans-serif;
  font-weight:600;font-size:.95rem;padding:13px 22px;border-radius:999px;cursor:pointer;display:inline-flex;
  align-items:center;gap:9px;transition:.2s var(--ease);}
.q-result .btn-print:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.q-result .btn-print svg{width:18px;height:18px;}

/* Patient detail line for printouts */
.q-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 30px;}
.q-fields .field{margin:0;}

/* Print-only marks (hidden on screen) */
.q-print-logo{display:none;}
.q-printresult{display:none;}

@media(max-width:760px){
  .q-legend{grid-template-columns:1fr;}
  .q-item{flex-direction:column;align-items:stretch;gap:14px;}
  .q-opts{justify-content:space-between;}
  .q-opts .q-opt{flex:1;}
  .q-opts.q-scale .q-opt{flex:1;}
  .q-opts.q-scale .q-opt span{min-width:0;width:100%;}
  .q-opt span{min-width:0;width:100%;}
  .q-result{position:static;bottom:auto;flex-direction:column;align-items:stretch;text-align:center;}
  .q-result .q-score{margin:0 auto;}
  .q-result .q-actions{flex-direction:row;}
  .q-result .btn-print{flex:1;justify-content:center;}
  .q-fields{grid-template-columns:1fr;}
}

/* =========================================================
   PRINT, one branded page: title + logo, patient details,
   each question with its answer at right, compact result.
   (Rules use !important to beat the 760px mobile query, which
   otherwise applies at print page widths.)
   ========================================================= */
@media print{
  @page{margin:0.45in;}
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{background:#fff !important;color:var(--ink);font-size:8.5pt;line-height:1.2;}
  .site-header,.drawer,.site-footer,.q-result .q-actions,.float-pay,.to-top,
  .q-cta,.q-note,.q-legend,.breadcrumb,.page-hero .eyebrow,.page-hero .sub{display:none !important;}
  .sec{padding:0 !important;}
  .wrap,.q-wrap{max-width:none !important;width:100% !important;padding:0 !important;margin:0 !important;}

  /* Header band: title left, logo right, forest rule beneath */
  .page-hero{padding:0 !important;background:none !important;position:relative;}
  .page-hero .q-wrap{border-bottom:2.5pt solid var(--forest);padding-bottom:8pt !important;margin-bottom:10pt !important;}
  h1{font-size:16pt !important;margin:0 !important;color:var(--forest) !important;}
  .q-print-logo{display:block !important;position:absolute;top:0;right:0;height:34pt;width:auto;}

  /* Patient details, sage band, clay labels */
  .q-fields{display:flex !important;gap:22pt;margin:0 0 9pt !important;padding:8pt 14pt !important;
    background:var(--sage) !important;border:none !important;border-radius:8pt !important;}
  .q-fields .field{flex:1;margin:0 !important;}
  .q-fields label{font-size:6.5pt;text-transform:uppercase;letter-spacing:.09em;margin-bottom:2pt;
    color:var(--clay) !important;font-weight:700;}
  .q-fields input{padding:1pt 0 !important;border:none !important;border-bottom:1px solid var(--forest) !important;
    border-radius:0 !important;background:none !important;font-size:9.5pt;color:var(--ink) !important;font-weight:500;}

  /* Section labels */
  .q-section{margin:9pt 0 3pt !important;font-size:7.5pt;color:var(--clay) !important;letter-spacing:.14em;}
  .q-section:first-of-type{margin-top:0 !important;}

  /* Question list */
  .q-list{background:#fff !important;border:1px solid var(--line) !important;border-radius:8pt !important;overflow:hidden;}
  .q-item{display:flex !important;flex-direction:row !important;align-items:center !important;
    gap:10pt !important;padding:3pt 11pt !important;border-top:1px solid var(--line) !important;
    page-break-inside:avoid;}
  .q-item:first-child{border-top:none !important;}
  .q-item:nth-child(even){background:var(--cream-2) !important;}
  .q-item .q-text{flex:1 1 auto !important;font-size:8.5pt;line-height:1.2;color:var(--ink) !important;}
  .q-item .q-num{color:var(--forest) !important;font-size:8.5pt;margin-right:2pt;}

  /* Selected answer → right-aligned colored chip */
  .q-opts{display:flex !important;flex:none !important;justify-content:flex-end !important;
    gap:0 !important;min-width:46pt;}
  .q-opt{flex:0 0 auto !important;width:auto !important;}
  .q-opt input:not(:checked)+span{display:none !important;}
  .q-opt span{display:inline-flex !important;min-width:0 !important;width:auto !important;
    padding:1.5pt 9pt !important;border:none !important;border-radius:999px !important;
    font-size:8pt !important;font-weight:700;line-height:1.1;}
  /* yes/no forms: "Yes" = clay (attention), others = sage */
  .q-opts:not(.q-scale) .q-opt input:checked+span{background:var(--sage) !important;color:var(--forest) !important;}
  .q-opts:not(.q-scale) .q-opt input[value="1"]:checked+span{background:var(--clay) !important;color:#fff !important;}
  /* scale (Epworth): uniform forest number circle */
  .q-opts.q-scale .q-opt input:checked+span{background:var(--forest) !important;color:#fff !important;
    width:17pt !important;height:17pt !important;min-width:0 !important;padding:0 !important;
    border-radius:50% !important;align-items:center !important;justify-content:center !important;}

  /* Final result, hugs its content, brand-colored */
  .q-result{position:static !important;display:inline-flex !important;flex-direction:row !important;
    flex-wrap:nowrap !important;align-items:center !important;text-align:left !important;gap:14pt;
    margin-top:11pt !important;padding:9pt 20pt 9pt 10pt !important;border:none !important;
    border-radius:11pt !important;background:var(--forest) !important;color:#fff !important;
    box-shadow:none !important;width:fit-content !important;height:auto !important;max-width:100%;page-break-inside:avoid;}
  .q-result.is-flag{background:var(--clay) !important;}
  .q-result .q-score{width:auto !important;height:auto !important;flex:none !important;margin:0 !important;
    flex-direction:row;align-items:baseline;gap:5pt;background:rgba(255,255,255,.2) !important;
    border-radius:8pt !important;padding:5pt 11pt !important;}
  .q-result .q-score b{font-size:18pt;color:#fff !important;}
  .q-result .q-score small{font-size:6.5pt;color:#fff !important;opacity:.9;margin:0;}
  .q-result .q-msg{flex:0 1 auto !important;text-align:left !important;}
  .q-result .q-msg h3{font-size:12pt;color:#fff !important;margin:0;}
  .q-result .q-msg p{display:none !important;}

  /* Long forms (Pediatric) → two columns to stay on one page */
  .q-twocol{column-count:2;column-gap:22pt;}
  .q-twocol .q-group{break-inside:avoid;page-break-inside:avoid;display:block;}
  .q-twocol .q-group .q-section{margin-top:0 !important;}
  .q-twocol .q-group+.q-group .q-section{margin-top:9pt !important;}

  /* Pediatric: recommendation card sits in the left column gap; hide the bottom one */
  .q-twocol ~ #q-result{display:none !important;}
  .q-printresult{display:inline-flex !important;flex-wrap:wrap !important;margin-top:0 !important;
    max-width:100% !important;}
  .q-printresult .q-msg h3{font-size:10.5pt !important;}
  .q-printresult .q-score b{font-size:15pt !important;}
}