/* ==========================================================================
   NextCareer — Government Jobs listing + detail page restyle.

   IMPORTANT — what this file does and does not do:
   - It does NOT touch, replace, or duplicate any PHP/markup from the
     existing Code Snippets ("Government Jobs Listing Page" shortcode
     [nextcareer_jobs], "Government Job Detail Page" the_content append).
     Those remain the single source of truth for all business/data logic.
   - It restyles the EXISTING class names those snippets already output
     (.nc-jobs-page, .nc-job-card, .nc-meta-box, .nextcareer-job-details,
     .job-row, .job-button, etc.) purely visually.
   - The original snippets also inject their own global <style> blocks via
     wp_head (unconditionally, on every page, for the listing snippet).
     Because this stylesheet is enqueued through wp_enqueue_style(), and
     WordPress prints enqueued styles before those inline wp_head blocks in
     practice, every override below is prefixed with #nch-main so it wins
     the cascade by SPECIFICITY (an ID + class beats a bare class,
     regardless of source order) rather than relying on load order or
     !important. #nch-main is the <main> element site-wrapper.php already
     wraps around this content.
   - Loaded ONLY on the Government Jobs listing page and individual
     Government Job detail pages (see nextcareer_homepage_is_jobs_page()),
     never on Career News or the homepage — see nextcareer-homepage.php.
   ========================================================================== */

/* Breadcrumb styling (.nch-breadcrumb) moved to the shared homepage.css —
   it's used by both Government Job detail and Results/Answer Key detail
   pages, so it now lives where every shared-chrome page already loads it
   from, instead of being duplicated per module. */

/* ---------- JOB DETAIL HEAD (new — title/badges added in site-wrapper.php) */

#nch-main .nch-job-detail-head {
	max-width: 900px;
	margin: 0 auto 34px;
}

#nch-main .nch-job-detail-head__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

#nch-main .nch-job-detail-head .nch-badge {
	background: var(--nch-cat-bg, var(--nch-blue-light));
	color: var(--nch-cat-fg, var(--nch-blue));
}

#nch-main .nch-job-detail-head__location,
#nch-main .nch-job-detail-head__date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--nch-gray);
	font-size: 12.5px;
}

#nch-main .nch-job-detail-head__location .nch-icon,
#nch-main .nch-job-detail-head__date .nch-icon {
	width: 13px;
	height: 13px;
}

#nch-main .nch-job-detail-head__title {
	margin: 0;
	font-size: clamp(22px, 3.4vw, 32px);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ---------- JOBS LISTING PAGE (existing .nc- markup, restyled only) ------- */

#nch-main .nc-jobs-page {
	max-width: 1100px;
	margin: 30px auto 50px;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

#nch-main .nc-jobs-header {
	margin-bottom: 26px;
}

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

#nch-main .nc-jobs-header p {
	margin: 0;
	color: var(--nch-gray);
	font-size: 15px;
	max-width: 640px;
}

/* Filters */

#nch-main .nc-job-filters {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 14px;
	padding: 18px;
	margin-bottom: 30px;
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius);
	box-shadow: var(--nch-shadow);
}

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

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

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

#nch-main .nc-search-button {
	background: var(--nch-blue);
	border-radius: 8px;
}

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

#nch-main .nc-reset-button {
	border: 1px solid var(--nch-border);
	border-radius: 8px;
	color: var(--nch-ink);
}

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

/* Results header */

#nch-main .nc-results-header h2 {
	font-size: 21px;
	font-weight: 800;
	color: var(--nch-ink);
}

#nch-main .nc-job-count {
	background: var(--nch-blue-light);
	color: var(--nch-blue);
}

/* Job cards — turn the existing single-column list into a responsive grid */

#nch-main .nc-jobs-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@media (min-width: 640px) {
	#nch-main .nc-jobs-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	#nch-main .nc-jobs-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

#nch-main .nc-job-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--nch-border);
	border-top: 3px solid var(--nch-cat-accent, var(--nch-blue));
	border-radius: var(--nch-radius);
	background: var(--nch-white);
}

