/* ==========================================================================
   WatDoUKnow — Single quiz page styles
   Paste into: Blocksy > Customizer > Custom CSS (alongside the others)
   Scoped to .wdk-quiz-page so it never leaks into other templates.

   NOTE: header, footer, .qcard, .qcard-tag, .qcard-meta, .cat-head, and the
   mobile tab bar are already covered elsewhere — not repeated here.
   ========================================================================== */

.wdk-quiz-page{
  --amber:#E8A23B; --amber-deep:#C9871A; --amber-bg:#FEF3E0;
  --ink:#12172B; --ink-soft:#6B72A0; --ink-faint:#9A9AA8;
  --paper:#FFFFFF; --paper-dim:#FAF8F4; --line:#EAEBF5;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
}
.wdk-quiz-page h1, .wdk-quiz-page h2, .wdk-quiz-page h3{ font-family:'Lora',Georgia,serif; margin:0; }
.wdk-quiz-page a{ text-decoration:none; color:inherit; }
.wdk-quiz-page section{ padding:40px 0; }
.wdk-quiz-page .wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }

/* ---------- Breadcrumb ---------- */
.wdk-quiz-page .breadcrumb{ font-size:12.5px; color:var(--ink-soft); padding:18px 0 0; }
.wdk-quiz-page .breadcrumb a:hover{ color:var(--amber-deep); }
.wdk-quiz-page .breadcrumb span{ margin:0 6px; color:var(--ink-faint); }

/* ---------- Quiz hero ---------- */
.wdk-quiz-page .quiz-hero{ padding:28px 0 32px; text-align:center; }
.wdk-quiz-page .quiz-hero-badges{ display:flex; justify-content:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.wdk-quiz-page .badge-format{ background:var(--ink); color:#fff; font-size:11px; font-weight:700; padding:6px 14px; border-radius:100px; }
.wdk-quiz-page .badge-cat{ background:var(--amber-bg); color:var(--amber-deep); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:6px 14px; border-radius:100px; }
.wdk-quiz-page .quiz-hero h1{ font-size:32px; line-height:1.2; max-width:680px; margin:0 auto 14px; }
.wdk-quiz-page .quiz-hero p{ font-size:14.5px; color:var(--ink-soft); max-width:560px; margin:0 auto 24px; line-height:1.6; }
.wdk-quiz-page .quiz-hero-stats{ display:flex; justify-content:center; gap:34px; margin-bottom:26px; flex-wrap:wrap; }
.wdk-quiz-page .qstat{ text-align:center; }
.wdk-quiz-page .qstat b{ display:block; font-family:'Lora',serif; font-size:22px; }
.wdk-quiz-page .qstat span{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.wdk-quiz-page .quiz-author{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }
.wdk-quiz-page .quiz-author .avatar{ width:22px; height:22px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }

/* ---------- Widget embed area (your plugin renders inside this) ---------- */
.wdk-quiz-page .widget-frame{ max-width:420px; margin:0 auto 44px; border-radius:20px; box-shadow:0 20px 50px -20px rgba(18,23,43,.22); overflow:hidden; border:1px solid var(--line); }
.wdk-quiz-page .widget-label{ text-align:center; font-size:11px; color:var(--ink-faint); margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em; }

/* ---------- What to expect ---------- */
.wdk-quiz-page .expect-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.wdk-quiz-page .expect-item{ text-align:center; border:1.5px solid var(--line); border-radius:14px; padding:20px 14px; box-shadow:0 3px 10px -4px rgba(18,23,43,.08); }
.wdk-quiz-page .expect-icon{ font-size:22px; margin-bottom:10px; }
.wdk-quiz-page .expect-item b{ display:block; font-size:13px; margin-bottom:5px; }
.wdk-quiz-page .expect-item span{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }

/* ---------- Share row ---------- */
.wdk-quiz-page .share-row{ display:flex; justify-content:center; gap:10px; }
.wdk-quiz-page .share-btn{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; }
.wdk-quiz-page .share-btn:hover{ border-color:var(--amber); color:var(--amber-deep); }

/* ---------- Related quizzes ---------- */
.wdk-quiz-page .related-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.wdk-quiz-page .qcard-img{ height:100px; }
.wdk-quiz-page .qcard-body{ padding:14px; }
.wdk-quiz-page .qcard-title{ font-size:13.5px; }
.wdk-quiz-page .qcard-meta{ font-size:11px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .wdk-quiz-page .quiz-hero h1 { font-size:24px; }
  .wdk-quiz-page .expect-grid { grid-template-columns:1fr; }
  .wdk-quiz-page .related-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wdk-quiz-page .related-grid { grid-template-columns:1fr; }
  .wdk-quiz-page .quiz-hero-stats { gap:20px; }
}