/**
 * Styles for the pyq_topic taxonomy "overview" archive — a single-page,
 * scannable list of questions grouped by Year. Colors/spacing intentionally
 * match assets/css/pyq-frontend.css (the interactive question card) so the
 * two page types feel like the same plugin.
 */

.pyq-overview-wrap {
	max-width: 760px;
	margin: 1.5em auto;
	padding: 0 1em;
	color: #1d2327;
}

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */

.pyq-overview-header {
	margin-bottom: 1.75em;
	padding-bottom: 1.25em;
	border-bottom: 2px solid #e2e2e2;
}

.pyq-overview-eyebrow {
	margin: 0 0 0.35em;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #646970;
}

.pyq-overview-title {
	margin: 0 0 0.35em;
	font-size: 1.9em;
	line-height: 1.25;
	color: #1d2327;
}

.pyq-overview-desc {
	margin: 0.5em 0 0;
	font-size: 0.98em;
	line-height: 1.6;
	color: #3c434a;
}

.pyq-overview-desc p {
	margin: 0 0 0.75em;
}

.pyq-overview-desc p:last-child {
	margin-bottom: 0;
}

.pyq-overview-count {
	margin: 0.75em 0 0;
	font-size: 0.88em;
	color: #646970;
}

.pyq-overview-empty {
	font-size: 1em;
	color: #3c434a;
}

/* ---------------------------------------------------------------- */
/* Year groups                                                       */
/* ---------------------------------------------------------------- */

.pyq-overview-year-group {
	margin-bottom: 2em;
}

.pyq-overview-year-group:last-child {
	margin-bottom: 0;
}

.pyq-overview-year {
	margin: 1.75em 0 0.75em;
	padding: 0 0 0.5em;
	font-size: 1.5rem;
	font-weight: 700;
	color: #2b6cb0;
	background: none;
	border-bottom: 2px solid #cbd5e0;
}

.pyq-overview-year-group:first-child .pyq-overview-year {
	margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* Question list                                                     */
/* ---------------------------------------------------------------- */

.pyq-overview-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-left: 0;
}

.pyq-overview-item {
	display: flex;
	align-items: center;
	margin-bottom: 0.5em;
	padding: 0.55em 0.25em;
	border-bottom: 1px solid #f0f0f1;
}

.pyq-overview-item:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.pyq-overview-item:hover {
	background: #f6f7f7;
}

.pyq-overview-serial {
	flex: 0 0 auto;
	min-width: 40px;
	margin-right: 0.5em;
	padding: 0.1em 0.5em;
	border-radius: 6px;
	background: #e2e8f0;
	color: #2d3748;
	font-size: 0.82em;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.pyq-overview-link {
	flex: 1 1 auto;
	color: #2271b1;
	text-decoration: none;
	font-size: 1em;
	line-height: 1.5;
}

.pyq-overview-link:hover,
.pyq-overview-link:focus {
	text-decoration: underline;
	color: #135e96;
}

/* ---------------------------------------------------------------- */
/* Topic tag — Main Archive only (see                                */
/* templates/archive-pyq_question-overview.php). Wraps the title and */
/* tag in a column so the row's flexbox alignment (serial badge +     */
/* content) isn't disturbed by the extra line.                       */
/* ---------------------------------------------------------------- */

.pyq-overview-link-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0; /* let long titles wrap instead of overflowing the row */
}

.pyq-topic-tag {
	margin-top: 0.15em;
	font-size: 0.78em;
	font-style: italic;
	color: #718096;
}

/* ---------------------------------------------------------------- */
/* Small screens                                                     */
/* ---------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.pyq-overview-title {
		font-size: 1.5em;
	}

	.pyq-overview-serial {
		margin-right: 0.4em;
	}
}

/* ------------------------------------------------------------------ */
/* Two-column grid layout for desktop screens only                    */
/* Scoped to .pyq-overview-list (the actual class on the <ul> in       */
/* templates/taxonomy-pyq_topic-overview.php) rather than a bare "ul", */
/* which previously matched Astra's nav menus too and broke the header.*/
/* Both hyphenated and underscored body classes are included so this  */
/* targets the taxonomy and post type archives regardless of how a    */
/* given WordPress install renders the slug.                          */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) {
	body.tax-pyq-topic ul.pyq-overview-list,
	body.tax-pyq_topic ul.pyq-overview-list,
	body.post-type-archive-pyq-question ul.pyq-overview-list,
	body.post-type-archive-pyq_question ul.pyq-overview-list {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 40px;
		align-items: start;
	}

	/* Ensure list items don't stretch awkwardly in the grid */
	body.tax-pyq-topic ul.pyq-overview-list li,
	body.tax-pyq_topic ul.pyq-overview-list li,
	body.post-type-archive-pyq-question ul.pyq-overview-list li,
	body.post-type-archive-pyq_question ul.pyq-overview-list li {
		width: 100%;
		break-inside: avoid;
	}
}