/* ==========================================================================
   quiz.css -- Pilot Quizzes section (quiz/, quiz/topic/)
   Loaded after base.css on pages written by build_quiz.py. Uses base.css
   tokens only; no new colors.
   ========================================================================== */

/* Heroes here are text and video, so they run tighter than marketing heroes. */
.quiz-hero { padding: var(--space-3xl) 0 var(--space-4xl); }

.quiz-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.quiz-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.quiz-crumbs a:hover { color: var(--color-navy); text-decoration: underline; }

.quiz-title { max-width: 18ch; margin-bottom: var(--space-3xl); }

/* Video beside the question on wide screens, stacked on narrow ones. */
.quiz-stage {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
}

.quiz-video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--color-navy-deep);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.quiz-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Click-to-play: the thumbnail and the site's play badge (same look as the
   Oshkosh talk on train-with-us.html) until the visitor presses play; then
   quiz.js swaps in the YouTube player. */
.quiz-video-play {
  position: absolute;
  inset: 0;
  display: block;
}
.quiz-video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}
.quiz-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(10, 16, 51, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.quiz-play-badge svg { width: 1.5rem; height: 1.5rem; fill: #fff; margin-left: 0.2rem; }
.quiz-video-play:hover img { transform: scale(1.02); }
.quiz-video-play:hover .quiz-play-badge,
.quiz-video-play:focus-visible .quiz-play-badge { background: var(--color-cyan); border-color: var(--color-cyan); }
.quiz-video-play:hover .quiz-play-badge svg,
.quiz-video-play:focus-visible .quiz-play-badge svg { fill: var(--color-navy-deep); }
.quiz-video-play:focus-visible { outline: 2px solid var(--color-cyan-deep); outline-offset: 2px; }

.quiz-video-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--color-text-muted);
}
.quiz-video-link:hover { color: var(--color-navy); }

.quiz-question {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, var(--size-xl));
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2xl);
}

/* Options: one <details> per option, one open at a time. The summary is the
   clickable option; the reply drops down beneath it. */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quiz-option {
  background: var(--color-white);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 2px;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.quiz-option > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.quiz-option > summary::-webkit-details-marker { display: none; }
.quiz-option:hover { border-color: var(--color-navy); }
.quiz-option > summary:focus-visible { outline: 2px solid var(--color-cyan-deep); outline-offset: 2px; }

.quiz-option-text { flex: 1; }

.quiz-option-letter {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-white);
  background: var(--color-navy);
  transition: background-color var(--transition-base);
}

.quiz-option-chevron {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  margin-right: 0.25rem;
  transition: transform var(--transition-base);
}
.quiz-option[open] .quiz-option-chevron { transform: rotate(-135deg); }

.quiz-option-reply {
  padding: 0 var(--space-lg) var(--space-lg) calc(var(--space-lg) + 2.25rem + var(--space-md));
}
/* base.css sizes <p> directly, so set the size on the paragraphs. */
.quiz-option-reply .prose p { font-size: var(--size-sm); }
.quiz-explain-link {
  display: inline-block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

/* The open option is colored: green if right, coral if wrong. quiz.js adds
   is-tried when an option opens and removes it when it closes. */
.quiz-option.is-tried[data-result="correct"] { border-color: var(--color-green-deep); background: #eef7f1; }
.quiz-option.is-tried[data-result="correct"] .quiz-option-letter { background: var(--color-green-deep); }
.quiz-option.is-tried[data-result="wrong"] { border-color: var(--color-coral); background: #f9eff0; }
.quiz-option.is-tried[data-result="wrong"] .quiz-option-letter { background: var(--color-coral); }

.quiz-hint {
  margin-top: var(--space-lg);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

/* Date on the left, speaker toggle on the right of the same line, above the
   question. Speaker = sound on, speaker with an X = muted. The button stays
   hidden until quiz.js confirms the browser can play sound. */
.quiz-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 2.5rem;
  margin-bottom: var(--space-md);
}
.quiz-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-muted);
}
.quiz-sound[hidden] { display: none; }
.quiz-sound:hover { color: var(--color-navy); border-color: var(--color-navy); }
.quiz-sound:focus-visible { outline: 2px solid var(--color-cyan-deep); outline-offset: 2px; }
.quiz-sound svg { width: 1.4rem; height: 1.4rem; }
.quiz-sound svg path:first-child { fill: currentColor; }
.quiz-sound .quiz-sound-wave { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.quiz-sound .quiz-sound-off { display: none; }
.quiz-sound[aria-pressed="true"] .quiz-sound-on { display: none; }
.quiz-sound[aria-pressed="true"] .quiz-sound-off { display: block; }

#explanation { scroll-margin-top: 7rem; }

/* The explanation sits in the wide container so its left edge lines up with
   the title and video above, but keeps a readable line length. */
.quiz-reveal { max-width: var(--max-width-reading); }

/* The explanation sits in a <details> so it is in the page for search engines
   but stays closed until the visitor asks for it. The button stays visible
   when open, so clicking it again folds the explanation away, the same as the
   options and the feedback form. */
.quiz-reveal > summary {
  list-style: none;
  display: inline-flex;
}
.quiz-reveal > summary::-webkit-details-marker { display: none; }
.quiz-reveal[open] > summary { margin-bottom: var(--space-2xl); }

.quiz-answer-key {
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}
.quiz-answer-text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--size-2xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-snug);
  color: var(--color-green-deep);
}

