/* ==========================================================================
   NextCareer Results & Answer Keys — archive + detail styles.
   Every rule is prefixed .ncr- (NextCareer Results) so nothing collides with
   Government Jobs (.nc-, .job-), Career News, or the shared homepage system
   (.nch-). Reuses the existing --nch- custom properties (defined on
   .nch-body in nextcareer-homepage's homepage.css, which this stylesheet
   depends on via wp_enqueue_style()'s dependency array) instead of
   redefining colors/spacing/radius from scratch.
   ========================================================================== */

/* ---------- TYPE ACCENT SYSTEM ----------
   Two subtle accents only — Result (brand blue, same as the rest of the
   site) and Answer Key (teal, already used elsewhere for the Teaching
   category so it stays within the established palette rather than
   introducing a new color). Applied via a data-type attribute, same
   technique as the homepage/job-card category-color system. */

.ncr-result-card[data-type="answer_key"],
.ncr-detail-head[data-type="answer_key"],
.ncr-important-links[data-type="answer_key"] {
	--ncr-accent: #0f766e;
	--ncr-accent-bg: #e9f9f6;
}

.ncr-result-card[data-type="result"],
.ncr-detail-head[data-type="result"],
.ncr-important-links[data-type="result"] {
	--ncr-accent: var(--nch-blue);
	--ncr-accent-bg: var(--nch-blue-light);
}

/* ---------- PAGE INTRO ---------- */

.ncr-results-header {
	max-width: 900px;
	margin: 0 auto 26px;
}

.ncr-results-header h1 {
	margin: 0 0 8px;
	font-size: clamp(24px, 3.6vw, 32px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nch-ink);
}

.ncr-results-header p {
	margin: 0;
	color: var(--nch-gray);
	font-size: 15px;
}

/* ---------- FILTERS ---------- */

.ncr-filters {
	max-width: 1100px;
	margin: 0 auto 30px;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 14px;
	padding: 18px;
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius);
	box-shadow: var(--nch-shadow);
}

.ncr-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ncr-filter-field label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--nch-gray);
}

.ncr-filter-field input,
.ncr-filter-field select {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--nch-border);
	border-radius: 8px;
	background: var(--nch-white);
	font-size: 14px;
	color: var(--nch-ink);
}

