/* ---------------------------------------------------------------------------
   quiz.css — /quiz-20-questions

   Two things live on this page: the answers (always in the HTML, always
   readable) and the quiz pane (built by js/quiz.js, shown only if someone
   chooses to play). Both are styled here.
   --------------------------------------------------------------------------- */

/* Full-bleed band above the title. background-image rather than an <img> so a
   missing file costs nothing — you get the dark panel and the page reads fine.
   The gradient keeps the bottom edge dark so the title never fights the art. */
.rb-quiz-hero {
  height: clamp(120px, 22vw, 240px);
  background-color: #111;
  background-image:
    linear-gradient(to bottom, rgba(10,10,10,0) 45%, rgba(10,10,10,.85) 88%, #0A0A0A 100%),
    url('/assets/quiz/hero.webp');
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}

.rb-quiz-page { max-width: 820px; margin: 0 auto; padding: 24px 24px 8px; }

.rb-quiz-intro h1 {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 12px;
}
.rb-quiz-lede { color: #C8C8C8; font-size: 1.0625rem; margin: 0 0 20px; }
/* The button stands alone now, so it is centred rather than left-aligned with
   the text above it. */
.rb-quiz-cta-line { display: flex; justify-content: center; margin: 0 0 8px; }

.rb-hidden { display: none !important; }

/* ----------------------------------------------------------------- the pane */
.rb-quiz-pane {
  margin: 28px 0 8px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 24px;
}

.rb-q-progress { color: #8f8f8f; font-size: 0.8125rem; letter-spacing: .04em; margin-bottom: 14px; }
.rb-q-bar { height: 3px; background: #2a2a2a; border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
.rb-q-bar span { display: block; height: 100%; background: #1DB954; transition: width .25s ease; }

.rb-q-image {
  width: 100%; max-height: 300px; object-fit: cover;
  border-radius: 6px; margin-bottom: 18px; display: block; background: #1f1f1f;
}
.rb-q-title { font-size: 1.1875rem; line-height: 1.35; margin: 0 0 18px; }

.rb-q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.rb-q-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: #1c1c1c; color: #e8e8e8;
  border: 1px solid #333; border-radius: 8px;
  padding: 14px 16px; font-size: 0.9375rem; font-family: inherit;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
  min-height: 52px;                       /* thumb-sized, like the footer links */
}
.rb-q-option:hover { border-color: #4a4a4a; background: #222; }
.rb-q-option[aria-pressed="true"] { border-color: #1DB954; background: rgba(29,185,84,.10); }
.rb-q-option .rb-q-dot {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #555;
}
.rb-q-option[aria-pressed="true"] .rb-q-dot { border-color: #1DB954; background: #1DB954; }

.rb-q-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rb-q-skip { background: none; border: 0; color: #8f8f8f; font-size: .875rem; cursor: pointer; font-family: inherit; }
.rb-q-skip:hover { color: #C8C8C8; }

/* --------------------------------------------------------------- the result */
.rb-result-score { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-synthesis: none;
  font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 8px; }
.rb-result-note { color: #C8C8C8; margin: 0 0 18px; }
.rb-result-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------- the answers */
.rb-answers { margin-top: 36px; }

/* The outer drawer. Reads as a shut door, not a heading — so a visitor who
   scrolls past the quiz sees "answers, don't peek", never an answer sheet. */
.rb-answers-gate {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; text-align: left;
  background: #141414; border: 1px dashed #3a3a3a; border-radius: 10px;
  color: #e8e8e8; font-family: inherit; cursor: pointer;
  padding: 18px 20px; min-height: 56px;
}
.rb-answers-gate:hover { border-color: #4f4f4f; background: #171717; }

.rb-answers-gate-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }

.rb-answers-gate-title {
  font-family: 'Archivo Black', sans-serif; font-weight: 400; font-synthesis: none;
  font-size: 1rem; color: #e8e8e8;
}
.rb-answers-gate-sep { color: #4a4a4a; }

/* "show" is the control. Accent colour, underlined, with a caret — so it reads
   as the thing you click rather than as more of the label. */
.rb-answers-gate-mark {
  color: #1DB954; font-size: .9375rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.rb-answers-gate:hover .rb-answers-gate-mark { color: #1ed760; }
.rb-answers-gate[aria-expanded="true"]  .rb-answers-gate-mark::after { content: "hide \25B4"; }
.rb-answers-gate[aria-expanded="false"] .rb-answers-gate-mark::after { content: "show \25BE"; }

.rb-answers-gate-note { color: #8f8f8f; font-size: .8125rem; }
.rb-answers-gate[aria-expanded="true"] { border-style: solid; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.rb-answers-list {
  border: 1px solid #2a2a2a; border-top: 0;
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
  padding: 4px 20px 8px;
}

.rb-answer { border-bottom: 1px solid #262626; }
.rb-answer-q {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; text-align: left; background: none; border: 0;
  color: #e8e8e8; font-family: inherit; font-size: 1rem; line-height: 1.4;
  padding: 16px 0; cursor: pointer;
}
.rb-answer-q:hover { color: #ffffff; }
.rb-answer-n { flex: 0 0 auto; color: #6a6a6a; font-size: .875rem; min-width: 1.6em; padding-top: 2px; }
.rb-answer-text { flex: 1 1 auto; }
.rb-answer-mark { flex: 0 0 auto; font-size: .8125rem; color: #6a6a6a; padding-top: 2px; }
.rb-answer-q[aria-expanded="true"] .rb-answer-mark::after { content: "\2212"; }
.rb-answer-q[aria-expanded="false"] .rb-answer-mark::after { content: "+"; }

.rb-answer-body { padding: 0 0 18px 2.4em; }
.rb-answer-a { font-size: 1.25rem; line-height: 1.4; margin: 0 0 10px; color: #ffffff; }
.rb-answer-x { color: #C8C8C8; font-size: .9375rem; line-height: 1.6; margin: 0 0 10px; }
.rb-answer-src { margin: 0 0 6px; }
.rb-answer-src a { color: #8f8f8f; font-size: .8125rem; word-break: break-all; }
.rb-answer-src a:hover { color: #1DB954; }

/* After the quiz: the ones you missed carry a marker. Colour is not the only
   signal — the word "missed" is there too, for anyone who cannot see the red. */
.rb-answer.rb-missed { border-left: 3px solid #D62828; padding-left: 12px; }
.rb-answer.rb-got    { border-left: 3px solid #1DB954; padding-left: 12px; }
.rb-answer-verdict { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; display: block; margin-top: 4px; }
.rb-missed .rb-answer-verdict { color: #D62828; }
.rb-got .rb-answer-verdict    { color: #1DB954; }
.rb-answer-yours { color: #8f8f8f; font-size: .875rem; margin: 0 0 10px; }

@media (max-width: 767px) {
  .rb-quiz-page { padding: 24px 16px 8px; }
  .rb-quiz-pane { padding: 18px 16px; border-radius: 8px; }
  .rb-answer-body { padding-left: 0; }
  .rb-q-image { max-height: 200px; }
}