/* ==========================================================================
   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;
	flex-wrap: wrap;
	gap: 4px;
	color: var(--nch-gray);
	font-size: 12.5px;
	max-width: 100%;
}

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

/* ROOT-CAUSE FIX (2026-08-16): .nch-job-detail-head__location is an
   inline-flex row (icon + one <a> per selected State, separated by " • ").
   With no flex-wrap it defaulted to nowrap, so every state link was forced
   onto a single line; the site-wide .nch-body { word-break: break-word }
   safety net then let flex-shrink squeeze each link's min-content width
   down far below its natural word width, and the browser wrapped that
   shrunk box character-by-character (e.g. "Chandigarh" -> "Ch" / "an" /
   "dig" / "arh"). flex-wrap: wrap above lets whole state links move to a
   new line instead of being crushed. The rules below are the matching
   fix for the links themselves: each state name is kept as one
   unbreakable unit (white-space: nowrap) and the inherited break-word
   behavior is turned back to normal specifically for these links, so a
   state name only ever wraps as a COMPLETE word onto the next line, never
   mid-word or character-by-character. This does not touch the global
   .nch-body rule, which still protects other long/unbreakable strings
   elsewhere on the site. */
#nch-main .nch-job-detail-head__location a {
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	flex-shrink: 0;
}

#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);
}

/* STRIP REDESIGN (2026-08-16, rev. 2 — flat full-purple strip): the large
   Government Jobs card grid is replaced with thin, numbered, FULLY purple
   horizontal strips (title + "Posted: date" only — no location, category
   badges, vacancy/last-date/age/salary meta boxes, or "View Details"
   button), per explicit spec. Square corners (border-radius:0), minimal
   padding so the strip is only as tall as the title/date need, white
   title+date text on the solid --nch-purple background (existing token, no
   new shade), and darker --nch-purple-dark on hover/focus.
   THIS IS A CSS-ONLY CHANGE. It intentionally does NOT touch
   nextcareer_homepage_render_job_card() in nextcareer-homepage.php (the
   PHP that renders .nc-job-card for the /government-jobs/category/{slug}/
   and /government-jobs/state/{slug}/ term archives) or the separate
   "Government Jobs Listing Page" Code Snippet that renders the SAME
   .nc-job-card/.nc-job-title/.nc-job-location/.nc-job-meta/.nc-posted-date/
   .nc-view-job markup for the main /government-jobs/ page itself (confirmed
   via live DOM inspection — both outputs use byte-identical class names).
   That Code Snippet lives in the database, not a plugin file, and is NOT
   touched by this change — its search/filter form (.nc-job-filters and
   friends, styled separately below, untouched) is completely unaffected.
   Hiding the unwanted fields via `display: none` rather than deleting them
   from the PHP satisfies "do not delete this data from WordPress, this is
   presentation-only" for both the archive-page and Code-Snippet-page cases
   identically, with one consistent result on every Government Jobs listing
   page. */

#nch-main .nc-jobs-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	counter-reset: nc-job-counter;
}

#nch-main .nc-job-card {
	position: relative;
	counter-increment: nc-job-counter;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: auto;
	padding: 8px 14px;
	border: none;
	border-radius: 0;
	background: var(--nch-purple);
	transition: background 0.15s ease;
}

#nch-main .nc-job-card:hover,
#nch-main .nc-job-card:focus-within {
	box-shadow: none;
	background: var(--nch-purple-dark);
}

/* Hidden per explicit spec: no location, no category badges, no vacancy/
   last-date/age/salary meta boxes, no "View Details" button. Data/markup
   untouched underneath — this is a presentation-only display:none. */
#nch-main .nc-category-badges,
#nch-main .nc-job-location,
#nch-main .nc-job-meta,
#nch-main .nc-view-job {
	display: none;
}

#nch-main .nc-job-card-top {
	flex: 1 1 auto;
	min-width: 0;
}

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