.ncr-filter-field input:focus,
.ncr-filter-field select:focus {
	outline: none;
	border-color: var(--nch-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ncr-filter-actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 10px;
}

.ncr-search-button,
.ncr-reset-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.ncr-search-button {
	border: none;
	background: var(--nch-blue);
	color: #fff;
}

.ncr-search-button:hover {
	background: var(--nch-blue-dark);
}

.ncr-reset-button {
	border: 1px solid var(--nch-border);
	background: var(--nch-white);
	color: var(--nch-ink);
}

.ncr-reset-button:hover {
	background: var(--nch-bg-soft);
}

@media (max-width: 640px) {
	.ncr-filters {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   MOBILE COMPACTNESS PASS — @media (max-width: 767px). Spacing/sizing
   reduction only; same reusable scale as Government Jobs/homepage. Search +
   Reset share one row (Search grows, Reset stays compact) for consistency
   with the rest of the site.
   ========================================================================== */
@media (max-width: 767px) {

	.ncr-results-header {
		margin-bottom: 16px;
	}

	.ncr-results-header p {
		font-size: 13.5px;
	}

	.ncr-filters {
		gap: 10px;
		padding: 12px;
		margin-bottom: 18px;
	}

	.ncr-filter-field input,
	.ncr-filter-field select {
		height: 44px;
		font-size: 13.5px;
	}

	.ncr-filter-actions {
		flex-direction: row;
		gap: 8px;
	}

	.ncr-search-button,
	.ncr-reset-button {
		width: auto;
		min-height: 44px;
		padding: 0 14px;
		font-size: 13.5px;
	}

	.ncr-search-button {
		flex: 1 1 auto;
	}

	.ncr-reset-button {
		flex: 0 0 auto;
	}

	.ncr-results-grid {
		gap: 12px;
	}

	.ncr-result-card {
		padding: 14px;
	}

	.ncr-result-card__badge {
		padding: 4px 8px;
		margin-bottom: 8px;
		font-size: 10px;
	}

	.ncr-result-card__title {
		margin-bottom: 6px;
		font-size: 15.5px;
	}

	.ncr-result-card__exam {
		margin-bottom: 4px;
		font-size: 12px;
	}

	.ncr-result-card__status {
		margin-bottom: 6px;
		font-size: 10.5px;
	}

	.ncr-result-card__date {
		margin-bottom: 10px;
		font-size: 11px;
	}

	.ncr-ad-slot,
	.ncr-ad-slot--detail {
		margin: 18px auto;
	}

	.ncr-ad-slot__box {
		min-height: 60px;
		font-size: 11px;
	}

	.ncr-detail-head {
		margin-bottom: 6px;
	}

	.ncr-detail-head__title {
		margin-bottom: 8px;
	}

	.ncr-detail-head__meta {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 12px;
	}

	.ncr-overview {
		margin-bottom: 6px;
	}

	.ncr-overview__title {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.ncr-row {
		flex-direction: column;
		gap: 4px;
		padding: 12px 14px;
		font-size: 13px;
	}

	.ncr-row strong {
		flex: none;
	}

	.ncr-important-links__item {
		padding: 12px 20px;
		font-size: 14px;
	}

	.ncr-related-links {
		margin-top: 18px;
	}

	.ncr-related-links__item {
		padding: 9px 14px;
		font-size: 13px;
	}

	.ncr-detail-body {
		font-size: 14px;
	}

	.ncr-no-results {
		padding: 32px 18px;
	}
}

/* ---------- RESULT CARDS ---------- */

.ncr-results-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 640px) {
	.ncr-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.ncr-results-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ncr-result-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-top: 3px solid var(--ncr-accent, var(--nch-blue));
	border-radius: var(--nch-radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ncr-result-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--nch-shadow);
}

.ncr-result-card__badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 5px 10px;
	margin-bottom: 10px;
	background: var(--ncr-accent-bg, var(--nch-blue-light));
	color: var(--ncr-accent, var(--nch-blue));
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ncr-result-card__title {
	margin: 0 0 8px;
	font-size: 17.5px;
	line-height: 1.4;
}

.ncr-result-card__title a {
	color: var(--nch-ink);
	text-decoration: none;
}

.ncr-result-card__title a:hover {
	color: var(--nch-blue);
}

.ncr-result-card__exam {
	font-size: 13px;
	font-weight: 600;
	color: var(--nch-gray);
	margin-bottom: 6px;
}

.ncr-result-card__status {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px 9px;
	margin-bottom: 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: var(--nch-bg-soft);
	color: var(--nch-gray);
}

.ncr-result-card__status[data-status="expected"] {
	background: #fff7ed;
	color: #c2410c;
}

.ncr-result-card__status[data-status="declared"] {
	background: #ecfdf5;
	color: #047857;
}

.ncr-result-card__status[data-status="scorecard-available"] {
	background: var(--nch-blue-light);
	color: var(--nch-blue-dark);
}

.ncr-result-card__date {
	font-size: 12px;
	color: var(--nch-gray);
	margin-bottom: 16px;
}

.ncr-result-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	color: var(--ncr-accent, var(--nch-blue));
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
}

.ncr-result-card__cta .nch-icon {
	width: 14px;
	height: 14px;
}

.ncr-result-card__cta:hover {
	opacity: 0.8;
}

/* ---------- AD SLOT ---------- */

.ncr-ad-slot {
	max-width: 1100px;
	margin: 26px auto;
}

.ncr-ad-slot--detail {
	max-width: 900px;
	margin: 30px auto 0;
}

.ncr-ad-slot__box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	border: 1px dashed var(--nch-gray-light);
	border-radius: var(--nch-radius-sm);
	background: var(--nch-bg-soft);
	color: var(--nch-gray);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- PAGINATION (WordPress core the_posts_pagination() markup) --- */

.ncr-pagination {
	max-width: 1100px;
	margin: 30px auto 0;
	display: flex;
	justify-content: center;
}

.ncr-pagination .page-numbers {
	display: inline-flex;
	list-style: none;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.ncr-pagination .page-numbers li {
	display: inline-flex;
}

.ncr-pagination a.page-numbers,
.ncr-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--nch-border);
	border-radius: 8px;
	color: var(--nch-ink);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.ncr-pagination a.page-numbers:hover {
	background: var(--nch-bg-soft);
}

.ncr-pagination span.page-numbers.current {
	background: var(--nch-blue);
	border-color: var(--nch-blue);
	color: #fff;
}

.ncr-pagination .page-numbers.dots {
	border: none;
}

/* ---------- NO RESULTS ---------- */

.ncr-no-results {
	max-width: 1100px;
	margin: 0 auto;
	padding: 50px 25px;
	text-align: center;
	background: var(--nch-bg-soft);
	border: 1px dashed var(--nch-gray-light);
	border-radius: var(--nch-radius);
}

.ncr-no-results h3 {
	margin: 0 0 8px;
	font-size: 22px;
}

.ncr-no-results p {
	margin: 0 0 20px;
	color: var(--nch-gray);
}

.ncr-clear-search {
	display: inline-block;
	padding: 10px 18px;
	background: var(--nch-blue);
	color: #fff !important;
	border-radius: 7px;
	text-decoration: none !important;
	font-weight: 700;
}

/* ---------- DETAIL PAGE HEAD ---------- */

.ncr-detail-head {
	max-width: 900px;
	margin: 0 auto 8px;
}

.ncr-detail-head__badge {
	display: inline-flex;
	padding: 5px 10px;
	margin-bottom: 12px;
	background: var(--ncr-accent-bg, var(--nch-blue-light));
	color: var(--ncr-accent, var(--nch-blue));
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ncr-detail-head__title {
	margin: 0 0 12px;
	font-size: clamp(22px, 3.4vw, 32px);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nch-ink);
}

.ncr-detail-head__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 13px;
	color: var(--nch-gray);
}

.ncr-detail-head__exam {
	font-weight: 700;
	color: var(--nch-ink);
}

.ncr-detail-head__status {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	background: var(--nch-bg-soft);
	color: var(--nch-gray);
}

.ncr-detail-head__status[data-status="expected"] {
	background: #fff7ed;
	color: #c2410c;
}

.ncr-detail-head__status[data-status="declared"] {
	background: #ecfdf5;
	color: #047857;
}

.ncr-detail-head__status[data-status="scorecard-available"] {
	background: var(--nch-blue-light);
	color: var(--nch-blue-dark);
}

/* ---------- RESULT OVERVIEW (single Result/Answer Key page, 2026-07-31) ----
   Conditionally-rendered table of the new optional detail fields (Exam
   Year, Notification Date, Application Last Date, Exam Date, Result Date,
   Advertisement Number, Post Name, Total Vacancies, Category, Qualification,
   State, Selection Stage). Rendered by
   nextcareer_results_render_overview_html() only when at least one field is
   filled in; the whole block simply doesn't render when every field is
   empty, so this never leaves a blank box. Mirrors the visual pattern of
   Government Jobs' Job Overview card (label + value row), using this
   module's own .ncr- prefixed classes so nothing collides with
   jobs-pages.css. Sits between the detail head and the article body, at the
   same 900px reading width as both. */

.ncr-overview {
	max-width: 900px;
	margin: 0 auto 8px;
}

.ncr-overview__title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--nch-ink);
}

