/* ==========================================================================
   NextCareer Diploma Courses — listing + detail styles.
   Prefixed .ncd- (NextCareer Diploma). Reuses --nch- custom properties from
   homepage.css (declared dependency in wp_enqueue_style()).
   ========================================================================== */

/* ---------- LISTING (lives inside the existing Diploma Courses Page) ---- */

.ncd-listing {
	max-width: 1100px;
	margin: 0 auto;
}

.ncd-listing__header {
	max-width: 900px;
	margin: 0 auto 26px;
}

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

.ncd-listing__header p {
	margin: 0;
	color: var(--nch-gray);
	font-size: 15px;
}

.ncd-filters {
	display: grid;
	grid-template-columns: 2fr 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);
}

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

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

.ncd-filter-field input {
	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);
}

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

.ncd-filter-actions {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

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

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

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

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

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

/* ==========================================================================
   MOBILE COMPACTNESS PASS — @media (max-width: 767px). Spacing/sizing
   reduction only. Search + Reset share one row for consistency with the
   rest of the site.
   ========================================================================== */
@media (max-width: 767px) {

	.ncd-listing__header {
		margin-bottom: 16px;
	}

	.ncd-listing__header p {
		font-size: 13.5px;
	}

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

	.ncd-filter-field input {
		height: 44px;
		font-size: 13.5px;
	}

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

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

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

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

	.ncd-grid {
		gap: 12px;
	}

	.ncd-card {
		padding: 14px;
	}

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

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

	.ncd-card__meta {
		gap: 6px;
		margin-bottom: 8px;
		font-size: 11.5px;
	}

	.ncd-card__meta span {
		padding: 3px 8px;
	}

	.ncd-card__excerpt {
		margin-bottom: 12px;
		font-size: 13px;
	}

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

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

	.ncd-detail-head__title {
		margin-bottom: 12px;
	}

	.ncd-overview-grid {
		gap: 8px;
	}

	.ncd-overview-card {
		padding: 10px 12px;
		min-width: 0;
	}

	.ncd-overview-card__label {
		font-size: 10px;
	}

	.ncd-overview-card__value {
		font-size: 13.5px;
	}

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

	.ncd-official-link,
	.ncd-ad-slot {
		margin-top: 18px;
	}

	.ncd-official-link__cta {
		padding: 12px 20px;
		font-size: 14px;
	}

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

	/* Diploma Courses listing page SEO content block — same mobile
	   scale-down already proven on the Government Jobs listing page's
	   .nc-jobs-seo (see nextcareer-homepage's jobs-pages.css). */
	#nch-main .ncd-seo {
		margin-top: 32px;
		padding-top: 28px;
		font-size: 15px;
		line-height: 1.7;
	}

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

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

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

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

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

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

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

.ncd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

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

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

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

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

.ncd-card__badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 5px 10px;
	margin-bottom: 10px;
	background: var(--nch-blue-light);
	color: var(--nch-blue);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}

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

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

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

.ncd-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 12.5px;
	color: var(--nch-gray);
}

.ncd-card__meta span {
	background: var(--nch-bg-soft);
	padding: 4px 9px;
	border-radius: 999px;
}

.ncd-card__excerpt {
	margin: 0 0 16px;
	color: var(--nch-gray);
	font-size: 13.5px;
	line-height: 1.6;
}

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

.ncd-card__cta:hover {
	color: var(--nch-blue-dark);
}

/* ---------- PAGINATION (core paginate_links() markup) ---------- */

.ncd-pagination {
	margin: 30px 0 0;
	display: flex;
	justify-content: center;
}

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

.ncd-pagination a.page-numbers,
.ncd-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;
}

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

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

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

.ncd-no-results {
	padding: 50px 25px;
	text-align: center;
	background: var(--nch-bg-soft);
	border: 1px dashed var(--nch-gray-light);
	border-radius: var(--nch-radius);
}

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

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

.ncd-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 ---------- */

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

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

