/**
 * Editorial pages: universities index, the portal gate, publishers, contact, help,
 * plus the blog/archive fallback that index.php renders.
 *
 * Loaded only on those templates - see inc/enqueue.php. Logical properties throughout.
 */

/* ---- Shared page chrome ------------------------------------------------- */

.jd-page { padding-block: var(--jd-space-16) var(--jd-space-24); }

.jd-page__head { margin-block-end: var(--jd-space-12); }

.jd-page__title {
	font-size: var(--jd-fs-display);
	line-height: var(--jd-lh-title);
	margin: 0 0 var(--jd-space-5);
}

.jd-page__intro,
.jd-prose {
	font-size: var(--jd-fs-sm);
	color: var(--jd-text-secondary);
	line-height: var(--jd-lh-body);
	text-wrap: pretty;
}

.jd-page__intro {
	max-inline-size: 68ch;
}

.jd-prose {
	inline-size: 100%;
	max-inline-size: none;
}

.jd-prose > :first-child { margin-block-start: 0; }
.jd-prose > :last-child { margin-block-end: 0; }

.jd-prose h2,
.jd-prose h3 {
	color: var(--jd-navy);
	margin-block: var(--jd-space-12) var(--jd-space-5);
}

.jd-prose h2 { font-size: var(--jd-fs-title); }
.jd-prose h3 { font-size: var(--jd-fs-lg); }
.jd-prose p { margin-block: 0 var(--jd-space-6); }

.jd-prose a {
	color: var(--jd-navy);
	border-block-end: 1px solid var(--jd-hairline);
	transition: border-color var(--jd-transition);
}

.jd-prose a:hover { border-block-end-color: var(--jd-navy); }

.jd-prose ul,
.jd-prose ol { margin-block: 0 var(--jd-space-6); padding-inline-start: var(--jd-space-9); }

.jd-prose li { margin-block-end: var(--jd-space-3); }

.jd-prose img { max-inline-size: 100%; block-size: auto; border-radius: var(--jd-radius-tag); }

/* WordPress's Full Size image option fills its available prose container. */
.jd-prose img.size-full {
	inline-size: 100%;
	max-inline-size: 100%;
}

.jd-prose blockquote {
	margin: var(--jd-space-9) 0;
	padding-inline-start: var(--jd-space-8);
	border-inline-start: 2px solid var(--jd-brass);
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-lg);
	color: var(--jd-navy);
}

/* ---- Information page -------------------------------------------------- */

/* The stored page uses legacy Bootstrap class names. Keep its content editable in
   wp-admin, but give those classes the new theme's grid, surface and type system. */
.jd-prose .our-service {
	color: var(--jd-text-secondary);
}

.jd-prose .our-service > .container {
	inline-size: 100%;
}

.jd-prose .our-service .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jd-space-8);
	align-items: stretch;
}

.jd-prose .our-service .col-12 {
	grid-column: 1 / -1;
}

.jd-prose .our-service .form-group {
	margin: 0;
}

.jd-prose .our-service iframe {
	display: block;
	inline-size: 100%;
	block-size: auto;
	min-block-size: 320px;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
}

.jd-prose .our-service .card {
	block-size: 100%;
	padding: var(--jd-space-9);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	background-color: var(--jd-surface);
	box-shadow: var(--jd-shadow-card);
}

.jd-prose .our-service .card-body {
	block-size: 100%;
}

.jd-prose .our-service .main-header {
	margin-block: 0 var(--jd-space-6);
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-title);
	font-weight: 700;
	line-height: var(--jd-lh-title);
	color: var(--jd-navy);
}

.jd-prose .our-service .card-text {
	margin: 0;
	font-size: var(--jd-fs-sm);
	line-height: var(--jd-lh-body);
}

.jd-prose .our-service .ul-main {
	margin: 0;
	padding-inline-start: var(--jd-space-8);
}

.jd-prose .our-service .ul-main .rectangle {
	display: block;
	inline-size: 100%;
	block-size: 3px;
	margin-block-end: var(--jd-space-6);
	object-fit: cover;
}