.ncr-overview-table {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius);
	overflow: hidden;
}

.ncr-row {
	display: flex;
	gap: 16px;
	/* 2026-07-31: vertical padding nudged up from 12px for a cleaner, more
	   premium row height — width/border/colors intentionally unchanged. */
	padding: 16px 16px;
	border-bottom: 1px solid var(--nch-border);
	font-size: 14px;
}

.ncr-row:last-child {
	border-bottom: none;
}

.ncr-row:nth-child(even) {
	background: var(--nch-bg-soft);
}

.ncr-row strong {
	flex: 0 0 200px;
	color: var(--nch-gray);
	font-weight: 700;
}

.ncr-row span {
	flex: 1 1 auto;
	color: var(--nch-ink);
}

/* ---------- IMPORTANT LINKS (single Result page, after Main Content) ---------- */

.ncr-important-links {
	max-width: 900px;
	margin: 30px auto 0;
}

.ncr-important-links__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	color: var(--nch-ink);
}

.ncr-important-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ncr-important-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 26px;
	background: var(--ncr-accent, var(--nch-blue));
	color: #fff !important;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.ncr-important-links__item:hover {
	opacity: 0.9;
}

/* Article content wrapper (added in site-wrapper.php only for is_singular
   ('results')) — gives the article body the same readable width as the
   detail head above it, without relying on a :has() selector. */
