.pyq-card {
	max-width: 720px;
	margin: 1.5em 0;
	padding: 1.15em 1.25em;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1.45;
	color: #1d2327;
}

/* Defensive resets — some themes / page builders apply global styles to
   <button> elements (e.g. a hover-reveal effect where text is transparent
   until :hover/:focus/:active), which can make button text invisible on
   page load. These rules force this plugin's own text to always be
   visible using its own colors, regardless of what the active theme does
   to buttons elsewhere on the site. */
.pyq-card button,
.pyq-card [role="button"] {
	font-family: inherit;
	text-shadow: none !important;
	-webkit-text-fill-color: currentColor !important;
	opacity: 1;
}

.pyq-card button *,
.pyq-card [role="button"] * {
	-webkit-text-fill-color: currentColor !important;
}

.pyq-card.pyq-loading {
	opacity: 0.5;
}

.pyq-meta-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75em;
	margin-bottom: 0.6em;
}

.pyq-meta-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
}

.pyq-print-btn {
	flex-shrink: 0;
	background: #fff !important;
	border: 1px solid #c3c4c7;
	color: #3c434a !important;
	border-radius: 5px;
	padding: 0.35em 0.9em;
	font-size: 0.82em;
	cursor: pointer;
}

.pyq-print-btn:hover {
	border-color: #8c8f94;
}

/* ------------------------------------------------------------------ */
/* Sticky "Pin Question" toggle — now rendered inside .pyq-submit-row */
/* (see class-pyq-render.php) so it sits on the same horizontal row   */
/* as the Submit / Reset buttons. .pyq-submit-row's flexbox handles   */
/* the alignment; this rule just keeps the button's own internal      */
/* layout (icon + label) and visual style unchanged from before.      */
/* ------------------------------------------------------------------ */

.pyq-pin-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: #fff !important;
	border: 1px solid #c3c4c7;
	color: #3c434a !important;
	border-radius: 5px;
	padding: 0.35em 0.9em;
	font-size: 0.82em;
	cursor: pointer;
}

.pyq-pin-toggle:hover {
	border-color: #8c8f94;
}

/* Toggled on/off in JS alongside .is-pinned on .pyq-pinnable — see
   assets/js/pyq-frontend.js. */
.pyq-pin-toggle.pyq-pin-toggle-active {
	background: #eef6ff !important;
	border-color: #2271b1;
	color: #135e96 !important;
}

.pyq-pin-icon {
	line-height: 1;
}

/* Base state: no layout effect at all until .is-pinned is toggled on.
   .pyq-pinnable wraps the stem + options only (not the explanation/
   feedback below it), so once pinned it sticks to the top of the
   viewport while the reader scrolls through the explanation further
   down the SAME .pyq-card, and un-sticks naturally once they scroll
   past the card entirely. */
.pyq-pinnable.is-pinned {
	position: sticky;
	/* If your theme has its own fixed/sticky header, raise this so the
	   pinned block clears it instead of sticking underneath — e.g.
	   top: 60px; A plain top: 0 is correct for themes without one. */
	top: 0;
	z-index: 50;
	background: #ffffff;
	padding-bottom: 0.5em;
	box-shadow: 0 6px 10px -6px rgba( 0, 0, 0, 0.25 );
}

.pyq-badge-position {
	background: #fff8e1;
	color: #8a6d00;
}

.pyq-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.74em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pyq-badge-topic {
	background: #eef2ff;
	color: #3730a3;
}

.pyq-badge-year {
	background: #f0f0f1;
	color: #3c434a;
}

.pyq-badge-serial {
	background: #f0f0f1;
	color: #3c434a;
}

/* Some themes (Astra included, depending on its Typography settings) set
   a large global font-size / line-height / paragraph spacing on
   `.entry-content p` and similar selectors, which can visually compound
   with this plugin's own spacing. These !important overrides make sure
   the card's typography always comes from here, not the active theme. */
.pyq-card,
.pyq-card p {
	font-size: 15px !important;
}

.pyq-stem,
.pyq-stem p,
.pyq-explanation,
.pyq-explanation p {
	line-height: 1.45 !important;
}

.pyq-stem p,
.pyq-explanation p {
	margin: 0 0 0.4em !important;
}

.pyq-stem p:last-child,
.pyq-explanation p:last-child {
	margin-bottom: 0 !important;
}

.pyq-stem {
	margin-bottom: 0.75em;
}

.pyq-options-list {
	list-style: none;
	margin: 0 0 0.7em;
	padding: 0;
}

.pyq-option {
	margin-bottom: 0.35em;
}

