/* tradition-quiz.css — "Which Christian Tradition Are You?" quiz.
   Parchment + antique gold to match the site. Scoped under .tq. */

.tq {
  font-family: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  color: #3a3327;
  max-width: 680px;
  margin: 0 auto;
}

.tq-card {
  position: relative;
  background: linear-gradient(180deg, rgba(250, 246, 236, 0.97), rgba(242, 235, 220, 0.97)),
    url('/assets/parchment-bg.png');
  background-size: cover;
  border: 1px solid rgba(160, 124, 61, 0.42);
  border-radius: 1.25rem;
  box-shadow: 0 26px 60px -34px rgba(56, 42, 16, 0.5), inset 0 0 0 1px rgba(255, 251, 240, 0.7);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  text-align: center;
}

.tq-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #8a6626; display: block; margin-bottom: 0.6rem;
}

.tq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Cinzel', serif; font-size: 0.95rem; letter-spacing: 0.03em;
  padding: 0.8rem 1.5rem; border-radius: 0.7rem; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.tq-btn svg { width: 1.05rem; height: 1.05rem; }
.tq-btn--primary {
  background: linear-gradient(180deg, #b0873a, #8a6626); color: #fbf6ea;
  box-shadow: 0 10px 22px -12px rgba(138, 102, 38, 0.9);
}
.tq-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(138, 102, 38, 0.95); color: #fff; }
.tq-btn--ghost { background: rgba(251, 246, 234, 0.7); color: #6b4f1e; border-color: #cdb987; }
.tq-btn--ghost:hover { background: #efe4ca; }

/* ---- start ---- */
.tq-title {
  font-family: 'Cinzel', serif; font-weight: 800; line-height: 1.08;
  font-size: clamp(1.9rem, 5.4vw, 2.9rem); margin: 0 0 0.85rem;
  background: linear-gradient(180deg, #9a7a34 0%, #7a5e26 60%, #5f4a1e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #7a5e26;
}
.tq-lede { font-size: 1.14rem; line-height: 1.55; color: #5b5140; max-width: 33rem; margin: 0 auto 1.4rem; }
.tq-start-meta { display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.95rem; color: #8a7f68; margin-bottom: 1.6rem; }
.tq-dot { color: #cbb98a; }
.tq-fineprint { font-size: 0.9rem; font-style: italic; color: #8a7f68; margin: 1.3rem auto 0; max-width: 32rem; }

/* ---- question ---- */
.tq-question { text-align: left; }
.tq-qhead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; min-height: 1.7rem; }
.tq-back {
  display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.04em; color: #8a7f68; padding: 0;
}
.tq-back:hover { color: #6b4f1e; }
.tq-back svg { width: 0.9rem; height: 0.9rem; }
.tq-counter { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7a5e26; margin-left: auto; }
.tq-counter-of { color: #a89a78; }
.tq-progress { height: 5px; border-radius: 999px; background: rgba(120, 96, 46, 0.16); overflow: hidden; margin-bottom: 1.4rem; }
.tq-progress span { display: block; height: 100%; background: linear-gradient(90deg, #c9a24e, #8a5a1e); transition: width 0.3s ease; }

.tq-prompt {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  line-height: 1.28; color: #4f3a12; margin: 0 0 1.3rem; text-wrap: balance;
}
.tq-answers { display: grid; gap: 0.7rem; }
.tq-answer {
  display: flex; align-items: flex-start; gap: 0.85rem; text-align: left;
  padding: 0.95rem 1.05rem; border-radius: 0.75rem;
  border: 1.5px solid #d8c7a0; background: rgba(251, 247, 238, 0.85);
  font-family: inherit; font-size: 1.13rem; line-height: 1.4; color: #3f3729; cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.tq-answer:hover:not(:disabled) { border-color: #a8823f; background: #f6edda; transform: translateY(-1px); }
.tq-answer:disabled { cursor: default; }
.tq-answer-dot {
  flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; border-radius: 50%;
  border: 2px solid #c6ac74; background: transparent; transition: background 0.14s ease, border-color 0.14s ease;
}
.tq-answer.is-selected { border-color: #a8823f; background: #f3e7cf; }
.tq-answer.is-selected .tq-answer-dot { background: #a8823f; border-color: #a8823f; box-shadow: inset 0 0 0 2px #f3e7cf; }
.tq-answer-text { flex: 1; }

/* ---- result ---- */
.tq-result-emblem { width: 3.8rem; height: 3.8rem; margin: 0.4rem auto 0.7rem; color: #b0873a; }
.tq-result-emblem svg { width: 100%; height: 100%; }
.tq-result-name {
  font-family: 'Cinzel', serif; font-weight: 800; font-size: clamp(1.9rem, 5.4vw, 2.7rem); line-height: 1.05;
  margin: 0 0 0.35rem; color: #5f4a1e;
}
.tq-result-tag { font-size: 1.2rem; font-style: italic; color: #8a6626; margin: 0 0 1rem; }
.tq-result-summary { font-size: 1.14rem; line-height: 1.55; color: #4a4335; max-width: 34rem; margin: 0 auto 1.5rem; }
.tq-result-marks { text-align: left; background: rgba(255, 252, 244, 0.8); border: 1px solid #e0d3b6; border-radius: 0.85rem; padding: 1rem 1.2rem; margin: 0 auto 1.4rem; max-width: 32rem; }
.tq-result-marks h3 { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6626; margin: 0 0 0.5rem; }
.tq-result-marks ul { margin: 0; padding-left: 1.1rem; }
.tq-result-marks li { font-size: 1.05rem; line-height: 1.45; color: #544b39; margin-bottom: 0.3rem; }
.tq-runners { margin: 0 0 1.4rem; }
.tq-runners h3 { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7f68; margin: 0 0 0.5rem; }
.tq-runner-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.tq-runner-chip { font-family: 'Cinzel', serif; font-size: 0.85rem; color: #6b4f1e; background: #efe4ca; border: 1px solid #cdb987; padding: 0.3rem 0.85rem; border-radius: 999px; }
.tq-result-actions { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
.tq-retake { display: inline-block; margin-top: 1.2rem; background: none; border: none; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.85rem; color: #8a7f68; text-decoration: underline; }
.tq-retake:hover { color: #6b4f1e; }
.tq-result-note { margin-top: 1rem; }

/* ---- misc ---- */
.tq-loading { text-align: center; padding: 3rem 1rem; font-style: italic; color: #8a7f68; }
.tq-error { text-align: center; color: #793025; font-weight: 600; }
.tq-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  background: #3a3327; color: #fbf6ea; padding: 0.7rem 1.2rem; border-radius: 0.6rem;
  font-family: 'Cormorant Garamond', serif; font-size: 1rem; max-width: 90vw;
  box-shadow: 0 12px 30px rgba(30, 22, 10, 0.35); opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease; z-index: 2000;
}
.tq-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 520px) { .tq-answer { font-size: 1.04rem; } }
@media (prefers-reduced-motion: reduce) { .tq-btn, .tq-answer, .tq-progress span, .tq-toast { transition: none; } }