.jd-prose .our-service .ul-main li {
	margin-block-end: var(--jd-space-4);
	padding-inline-start: var(--jd-space-2);
	color: var(--jd-text-primary);
}

.jd-prose .our-service .card .row {
	grid-template-columns: 36px minmax(0, 1fr);
	gap: var(--jd-space-5);
	align-items: start;
}

.jd-prose .our-service .card .col-1,
.jd-prose .our-service .card .col-10 {
	min-inline-size: 0;
}

.jd-prose .our-service .card .col-1 img {
	display: block;
	inline-size: 28px;
	block-size: 28px;
	object-fit: contain;
}

/* Wide content must scroll inside itself rather than pushing the page sideways. */
.jd-prose table { display: block; overflow-x: auto; max-inline-size: 100%; }
.jd-prose pre { overflow-x: auto; }

@media (max-width: 768px) {
	.jd-prose .our-service .row {
		grid-template-columns: 1fr;
	}

	.jd-prose .our-service .col-12,
	.jd-prose .our-service .col-lg-6 {
		grid-column: auto;
	}

	.jd-prose .our-service .card .row {
		grid-template-columns: 30px minmax(0, 1fr);
	}

	.jd-prose .our-service .card {
		padding: var(--jd-space-7);
	}

	.jd-prose .our-service iframe {
		min-block-size: 0;
	}

	.jd-help__section-head {
		gap: var(--jd-space-4);
	}

	.jd-help__section-head h2 {
		font-size: var(--jd-fs-md);
	}
}

/* ---- Universities index (05) -------------------------------------------- */

.jd-container.jd-unis { padding-block: 40px 72px; }

.jd-unis__head { max-inline-size: 680px; }
.jd-unis__kicker {
	color: var(--jd-text-secondary);
	line-height: normal;
	letter-spacing: var(--jd-track-wide);
	margin: 0 0 var(--jd-space-3);
}

.jd-unis__title {
	font-size: 36px;
	line-height: var(--jd-lh-title);
	margin: 0 0 var(--jd-space-5);
}

.jd-unis__intro {
	line-height: 2;
	max-inline-size: none;
	margin-block-end: var(--jd-space-11);
}

.jd-unis__search {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	block-size: 52px;
	max-inline-size: 520px;
	padding-inline: var(--jd-space-8);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-surface);
	color: var(--jd-text-muted);
	transition: border-color var(--jd-transition);
}

.jd-unis__searchicon { flex-shrink: 0; }

.jd-unis__field {
	flex: 1;
	min-inline-size: 0;
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--jd-font-ui);
	font-size: 13.5px;
	line-height: normal;
	color: var(--jd-ink);
}

.jd-unis__search:focus-within { border-color: var(--jd-navy); }

.jd-unis__note {
	font-size: 11.5px;
	line-height: 1.9;
	color: var(--jd-text-secondary);
	margin-block: var(--jd-space-9) 0;
}

.jd-unis__active {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-5);
	flex-wrap: wrap;
	padding-block: 13px;
	padding-inline: var(--jd-space-1);
	border-block: 1px solid var(--jd-hairline);
	margin-block: var(--jd-space-6) var(--jd-space-2);
}

.jd-unis__activelabel {
	flex-shrink: 0;
	font-size: 10px;
	line-height: normal;
	letter-spacing: var(--jd-track-label);
	color: var(--jd-text-muted);
}

.jd-unis__chip {
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	padding-block: var(--jd-space-2);
	padding-inline: var(--jd-space-6);
	background-color: var(--jd-surface);
	font-size: 11.5px;
	font-weight: 500;
	line-height: normal;
	color: var(--jd-navy);
	transition: border-color var(--jd-transition);
}

.jd-unis__chip:hover {
	border-color: var(--jd-navy);
	color: var(--jd-navy);
	text-decoration: none;
	transform: translateY(-1px);
}

.jd-unis__group { margin-block-start: var(--jd-space-16); }

.jd-unis__grouptitle {
	display: flex;
	align-items: center;
	gap: var(--jd-space-8);
	font-family: var(--jd-font-ui);
	font-size: 11px;
	line-height: normal;
	letter-spacing: .18em;
	color: var(--jd-text-secondary);
	margin: 0 0 var(--jd-space-2);
}