#nch-main .nc-job-card:hover {
	box-shadow: var(--nch-shadow);
	border-color: var(--nch-border);
}

#nch-main .nc-category-badges {
	margin-bottom: 8px;
}

#nch-main .nc-job-category {
	background: var(--nch-cat-bg, var(--nch-blue-light));
	color: var(--nch-cat-fg, var(--nch-blue));
	border-radius: 999px;
}

/* PHASE 4 (2026-07-24): .nc-job-category is now rendered as an <a> when a
   valid term link exists (see nextcareer_homepage_render_job_card()) — reset
   the browser's default link underline so the badge's appearance is
   unchanged from before, and add a subtle hover cue since it's clickable now. */
#nch-main a.nc-job-category {
	text-decoration: none;
}

#nch-main a.nc-job-category:hover {
	background: var(--nch-cat-bg, var(--nch-blue-light));
	text-decoration: underline;
}

#nch-main .nc-job-title {
	font-size: 17.5px;
	line-height: 1.4;
}

#nch-main .nc-job-title a {
	color: var(--nch-ink);
}

#nch-main .nc-job-title a:hover {
	color: var(--nch-blue);
}

#nch-main .nc-job-location {
	font-size: 12.5px;
	color: var(--nch-gray);
}

/* PHASE 4 (2026-07-24): state names inside .nc-job-location are now
   individually linked to /government-jobs/state/{slug}/ — keep the same
   plain-text look by default, only revealing the link on hover. */
#nch-main .nc-job-location a {
	color: inherit;
	text-decoration: none;
}

#nch-main .nc-job-location a:hover {
	color: var(--nch-blue);
	text-decoration: underline;
}

/* Listing card meta boxes (2026-07-28 redesign) — up to 4 compact boxes
   (Vacancies, Last Date, Age Limit, Salary, Application Fee — see
   nextcareer_homepage_render_job_card() for the priority/fallback logic),
   laid out as a natural 2-column grid. minmax(92px, 1fr) keeps 2 boxes per
   row at typical card widths (a true 2x2 when 4 boxes are present) while
   still letting 1-3 boxes expand to fill the row with no empty gaps —
   padding/font-sizes are intentionally small to keep card height unchanged
   from before. */
#nch-main .nc-job-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* A single lone box (only 1 field had data) looks better spanning the full
   row than sitting half-width next to empty space. Likewise, when exactly 3
   boxes are present, the 3rd (odd one out on its own row) spans the full
   row instead of leaving a dead gap next to it — a true 2x2 only happens
   when all 4 boxes are present. */
#nch-main .nc-job-meta .nc-meta-box:only-child {
	grid-column: 1 / -1;
}

#nch-main .nc-job-meta .nc-meta-box:nth-child(3):last-child {
	grid-column: 1 / -1;
}

#nch-main .nc-meta-box {
	background: var(--nch-bg-soft);
	border-radius: 8px;
	padding: 8px 10px;
}

#nch-main .nc-meta-label {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	color: var(--nch-gray);
}

#nch-main .nc-meta-box strong {
	font-size: 14px;
	line-height: 1.2;
	color: var(--nch-ink);
}

/* Last Date meta box — marked with .nch-deadline by jobs-pages.js since CSS
   cannot target an element by its text content alone. Same warm accent
   already used for deadlines on the homepage, for visual consistency. */
#nch-main .nc-meta-box.nch-deadline {
	background: #fef3ea;
}

#nch-main .nc-meta-box.nch-deadline .nc-meta-label {
	color: #c2410c;
}

#nch-main .nc-meta-box.nch-deadline strong {
	color: #9a3412;
}

#nch-main .nc-job-card-bottom {
	margin-top: auto;
	border-top: 1px solid var(--nch-border);
}

#nch-main .nc-posted-date {
	color: var(--nch-gray);
	font-size: 11.5px;
}

#nch-main .nc-view-job {
	background: var(--nch-blue);
	border-radius: 7px;
}

