/* Lycian Way quizzes. Deliberately small: the page is a two-minute toy that
 * has to feel instant on a phone, so there is no framework and no images
 * beyond what the site already loads. Inline <style> would also have worked
 * (style-src allows 'unsafe-inline') but a stamped file caches properly. */

.quiz-hero {
  /* >65px top padding: the fixed navbar is 65px and will otherwise sit on
     top of the h1. That bug has bitten several pages on this site. */
  padding: 108px 0 40px;
  background: linear-gradient(160deg, #2d5016 0%, #3f6b22 60%, #56843a 100%);
  color: #fff;
  text-align: center;
}
.quiz-eyebrow {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.quiz-hero h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 5vw, 3rem); }
.quiz-lede {
  max-width: 60ch; margin: 0 auto; opacity: .93; line-height: 1.6;
}
.quiz-main { padding: 32px 0 72px; }
.quiz-loading, .quiz-error { text-align: center; opacity: .7; padding: 32px 0; }

/* hub — the front door from social, so it has to look like something */
.quiz-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.quiz-card {
  --quiz-hue: 95;                      /* overridden per card from the slug */
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #e4e4de; border-radius: 18px; background: #fff;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quiz-card:hover {
  transform: translateY(-4px); border-color: hsl(var(--quiz-hue) 35% 62%);
  box-shadow: 0 14px 32px rgba(0,0,0,.13);
}
.quiz-card-band {
  height: 104px; display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(120% 140% at 20% 0%, hsl(var(--quiz-hue) 42% 42%) 0%,
                                          hsl(var(--quiz-hue) 38% 26%) 70%);
  position: relative;
}
/* With a photograph the band becomes the hero: taller, image cover, and a
   scrim so the title stays legible over whatever the picture is doing. */