.jd-unis__grouptitle > span { flex-shrink: 0; }

.jd-unis__grouptitle::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background-color: var(--jd-hairline);
}

/* Two columns, as in the prototype. `columns` rather than grid because the rows are a
   single flowing list and break-inside keeps each row whole. */
.jd-unis__list {
	columns: 2;
	column-gap: var(--jd-space-20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jd-unis__item { break-inside: avoid; }

.jd-unis__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--jd-space-6);
	padding: var(--jd-space-6) var(--jd-space-3);
	border-block-end: 1px solid var(--jd-paper-deep);
	color: var(--jd-ink);
	transition: background-color var(--jd-transition);
}

.jd-unis__link:hover {
	background-color: var(--jd-paper);
	color: var(--jd-ink);
	text-decoration: none;
}
.jd-unis__name { font-size: 13.5px; font-weight: 500; line-height: normal; }

.jd-unis__meta {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-4);
	flex-shrink: 0;
}

.jd-unis__lock {
	display: inline-flex;
	align-items: center;
	gap: var(--jd-space-3);
	border: 1px solid rgb(24 41 94 / .35);
	border-radius: var(--jd-radius-tag);
	padding-block: var(--jd-space-1);
	padding-inline: 9px;
	font-size: 10px;
	font-weight: 500;
	line-height: normal;
	color: var(--jd-navy);
	white-space: nowrap;
}

.jd-unis__count { font-size: 10.5px; line-height: normal; color: var(--jd-text-muted); }
.jd-unis__count .jd-mono { font-size: 10px; }

/* The arrow points along the reading direction, so it must flip with the language. */
.jd-unis__meta::after {
	content: "\2190";
	color: var(--jd-text-muted);
	font-size: var(--jd-fs-2xs);
	line-height: normal;
}

:dir(ltr) .jd-unis__meta::after { content: "\2192"; }

.jd-unis__noresults {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding: var(--jd-space-20);
	text-align: center;
	color: var(--jd-text-secondary);
	margin-block-start: var(--jd-space-12);
}

.jd-unis__noresultstitle {
	font-family: var(--jd-font-display);
	font-weight: 700;
	font-size: 21px;
	color: var(--jd-navy);
	margin-block: 0 var(--jd-space-3);
}

.jd-unis__noresultsbody {
	font-size: 12.5px;
	margin: 0;
}

.jd-unis__ask {
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	background-color: var(--jd-surface);
	padding: var(--jd-space-9) var(--jd-space-11);
	display: flex;
	align-items: center;
	gap: var(--jd-space-7);
	flex-wrap: wrap;
	margin-block-start: var(--jd-space-20);
}

.jd-unis__askbody {
	font-size: var(--jd-fs-xs);
	color: var(--jd-ink);
	line-height: 1.9;
	flex: 1;
	min-inline-size: 260px;
	margin: 0;
}

.jd-unis__askbody strong { font-weight: 600; }

.jd-unis__ask .jd-btn {
	padding-inline: var(--jd-space-9);
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
}

.jd-unis__ask .jd-btn:hover {
	border-color: var(--jd-navy);
	color: var(--jd-navy);
	transform: translateY(-1px);
}

/* ---- Portal gate (06) --------------------------------------------------- */

.jd-gate { padding-block: var(--jd-space-13) 72px; }

.jd-gate__crumbs {
	font-size: var(--jd-fs-2xs);
	line-height: normal;
	color: var(--jd-ink);
	margin-block-end: 14px;
}

.jd-gate__crumbs a { color: var(--jd-text-secondary); }
.jd-gate__crumbs a:hover { color: var(--jd-navy); text-decoration: none; }

.jd-gate__sep {
	margin-inline: var(--jd-space-4);
	color: var(--jd-hairline);
}

.jd-gate__portaltitle {
	font-size: 31px;
	margin-block-end: 10px;
}

.jd-gate__doc {
	border-block: var(--jd-border);
	padding-block: 10px;
	padding-inline: var(--jd-space-1);
	font-size: 11.5px;
	letter-spacing: .06em;
	line-height: normal;
	color: var(--jd-text-secondary);
	margin-block-end: var(--jd-space-13);
}