.quiz-explanation h3 { font-size: var(--size-lg); }

.quiz-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--size-xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: var(--space-4xl) 0 var(--space-xl);
}
.section-sm .container > .quiz-h2:first-child { margin-top: 0; }

.quiz-refs { gap: 0; }
.quiz-ref-link {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.quiz-ref-link:hover { color: var(--color-cyan-deep); }
.quiz-ref-note {
  margin-top: var(--space-xs);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}
.quiz-ref-type {
  margin-left: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  padding: 0.1rem 0.35rem;
  vertical-align: middle;
}

/* Hub and topic pages */
.quiz-hub-title { margin-bottom: var(--space-xl); }
.quiz-hub-lead { max-width: 40rem; margin-bottom: var(--space-2xl); }

.quiz-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.quiz-chip {
  font-family: var(--font-mono);
  font-size: var(--size-xxs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-navy);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border-strong);
}
.quiz-chip:hover { border-color: var(--color-navy); }
/* Photo heroes on the quizzes and topic pages. The images are wide with the
   subject on the right, so desktop keeps them right-aligned beside the
   headline. On phones only a slice shows: --hero-x-mobile (set per page by
   build_quiz.py) picks which slice, and the wash gets heavier because the
   text stacks over the photo (as on faq.html). */
.quiz-hero-media .hero-image,
.quiz-hero-media .hero-video { object-position: right center; }
@media (max-width: 768px) {
  .quiz-hero-media .hero-image,
  .quiz-hero-media .hero-video { object-position: var(--hero-x-mobile, 96%) center; }
  .quiz-hero-media .hero-overlay {
    background: linear-gradient(to bottom, rgba(15, 21, 48, 0.72) 0%, rgba(15, 21, 48, 0.82) 50%, rgba(15, 21, 48, 0.92) 100%);
  }
}

/* Visitors who've asked for less motion get the still image, not the loop. */
@media (prefers-reduced-motion: reduce) {
  .quiz-hero-media .hero-video { display: none; }
}

/* Chips over the photo hero on the quizzes page */
.quiz-hero-media .quiz-chip { color: var(--color-white); border-color: rgba(255, 255, 255, 0.45); background: rgba(10, 16, 51, 0.35); }
.quiz-hero-media .quiz-chip:hover { border-color: var(--color-cyan); }
.quiz-hero-media .quiz-chip.is-current { background: var(--color-cyan); border-color: var(--color-cyan); color: var(--color-navy-deep); }
.quiz-chip.is-current { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-xl);
}

.quiz-empty {
  grid-column: 1 / -1;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.quiz-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base);
}
.quiz-card:hover { border-color: var(--color-navy); }

/* The cover fills the card's full width in a 3:4 frame. Covers are 9:16, so
   the frame keeps the middle three-quarters of the height, which is where the
   title text sits. (A capped 9:16 frame let the browser shrink the width,
   leaving the image narrower than the card and stuck to the left.) */
.quiz-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-navy-deep);
}
.quiz-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.quiz-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}
.quiz-card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* Feedback form, folded behind a button like the explanation. */
.quiz-feedback { max-width: var(--max-width-reading); }
.quiz-feedback > summary {
  list-style: none;
  display: inline-flex;
  max-width: 100%;
  white-space: normal;   /* .btn doesn't wrap; this label is long for phones */
  text-align: center;
  line-height: 1.3;
}
.quiz-feedback > summary::-webkit-details-marker { display: none; }
.quiz-feedback[open] > summary { margin-bottom: var(--space-xl); }
.quiz-feedback-intro { font-size: var(--size-sm); color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.quiz-feedback-form { max-width: none; margin: 0; }
.quiz-feedback-form .recaptcha-attribution {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  line-height: 1.5;
}

.quiz-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 900px) {
  .quiz-stage { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .quiz-video { max-width: 20rem; margin: 0 auto; width: 100%; }
  .quiz-cta { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .quiz-option-reply { padding-left: var(--space-lg); }
  .quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-option, .quiz-option-letter, .quiz-option-chevron, .quiz-card, .quiz-video-play img, .quiz-play-badge { transition: none; }
  .quiz-video-play:hover img { transform: none; }
}