/* annona.co.uk - Passport Office quiz + certificate exhibit (js/exhibits/quiz.js) */

.quiz{display:grid;gap:1rem}
.quiz-title{margin:0;font:800 clamp(1.3rem,1rem + 1.2vw,1.9rem)/1.15 var(--font-display);color:var(--green-900)}
.quiz-title:focus-visible{outline:3px solid var(--seed);outline-offset:4px;border-radius:6px}
.quiz-intro{display:grid;gap:.75rem;justify-items:start}
.quiz-intro p{margin:0;max-width:60ch}
.quiz-note{font-size:.95em;color:var(--green-900)}

/* ---------- question card ---------- */
.quiz-card{display:grid;gap:1rem;padding:1.25rem;background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow)}
.quiz-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75rem;margin:0;font-weight:800;color:var(--green-900)}
.quiz-bar{display:block;height:.6rem;background:rgba(31,77,43,.12);border-radius:999px;overflow:hidden}
.quiz-bar-fill{display:block;height:100%;background:var(--green-600);border-radius:999px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.quiz-q{margin:0;padding:0;border:0;min-width:0}
.quiz-prompt{padding:0;margin:0 0 1rem;font:800 clamp(1.15rem,1rem + .8vw,1.6rem)/1.25 var(--font-display);color:var(--green-900)}
.quiz-prompt:focus-visible{outline:3px solid var(--seed);outline-offset:6px;border-radius:6px;box-shadow:none}
.quiz-choices{display:grid;gap:.6rem}
.quiz-choice{display:grid;grid-template-columns:2.25rem 1fr auto;align-items:center;gap:.75rem;min-height:56px;width:100%;padding:.6rem .9rem;border:2px solid var(--green-300);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.quiz-choice:hover:not(:disabled){border-color:var(--green-600);transform:translateX(4px)}
.quiz-choice:focus-visible{outline:3px solid var(--seed);outline-offset:3px;box-shadow:none}
.quiz-choice:disabled{cursor:default;color:var(--ink)}
.quiz-letter{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--green-900);color:#fff;font:900 1rem/1 var(--font-display)}
.quiz-choice-text{min-width:0}
.quiz-mark{font-size:1.4rem;font-weight:900;line-height:1;min-width:1.25rem;text-align:right}
.quiz-choice.is-right{background:#dff3d8;border-color:var(--green-600)}
.quiz-choice.is-right .quiz-letter{background:var(--green-600)}
.quiz-choice.is-right .quiz-mark{color:var(--green-900)}
.quiz-choice.is-wrong{background:#ffe0d6;border-color:var(--accent)}
.quiz-choice.is-wrong .quiz-letter{background:var(--accent);color:var(--seed)}
.quiz-choice.is-wrong .quiz-mark{color:#a3341a}
.quiz-choice:disabled:not(.is-right):not(.is-wrong){opacity:.7}

/* ---------- feedback ---------- */
.quiz-feedback{display:grid;gap:.6rem;justify-items:start;padding-top:.5rem;border-top:2px dashed rgba(31,77,43,.18)}
.quiz-feedback[hidden]{display:none}
.quiz-verdict{margin:0;font:800 1.15rem/1.3 var(--font-display)}
.quiz-verdict.is-right{color:var(--green-900)}
.quiz-verdict.is-wrong{color:#a3341a}
.quiz-verdict.is-right::before{content:"✓ "}
.quiz-verdict.is-wrong::before{content:"✗ "}
.quiz-explain{margin:0;padding:.75rem 1rem;background:var(--custard);border-radius:12px;max-width:65ch}
.quiz-explain:empty{display:none}

/* ---------- results ---------- */
.quiz-results{display:grid;gap:1rem;justify-items:start}
.quiz-score{margin:0;font-size:1.15em;font-weight:700}
.quiz-revisit{padding:.9rem 1.1rem;background:var(--cream);border-radius:12px}
.quiz-revisit p{margin:0 0 .5rem;font-weight:700;color:var(--green-900)}
.quiz-revisit-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.quiz-revisit-link{display:inline-flex;align-items:center;min-height:48px;padding:.5rem 1rem;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--green-600);color:var(--green-900);font-weight:700;text-decoration:none}
.quiz-revisit-link:hover{background:var(--green-300)}
.quiz-again-row{margin:0}

/* ---------- certificate ---------- */
.certificate{position:relative;width:100%;max-width:42rem;margin:1rem auto;padding:2rem;background:#fffdf5;border:8px double var(--green-900);text-align:center;color:var(--green-900);box-shadow:var(--shadow)}
.certificate::before{content:"";position:absolute;inset:10px;border:2px solid var(--custard);pointer-events:none}
.cert-corner{position:absolute;font-size:1.6rem;line-height:1;color:var(--green-600)}
.cert-corner--tl{top:.7rem;left:.9rem}
.cert-corner--tr{top:.7rem;right:.9rem;transform:scaleX(-1)}
.cert-corner--bl{bottom:.7rem;left:.9rem;transform:scaleY(-1)}
.cert-corner--br{bottom:.7rem;right:.9rem;transform:scale(-1)}
.cert-eyebrow{margin:0 0 .5rem;font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.cert-title{margin:0 0 1rem;font:900 clamp(2rem,1.4rem + 3vw,3.2rem)/1.05 var(--font-display);color:var(--green-900)}
.cert-line{margin:0 0 .5rem;max-width:36ch;margin-inline:auto;color:var(--ink)}
.cert-name{margin:.25rem auto .75rem;padding:0 .5rem .25rem;min-height:2.6rem;max-width:26ch;font:800 clamp(1.5rem,1.2rem + 1.5vw,2.2rem)/1.2 var(--font-display);color:var(--green-900);border-bottom:2px solid var(--green-900);overflow-wrap:anywhere}
.cert-name[data-empty="true"]{color:rgba(31,77,43,.4)}
.cert-date{margin:.75rem 0 1rem;font-style:italic}
.cert-stamps-title{margin:0 0 .4rem;font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cert-stamps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .75rem;margin:0 0 1rem;padding:0;list-style:none}
.cert-stamp{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border:2px dashed var(--green-600);border-radius:999px;font-size:1rem;font-weight:700;background:var(--paper)}
.cert-stamp-emoji{font-size:1.2rem;line-height:1}
.cert-seal{display:inline-grid;place-items:center;align-content:center;gap:.2rem;width:8.5rem;height:8.5rem;padding:.6rem;margin:.25rem auto 0;border-radius:50%;border:5px solid var(--accent);color:#a3341a;background:radial-gradient(circle at 30% 25%,#fff 0,#ffe8d9 70%);transform:rotate(-10deg);opacity:0}
.cert-seal.is-stamped{opacity:1;animation:stamp-pop .6s cubic-bezier(.2,1.6,.4,1)}
.cert-seal-emoji{font-size:2.4rem;line-height:1}
.cert-seal-text{max-width:6rem;font:900 .68rem/1.15 var(--font-display);letter-spacing:.06em;text-transform:uppercase;text-align:center}

/* the name box and print button sit under the certificate and never print */
.cert-controls{width:100%;max-width:42rem;margin:0 auto;display:grid;gap:.5rem}
.cert-label{font-weight:800;color:var(--green-900)}
.cert-controls-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cert-input{flex:1 1 14rem;min-height:48px;padding:.6rem .9rem;border:2px solid var(--green-600);border-radius:12px;background:var(--paper);font:inherit;color:var(--ink)}
.cert-input:focus-visible{outline:3px solid var(--seed);outline-offset:2px;box-shadow:none}
.cert-privacy{margin:0;font-size:.95em;color:var(--green-900)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .quiz-choice{transition:none}
  .quiz-choice:hover:not(:disabled){transform:none}
  .quiz-bar-fill{transition:none}
  .cert-seal.is-stamped{animation:none}
}

/* ---------- narrow screens ---------- */
@media (max-width:560px){
  .quiz-card{padding:1rem}
  .quiz-choice{grid-template-columns:2rem 1fr auto;gap:.6rem;padding:.6rem .7rem}
  .quiz-letter{width:2rem;height:2rem;font-size:.9rem}
  .certificate{padding:1.5rem 1rem;border-width:6px}
  .cert-corner{font-size:1.2rem}
  .cert-seal{width:7rem;height:7rem}
  .cert-print{width:100%}
}

/* ---------- print: base.css removes everything but .certificate from the flow; this is how it looks on paper ---------- */
@media print{
  .certificate{position:relative;margin:0;max-width:none;box-shadow:none;background:#fff;page-break-inside:avoid;transform:none}
  .cert-seal{opacity:1;animation:none;transform:rotate(-10deg)}
  .cert-name[data-empty="true"]{color:transparent}
}