/* Subtle counter number in front of the title — visually muted (translucent
   white) so it never competes with the title itself, per explicit spec. */
#nch-main .nc-job-title::before {
	content: counter(nc-job-counter) ". ";
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
	font-size: 13px;
}

#nch-main .nc-job-title a {
	color: var(--nch-white);
	font-weight: 600;
}

/* Text stays white on hover — the whole card's background darkens instead
   (see .nc-job-card:hover above), so there's no separate text-color hover
   state needed. */
#nch-main .nc-job-title a:hover {
	color: var(--nch-white);
}

/* "Stretched link" pattern: the title <a> (the one real, unchanged link —
   same href/permalink as before) grows an invisible overlay covering the
   whole card via ::after + position:absolute, so the ENTIRE strip is
   clickable ("the entire row/title should feel clickable", per spec) while
   there is still only one genuine <a href> in the markup — no new link, no
   JS, no change to which URL is opened. Deliberately NOT setting
   position:relative on the <a> itself — .nc-job-card above already is the
   nearest positioned ancestor, so inset:0 here stretches to cover the
   WHOLE card, not just the title text. */
#nch-main .nc-job-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

#nch-main .nc-job-card-bottom {
	margin-top: 0;
	border-top: none;
	flex-shrink: 0;
}

#nch-main .nc-posted-date {
	color: var(--nch-white);
	font-size: 12px;
	white-space: nowrap;
	opacity: 0.9;
}

/* 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;
	/* Overflow safety only (2026-08-11) — lets a grid item shrink below its
	   own content's intrinsic width instead of forcing its grid track (and
	   with it .nextcareer-job-table / the whole page) wider than the
	   viewport if a value is ever a long unbroken string. No visual change:
	   every card is already exactly as wide as its grid column normally
	   makes it. */
	min-width: 0;
	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;
}

/* SEO ACCORDION (2026-08-18) — wraps the jump-nav + all 7 valid H2 prose
   sections (everything above the FAQ) in a single collapsible <details>,
   closed by default, brown-themed header via <summary>. Direct port of the
   exact pattern already proven on the Diploma Courses listing page (see
   nextcareer-diploma/assets/diploma.css, .ncd-seo-accordion) — same tokens
   (var(--nch-brown)/var(--nch-brown-dark)), same compact-closed / full-open
   behaviour, same <details>/<summary> pattern (no JS, full text always
   server-rendered in the DOM, never AJAX-loaded). Deliberately a LOCAL
   .nc-jobs-seo-accordion class (not the shared global .nch-seo-box) so this
   page's own existing .nc-jobs-seo typography (16px/1.8, set below) is
   preserved untouched — the global .nch-seo-box__body sets its own smaller
   15px/1.75 type scale, which would shrink this page's prose slightly if
   reused directly. Deliberately separate from .nc-jobs-faq below: two
   independent accordions, never merged. None of the text inside
   .nc-jobs-seo-accordion__body is new — it's the exact same markup that
   used to sit directly inside .nc-jobs-seo, only wrapped one level deeper. */
#nch-main .nc-jobs-seo-accordion {
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius, 14px);
	overflow: hidden;
}

#nch-main .nc-jobs-seo-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: var(--nch-brown);
	color: var(--nch-white);
	cursor: pointer;
	list-style: none;
}

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

#nch-main .nc-jobs-seo-accordion__toggle::marker {
	content: "";
	display: none;
}

#nch-main .nc-jobs-seo-accordion__title {
	font-size: 16px;
	font-weight: 700;
}

#nch-main .nc-jobs-seo-accordion__icon {
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

#nch-main .nc-jobs-seo-accordion__icon::before {
	content: "+";
}

#nch-main .nc-jobs-seo-accordion[open] .nc-jobs-seo-accordion__toggle {
	background: var(--nch-brown-dark);
}

#nch-main .nc-jobs-seo-accordion[open] .nc-jobs-seo-accordion__icon::before {
	content: "\2212";
}