#nch-main .nc-view-job:hover {
	background: var(--nch-blue-dark) !important;
}

/* No results */

#nch-main .nc-no-jobs {
	background: var(--nch-bg-soft);
	border: 1px dashed var(--nch-gray-light);
	border-radius: var(--nch-radius);
}

#nch-main .nc-clear-search {
	background: var(--nch-blue);
	border-radius: 7px;
}

/* Ad slot appended after the jobs listing (see
   nextcareer_homepage_append_jobs_ad_slot() in nextcareer-homepage.php) —
   reuses the same neutral placeholder look already used on the homepage. */

#nch-main .nch-ad-slot--jobs {
	max-width: 1100px;
	margin: 0 auto 40px;
	padding: 0;
}

#nch-main .nch-ad-slot--jobs .nch-ad-slot__box {
	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;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 899px) {
	#nch-main .nc-job-filters {
		grid-template-columns: 1fr 1fr;
	}

	#nch-main .nc-search-field {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	#nch-main .nc-job-filters {
		grid-template-columns: 1fr;
	}

	#nch-main .nc-filter-actions {
		flex-direction: column;
	}

	#nch-main .nc-search-button,
	#nch-main .nc-reset-button {
		width: 100%;
	}

	#nch-main .nc-results-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ---------- JOB DETAIL PAGE (existing .nextcareer-/.job- markup) ---------- */

#nch-main .nextcareer-job-details {
	max-width: 900px;
	margin: 0 auto;
}

#nch-main .nextcareer-job-details h2 {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 800;
	color: var(--nch-ink);
}

/* Job Overview — turn the stacked full-width rows into a responsive
   info-grid of compact cards instead of one long table.
   align-items: start (2026-07-26 refinement) overrides Grid's default
   align-items:stretch, which previously forced every card in a row to
   match the height of its tallest neighbor (e.g. a short "Job Type" card
   stretching to match a much longer "Qualification" card, leaving a big
   empty gap). With align-items: start, each card now sizes to its own
   content height — short fields stay compact, longer fields (like
   Qualification) simply grow to fit their own text — while the grid
   columns, gap, colors, borders, and responsive breakpoints below are all
   unchanged. */

#nch-main .nextcareer-job-table {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	align-items: start;
	gap: 14px;
	border: none;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

#nch-main .job-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px;
	background: var(--nch-bg-soft);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius-sm);
	border-bottom: 1px solid var(--nch-border);
}

#nch-main .job-row strong {
	padding: 0;
	background: transparent;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nch-gray);
}

#nch-main .job-row span {
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--nch-ink);
	/* Long values (e.g. a long Application Fee/Qualification sentence)
	   wrap gracefully within the card's own width instead of overflowing
	   or forcing the card wider than its grid column. */
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Last Date row — marked with .nch-deadline by jobs-pages.js, same reasoning
   as the listing page's meta box above. */
#nch-main .job-row.nch-deadline {
	background: #fef3ea;
	border-color: #fdba8c;
}

#nch-main .job-row.nch-deadline strong {
	color: #c2410c;
}

#nch-main .job-row.nch-deadline span {
	color: #9a3412;
}

/* Job Description / Detailed Job Content / Important Links — each of these
   three sub-sections previously had no top margin of its own (only their
   INNER content was styled), so they sat tight against whatever came
   before. Giving each wrapper its own comfortable top margin is what turns
   the page from "compressed" into clearly separated sections, without
   touching any of the Code-Snippet-owned markup itself. */
#nch-main .nextcareer-description {
	margin-top: 40px;
}

#nch-main .nextcareer-description-content {
	color: var(--nch-ink);
	font-size: 15px;
	line-height: 1.75;
}

#nch-main .nextcareer-description-content p {
	margin: 0 0 16px;
}

/* TASK D — the native editor content, re-sliced into place by
   nextcareer_homepage_reorder_job_content() so it always renders between
   Job Overview and Important Links regardless of which Government Job post
   it's on. Same typography as the ACF-based Job Description above, for a
   consistent look whichever the admin used. */
