/* Trivia & Poll — styles scoped under .tp- classes so they don't fight your theme.
   Fonts fall back gracefully if Google Fonts is blocked. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap');

.tp-wrap,
.tp-col{
	--tp-bg:#efe3cf;
	--tp-card:#fffdf8;
	--tp-ink:#33302b;
	--tp-head:#2e3a56;
	--tp-accent:#c0522e;
	--tp-accent-dark:#a5411f;
	--tp-line:#e2d6c0;
	--tp-good:#2f7d4f;
	--tp-bad:#b23b32;
}

/* layout: trivia | divider | poll */
.tp-wrap{
	display:grid;
	grid-template-columns:1fr 1px 1fr;
	gap:34px;
	max-width:1120px;
	margin:0 auto;
	color:var(--tp-ink);
	font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.tp-divider{background:var(--tp-line)}

/* when a single-column shortcode is used on its own */
.tp-col{
	color:var(--tp-ink);
	font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.tp-col *,
.tp-wrap *{box-sizing:border-box}

.tp-col-title{
	font-family:"Oswald",Impact,sans-serif;
	font-weight:700;
	font-size:52px;
	letter-spacing:2px;
	color:var(--tp-head);
	text-align:center;
	margin:8px 0 22px;
	line-height:1;
}

.tp-score{
	display:block;
	width:max-content;
	max-width:100%;
	margin:-6px auto 20px;
	padding:8px 16px;
	background:var(--tp-head);
	color:#fff;
	border-radius:20px;
	font-weight:700;
	font-size:14px;
}

/* cards */
.tp-card{
	background:var(--tp-card);
	border:1px solid var(--tp-line);
	border-radius:10px;
	padding:22px 22px 18px;
	margin-bottom:22px;
	box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.tp-q{
	font-weight:700;
	font-size:15px;
	margin:0 0 16px;
	color:#403c35;
	line-height:1.45;
}
.tp-q .tp-num{color:var(--tp-accent);margin-right:4px}

/* options */
.tp-options{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px 20px;
	margin-bottom:16px;
}
.tp-opt{
	display:flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	font-size:14px;
	padding:2px;
	margin:0;
	line-height:1.3;
}
.tp-opt input{position:absolute;opacity:0;width:0;height:0}
.tp-dot{
	width:16px;height:16px;border-radius:50%;
	border:2px solid var(--tp-accent);
	flex-shrink:0;transition:.15s;
}
.tp-opt input:checked + .tp-dot{
	background:var(--tp-accent);
	box-shadow:inset 0 0 0 3px var(--tp-card);
}
.tp-opt.tp-correct{color:var(--tp-good);font-weight:700}
.tp-opt.tp-correct .tp-dot{border-color:var(--tp-good);background:var(--tp-good);box-shadow:inset 0 0 0 3px var(--tp-card)}
.tp-opt.tp-wrong{color:var(--tp-bad);font-weight:700}
.tp-opt.tp-wrong .tp-dot{border-color:var(--tp-bad);background:var(--tp-bad);box-shadow:inset 0 0 0 3px var(--tp-card)}

/* bottom row: feedback + submit */
.tp-rowline{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
.tp-feedback{font-size:13px;font-weight:700;min-height:18px}
.tp-feedback.tp-good{color:var(--tp-good)}
.tp-feedback.tp-bad{color:var(--tp-bad)}

.tp-col .tp-submit,
.tp-wrap .tp-submit{
	background:var(--tp-accent);
	color:#fff;
	border:none;
	padding:9px 22px;
	border-radius:6px;
	font-weight:700;
	font-size:14px;
	line-height:1.2;
	cursor:pointer;
	font-family:inherit;
	transition:background .15s;
}
.tp-submit:hover{background:var(--tp-accent-dark)}
.tp-submit:disabled{background:#cfc3b0;cursor:default}

/* poll voter name field */
.tp-namewrap{margin:0 0 14px}
.tp-name{
	width:100%;
	max-width:320px;
	padding:8px 11px;
	border:1px solid var(--tp-line);
	border-radius:6px;
	font:inherit;
	background:#fff;
	color:var(--tp-ink);
}
.tp-name:focus{outline:2px solid var(--tp-accent);outline-offset:1px}
.tp-name:disabled{background:#f3ece0;color:#8a8073}

/* poll results */
.tp-results{margin:2px 0 14px;display:none}
.tp-results.tp-show{display:block}
.tp-result{margin-bottom:12px}
.tp-result-top{
	display:flex;justify-content:space-between;
	font-size:13px;font-weight:600;margin-bottom:5px;
}
.tp-result-top .tp-you{color:var(--tp-accent)}
.tp-track{height:10px;background:#ece2d0;border-radius:6px;overflow:hidden}
.tp-fill{height:100%;width:0;background:var(--tp-accent);border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* pagination: hidden overflow cards + load-more button */
.tp-card.tp-extra{display:none}
.tp-loadmore{
	display:block;
	margin:2px auto 26px;
	padding:10px 28px;
	background:transparent;
	color:var(--tp-accent);
	border:2px solid var(--tp-accent);
	border-radius:6px;
	font-weight:700;
	font-size:14px;
	line-height:1.2;
	cursor:pointer;
	font-family:inherit;
	transition:background .15s,color .15s;
}
.tp-loadmore:hover{background:var(--tp-accent);color:#fff}
.tp-loadmore[hidden]{display:none}

/* responsive: stack columns */
@media (max-width:820px){
	.tp-wrap{grid-template-columns:1fr;gap:0}
	.tp-divider{display:none}
	.tp-col-title{font-size:42px}
}

/* honour reduced motion */
@media (prefers-reduced-motion:reduce){
	.tp-fill{transition:none}
}