.jd-gate__doc p { margin: 0; }

.jd-gate__col {
	max-inline-size: 520px;
	margin-inline: auto;
}

.jd-gate__card {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-13);
}

.jd-gate__title {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	font-size: 21px;
	line-height: normal;
	margin: 0 0 var(--jd-space-5);
}

.jd-gate__lock { display: inline-flex; color: var(--jd-navy); }

.jd-gate__lede {
	border-block: var(--jd-border);
	padding-block: 9px;
	padding-inline: var(--jd-space-1);
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-secondary);
	line-height: 2;
	margin: 0 0 var(--jd-space-9);
}

.jd-gate__body { margin-block-end: var(--jd-space-9); }

.jd-gate__actions { display: grid; gap: var(--jd-space-5); }

.jd-gate__actions .jd-btn--primary {
	inline-size: 100%;
	min-block-size: 50px;
	font-size: var(--jd-fs-sm);
	line-height: normal;
	padding-block: 1px;
	padding-inline: var(--jd-space-3);
	border-color: transparent;
}

.jd-gate__help {
	font-size: 11.5px;
	color: var(--jd-text-secondary);
	line-height: 1.9;
	margin-block: var(--jd-space-6) 0;
}

.jd-gate__help a { color: var(--jd-navy); font-weight: 500; border-block-end: 1px solid var(--jd-navy); }
.jd-gate__help a:hover { text-decoration: none; }

.jd-btn.jd-gate__browse {
	display: flex;
	inline-size: 100%;
	margin-block-start: var(--jd-space-7);
	min-block-size: 46px;
	background-color: var(--jd-surface);
	font-size: var(--jd-fs-xs);
	font-weight: 600;
	line-height: normal;
	padding-block: 1px;
	padding-inline: var(--jd-space-3);
}

.jd-btn.jd-gate__browse:hover {
	border-color: var(--jd-navy);
	color: var(--jd-navy);
	text-decoration: none;
}

.jd-notice {
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	padding: var(--jd-space-5) var(--jd-space-8);
	font-size: var(--jd-fs-2xs);
	margin-block-end: var(--jd-space-9);
}

.jd-notice--info { border-color: rgb(24 41 94 / .3); color: var(--jd-navy); background-color: var(--jd-surface); }
.jd-notice p { margin: 0; }

/* ---- Publishers (14) ---------------------------------------------------- */

.jd-pubs--index { padding-block: 40px 72px; }

.jd-pubs__head {
	max-inline-size: 680px;
	margin-block-end: 10px;
}

.jd-pubs__kicker {
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-3xs);
	font-weight: 400;
	letter-spacing: var(--jd-track-wide);
	line-height: normal;
	color: var(--jd-text-secondary);
	margin-block-end: 6px;
}

.jd-pubs__title {
	font-family: var(--jd-font-display);
	font-size: 36px;
	font-weight: 700;
	line-height: 54px;
	color: var(--jd-navy);
	margin: 0 0 10px;
}

.jd-pubs__lede {
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-sm);
	font-weight: 400;
	line-height: 28px;
	color: var(--jd-text-secondary);
	margin: 0;
}

.jd-pubs__group { margin-block-start: 34px; }

.jd-pubs__grouptitle {
	display: flex;
	align-items: center;
	gap: var(--jd-space-8);
	margin: 0 0 var(--jd-space-2);
	font-family: var(--jd-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: .18em;
	color: var(--jd-text-secondary);
}

.jd-pubs__grouptitle::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background-color: var(--jd-hairline);
}

.jd-pub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jd-space-9);
	padding-block: var(--jd-space-7);
	padding-inline: var(--jd-space-2);
	border-block-end: 1px solid var(--jd-paper-deep);
}

.jd-pub__mark {
	flex: 0 0 auto;
	inline-size: 172px;
	block-size: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px;
	background-color: var(--jd-navy);
	border-radius: var(--jd-radius-card);
}

.jd-pub__logo {
	inline-size: 146px;
	block-size: 52px;
	max-inline-size: 100%;
	object-fit: contain;
}