#nch-main .nextcareer-job-article {
	margin-top: 40px;
	color: var(--nch-ink);
	font-size: 15px;
	line-height: 1.75;
}

#nch-main .nextcareer-job-article h2 {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 18px;
	color: var(--nch-ink);
}

#nch-main .nextcareer-job-article h3 {
	font-size: 17px;
	font-weight: 700;
	margin: 28px 0 14px;
	color: var(--nch-ink);
}

#nch-main .nextcareer-job-article p {
	margin: 0 0 18px;
}

#nch-main .nextcareer-job-article ul,
#nch-main .nextcareer-job-article ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

#nch-main .nextcareer-job-article li {
	margin-bottom: 6px;
}

#nch-main .nextcareer-job-article a {
	color: var(--nch-blue);
	text-decoration: underline;
}

#nch-main .nextcareer-important-links {
	margin-top: 40px;
}

/* ---------- GOVERNMENT JOBS LISTING PAGE — SEO CONTENT (2026-07-31) --------
   Static content block rendered below the job cards on the Government Jobs
   LISTING page only (see nextcareer_homepage_is_jobs_listing_page() /
   nextcareer_homepage_render_jobs_listing_seo_content() in
   nextcareer-homepage.php, and templates/job-listing-seo-content.php for
   the markup).

   UX pass (2026-07-31): width is now constrained to match the job listing
   container (.nc-jobs-page, max-width: 1100px, centered) instead of
   stretching to the full .nch-container, and base typography is sized up
   slightly (16px/1.8) for readability on a long article. Still sits inside
   the same .nch-container/.nch-site-content wrapper, so responsive side
   padding is inherited automatically. */
#nch-main .nc-jobs-seo {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--nch-border);
	color: var(--nch-ink);
	font-size: 16px;
	line-height: 1.8;
}

#nch-main .nc-jobs-seo h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 48px 0 18px;
	color: var(--nch-ink);
}

#nch-main .nc-jobs-seo > h2:first-of-type {
	margin-top: 0;
}

#nch-main .nc-jobs-seo h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 28px 0 12px;
	color: var(--nch-ink);
}

#nch-main .nc-jobs-seo p {
	margin: 0 0 20px;
}

#nch-main .nc-jobs-seo ul,
#nch-main .nc-jobs-seo ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

#nch-main .nc-jobs-seo li {
	margin-bottom: 10px;
}

#nch-main .nc-jobs-seo a {
	color: var(--nch-blue);
	text-decoration: underline;
}

/* "On this page" jump navigation — sits above the first heading, links to
   each H2 section's id. Own box so it reads as a navigation aid rather
   than body copy. */
#nch-main .nc-jobs-seo-toc {
	background: var(--nch-bg-soft);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius, 10px);
	padding: 20px 24px;
	margin: 0 0 40px;
}

#nch-main .nc-jobs-seo-toc__label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nch-gray);
}

#nch-main .nc-jobs-seo-toc ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nch-main .nc-jobs-seo-toc li {
	margin: 0;
}

#nch-main .nc-jobs-seo-toc a {
	font-size: 14px;
	font-weight: 600;
	color: var(--nch-blue);
	text-decoration: none;
}

#nch-main .nc-jobs-seo-toc a:hover,
#nch-main .nc-jobs-seo-toc a:focus-visible {
	text-decoration: underline;
}

/* FAQ accordion — native <details>/<summary>, no JS. Only the FAQ section
   uses this collapsible pattern; every other section on this page stays
   fully expanded plain text/lists (per explicit requirement — no
   cards/grids elsewhere). Collapsed answer text stays in the DOM, so it's
   still crawled/indexed normally; <details> also gives built-in keyboard
   and screen-reader support without any custom ARIA wiring. */
#nch-main .nc-jobs-faq {
	margin-top: 4px;
	border-top: 1px solid var(--nch-border);
}