.ncr-detail-body {
	max-width: 900px;
	margin: 0 auto;
	color: var(--nch-ink);
	font-size: 15px;
}

/* Typography (2026-07-31): only the first paragraph of the article body
   reads as a bold intro/lead line; every subsequent paragraph is normal
   weight for readability. font-weight only — font-size, line-height, and
   the 900px reading width above are all untouched. p:first-of-type has
   higher specificity than the plain "p" rule above it, so this reliably
   wins regardless of declaration order. */
.ncr-detail-body p {
	font-weight: 400;
}

.ncr-detail-body p:first-of-type {
	font-weight: 700;
}

/* ---------- RELATED LINKS (single Result page, between Official Links and
   the ad slot, 2026-07-31) ----------
   Deliberately lighter/secondary styling (bordered text links, not the solid
   blue CTA buttons used for Official Links above) so the visual hierarchy
   stays clear: Official Links = primary action, Related Links = "see also"
   navigation. Rendered by nextcareer_results_render_related_links_html()
   only when at least one relevant destination has real published content;
   the whole block is simply absent otherwise. */

.ncr-related-links {
	max-width: 900px;
	margin: 24px auto 0;
}

.ncr-related-links__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	color: var(--nch-ink);
}

.ncr-related-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ncr-related-links__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-radius: 8px;
	color: var(--nch-ink) !important;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none !important;
}

.ncr-related-links__item:hover {
	background: var(--nch-bg-soft);
	border-color: var(--nch-blue);
	color: var(--nch-blue) !important;
}

.ncr-related-links__item .nch-icon {
	width: 12px;
	height: 12px;
}


/* ---------- DETAILED CONTENT — TABLES (2026-07-30) -------------------------
   Results shares the same "Detailed Content" TinyMCE table editor as
   Government Jobs (see nextcareer-admin/includes/class-nca-content-editor.php
   and assets/js/nca-tinymce-table.js), which can write .nca-tbl-wrap /
   .nca-tbl / .nca-tbl-row--* / .nca-tbl-cell--* markup into this module's
   post_content. Until now this module's own stylesheet had ZERO rules for
   those classes, so any table pasted/built via that editor rendered as
   plain unstyled text on the live page (no border, no border-collapse, no
   background — just the browser's bare UA defaults) even though it looked
   correct inside the editor's own preview iframe. This block is a direct
   port of the already-working table CSS in
   nextcareer-homepage/assets/jobs-pages.css, scoped to this module's own
   .ncr-detail-body content wrapper (inside the shared #nch-main region from
   site-wrapper.php) instead of Government Jobs' .nextcareer-job-article, so
   it only ever affects tables inside THIS module's own content and cannot
   leak into or collide with any other module. Colors reuse the same
   --nch-border / --nch-bg-soft / --nch-ink / --nch-radius-sm custom
   properties already declared globally on the shared .nch-body class (see
   nextcareer-homepage/assets/homepage.css), so this needs no new tokens and
   stays visually identical to both the editor preview and the Government
   Jobs frontend. No !important anywhere — normal cascade is sufficient
   since nothing else in this stylesheet or Kadence targets these class
   names. */

#nch-main .ncr-detail-body .nca-tbl-wrap {
	overflow-x: auto;
	max-width: 100%;
	margin: 24px 0;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius-sm);
}

#nch-main .ncr-detail-body .nca-tbl {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 14.5px;
}