#nch-main .nc-jobs-seo-accordion__toggle:focus-visible {
	outline: 2px solid var(--nch-white);
	outline-offset: -4px;
}

#nch-main .nc-jobs-seo-accordion__body {
	padding: 22px 24px 4px;
}

/* Same "no extra top gap on the very first heading" treatment the old
   direct-child rule (below) gave .nc-jobs-seo > h2:first-of-type — the
   first h2 now lives one level deeper, inside the accordion body, so that
   older rule no longer matches anything and this replaces it. */
#nch-main .nc-jobs-seo-accordion__body > h2:first-of-type {
	margin-top: 0;
}

@media (max-width: 767px) {
	#nch-main .nc-jobs-seo-accordion__toggle {
		padding: 13px 14px;
	}

	#nch-main .nc-jobs-seo-accordion__title {
		font-size: 14.5px;
	}

	#nch-main .nc-jobs-seo-accordion__body {
		padding: 14px 14px 4px;
	}
}

/* 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.
   RESTYLE (2026-09-07): each FAQ item is now its own light-blue card —
   single-hue theme only (var(--nch-blue) / --nch-blue-dark / --nch-blue-light,
   the same tokens used everywhere else on this page, e.g. the badges and
   Important Links buttons). No new colors introduced. Question text uses
   the theme blue, answer text stays the standard dark ink for readability,
   background is the existing very-light blue token, border is a subtle
   tint of the same blue (not a second color). */
#nch-main .nc-jobs-faq {
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#nch-main .nc-jobs-faq__item {
	background: var(--nch-blue-light);
	border: 1px solid rgba(37, 99, 235, 0.22);
	border-radius: var(--nch-radius-sm);
	padding: 16px 18px;
}

#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-blue-dark);
	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: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid rgba(37, 99, 235, 0.18);
	color: var(--nch-ink);
	line-height: 1.7;
}

/* ---------- 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 — all links shown as uniform blue buttons with white text
   (2026-09-04, updated per user request). display:flex was missing before,
   which is why flex-direction/gap/max-width had no effect and the buttons
   overlapped as un-styled default inline anchors; flex-wrap now lets any
   number of links (site supports 5+) wrap onto new rows cleanly instead of
   forcing a single column or overlapping. Buttons are slightly smaller than
   the old single-CTA size. No URLs, targets, or rel attributes are touched —
   appearance/layout only. */

#nch-main .nextcareer-link-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 12px;
	max-width: 100%;
}

#nch-main .job-button,
#nch-main .apply-button,
#nch-main .secondary-button,
#nch-main .website-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	border: none;
	border-radius: 8px;
	background: var(--nch-blue) !important;
	color: var(--nch-white) !important;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
	line-height: 1.3;
	white-space: normal;
	padding: 12px 18px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#nch-main .job-button:hover,
#nch-main .apply-button:hover,
#nch-main .secondary-button:hover,
#nch-main .website-button:hover {
	background: var(--nch-blue-dark) !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24);
}

