/* Which Christian Tradition Are You? in the Hope look. Overrides
   tradition-quiz.css under body.hope-guide. */

body.hope-guide .tq { color: var(--hg-text); }
body.hope-guide .tq-card {
  background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius);
  box-shadow: var(--hg-shadow); padding: clamp(20px, 4vw, 36px);
}
body.hope-guide .tq-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide .tq-title {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--hg-text) !important; font-weight: 800; font-size: clamp(28px, 5vw, 40px);
}
body.hope-guide .tq-lede { font-size: 17px; line-height: 1.6; color: var(--hg-muted); }
body.hope-guide .tq-start-meta { font-size: 15px; font-weight: 600; color: var(--hg-body); }
body.hope-guide .tq-dot { color: var(--hg-faint); }
body.hope-guide .tq-fineprint { font-size: 15px; font-style: normal; color: var(--hg-muted); }

/* Buttons */
body.hope-guide .tq-btn { min-height: 44px; font-size: 16px; font-weight: 700; letter-spacing: 0; border-radius: 10px; }
body.hope-guide .tq-btn--primary { background: var(--hg-primary); color: #fff !important; box-shadow: none; }
body.hope-guide .tq-btn--primary:hover { background: var(--hg-primary-hover); transform: none; box-shadow: none; }
body.hope-guide .tq-btn--ghost { background: var(--hg-primary-soft); color: var(--hg-primary); border-color: transparent; }
body.hope-guide .tq-btn--ghost:hover { background: #e0e6fc; }

/* Question */
body.hope-guide .tq-back { min-height: 44px; padding: 0 12px 0 4px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--hg-primary); }
body.hope-guide .tq-back:hover { color: var(--hg-primary-hover); }
body.hope-guide .tq-counter { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-text); }
body.hope-guide .tq-counter-of { color: var(--hg-muted); font-weight: 600; }
body.hope-guide .tq-progress { background: var(--hg-primary-soft); }
body.hope-guide .tq-progress span { background: var(--hg-primary); }
body.hope-guide .tq-prompt { font-weight: 800; font-size: clamp(21px, 3.2vw, 26px); line-height: 1.3; }
body.hope-guide .tq-prompt:focus { outline: none; }
body.hope-guide .tq-prompt:focus-visible { outline: 3px solid var(--hg-primary); outline-offset: 4px; }
body.hope-guide .tq-answer {
  min-height: 52px; border: 1.5px solid var(--hg-border-strong); background: var(--hg-surface); border-radius: 12px;
  font-size: 17px; line-height: 1.5; color: var(--hg-text);
}
body.hope-guide .tq-answer:hover:not(:disabled) { border-color: var(--hg-primary); background: var(--hg-primary-soft); transform: none; }
body.hope-guide .tq-answer:disabled { opacity: 1; color: var(--hg-text); }
body.hope-guide .tq-answer-dot { border-color: var(--hg-border-strong); margin-top: 0.2rem; }
body.hope-guide .tq-answer.is-selected { border-color: var(--hg-primary); background: var(--hg-primary-soft); }
body.hope-guide .tq-answer.is-selected .tq-answer-dot { background: var(--hg-primary); border-color: var(--hg-primary); box-shadow: inset 0 0 0 2px var(--hg-primary-soft); }

/* Result */
body.hope-guide .tq-result-emblem { color: var(--hg-primary); }
body.hope-guide .tq-result-name { font-weight: 800; font-size: clamp(28px, 5vw, 40px); }
body.hope-guide .tq-result-name:focus { outline: none; }
body.hope-guide .tq-result-tag { font-size: 18px; font-style: normal; font-weight: 600; color: var(--hg-primary); }
body.hope-guide .tq-result-summary { font-size: 17px; line-height: 1.6; color: var(--hg-body); }
body.hope-guide .tq-result-marks { background: var(--hg-surface-2); border-color: var(--hg-border); border-radius: 12px; }
body.hope-guide .tq-result-marks h3, body.hope-guide .tq-runners h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hg-primary) !important; }
body.hope-guide .tq-result-marks li { font-size: 16px; line-height: 1.55; color: var(--hg-body); }
body.hope-guide .tq-runner-chip { font-size: 15px; font-weight: 600; color: var(--hg-text); background: var(--hg-surface-2); border-color: var(--hg-border-strong); padding: 6px 14px; }
body.hope-guide .tq-retake { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--hg-primary); }
body.hope-guide .tq-loading { font-style: normal; color: var(--hg-muted); }
body.hope-guide .tq-toast { font-family: var(--hg-font); background: var(--hg-text); }

.tq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.hope-guide footer { border-top-color: var(--hg-border); }

@media (max-width: 520px) {
  body.hope-guide .tq-answer { font-size: 16px; }
  body.hope-guide .tq-lede { font-size: 16px; }
}