#nch-main .ncr-detail-body .nca-tbl th,
#nch-main .ncr-detail-body .nca-tbl td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--nch-border);
	border-right: 1px solid var(--nch-border);
	text-align: left;
	vertical-align: top;
	color: var(--nch-ink);
}

#nch-main .ncr-detail-body .nca-tbl tr > :last-child {
	border-right: none;
}

#nch-main .ncr-detail-body .nca-tbl tbody tr:last-child td {
	border-bottom: none;
}

#nch-main .ncr-detail-body .nca-tbl thead th {
	background: var(--nch-bg-soft);
	font-weight: 700;
	border-bottom: 2px solid var(--nch-border);
}

/* :where() keeps this at ZERO specificity on purpose, so every row/cell
   highlight rule below reliably wins over this default stripe without a
   specificity arms race. */
:where(#nch-main .ncr-detail-body .nca-tbl tbody tr:nth-child(even)) td {
	background: var(--nch-bg-soft);
}

/* ---- Row highlight styles (6 controlled choices — Row Style dropdown) ---- */

#nch-main .ncr-detail-body .nca-tbl-row--primary td,
#nch-main .ncr-detail-body .nca-tbl-row--primary th {
	background: #eaf2ff;
	color: #1d4ed8;
	font-weight: 700;
	border-left: 3px solid #2563eb;
}

#nch-main .ncr-detail-body .nca-tbl-row--success td,
#nch-main .ncr-detail-body .nca-tbl-row--success th {
	background: #e9f9ef;
	color: #15803d;
	font-weight: 700;
	border-left: 3px solid #16a34a;
}

#nch-main .ncr-detail-body .nca-tbl-row--important td,
#nch-main .ncr-detail-body .nca-tbl-row--important th {
	background: #fef6e0;
	color: #92610a;
	font-weight: 700;
	border-left: 3px solid #d97706;
}

#nch-main .ncr-detail-body .nca-tbl-row--urgent td,
#nch-main .ncr-detail-body .nca-tbl-row--urgent th {
	background: #fdecec;
	color: #b91c1c;
	font-weight: 700;
	border-left: 3px solid #dc2626;
}

#nch-main .ncr-detail-body .nca-tbl-row--neutral td,
#nch-main .ncr-detail-body .nca-tbl-row--neutral th {
	background: #f1f5f9;
	color: #475569;
	font-weight: 700;
	border-left: 3px solid #94a3b8;
}

/* ---- Cell highlight styles (6 controlled choices — Cell Style dropdown) --
   Declared after the row styles above so a cell-level choice always wins
   over its row's style for that one cell (equal specificity, later wins). */

#nch-main .ncr-detail-body td.nca-tbl-cell--primary,
#nch-main .ncr-detail-body th.nca-tbl-cell--primary {
	background: #eaf2ff;
	color: #1d4ed8;
	font-weight: 700;
}

#nch-main .ncr-detail-body td.nca-tbl-cell--success,
#nch-main .ncr-detail-body th.nca-tbl-cell--success {
	background: #e9f9ef;
	color: #15803d;
	font-weight: 700;
}

#nch-main .ncr-detail-body td.nca-tbl-cell--important,
#nch-main .ncr-detail-body th.nca-tbl-cell--important {
	background: #fef6e0;
	color: #92610a;
	font-weight: 700;
}

#nch-main .ncr-detail-body td.nca-tbl-cell--urgent,
#nch-main .ncr-detail-body th.nca-tbl-cell--urgent {
	background: #fdecec;
	color: #b91c1c;
	font-weight: 700;
}

#nch-main .ncr-detail-body td.nca-tbl-cell--neutral,
#nch-main .ncr-detail-body th.nca-tbl-cell--neutral {
	background: #f1f5f9;
	color: #475569;
	font-weight: 700;
}

/* Mobile: table itself never shrinks below a readable width; the wrap
   scrolls horizontally instead. Matches jobs-pages.css behavior exactly. */
@media (max-width: 600px) {
	#nch-main .ncr-detail-body .nca-tbl {
		font-size: 13.5px;
	}
	#nch-main .ncr-detail-body .nca-tbl th,
	#nch-main .ncr-detail-body .nca-tbl td {
		padding: 10px 12px;
	}
}