.jd-pub__wordmark {
	font-family: var(--jd-font-latin);
	font-size: var(--jd-fs-sm);
	font-weight: 400;
	line-height: 18.9px;
	color: var(--jd-on-navy);
	text-align: center;
}

.jd-pub__body {
	flex: 1 1 240px;
	min-inline-size: 240px;
}

.jd-pub__name {
	font-family: var(--jd-font-latin);
	font-size: 17px;
	font-weight: 400;
	line-height: normal;
	color: var(--jd-ink);
	margin: 0;
	text-align: start;
}

.jd-pub__desc {
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-2xs);
	font-weight: 400;
	line-height: 22.8px;
	color: var(--jd-text-secondary);
	margin: 2px 0 0;
}

.jd-pub__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--jd-space-7);
	margin: 0;
}

.jd-pub__browse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: 40px;
	padding-inline: var(--jd-space-9);
	border: 1px solid transparent;
	border-radius: var(--jd-radius-btn);
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-family: var(--jd-font-ui);
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	transition: background-color var(--jd-transition);
}

.jd-pub__browse:hover {
	background-color: var(--jd-navy-700);
	color: var(--jd-on-navy);
	text-decoration: none;
}

.jd-pub__site {
	font-family: var(--jd-font-ui);
	font-size: 11px;
	font-weight: 400;
	line-height: normal;
	color: var(--jd-text-secondary);
}

.jd-pub__site:hover {
	color: var(--jd-text-secondary);
	text-decoration: none;
}

/* ---- Contact (15) ------------------------------------------------------- */

.jd-page__kicker {
	letter-spacing: var(--jd-track-wide);
	line-height: normal;
	margin: 0 0 var(--jd-space-3);
}

.jd-contact {
	max-inline-size: 1100px;
	padding-block: 40px 38px;
}

.jd-contact .jd-page__title {
	font-size: 36px;
	line-height: var(--jd-lh-title);
	margin-block-end: 0;
}

.jd-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--jd-space-12);
	align-items: start;
}

/* contactGridStyle is mob||tab, so it collapses at 1080. */
@media (max-width: 1080px) {
	.jd-contact__layout { grid-template-columns: minmax(0, 1fr); }
}

.jd-contact__aside,
.jd-contact__form {
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	padding: var(--jd-space-11);
}

.jd-contact__asidetitle {
	font-family: var(--jd-font-ui);
	font-size: 10px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: var(--jd-track-wide);
	color: var(--jd-text-muted);
	margin: 0 0 var(--jd-space-6);
}

.jd-contact__list { margin: 0; }

.jd-contact__row {
	display: flex;
	gap: var(--jd-space-6);
	justify-content: space-between;
	align-items: baseline;
	padding-block: var(--jd-space-5);
	border-block-end: 1px solid var(--jd-paper-deep);
}

.jd-contact__row:last-child { border-block-end: 0; }

.jd-contact__row dt {
	font-size: 10px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: var(--jd-track-label);
	color: var(--jd-text-muted);
	text-transform: none;
	margin-block-end: 0;
}

.jd-contact__row dd {
	margin: 0;
	font-size: 12.5px;
	color: var(--jd-ink);
	line-height: normal;
}

.jd-contact__row dd a { color: inherit; }
.jd-contact__row--email dd a { color: var(--jd-navy); }
.jd-contact__row dd a:hover { border-block-end: 1px solid currentColor; }

.jd-contact__note {
	font-size: var(--jd-fs-2xs);
	line-height: 24px;
	color: var(--jd-text-secondary);
	padding: 11px var(--jd-space-1);
	margin-block: var(--jd-space-8);
	border-block: 1px solid var(--jd-hairline);
}

.jd-contact__note b {
	font-weight: 600;
	color: var(--jd-navy);
}

.jd-contact__wa {
	inline-size: 100%;
	min-block-size: 48px;
	font-size: 13.5px;
	padding-inline: var(--jd-space-3);
}

.jd-contact__form {
	display: grid;
	gap: var(--jd-space-7);
	align-content: start;
}

.jd-contact__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--jd-space-7);
}

