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

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

.wdk-search{
  --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-search h2{ font-family:'Lora',Georgia,serif; margin:0; }
.wdk-search a{ text-decoration:none; color:inherit; }
.wdk-search section{ padding:36px 0; }
.wdk-search .wrap{ max-width:1220px; margin:0 auto; padding:0 24px; }

/* ---------- Search hero ---------- */
.wdk-search .search-hero{ text-align:center; padding:38px 24px 30px; border-bottom:1px solid var(--line); }
.wdk-search .search-hero-input{ display:flex; align-items:center; gap:10px; background:var(--paper-dim); border:1.5px solid var(--line); border-radius:100px; padding:10px 10px 10px 22px; max-width:520px; margin:0 auto 16px; }
.wdk-search .search-hero-input input{ flex:1; border:none; outline:none; background:none; font-size:15px; font-family:inherit; text-align:center; }
.wdk-search .search-hero-input button{ background:var(--amber); color:#fff; border:none; padding:12px 22px; border-radius:100px; font-weight:700; font-size:13px; cursor:pointer; }
.wdk-search .search-result-count{ font-size:13px; color:var(--ink-soft); }
.wdk-search .search-result-count b{ color:var(--ink); }

/* ---------- Filter bar ---------- */
.wdk-search .filter-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.wdk-search .filter-chip{ background:var(--paper-dim); border:1.5px solid var(--line); padding:7px 14px; border-radius:100px; font-size:12.5px; font-weight:600; }
.wdk-search .filter-chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

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

/* ---------- Matching category callout ---------- */
.wdk-search .cat-match{ display:flex; align-items:center; gap:16px; background:var(--paper-dim); border:1.5px solid var(--line); border-radius:16px; padding:18px 22px; margin-bottom:28px; }
.wdk-search .cat-match-icon{ width:48px; height:48px; border-radius:14px; background:var(--amber-bg); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.wdk-search .cat-match-text{ flex:1; }
.wdk-search .cat-match-text b{ font-size:14px; display:block; margin-bottom:2px; }
.wdk-search .cat-match-text span{ font-size:12px; color:var(--ink-soft); }
.wdk-search .cat-match-btn{ background:var(--ink); color:#fff; padding:9px 18px; border-radius:100px; font-size:12.5px; font-weight:700; white-space:nowrap; }

/* ---------- Empty state ---------- */
.wdk-search .empty-state{ text-align:center; padding:50px 24px 60px; }
.wdk-search .empty-icon{ font-size:44px; margin-bottom:16px; }
.wdk-search .empty-state h2{ font-size:20px; margin-bottom:10px; }
.wdk-search .empty-state p{ font-size:13.5px; color:var(--ink-soft); max-width:420px; margin:0 auto 26px; line-height:1.6; }
.wdk-search .empty-suggestions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:30px; }
.wdk-search .empty-chip{ background:var(--paper-dim); border:1.5px solid var(--line); padding:8px 16px; border-radius:100px; font-size:12.5px; font-weight:600; }
.wdk-search .empty-cta{ background:var(--amber); color:#fff; padding:12px 26px; border-radius:12px; font-weight:700; font-size:13px; }

/* ---------- Pagination (reuses the same paginate_links() alias as category archive) ---------- */
.wdk-search .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:28px; }
.wdk-search .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-search .pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wdk-search .pagination .page-numbers.dots{ border:none; background:none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .wdk-search .quiz-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wdk-search .quiz-grid { grid-template-columns:1fr; }
  .wdk-search .search-hero-input { flex-wrap:wrap; border-radius:18px; padding:12px; }
  .wdk-search .search-hero-input input { width:100%; margin-bottom:8px; }
  .wdk-search .search-hero-input button { width:100%; }
  .wdk-search .cat-match { flex-direction:column; text-align:center; }
}