#nch-main .nc-jobs-faq__item {
	border-bottom: 1px solid var(--nch-border);
	padding: 18px 0;
}

#nch-main .nc-jobs-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	color: var(--nch-ink);
	list-style: none;
}

#nch-main .nc-jobs-faq__question::-webkit-details-marker {
	display: none;
}

#nch-main .nc-jobs-faq__question::after {
	content: "+";
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--nch-blue);
}

#nch-main .nc-jobs-faq__item[open] .nc-jobs-faq__question::after {
	content: "\2212";
}

#nch-main .nc-jobs-faq__question:focus-visible {
	outline: 2px solid var(--nch-blue);
	outline-offset: 3px;
}

#nch-main .nc-jobs-faq__answer {
	margin: 12px 0 0;
	color: var(--nch-ink);
}

/* ---------- DETAILED JOB CONTENT — TABLES (2026-07-24) --------------------
   Styles the tables an admin builds in the "Detailed Job Content" editor
   (assets/js/nca-tinymce-table.js in the nextcareer-admin plugin) via the
   .nca-tbl-wrap / .nca-tbl / .nca-tbl-row--* / .nca-tbl-cell--* class names
   that editor writes into post_content. Scoped entirely to
   .nextcareer-job-article (the wrapper nextcareer_homepage_reorder_job_content()
   already puts this exact content in — see above), so this cannot affect
   Results/Diploma/Career News/Success Stories pages, which share the same
   .nch-site-content container via site-wrapper.php but never have this
   class. Colors intentionally match
   nextcareer-admin/assets/css/nca-tinymce-table-editor.css (the admin's own
   in-editor preview) so there are no surprises between editing and
   publishing.

   Mobile behavior: .nca-tbl-wrap (not the <table> itself) is the ONE
   scrollable container — overflow-x: auto on a plain block-level div is
   unambiguous across every browser, unlike toggling display on the
   <table> element itself. Columns are never force-compressed; a wide
   table simply becomes scrollable within its own box, and the page itself
   never gains horizontal overflow because the wrap's max-width is capped
   to its parent. */

#nch-main .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 .nca-tbl {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 14.5px;
}

#nch-main .nca-tbl th,
#nch-main .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 .nca-tbl tr > :last-child {
	border-right: none;
}

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

#nch-main .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 .nca-tbl tbody tr:nth-child(even)) td {
	background: var(--nch-bg-soft);
}

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

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

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

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

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

#nch-main .nca-tbl-row--neutral td,
#nch-main .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 td.nca-tbl-cell--primary,
#nch-main th.nca-tbl-cell--primary {
	background: #eaf2ff;
	color: #1d4ed8;
	font-weight: 700;
}

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

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

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

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

/* Important Links — Apply Online kept as the single prominent primary CTA;
   Official Notification/Website de-emphasized so the page has one clear
   next action instead of three equal-weight buttons. No URLs, targets, or
   rel attributes are touched — appearance only. */

#nch-main .nextcareer-link-buttons {
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
}

#nch-main .job-button {
	border-radius: 8px;
	font-weight: 700;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Primary CTA — kept as the one visually loudest action on the page
   (larger padding/type + brand-color shadow); secondary/website buttons
   below share one consistent, quieter style so there's a clear 1-primary
   vs 2-secondary hierarchy rather than three equal-weight buttons. */
#nch-main .apply-button {
	order: -1;
	background: var(--nch-blue) !important;
	padding: 17px 22px;
	font-size: 16px;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
}

#nch-main .apply-button:hover {
	background: var(--nch-blue-dark) !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}

#nch-main .secondary-button,
#nch-main .website-button {
	background: var(--nch-white) !important;
	border: 1px solid var(--nch-border);
	font-size: 14px;
	padding: 13px 20px;
}

#nch-main .secondary-button {
	color: var(--nch-ink) !important;
}

#nch-main .website-button {
	color: var(--nch-gray) !important;
}

#nch-main .secondary-button:hover,
#nch-main .website-button:hover {
	background: var(--nch-bg-soft) !important;
	border-color: var(--nch-gray-light);
}

