/* ==========================================================================
   WatDoUKnow — Category archive page styles
   Paste into: Blocksy > Customizer > Custom CSS (append to wdk-homepage.css,
   or add as its own Custom CSS entry — either works, they don't conflict)
   Scoped to .wdk-category so it never leaks into other templates.

   NOTE: header, footer, .qcard, .qcard-tag, .qcard-meta, .qcard-format,
   .cat-head, and the mobile tab bar are already covered by shared.css /
   your Blocksy header-footer builder + wdk-homepage.css — not repeated here.
   ========================================================================== */

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

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

/* ---------- Category hero ---------- */
.wdk-category .cat-hero{ display:flex; align-items:center; gap:22px; padding:26px 0 34px; flex-wrap:wrap; }
.wdk-category .cat-hero-icon{ width:74px; height:74px; border-radius:20px; background:var(--amber-bg); display:flex; align-items:center; justify-content:center; font-size:34px; flex-shrink:0; }
.wdk-category .cat-hero-text h1{ font-size:30px; margin-bottom:6px; }
.wdk-category .cat-hero-text p{ font-size:14px; color:var(--ink-soft); max-width:560px; line-height:1.6; margin:0 0 10px; }
.wdk-category .cat-hero-stats{ display:flex; gap:18px; font-size:12.5px; color:var(--ink-soft); font-weight:600; }
.wdk-category .cat-hero-stats b{ color:var(--ink); }

/* ---------- Filter / sort bar ---------- */
.wdk-category .filter-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.wdk-category .format-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.wdk-category .format-chip{ display:flex; align-items:center; gap:6px; background:var(--paper-dim); border:1.5px solid var(--line); padding:7px 14px; border-radius:100px; font-size:12.5px; font-weight:600; cursor:pointer; }
.wdk-category .format-chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wdk-category .sort-select{ border:1.5px solid var(--line); border-radius:10px; padding:8px 14px; font-size:12.5px; font-weight:600; font-family:inherit; background:var(--paper); color:var(--ink); }

/* ---------- Quiz grid ---------- */
.wdk-category .quiz-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:36px; }

/* ---------- Pagination ---------- */
.wdk-category .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; }
.wdk-category .page-btn{ width:36px; height:36px; border-radius:10px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.wdk-category .page-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wdk-category .page-btn.arrow{ font-size:15px; }

/* paginate_links() outputs WP's own classes (.page-numbers etc.) —
   alias them to the same look as the mockup's .page-btn divs so we
   don't have to hand-roll pagination markup. */
.wdk-category .pagination .page-numbers{
  width:36px; height:36px; border-radius:10px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink);
}
.wdk-category .pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wdk-category .pagination .page-numbers.dots{ border:none; background:none; }

/* ---------- Explore other categories strip ---------- */
.wdk-category .other-cats{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.wdk-category .other-cat-chip{ background:var(--paper-dim); border:1.5px solid var(--line); padding:9px 18px; border-radius:100px; font-size:13px; font-weight:600; }
.wdk-category .other-cat-chip:hover{ border-color:var(--amber); color:var(--amber-deep); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .wdk-category .quiz-grid { grid-template-columns:repeat(2, 1fr); }
  .wdk-category .cat-hero-text h1 { font-size:24px; }
}
@media (max-width: 560px) {
  .wdk-category .quiz-grid { grid-template-columns:1fr; }
  .wdk-category .filter-bar { flex-direction:column; align-items:stretch; }
  .wdk-category .cat-hero { flex-direction:column; align-items:flex-start; }
}