.jd-contact__hp[hidden] { display: none; }

.jd-contact__form label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--jd-ink);
	margin-block-end: var(--jd-space-3);
}

.jd-contact__form input,
.jd-contact__form select,
.jd-contact__form textarea {
	inline-size: 100%;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	color: var(--jd-ink);
	font-family: var(--jd-font-ui);
	line-height: normal;
	transition: border-color var(--jd-transition);
}

.jd-contact__form input,
.jd-contact__form select { block-size: 46px; }

.jd-contact__form input {
	padding-inline: var(--jd-space-7);
	font-size: 13.5px;
}

.jd-contact__form input.jd-mono { font-family: var(--jd-font-mono); }

.jd-contact__form select {
	padding-inline: var(--jd-space-6);
	font-size: var(--jd-fs-xs);
	font-weight: 500;
	color: var(--jd-navy);
}

.jd-contact__form textarea {
	block-size: 110px;
	padding: var(--jd-space-6) var(--jd-space-7);
	font-size: 13.5px;
	resize: vertical;
}

.jd-contact__form input:focus,
.jd-contact__form select:focus,
.jd-contact__form textarea:focus { border-color: var(--jd-navy); }

.jd-contact__submit {
	inline-size: 100%;
	min-block-size: 50px;
	font-size: var(--jd-fs-sm);
	line-height: normal;
	border-color: transparent;
	padding-inline: var(--jd-space-3);
}

.jd-contact__status {
	margin: 0;
	padding: var(--jd-space-4) var(--jd-space-6);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	font-size: var(--jd-fs-xs);
}

.jd-contact__status--success { color: var(--jd-emerald); }
.jd-contact__status--error { color: var(--jd-danger); }

/* ---- Help (16) ---------------------------------------------------------- */

.jd-help {
	padding-block: var(--jd-space-16) var(--jd-space-24);
}

.jd-help__head,
.jd-help__sections {
	max-inline-size: 860px;
	margin-inline: auto;
}

.jd-help__kicker {
	margin-block: 0 var(--jd-space-3);
	color: var(--jd-text-secondary);
	letter-spacing: var(--jd-track-wide);
}

.jd-help__intro {
	margin: 0;
	padding-block: var(--jd-space-5);
	border-block: var(--jd-border);
	font-size: var(--jd-fs-xs);
	letter-spacing: var(--jd-track-tight);
	color: var(--jd-text-secondary);
}

.jd-help__sections {
	display: grid;
	gap: var(--jd-space-12);
	inline-size: 100%;
	margin-block-start: var(--jd-space-12);
}

.jd-help__section {
	inline-size: 100%;
}

.jd-help__section-head {
	display: flex;
	align-items: center;
	gap: var(--jd-space-6);
	margin-block-end: var(--jd-space-5);
}

.jd-help__number {
	flex-shrink: 0;
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-title);
	line-height: 1;
	color: var(--jd-brass);
}

.jd-help__section-head h2 {
	margin: 0;
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-lg);
	font-weight: 700;
	line-height: var(--jd-lh-title);
	color: var(--jd-navy);
}

.jd-help__rule {
	flex: 1;
	block-size: 1px;
	background-color: var(--jd-hairline);
}

.jd-help__answer {
	max-inline-size: 100%;
	font-size: var(--jd-fs-sm);
	line-height: 2.1;
}

.jd-help__answer p,
.jd-help__answer ul,
.jd-help__answer ol {
	max-inline-size: none;
}

.jd-help__answer p:last-child,
.jd-help__answer ul:last-child,
.jd-help__answer ol:last-child {
	margin-block-end: 0;
}

/* ---- Blog / archive fallback -------------------------------------------- */

.jd-postlist { display: grid; gap: var(--jd-space-9); max-inline-size: 76ch; }

.jd-postcard {
	padding-block-end: var(--jd-space-9);
	border-block-end: var(--jd-border);
}

.jd-postcard__title { font-size: var(--jd-fs-title); margin: 0 0 var(--jd-space-3); }
.jd-postcard__title a { color: var(--jd-navy); }
.jd-postcard__meta { margin: 0 0 var(--jd-space-5); color: var(--jd-text-muted); }
.jd-postcard__excerpt { color: var(--jd-text-secondary); }