.pyq-option-btn {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	width: 100%;
	text-align: left;
	padding: 0.5em 0.75em;
	border: 1px solid #d7d7d7;
	border-radius: 6px;
	background: #fff !important;
	color: #1d2327 !important;
	cursor: pointer;
	font-size: 0.97em;
	line-height: 1.35;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pyq-option-btn:hover:not([aria-disabled="true"]) {
	border-color: #999;
}

.pyq-option-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.pyq-option-btn[aria-disabled="true"] {
	cursor: default;
}

.pyq-option-letter,
.pyq-option-text {
	color: inherit !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.pyq-option-letter {
	font-weight: 700;
	flex-shrink: 0;
}

.pyq-option.pyq-selected .pyq-option-btn {
	border-color: #2271b1;
	background: #f0f6fc;
}

.pyq-option.pyq-is-correct .pyq-option-btn {
	border-color: #2a9d5c;
	background: #eaf7ee;
}

.pyq-option.pyq-is-wrong .pyq-option-btn {
	border-color: #d63638;
	background: #fdecea;
}

/* Now holds up to three buttons — Pin Question, Submit, Reset — all
   aligned on one horizontal row. flex-wrap lets Pin Question drop to
   its own line on very narrow screens instead of forcing a horizontal
   scrollbar; align-items keeps them vertically centered against each
   other since Pin Question's padding differs slightly from Submit/Reset. */
.pyq-submit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.75em;
}

.pyq-submit-btn,
.pyq-reset-btn {
	padding: 0.55em 1.3em;
	border-radius: 5px;
	font-size: 0.95em;
	cursor: pointer;
}

.pyq-submit-btn {
	background: #2271b1 !important;
	border: none;
	color: #fff !important;
}

.pyq-submit-btn:hover:not([aria-disabled="true"]) {
	background: #195684 !important;
}

.pyq-submit-btn[aria-disabled="true"] {
	background: #a7c4dc !important;
	cursor: not-allowed;
}

.pyq-reset-btn {
	background: #fff !important;
	border: 1px solid #c3c4c7;
	color: #3c434a !important;
}

.pyq-reset-btn:hover {
	border-color: #8c8f94;
}

.pyq-error-text {
	color: #9a1c1e;
}

/* ------------------------------------------------------------------ */
/* Instant "Checking..." state — shown in .pyq-feedback-slot the moment */
/* Submit is clicked, replaced by showFeedback()'s real markup once the */
/* AJAX response arrives (or cleared on error). Purely a perceived-     */
/* latency fix: the actual round-trip time is unaffected, this just    */
/* removes the dead pause with nothing on screen while it's in flight. */
/* ------------------------------------------------------------------ */

.pyq-checking {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 0.9em;
	margin-bottom: 0.75em;
	border-radius: 6px;
	border: 1px solid #e2e2e2;
	background: #f6f7f7;
	color: #50575e;
	font-size: 0.97em;
}

.pyq-spinner {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border: 2px solid #c3c4c7;
	border-top-color: #2271b1;
	border-radius: 50%;
	animation: pyq-spin 0.7s linear infinite;
}

@keyframes pyq-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pyq-spinner {
		animation: none;
	}
}

.pyq-feedback {
	display: flex;
	flex-direction: column;
	padding: 0.75em 0.9em;
	border-radius: 6px;
	margin-bottom: 0.75em;
	font-size: 0.97em;
}

.pyq-feedback.pyq-correct {
	background: #eaf7ee;
	border: 1px solid #2a9d5c;
	color: #1e6b3d;
}

.pyq-feedback.pyq-incorrect {
	background: #fdecea;
	border: 1px solid #d63638;
	color: #9a1c1e;
}

.pyq-feedback-title {
	font-weight: 700;
	margin: 0 0 0.3em;
	font-size: 1.02em;
}

/* "Not quite." — now on the same line/paragraph as the correct-answer
   text (.pyq-correct-answer, below), instead of a separate <p>. Italic
   rather than bold so the two pieces stay visually distinct on one line. */
.pyq-feedback-verdict {
	font-style: italic;
	font-weight: 400;
}

/* Now an inline <strong> on the combined .pyq-feedback-title line rather
   than its own block-level <p> — no standalone block margin needed. */
.pyq-correct-answer {
	font-weight: 700;
}

.pyq-explanation {
	/* flex column: stops the label's own margin from collapsing with
	   this container's margin or with the paragraph that follows it, so
	   .pyq-explanation-label's margin-top/margin-bottom below are the
	   ONLY thing controlling the space around it — no hidden collapsing
	   with anything else to account for. */
	display: flex;
	flex-direction: column;
	margin: 0;
	color: #333;
}