@media (max-width: 768px) {
	#nch-main .nextcareer-job-table {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	#nch-main .nextcareer-job-table {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   MOBILE COMPACTNESS PASS — @media (max-width: 767px) only.
   HIGH PRIORITY module per task spec. Pure spacing/sizing reduction; no
   markup, data, links, or desktop (>=768px) rules above are changed.
   Rules below intentionally come last so they win ties against the older
   899px/640px/480px queries above without needing !important.
   ========================================================================== */
@media (max-width: 767px) {

	/* Job detail head */
	#nch-main .nch-job-detail-head {
		margin-bottom: 18px;
	}

	#nch-main .nch-job-detail-head__badges {
		gap: 6px;
		margin-bottom: 8px;
	}

	/* Jobs listing page shell */
	#nch-main .nc-jobs-page {
		margin: 16px auto 30px;
	}

	#nch-main .nc-jobs-header {
		margin-bottom: 16px;
	}

	#nch-main .nc-jobs-header p {
		font-size: 13.5px;
	}

	/* Filters panel — compact container + same-row Search/Reset */
	#nch-main .nc-job-filters {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 12px;
		margin-bottom: 18px;
		border-radius: var(--nch-radius-sm);
	}

	#nch-main .nc-search-field {
		grid-column: 1 / -1;
	}

	#nch-main .nc-filter-field {
		gap: 4px;
	}

	#nch-main .nc-filter-field label {
		font-size: 11.5px;
	}

	#nch-main .nc-filter-field input,
	#nch-main .nc-filter-field select {
		height: 44px;
		font-size: 13.5px;
	}

	/* Search + Reset share one row: Search grows, Reset stays compact. */
	#nch-main .nc-filter-actions {
		grid-column: 1 / -1;
		flex-direction: row;
		gap: 8px;
	}

	#nch-main .nc-search-button,
	#nch-main .nc-reset-button {
		width: auto;
		height: 44px;
		font-size: 13.5px;
		padding: 0 14px;
	}

	#nch-main .nc-search-button {
		flex: 1 1 auto;
	}

	#nch-main .nc-reset-button {
		flex: 0 0 auto;
	}

	/* Results header */
	#nch-main .nc-results-header {
		margin-bottom: 12px;
	}

	#nch-main .nc-results-header h2 {
		font-size: 17px;
	}

	/* Job cards — the primary target: shrink from ~600px+ to ~400-500px */
	#nch-main .nc-jobs-list {
		gap: 12px;
	}

	#nch-main .nc-job-card {
		padding: 14px;
		border-radius: var(--nch-radius-sm);
	}

	#nch-main .nc-category-badges {
		margin-bottom: 6px;
	}

	#nch-main .nc-job-category {
		font-size: 10.5px;
		padding: 3px 9px;
	}

	#nch-main .nc-job-title {
		font-size: 15.5px;
		line-height: 1.35;
		margin: 6px 0 6px;
	}

	#nch-main .nc-job-location {
		margin-bottom: 8px;
	}

	#nch-main .nc-job-meta {
		gap: 6px;
		margin-bottom: 10px;
	}

	#nch-main .nc-meta-box {
		padding: 6px 8px;
	}

	#nch-main .nc-meta-label {
		font-size: 9px;
	}

	#nch-main .nc-meta-box strong {
		font-size: 12.5px;
	}

	#nch-main .nc-job-card-bottom {
		padding-top: 8px;
	}

	#nch-main .nc-posted-date {
		font-size: 10.5px;
	}

	#nch-main .nc-view-job {
		padding: 7px 14px;
		font-size: 12.5px;
	}

	/* Ad slot */
	#nch-main .nch-ad-slot--jobs {
		margin: 0 auto 24px;
	}

	#nch-main .nch-ad-slot--jobs .nch-ad-slot__box {
		min-height: 60px;
		font-size: 11px;
	}

	/* Job detail — Job Overview grid stays 2 columns (per spec) but compact */
	#nch-main .nextcareer-job-details {
		margin-bottom: 8px;
	}

	#nch-main .nextcareer-job-details h2 {
		font-size: 17px;
		margin-bottom: 10px;
	}

	#nch-main .nextcareer-job-table {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	#nch-main .job-row {
		padding: 10px 12px;
		gap: 2px;
	}

	#nch-main .job-row strong {
		font-size: 10px;
	}

	#nch-main .job-row span {
		font-size: 13.5px;
	}

	/* Last Date — compact, full-width, still visually distinct (not huge) */
	#nch-main .job-row.nch-deadline {
		grid-column: 1 / -1;
		padding: 10px 12px;
	}

	#nch-main .nextcareer-description-content,
	#nch-main .nextcareer-job-article {
		font-size: 14px;
		line-height: 1.65;
	}

	#nch-main .nextcareer-job-article {
		margin-top: 20px;
	}

	#nch-main .nextcareer-job-article h2 {
		font-size: 17px;
		margin-bottom: 12px;
	}

	/* Jobs listing page SEO content block — same mobile scale-down as the
	   rest of this page's prose content above. */
	#nch-main .nc-jobs-seo {
		margin-top: 32px;
		padding-top: 28px;
		font-size: 15px;
		line-height: 1.7;
	}

	#nch-main .nc-jobs-seo h2 {
		font-size: 19px;
		margin: 32px 0 12px;
	}

	#nch-main .nc-jobs-seo h3 {
		font-size: 16px;
		margin: 20px 0 8px;
	}

	#nch-main .nc-jobs-seo-toc {
		padding: 16px 18px;
		margin-bottom: 28px;
	}

	#nch-main .nc-jobs-seo-toc ul {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	#nch-main .nc-jobs-faq__question {
		font-size: 15px;
	}

	#nch-main .nc-jobs-faq__item {
		padding: 14px 0;
	}

	/* Detailed Job Content tables on small screens — the table itself keeps
	   a comfortable minimum width (never squashed illegible-thin) and
	   scrolls horizontally inside .nca-tbl-wrap; only cell padding/font
	   shrink slightly, matching how the rest of this page's text already
	   scales down on mobile. The page itself never scrolls sideways —
	   only the table's own box does. */
	#nch-main .nca-tbl-wrap {
		margin: 14px 0;
	}

	#nch-main .nca-tbl {
		min-width: 420px;
		font-size: 13.5px;
	}

	#nch-main .nca-tbl th,
	#nch-main .nca-tbl td {
		padding: 9px 12px;
	}

	/* Important Links — slimmer but still comfortably tappable */
	#nch-main .nextcareer-link-buttons {
		gap: 8px;
		max-width: 100%;
	}

	#nch-main .apply-button {
		padding: 13px 18px;
		font-size: 14px;
	}

	#nch-main .secondary-button,
	#nch-main .website-button {
		font-size: 13px;
		padding: 11px 16px;
	}
}

/* ---------- PHASE 3 (2026-07-24): job_category / job_state term archive
   pagination (the_posts_pagination(), class="nc-pagination"). New block —
   no existing .nc-pagination-type class was found anywhere in this file, so
   nothing here overrides prior styling. Uses the same design tokens
   (--nch-blue, --nch-border, --nch-radius-sm) as the rest of this file. */

#nch-main .nc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 8px;
}

#nch-main .nc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius-sm);
	background: var(--nch-white);
	color: var(--nch-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

#nch-main .nc-pagination a.page-numbers:hover {
	border-color: var(--nch-blue);
	color: var(--nch-blue);
}

#nch-main .nc-pagination .page-numbers.current {
	background: var(--nch-blue);
	border-color: var(--nch-blue);
	color: var(--nch-white);
}

#nch-main .nc-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--nch-gray);
}

@media (max-width: 767px) {
	#nch-main .nc-pagination {
		gap: 6px;
		margin: 24px 0 4px;
	}

	#nch-main .nc-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 9px;
		font-size: 13px;
	}
}