/* 2026-07-30 fix: long Eligibility/Admission Mode text (e.g. "10+2 (Physics,
   Chemistry and Biology/Mathematics)") was overflowing past the card's own
   border instead of wrapping inside it. Root cause: CSS Grid items get an
   implicit default of `min-width: auto`, which floors how far a card can
   shrink at the width of its own unbroken content (e.g. the slash-joined
   token "Biology/Mathematics" has no space to wrap on). At a grid track
   narrower than that intrinsic width, the browser lets the text spill past
   the card's visual box rather than shrinking the box or wrapping the text.
   `min-width: 0` on the grid item removes that floor so the card can shrink
   to its track width and let overflow-wrap below do its job instead.
   `align-items: stretch` (CSS Grid's own default, made explicit here so it
   can never be silently overridden later) makes every card in the same row
   match the row's tallest card, and because height/min-height/max-height
   are never set, that tallest-card height is itself simply "however tall
   the longest content needs" — the row grows, nothing is clipped. No
   overflow:hidden and no text-overflow/ellipsis anywhere, so nothing is
   ever cut off; long text just wraps onto more lines and the card (and its
   whole row) grows to fit. */
.ncd-overview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	align-items: stretch;
	gap: 12px;
	margin-bottom: 8px;
}

.ncd-overview-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	height: auto;
	padding: 14px 16px;
	background: var(--nch-bg-soft);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius-sm);
}

.ncd-overview-card__label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--nch-gray);
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

.ncd-overview-card__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--nch-ink);
	/* Lets long values (long words, slash-joined terms like
	   "Biology/Mathematics", long sentences) wrap naturally within the
	   card's own width instead of forcing the card wider than its grid
	   column or spilling past its border. Matches the same fix already
	   used for Government Jobs' Job Overview cards (see .job-row span in
	   jobs-pages.css) for visual/behavioral consistency across modules. */
	overflow-wrap: break-word;
	word-break: break-word;
	white-space: normal;
}

/* Article content wrapper (added in site-wrapper.php for is_singular
   ('diploma_courses')) — gives the article body the same readable width
   as the head block above it. */
.ncd-detail-body {
	max-width: 900px;
	margin: 0 auto;
	color: var(--nch-ink);
	font-size: 15px;
}

.ncd-official-link {
	max-width: 900px;
	margin: 30px auto 0;
}

.ncd-official-link__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	background: 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);
}

.ncd-official-link__cta:hover {
	background: var(--nch-blue-dark);
}

.ncd-ad-slot {
	max-width: 900px;
	margin: 26px auto 0;
}

.ncd-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;
}


/* ---------- DETAILED CONTENT — TABLES (2026-07-30) -------------------------
   Diploma Courses 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
   .ncd-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 .ncd-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 .ncd-detail-body .nca-tbl {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 14.5px;
}

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

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

#nch-main .ncd-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 .ncd-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 .ncd-detail-body .nca-tbl-row--primary td,
#nch-main .ncd-detail-body .nca-tbl-row--primary th {
	background: #eaf2ff;
	color: #1d4ed8;
	font-weight: 700;
	border-left: 3px solid #2563eb;
}

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

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

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

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

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

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

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

#nch-main .ncd-detail-body td.nca-tbl-cell--neutral,
#nch-main .ncd-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 .ncd-detail-body .nca-tbl {
		font-size: 13.5px;
	}
	#nch-main .ncd-detail-body .nca-tbl th,
	#nch-main .ncd-detail-body .nca-tbl td {
		padding: 10px 12px;
	}
}

/* ---------- LISTING PAGE SEO CONTENT (2026-07-31) --------------------------
   Static SEO content block that sits below the diploma course cards and
   above the shared footer on the Diploma Courses listing page (see
   nextcareer_diploma_render_listing_seo_content() in nextcareer-diploma.php,
   and templates/diploma-listing-seo-content.php for the markup). Direct
   port of the already-proven .nc-jobs-seo / .nc-jobs-seo-toc / .nc-jobs-faq
   rules in nextcareer-homepage's jobs-pages.css, renamed to this module's
   own .ncd- prefix so nothing collides with Government Jobs, Results, or
   any other module. Width is constrained to 1100px to match the course
   listing container (.ncd-listing, max-width: 1100px) directly above it,
   rather than stretching wider. Sits inside the same .nch-container/
   .nch-site-content wrapper, so responsive side padding is inherited
   automatically — no separate width rule needed for narrower viewports. */
#nch-main .ncd-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 .ncd-seo h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 48px 0 18px;
	color: var(--nch-ink);
}

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

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

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

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

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

#nch-main .ncd-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 .ncd-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 .ncd-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 .ncd-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 .ncd-seo-toc li {
	margin: 0;
}

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

#nch-main .ncd-seo-toc a:hover,
#nch-main .ncd-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 .ncd-faq {
	margin-top: 4px;
	border-top: 1px solid var(--nch-border);
}

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

#nch-main .ncd-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 .ncd-faq__question::-webkit-details-marker {
	display: none;
}

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

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

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

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