@media (max-width: 768px) {
	#nch-main .nextcareer-job-table {
		/* minmax(0, 1fr) instead of 1fr (2026-08-11, overflow safety only —
		   same visual 2-column layout, just lets each column shrink below
		   its content's intrinsic width instead of forcing the grid, and
		   the page with it, wider than the viewport). */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	#nch-main .nextcareer-job-table {
		grid-template-columns: minmax(0, 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;
	}

	/* STRIP REDESIGN (2026-08-16, rev. 2): mobile keeps the SAME row layout
	   as desktop now (title left, "Posted: date" right — .nc-job-card stays
	   flex-direction:row, not stacked), per explicit spec ("Keep title on
	   the left and Posted date on the right... Do NOT unnecessarily move the
	   date underneath the title"). Only padding/font-sizes shrink for the
	   narrower viewport. .nc-category-badges/.nc-job-location/.nc-job-meta/
	   .nc-job-category/.nc-meta-box/.nc-view-job are already display:none
	   from the shared rule above. */
	#nch-main .nc-jobs-list {
		gap: 3px;
	}

	#nch-main .nc-job-card {
		padding: 6px 10px;
	}

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

	#nch-main .nc-posted-date {
		font-size: 10.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 {
		/* minmax(0, 1fr) instead of 1fr (2026-08-11, overflow safety only —
		   this is the rule that actually wins at 375-430px, since this
		   767px block is declared after the 480px block above; same
		   2-column layout, just prevented from ever forcing the grid
		   wider than the viewport). */
		grid-template-columns: repeat(2, minmax(0, 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: 13px 14px;
	}

	/* 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 .job-button,
	#nch-main .apply-button,
	#nch-main .secondary-button,
	#nch-main .website-button {
		font-size: 13px;
		padding: 11px 16px;
	}
}

/* ---------- ROOT-CAUSE MOBILE OVERFLOW FIX (2026-08-11) -------------------
   Kadence's own content.min.css ships:
     .alignfull,.alignwide{ max-width:100vw; width:var(--global-vw,100vw);
       margin-left:calc(50% - var(--global-vw,100vw)/2); margin-right:...; }
   --global-vw is meant to safely replace the literal 100vw (it accounts for
   scrollbar width), but Kadence only ever DEFINES --global-vw on its own
   ".wp-site-blocks" wrapper div, which lives in Kadence's header.php. This
   Government Job page is rendered by this plugin's own
   templates/site-wrapper.php instead (see template_include in
   nextcareer-homepage.php) — Kadence's CSS still loads via wp_head(), but
   Kadence's ".wp-site-blocks" markup that CSS depends on is never printed.
   So --global-vw is undefined here, and .alignfull/.alignwide silently fall
   back to a literal 100vw with negative left/right margins computed against
   the FULL viewport — while actually nested inside .nch-container (a
   narrower, padded box). That is a classic full-bleed breakout, and it is
   what pushes the entire page (not just one element) wider than the mobile
   viewport: any image/embed/columns block left at Wide or Full alignment in
   the native "Detailed Job Description" editor content triggers it.
   Fix: override both classes back to a normal 100%-wide, non-breakout block
   specifically within this page's own content areas. Higher specificity
   (#nch-main + class, vs Kadence's bare class-only selector) means this
   always wins regardless of stylesheet load order, with no !important
   needed and nothing in Kadence's own CSS touched. */
#nch-main .alignfull,
#nch-main .alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	width: 100%;
}

/* Kadence's own theme normally adds this same long-word/URL protection via
   ".entry-content{word-break:break-word}" — but that class only exists in
   Kadence's own single.php/content.php templates, which (same reason as
   above) this page's site-wrapper.php never uses. Re-applied here, scoped
   to this page's actual free-text areas only (title, article/description
   prose, SEO content) so a long pasted notification URL or an unbroken
   department/qualification string can't force any one of them wider than
   its column. Deliberately NOT applied inside tables — .nc-table-scroll /
   .nca-tbl-wrap already handle wide tables with their own horizontal
   scrollbar, and forcing mid-word breaks inside table cells would change
   how their content reads, matching Kadence's own
   ".entry-content table{word-break:normal}" exclusion. */
#nch-main .nch-job-detail-head__title,
#nch-main .nextcareer-job-article p,
#nch-main .nextcareer-job-article li,
#nch-main .nextcareer-job-article a,
#nch-main .nextcareer-description-content p,
#nch-main .nc-jobs-seo p,
#nch-main .nc-jobs-seo li,
#nch-main .nc-jobs-seo a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------- MOBILE TABLE HORIZONTAL SCROLL (2026-08-11) -------------------
   Universal safety-net wrapper — see nextcareer_homepage_wrap_wide_tables()
   in nextcareer-homepage.php, which auto-wraps any <table> in a Government
   Job's rendered content that ISN'T already inside the admin's own
   .nca-tbl-wrap (custom TinyMCE table tool, styled above) or an existing
   hand-authored scroll wrapper, in a plain <div class="nc-table-scroll">.

   This rule sets ONLY scroll behavior — no color, font, border, padding, or
   table rule of any kind — so it can never change how an existing table
   looks. A table that already fits its column shows no scrollbar at all
   (overflow-x: auto is a no-op when nothing overflows); only a table wider
   than its box ever scrolls, and only that table's own box does — the rest
   of the page never gains horizontal movement. Deliberately not wrapped in
   a mobile-only @media block: the exact same rule is correct at every
   screen size, so there is nothing to toggle. */
#nch-main .nc-table-scroll,
#nch-main .nca-table-scroll {
	width: 100%;
	max-width: 100%;
	max-height: 480px;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* WIDE-TABLE SCROLL FIX (2026-08-26): a plain <table> naturally shrinks its
   own columns to fit the wrapper above instead of overflowing it — so a
   genuinely wide hand-pasted table (many columns) never actually triggered
   the horizontal scrollbar the wrapper is meant to provide; it just rendered
   cramped, wrapped-text columns instead, and on very wide tables could still
   force the page wider. white-space: nowrap makes each cell keep its natural
   single-line width, so the table's real content width is preserved and the
   wrapper's overflow-x now genuinely activates when a table needs it — while
   short/narrow tables are completely unaffected (nothing to overflow).
   overflow-y: auto above (was hidden) + max-height give tall tables their
   own vertical scrollbar too, so neither direction can inflate the page. */
#nch-main .nc-table-scroll table th,
#nch-main .nc-table-scroll table td,
#nch-main .nca-table-scroll table th,
#nch-main .nca-table-scroll table td {
	white-space: nowrap;
}