.jd-pagination {
	display: flex;
	gap: var(--jd-space-5);
	flex-wrap: wrap;
	margin-block-start: var(--jd-space-12);
}

.jd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	min-block-size: 40px;
	padding-inline: var(--jd-space-4);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
	color: var(--jd-navy);
	transition: border-color var(--jd-transition);
}

.jd-pagination .page-numbers:hover { border-color: var(--jd-navy); }

.jd-pagination .page-numbers.current {
	background-color: var(--jd-navy);
	border-color: var(--jd-navy);
	color: var(--jd-on-navy);
}

/* ---- Maintenance ------------------------------------------------------- */

.jd-maintenance-page {
	background-color: var(--jd-navy);
}

.jd-maintenance {
	display: grid;
	place-items: center;
	min-block-size: 100vh;
	padding: var(--jd-space-12);
	background-color: var(--jd-navy);
}

.jd-maintenance__shell {
	display: grid;
	gap: var(--jd-space-12);
	inline-size: 100%;
	max-inline-size: 680px;
}

.jd-maintenance__logo {
	inline-size: 190px;
	margin-inline: auto;
}

.jd-maintenance__logo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	filter: brightness(0) invert(1);
}

.jd-maintenance__card {
	padding: var(--jd-space-24);
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-inline-start: var(--jd-space-2) solid var(--jd-brass);
	border-radius: var(--jd-radius-card);
	box-shadow: var(--jd-shadow-card);
	text-align: center;
}

.jd-maintenance__kicker {
	margin-block: 0 var(--jd-space-5);
	color: var(--jd-brass);
	font-size: var(--jd-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--jd-track-wide);
	text-transform: uppercase;
}

.jd-maintenance__card h1 {
	margin: 0;
	color: var(--jd-navy);
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-hero);
	line-height: var(--jd-lh-hero);
}

.jd-maintenance__copy {
	max-inline-size: 520px;
	margin: var(--jd-space-8) auto 0;
	color: var(--jd-text-secondary);
	font-family: var(--jd-font-ui);
	font-size: var(--jd-fs-base);
	line-height: var(--jd-lh-body);
	text-wrap: pretty;
}

.jd-maintenance__status {
	margin: var(--jd-space-12) 0 0;
	padding-block-start: var(--jd-space-6);
	border-block-start: var(--jd-border);
	color: var(--jd-text-muted);
	font-family: var(--jd-font-mono);
	font-size: var(--jd-fs-2xs);
	letter-spacing: var(--jd-track-biblio);
}

@media (max-width: 1080px) {
	.jd-maintenance__card {
		padding: var(--jd-space-20);
	}
}

@media (max-width: 768px) {
	.jd-maintenance {
		padding: var(--jd-space-8);
	}

	.jd-maintenance__shell {
		gap: var(--jd-space-8);
	}

	.jd-maintenance__card {
		padding: var(--jd-space-16) var(--jd-space-8);
	}
}

/*
 * Screen 05 university list on a phone.
 *
 * DERIVED: see PENDING-DECISIONS #69 — there are no measured numbers to build from here,
 * because the prototype's OWN 390 capture overflows: docs/design/05-universities--390.json
 * puts the lock pill at x=-40 (w=156), i.e. off-canvas. Reproducing that faithfully means
 * reproducing a horizontal scrollbar, so this is a recorded deviation, not a parity defect.
 *
 * Two things make the row unfittable: the `password_required` state puts a whole sentence
 * inside a `white-space: nowrap` pill (336px in English), and the list is two columns, so
 * each row gets ~165px. Measured on staging at 390 before this rule: ar 137px over,
 * en 291px over; en still 102px over at 768.
 */
@media (max-width: 768px) {
	.jd-unis__list { columns: 1; }

	/* The pill drops to its own line when it cannot sit beside the name. */
	.jd-unis__link { flex-wrap: wrap; }

	.jd-unis__meta {
		flex-shrink: 1;
		min-inline-size: 0;
	}

	.jd-unis__lock { white-space: normal; }
}