.quiz-card-band.has-photo {
  height: 210px; background-size: cover; background-position: center;
  align-items: flex-end;
}
.quiz-card-band.has-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.06) 72%, rgba(0,0,0,0) 100%);
}
.quiz-card-band::after {          /* soft sheen, keeps a flat band from reading cheap */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%);
}
.quiz-card-band.has-photo::after { background: none; }
.quiz-card-glyph {
  font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
  margin-bottom: auto; margin-top: auto;
}
.quiz-card-title {
  position: relative; z-index: 1; margin: 0;
  padding: 0 20px 16px; width: 100%;
  font-size: 1.45rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
/* No photo: the band is short, so the title belongs under it, in ink. */
.quiz-card-band:not(.has-photo) .quiz-card-title {
  position: absolute; bottom: 0; left: 0;
}
.quiz-card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.quiz-card-desc { margin: 0 0 18px; line-height: 1.55; opacity: .8; flex: 1; }
.quiz-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quiz-pill {
  padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: hsl(var(--quiz-hue) 40% 94%); color: hsl(var(--quiz-hue) 45% 26%);
}
.quiz-pill-soft { background: #f1f1ec; color: #5f5f57; }
.quiz-card-go { margin-left: auto; font-weight: 700; color: hsl(var(--quiz-hue) 45% 30%); }

/* play */
.quiz-challenge {
  max-width: 640px; margin: 0 auto 20px; padding: 12px 16px; border-radius: 10px;
  background: #fdf3d8; border: 1px solid #e8d6a0; text-align: center; font-weight: 600;
}
.quiz-progress {
  max-width: 640px; margin: 0 auto 10px; text-align: center;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6;
}
.quiz-card-play {
  max-width: 640px; margin: 0 auto; padding: 26px;
  border: 1px solid #e2e2dc; border-radius: 16px; background: #fff;
}
.quiz-question { margin: 0 0 18px; font-size: 1.3rem; line-height: 1.4; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  width: 100%; text-align: left; padding: 14px 16px; font: inherit;
  border: 1px solid #d8d8d1; border-radius: 10px; background: #fbfbf9;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.quiz-option:hover:enabled { border-color: #2d5016; background: #f3f6ee; }
.quiz-option:disabled {
  /* Do NOT let the browser grey these out. Once answered, the CORRECT option
     is the whole teaching moment — fading it is exactly backwards. */
  cursor: default; opacity: 1; color: #333; -webkit-text-fill-color: #333;
}
.quiz-option.is-correct {
  border-color: #2d7a2d; background: #e8f5e8; font-weight: 700;
  color: #1c5b1c; -webkit-text-fill-color: #1c5b1c;
}
.quiz-option.is-wrong {
  border-color: #b3261e; background: #fdeceb;
  color: #8c1d18; -webkit-text-fill-color: #8c1d18;
}
.quiz-explain {
  margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid #2d5016;
  background: #f6f7f2; line-height: 1.6;
}
.quiz-btn {
  margin: 18px 8px 0 0; padding: 12px 22px; font: inherit; font-weight: 600;
  border-radius: 999px; cursor: pointer; border: 1px solid transparent;
}
.quiz-btn-primary { background: #2d5016; color: #fff; }
.quiz-btn-primary:hover { background: #3f6b22; }
.quiz-btn-ghost { background: transparent; border-color: #d8d8d1; }
.quiz-score { margin: 0; text-align: center; font-size: 3rem; font-weight: 700; color: #2d5016; }
.quiz-verdict { margin: 6px 0 4px; text-align: center; font-size: 1.05rem; }
.quiz-more { display: inline-block; margin-top: 16px; }

/* Keyboard users must see where they are — the whole page is buttons. */
.quiz-option:focus-visible, .quiz-btn:focus-visible, .quiz-card:focus-visible {
  outline: 3px solid #2d5016; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .quiz-card { transition: none; }
}


/* ── Themed hero: the quiz's own photograph, scrimmed hard enough that the
   h1 and lede keep AA contrast over any part of the image. ── */
.quiz-hero[data-hero] {
  background-size: cover; background-position: center; position: relative;
}
.quiz-hero[data-hero]::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(20,32,12,.86) 0%, rgba(20,32,12,.72) 45%, rgba(20,32,12,.88) 100%);
}
.quiz-hero[data-hero] > .container { position: relative; z-index: 1; }
/* GENERATED HERO RULES — do not hand-edit.
   scripts/gen-quiz-pages.py rewrites everything between the markers from
   the quiz-card-*.webp files actually present, so adding an image is the
   only step needed to illustrate a new theme. */
/* quiz-hero:start */
.quiz-hero[data-hero="ancient-rome"] { background-image: url("/images/quiz-card-ancient-rome.webp"); }
.quiz-hero[data-hero="archaeology"] { background-image: url("/images/quiz-card-archaeology.webp"); }
.quiz-hero[data-hero="geology"] { background-image: url("/images/quiz-card-geology.webp"); }
.quiz-hero[data-hero="kit"] { background-image: url("/images/quiz-card-kit.webp"); }
.quiz-hero[data-hero="mediterranean"] { background-image: url("/images/quiz-card-mediterranean.webp"); }
.quiz-hero[data-hero="myths"] { background-image: url("/images/quiz-card-myths.webp"); }
.quiz-hero[data-hero="navigation"] { background-image: url("/images/quiz-card-navigation.webp"); }
.quiz-hero[data-hero="night-sky"] { background-image: url("/images/quiz-card-night-sky.webp"); }
.quiz-hero[data-hero="pilgrim-roads"] { background-image: url("/images/quiz-card-pilgrim-roads.webp"); }
.quiz-hero[data-hero="place-names-italy"] { background-image: url("/images/quiz-card-place-names-italy.webp"); }
.quiz-hero[data-hero="trees"] { background-image: url("/images/quiz-card-trees.webp"); }
.quiz-hero[data-hero="vf-crossing-the-alps"] { background-image: url("/images/quiz-card-vf-crossing-the-alps.webp"); }
.quiz-hero[data-hero="vf-england-france"] { background-image: url("/images/quiz-card-vf-england-france.webp"); }
.quiz-hero[data-hero="vf-rome"] { background-image: url("/images/quiz-card-vf-rome.webp"); }
.quiz-hero[data-hero="vf-sigeric"] { background-image: url("/images/quiz-card-vf-sigeric.webp"); }
.quiz-hero[data-hero="vf-switzerland"] { background-image: url("/images/quiz-card-vf-switzerland.webp"); }
.quiz-hero[data-hero="vf-tuscany"] { background-image: url("/images/quiz-card-vf-tuscany.webp"); }
.quiz-hero[data-hero="vf-tuscia"] { background-image: url("/images/quiz-card-vf-tuscia.webp"); }
.quiz-hero[data-hero="walking"] { background-image: url("/images/quiz-card-walking.webp"); }
.quiz-hero[data-hero="weather"] { background-image: url("/images/quiz-card-weather.webp"); }
.quiz-hero[data-hero="wildlife"] { background-image: url("/images/quiz-card-wildlife.webp"); }
.quiz-hero[data-hero="index"] { background-image: url("/images/quiz-card-ancient-rome.webp"); }
/* quiz-hero:end */

/* ── Signed-in progress. Additive: none of this exists for anonymous play,
   which is the version that has to keep working. ── */
.quiz-review {
  max-width: 780px; margin: 0 auto 26px; padding: 18px 20px;
  border: 1px solid #e4e4de; border-radius: 14px; background: #fff;
}
.quiz-review-cov { margin: 0; font-weight: 600; }
.quiz-review-clear { margin: 6px 0 0; opacity: .75; }
.quiz-review-toggle {
  margin-top: 10px; padding: 0; border: 0; background: none; font: inherit;
  font-weight: 700; color: #2d5016; cursor: pointer; text-align: left;
}
.quiz-review-toggle::after { content: '  ▾'; }
.quiz-review-toggle.is-open::after { content: '  ▴'; }
.quiz-review-list { margin-top: 14px; display: grid; gap: 14px; }
.quiz-review-item { padding: 14px 16px; border-left: 3px solid #b3261e; background: #fbfbf9; }
.quiz-review-q { margin: 0 0 8px; font-weight: 700; }
.quiz-review-yours { margin: 0; color: #8c1d18; }
.quiz-review-right { margin: 2px 0 0; color: #1c5b1c; font-weight: 600; }
.quiz-review-why { margin: 8px 0 0; opacity: .82; line-height: 1.55; }
.quiz-pill-best { background: #e8f5e8; color: #1c5b1c; }
.quiz-pill-new  { background: #fdf3d8; color: #7a5a12; }
.quiz-saved { margin: 14px 0 0; font-size: .92rem; opacity: .8; }
.quiz-saved-link { font-weight: 700; }

/* Question navigation */
.quiz-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.quiz-nav .quiz-btn { margin-top: 14px; }
.quiz-btn:disabled { opacity: .4; cursor: default; }
.quiz-nav-note { margin-top: 14px; font-size: .85rem; opacity: .7; }

/* A way back to the hub, visible for the whole quiz — not only at the end. */
.quiz-breadcrumb { max-width: 640px; margin: 0 auto 14px; }
.quiz-breadcrumb-link {
  font-weight: 600; text-decoration: none; color: #2d5016;
  display: inline-block; padding: 6px 0;
}
.quiz-breadcrumb-link:hover { text-decoration: underline; }