/* MOBILE UX FIX (2026-08-14, round 2; recolored 2026-08-21 pink → red per
   user request) — colored scrollbar on every table scroll container (both
   the auto-wrap class above and the admin's own .nca-tbl-wrap tool below),
   so a user can immediately tell a wide table is horizontally scrollable
   instead of assuming the content is simply cut off. Uses the site's own
   brand red (var(--nch-red) / #dc2626, used elsewhere for the top border
   accent and links) instead of an invented color, so it matches the rest
   of the design. Firefox uses scrollbar-color (thumb, then track);
   WebKit/Blink use the ::-webkit-scrollbar-* pseudo-elements. Colors only —
   no width/height/layout property here changes how any table itself looks. */
#nch-main .nc-table-scroll,
#nch-main .nca-table-scroll,
#nch-main .nca-tbl-wrap {
	scrollbar-width: thin;
	scrollbar-color: var(--nch-red) var(--nch-red-light);
}

#nch-main .nc-table-scroll::-webkit-scrollbar,
#nch-main .nca-table-scroll::-webkit-scrollbar,
#nch-main .nca-tbl-wrap::-webkit-scrollbar {
	height: 8px;
}

#nch-main .nc-table-scroll::-webkit-scrollbar-track,
#nch-main .nca-table-scroll::-webkit-scrollbar-track,
#nch-main .nca-tbl-wrap::-webkit-scrollbar-track {
	background: var(--nch-red-light);
	border-radius: 999px;
}

#nch-main .nc-table-scroll::-webkit-scrollbar-thumb,
#nch-main .nca-table-scroll::-webkit-scrollbar-thumb,
#nch-main .nca-tbl-wrap::-webkit-scrollbar-thumb {
	background: var(--nch-red);
	border-radius: 999px;
}

#nch-main .nc-table-scroll::-webkit-scrollbar-thumb:hover,
#nch-main .nca-table-scroll::-webkit-scrollbar-thumb:hover,
#nch-main .nca-tbl-wrap::-webkit-scrollbar-thumb:hover {
	background: var(--nch-red-dark);
}

/* ---------- 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;
	}
}