/* Balanced equidistant spacing above/below the "Explanation:" label.
   margin-top is smaller than margin-bottom by design: .pyq-feedback is
   also flex now (see above), so .pyq-feedback-title's own 0.3em bottom
   margin (above) no longer collapses away — it now ADDS to this
   margin-top, whereas below there's nothing else to add to
   margin-bottom. 0.2em + 0.3em (title) = 0.5em above == 0.5em below.
   Verified with an actual rendered measurement, not just arithmetic —
   both gaps land within a sub-pixel of each other. */
.pyq-explanation-label {
	display: block;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}

.pyq-explanation a {
	color: #2271b1;
}

.pyq-related {
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pyq-related-list {
	list-style: none;
	margin: 0.5em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.pyq-related-btn {
	background: #fff !important;
	border: 1px solid #2271b1;
	color: #2271b1 !important;
	border-radius: 999px;
	padding: 0.4em 0.9em;
	font-size: 0.85em;
	cursor: pointer;
}

.pyq-related-btn:hover {
	background: #f0f6fc;
}

.pyq-mains {
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pyq-mains-list {
	list-style: disc;
	margin: 0.5em 0 0;
	padding-left: 1.4em;
}

.pyq-mains-list li {
	margin-bottom: 0.35em;
	color: #1d2327;
}

.pyq-mains-link {
	color: #2271b1 !important;
	text-decoration: underline;
}

.pyq-video {
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pyq-video-wrapper {
	position: relative;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	margin-top: 0.5em;
	max-width: 640px;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
}

.pyq-video-wrapper iframe,
.pyq-video-wrapper embed,
.pyq-video-wrapper object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pyq-video-fallback-link a {
	color: #2271b1 !important;
}

.pyq-actions {
	display: flex;
	justify-content: flex-end;
}

.pyq-next-btn {
	background: #2271b1 !important;
	border: none;
	color: #fff !important;
	padding: 0.65em 1.4em;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.95em;
}

.pyq-next-btn:hover {
	background: #195684;
}

.pyq-no-next {
	color: #777;
	font-style: italic;
	margin: 0;
}

.pyq-notice {
	color: #9a1c1e;
}

/* ---------- Layout: topics panel beside the question ---------- */
/* Used on a question's own page (sidebar on desktop, collapsible panel
   above the question on narrow screens). */

.pyq-layout {
	display: flex;
	align-items: flex-start;
	gap: 1.5em;
	max-width: 980px;
	margin: 1.5em 0;
}

.pyq-layout .pyq-card {
	margin: 0;
}

.pyq-layout-main {
	flex: 1 1 auto;
	min-width: 0;
}

.pyq-topics-panel {
	flex: 0 0 260px;
	width: 260px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fafafa;
	font-size: 0.92em;
	color: #1d2327;
}

.pyq-topics-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	background: #fff !important;
	color: #1d2327 !important;
	border: none;
	border-radius: 8px;
	padding: 0.8em 1em;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
}

.pyq-topics-toggle-icon {
	transition: transform 0.15s ease;
}

.pyq-topics-panel.pyq-topics-open .pyq-topics-toggle-icon {
	transform: rotate(180deg);
}

.pyq-topics-tree-wrap {
	padding: 0.5em 0.9em 0.9em;
	max-height: 70vh;
	overflow: auto;
}

.pyq-topics-tree,
.pyq-topics-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pyq-topics-tree ul {
	padding-left: 1.1em;
	border-left: 1px solid #e2e2e2;
	margin-left: 0.3em;
}

.pyq-topics-tree li {
	margin: 0.15em 0;
}

.pyq-topics-tree summary {
	cursor: pointer;
	list-style: none;
	padding: 0.15em 0;
}

.pyq-topics-tree summary::-webkit-details-marker {
	display: none;
}

.pyq-topics-tree summary::before {
	content: '▸';
	display: inline-block;
	width: 1em;
	color: #777 !important;
	-webkit-text-fill-color: #777 !important;
	transition: transform 0.15s ease;
}

.pyq-topics-tree details[open] > summary::before {
	transform: rotate(90deg);
}

.pyq-topic-link,
span.pyq-topic-link {
	color: #3c434a !important;
	text-decoration: none;
	line-height: 1.4;
	display: inline-block;
	padding: 0.1em 0.2em;
	border-radius: 3px;
}

a.pyq-topic-link:hover {
	text-decoration: underline;
	color: #2271b1 !important;
}

.pyq-topic-current {
	font-weight: 700;
	color: #2271b1 !important;
	background: #eef2ff;
}

@media (max-width: 900px) {
	.pyq-layout {
		flex-direction: column;
	}

	.pyq-topics-panel {
		width: 100%;
		flex-basis: auto;
	}

	.pyq-topics-toggle {
		display: flex;
	}

	.pyq-topics-tree-wrap {
		display: none;
	}

	.pyq-topics-panel.pyq-topics-open .pyq-topics-tree-wrap {
		display: block;
	}
}

.pyq-print-watermark {
	display: none;
}

/* ---------- Printing a single question ---------- */
/* Toggled on by the Print button so only that card ends up on paper,
   even if several questions are embedded on the same page. */
@media print {
	body.pyq-has-print-target > *:not(.pyq-print-isolation-ignore) {
		visibility: hidden;
	}

	.pyq-card.pyq-print-target,
	.pyq-card.pyq-print-target * {
		visibility: visible !important;
	}

	.pyq-card.pyq-print-target {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		box-shadow: none;
		border: none;
	}

	.pyq-card.pyq-print-target .pyq-print-btn,
	.pyq-card.pyq-print-target .pyq-actions,
	.pyq-card.pyq-print-target .pyq-submit-row,
	.pyq-card.pyq-print-target .pyq-video,
	.pyq-card.pyq-print-target .pyq-related {
		display: none !important;
	}

	/* Every element that could sit between the anchored watermark and
	   the printed page background gets its solid background and any
	   drop shadow stripped here — aggressively, with !important, since
	   several of these (the card, the sticky pin container, the option
	   buttons) set their own opaque background elsewhere in this file
	   for the on-screen view. Borders and text color are untouched;
	   only background/box-shadow are neutralized so the anchored
	   watermark below shows through continuously behind the question,
	   the options list, and the explanation box alike. */
	.pyq-card.pyq-print-target,
	.pyq-card.pyq-print-target .pyq-meta-bar,
	.pyq-card.pyq-print-target .pyq-meta-badges,
	.pyq-card.pyq-print-target .pyq-badge,
	.pyq-card.pyq-print-target .pyq-pinnable,
	.pyq-card.pyq-print-target .pyq-pinnable.is-pinned,
	.pyq-card.pyq-print-target .pyq-stem,
	.pyq-card.pyq-print-target .pyq-options-list,
	.pyq-card.pyq-print-target .pyq-option,
	.pyq-card.pyq-print-target .pyq-option-btn,
	.pyq-card.pyq-print-target .pyq-feedback-slot,
	.pyq-card.pyq-print-target .pyq-feedback,
	.pyq-card.pyq-print-target .pyq-explanation,
	.pyq-card.pyq-print-target .pyq-explanation-label {
		background: transparent !important;
		box-shadow: none !important;
	}

	.pyq-card.pyq-print-target .pyq-option-btn {
		border: 1px solid #999 !important;
		color: #000 !important;
	}

	/* The sticky "Pin Question" state only makes sense while scrolling
	   on-screen — drop it back to normal flow for print so it doesn't
	   try to stick mid-page across a paginated printout. Its background
	   is already neutralized above. */
	.pyq-card.pyq-print-target .pyq-pinnable.is-pinned {
		position: static;
	}

	/* Website logo (or Site Icon, as a fallback), anchored dead-center
	   on the page and pinned behind everything else with a negative
	   z-index. Every rule here carries !important: position: fixed
	   plus a negative z-index is otherwise easy for a more specific
	   selector elsewhere (or a theme's own print stylesheet) to
	   override piecemeal, which is what let the watermark get pushed
	   onto its own blank second page instead of anchoring to page one.
	   Deliberately NOT rotated: combining CSS transform:rotate() with
	   position:fixed renders inconsistently across browsers' print
	   engines, sometimes showing the logo rotated incorrectly. */
	.pyq-card.pyq-print-target .pyq-print-watermark {
		display: block !important;
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		opacity: 0.08;
		z-index: -1 !important;
		pointer-events: none;
	}

	.pyq-card.pyq-print-target .pyq-print-watermark img {
		display: block;
		width: 60vw;
		max-width: 480px;
		height: auto;
		image-orientation: none; /* Ignore any embedded rotation metadata on the uploaded logo file. */
	}
}

/* -------------------------------------------------------------------
 * Image lightbox — question stem / explanation images open in an
 * on-page overlay instead of navigating to the image file URL.
 * ------------------------------------------------------------------- */

body.pyq-lightbox-active {
	overflow: hidden;
}

.pyq-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba( 0, 0, 0, 0.85 );
}

.pyq-lightbox-overlay.pyq-lightbox-open {
	display: flex;
}

.pyq-lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 4px 24px rgba( 0, 0, 0, 0.5 );
	border-radius: 4px;
}

.pyq-lightbox-close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.pyq-lightbox-close:hover,
.pyq-lightbox-close:focus {
	background: rgba( 255, 255, 255, 0.3 );
}

/* Signals to the reader, before they click, that stem/explanation
   images are interactive rather than plain inline content. */
.pyq-stem img,
.pyq-feedback-slot img {
	cursor: zoom-in;
}