/**
 * TEST ARCHED platform styles — imatnote.com/arched/
 * Scope: .arched-* classes only (Gutenberg wp:html sections).
 * Concept: architecture / editorial / structured — white base, hairline rules,
 * drafting-grid accents, restrained colour, no gradients, no heavy shadows.
 */

:root {
	--arched-ink: #16202b;
	--arched-ink-soft: #46566a;
	--arched-blue: #2563eb;
	--arched-blue-dark: #1e40af;
	--arched-hairline: #e3e8ef;
	--arched-paper: #ffffff;
	--arched-soft: #f7f9fc;
	--arched-amber-bg: #fff4e5;
	--arched-amber-ink: #9a5412;
	--arched-radius: 6px;
	--arched-max: 1120px;
	/* Map-only restrained gold accent (Phase B) -- selection state on the
	   campus map, kept out of the sitewide blue/ink palette on purpose. */
	--arched-map-land: #dbe3f0;
	--arched-map-land-line: #aebcd6;
	--arched-map-gold: #b8891f;
	--arched-map-gold-bg: #fbf2df;
}

/* ---------- front page: suppress Blocksy default page-title band ---------- */
/* Our real H1 lives in .arched-hero; hide the theme's duplicate title hero. */
body.home .hero-section[data-type="type-1"],
body.page-id-13 .hero-section[data-type="type-1"],
body.single-arched_university .hero-section[data-type="type-1"] {
	display: none;
}

/* ---------- primitives ---------- */

.arched-section {
	padding: 72px 24px;
	background: var(--arched-paper);
}
.arched-section--soft { background: var(--arched-soft); }
.arched-section--rule { border-top: 1px solid var(--arched-hairline); }
.arched-wrap {
	max-width: var(--arched-max);
	margin: 0 auto;
}

.arched-kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arched-blue-dark);
	margin: 0 0 14px;
}
.arched-h1,
.arched-h2 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--arched-ink);
	line-height: 1.15;
	margin: 0 0 16px;
	font-weight: 500;
}
.arched-h1 { font-size: clamp(32px, 4.6vw, 52px); max-width: 21em; }
.arched-h2 { font-size: clamp(24px, 3vw, 34px); }
.arched-sub {
	font-size: clamp(17px, 2vw, 21px);
	color: var(--arched-ink-soft);
	margin: 0 0 12px;
	max-width: 46em;
}
.arched-lead {
	font-size: 16px;
	line-height: 1.7;
	color: var(--arched-ink-soft);
	max-width: 46em;
	margin: 0 0 24px;
}
.arched-section .arched-center { text-align: center; }
.arched-center .arched-sub,
.arched-center .arched-lead,
.arched-center .arched-h1 { margin-left: auto; margin-right: auto; }

/* ---------- buttons / CTA ---------- */

.arched-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 0;
}
.arched-cta--final { justify-content: center; }
.arched-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: var(--arched-radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.arched-btn:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}
.arched-btn--primary {
	background: var(--arched-blue);
	color: #fff;
}
.arched-btn--primary:hover { background: var(--arched-blue-dark); color: #fff; }
.arched-btn--ghost {
	background: transparent;
	color: var(--arched-ink);
	border-color: var(--arched-ink);
}
.arched-btn--ghost:hover {
	background: var(--arched-ink);
	color: #fff;
}

/* ---------- hero ---------- */

.arched-hero {
	padding: 112px 24px 80px; /* extra top for Blocksy transparent header */
	background:
		linear-gradient(var(--arched-hairline) 1px, transparent 1px),
		linear-gradient(90deg, var(--arched-hairline) 1px, transparent 1px);
	background-size: 56px 56px;
	background-position: center top;
	background-color: var(--arched-paper);
	border-bottom: 1px solid var(--arched-hairline);
}
.arched-hero .arched-wrap { max-width: 900px; }
.arched-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 34px 0 0;
	border: 1px solid var(--arched-hairline);
	background: var(--arched-paper);
	border-radius: var(--arched-radius);
	overflow: hidden;
}
.arched-hero-meta div {
	flex: 1 1 140px;
	padding: 14px 18px;
	border-right: 1px solid var(--arched-hairline);
	min-width: 130px;
}
.arched-hero-meta div:last-child { border-right: 0; }
.arched-hero-meta strong {
	display: block;
	font-size: 20px;
	color: var(--arched-ink);
	font-family: Georgia, serif;
	font-weight: 500;
}
.arched-hero-meta span {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--arched-ink-soft);
}
.arched-source-note {
	font-size: 12.5px;
	color: var(--arched-ink-soft);
	margin: 14px 0 0;
}
.arched-source-note a { color: inherit; }

/* ---------- card grids ---------- */

.arched-grid {
	display: grid;
	gap: 0;
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	overflow: hidden;
	background: var(--arched-hairline);
	margin: 34px 0 0;
}
.arched-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; }
.arched-cell {
	background: var(--arched-paper);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.arched-cell h3 {
	font-size: 17px;
	margin: 0;
	color: var(--arched-ink);
	line-height: 1.35;
}
.arched-cell p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--arched-ink-soft);
	margin: 0;
	flex-grow: 1;
}
.arched-cell .arched-cell-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--arched-blue-dark);
	text-decoration: none;
	margin-top: 6px;
}
.arched-cell .arched-cell-link:hover { text-decoration: underline; }
.arched-cell-num {
	font-family: Georgia, serif;
	font-size: 13px;
	color: var(--arched-ink-soft);
	letter-spacing: 0.1em;
}
a.arched-cell {
	text-decoration: none;
	transition: background-color 0.15s ease;
}
a.arched-cell:hover { background: var(--arched-soft); }
a.arched-cell:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: -2px;
}

/* status badges — honest state signalling */
.arched-badge {
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 3px;
}
.arched-badge--live { background: #e8f0fe; color: var(--arched-blue-dark); }
.arched-badge--soon { background: var(--arched-amber-bg); color: var(--arched-amber-ink); }

/* ---------- data tables (structure page) ---------- */

.arched-table-scroll { overflow-x: auto; margin: 30px 0 0; }
table.arched-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--arched-hairline);
	font-size: 14.5px;
	background: var(--arched-paper);
}
table.arched-table th,
table.arched-table td {
	border: 1px solid var(--arched-hairline);
	padding: 12px 16px;
	text-align: left;
	color: var(--arched-ink-soft);
	vertical-align: top;
}
table.arched-table th {
	background: var(--arched-soft);
	color: var(--arched-ink);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
table.arched-table td strong { color: var(--arched-ink); }

/* ---------- notice / callout ---------- */

.arched-note {
	border: 1px solid var(--arched-hairline);
	border-left: 3px solid var(--arched-blue);
	background: var(--arched-soft);
	border-radius: 0 var(--arched-radius) var(--arched-radius) 0;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--arched-ink-soft);
	margin: 26px 0 0;
	max-width: 46em;
}
.arched-note--soon {
	border-left-color: var(--arched-amber-ink);
}

/* member-state helpers (body class from arched-platform) */
body.arched-member .arched-guest-only { display: none; }
body.arched-guest .arched-member-only { display: none; }

/* ---------- page hero (inner pages) ---------- */

.arched-page-hero {
	padding: 108px 24px 48px;
	border-bottom: 1px solid var(--arched-hairline);
	background: var(--arched-paper);
}
.arched-page-hero .arched-h1 { font-size: clamp(28px, 3.6vw, 42px); }

/* ---------- responsive / a11y ---------- */

@media (max-width: 680px) {
	.arched-section { padding: 52px 18px; }
	.arched-hero { padding: 96px 18px 56px; }
	.arched-hero-meta div { flex-basis: 50%; border-bottom: 1px solid var(--arched-hairline); }
	.arched-cta .arched-btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.arched-btn,
	a.arched-cell { transition: none; }
}

/* =========================================================================
 * University directory + single university page.
 * Appended block — reuses .arched-* tokens/primitives from the base file.
 * ========================================================================= */

.arched-uni-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--arched-hairline);
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	overflow: hidden;
	margin: 28px 0 0;
}
.arched-uni-facts div {
	background: var(--arched-paper);
	padding: 16px 18px;
}
.arched-uni-facts span {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--arched-ink-soft);
	margin: 0 0 6px;
}
.arched-uni-facts strong {
	display: block;
	font-size: 15px;
	color: var(--arched-ink);
	font-weight: 600;
	line-height: 1.4;
}
.arched-pending {
	color: var(--arched-amber-ink);
	font-weight: 500;
	font-style: normal;
}

/* ---------- directory: featured English pair ---------- */

.arched-uni-featured-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 24px 0 0;
}

/* ---------- directory: filter bar ---------- */

.arched-uni-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 28px;
	padding: 16px 0;
	border-top: 1px solid var(--arched-hairline);
	border-bottom: 1px solid var(--arched-hairline);
}
.arched-uni-filter {
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--arched-hairline);
	background: var(--arched-paper);
	color: var(--arched-ink-soft);
	cursor: pointer;
}
.arched-uni-filter:hover { border-color: var(--arched-ink-soft); color: var(--arched-ink); }
.arched-uni-filter.is-active {
	background: var(--arched-blue);
	border-color: var(--arched-blue);
	color: #fff;
}
.arched-uni-filter:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}

/* ---------- directory: full grid ---------- */

.arched-uni-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 8px 0 0;
}

.arched-uni-card {
	display: block;
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	background: var(--arched-paper);
	padding: 20px 20px 18px;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
}
.arched-uni-card:hover { border-color: var(--arched-blue); }
.arched-uni-card:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}
.arched-uni-card h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--arched-ink);
	margin: 10px 0 8px;
	line-height: 1.3;
}
.arched-uni-card-meta {
	font-size: 13.5px;
	color: var(--arched-ink-soft);
	margin: 0 0 2px;
}
.arched-uni-card--featured {
	padding: 28px 26px 24px;
	border-width: 1px;
	background: var(--arched-soft);
}
.arched-uni-card--featured h3 { font-size: 22px; }

/* reveal-on-scroll: JS adds .is-visible; default state is already visible so
   content never depends on JS running. */
.arched-uni-card {
	opacity: 1;
	transform: none;
}
@media (scripting: enabled) {
	.arched-uni-card[data-reveal] {
		opacity: 0;
		transform: translateY(8px);
	}
	.arched-uni-card[data-reveal].is-visible {
		opacity: 1;
		transform: none;
		transition: opacity 220ms ease, transform 220ms ease;
	}
}
@media (prefers-reduced-motion: reduce) {
	.arched-uni-card[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media (max-width: 900px) {
	.arched-uni-facts { grid-template-columns: repeat(2, 1fr); }
	.arched-uni-featured-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.arched-uni-facts { grid-template-columns: 1fr; }
}

/* ---------- directory: pending (draft) card — deliberately non-interactive ---------- */

.arched-uni-card--pending {
	cursor: default;
	background: var(--arched-soft);
	border-style: dashed;
}
.arched-uni-card--pending:hover {
	border-color: var(--arched-hairline); /* explicitly cancel the linked-card hover state */
}
.arched-uni-card-pending {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--arched-ink-soft);
	margin: 10px 0 0;
}
.arched-uni-card-admin-edit {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--arched-blue-dark);
	text-decoration: underline;
}

/* =========================================================================
 * Test Day Guide components. Reuses .arched-* tokens/primitives from the
 * base file (colours, radius, hairline, section padding).
 * ========================================================================= */

.arched-h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 500;
	color: var(--arched-ink);
	margin: 0 0 14px;
}
.arched-uni-tabpanel h4 {
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--arched-blue-dark);
	margin: 28px 0 10px;
}
.arched-uni-tabpanel h4:first-of-type { margin-top: 20px; }

/* ---------- date badge ---------- */

.arched-datebadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--arched-blue-dark);
	background: #e8f0fe;
	border-radius: 999px;
	padding: 5px 12px;
	margin: 0 0 16px;
}

/* ---------- critical alert ---------- */

.arched-alert {
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	padding: 22px 24px;
	background: var(--arched-paper);
}
.arched-alert--critical {
	border-color: #f3c1c1;
	background: #fdf3f3;
}
.arched-alert-title {
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	color: #8a1f1f;
	margin: 0 0 12px;
}
.arched-alert ul {
	margin: 0;
	padding-left: 20px;
	color: var(--arched-ink);
}
.arched-alert li { margin: 0 0 8px; line-height: 1.6; font-size: 14.5px; }
.arched-alert li:last-child { margin-bottom: 0; }

/* ---------- facts strip ---------- */

.arched-facts-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--arched-hairline);
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	overflow: hidden;
	margin: 26px 0 0;
}
.arched-facts-strip div {
	background: var(--arched-paper);
	padding: 20px 14px;
	text-align: center;
}
.arched-facts-strip strong {
	display: block;
	font-family: Georgia, serif;
	font-size: 22px;
	color: var(--arched-ink);
	font-weight: 500;
}
.arched-facts-strip span {
	display: block;
	font-size: 12px;
	color: var(--arched-ink-soft);
	margin-top: 4px;
}

/* ---------- university tabs ---------- */

.arched-uni-tabs { margin-top: 30px; }
.arched-uni-tabs-nav {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--arched-hairline);
}
.arched-uni-tab {
	font-size: 15px;
	font-weight: 600;
	color: var(--arched-ink-soft);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 4px 12px;
	margin-right: 20px;
	cursor: pointer;
}
.arched-uni-tab:hover { color: var(--arched-ink); }
.arched-uni-tab.is-active {
	color: var(--arched-blue-dark);
	border-bottom-color: var(--arched-blue);
}
.arched-uni-tab:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}
.arched-uni-tabpanel + .arched-uni-tabpanel {
	margin-top: 36px;
	padding-top: 30px;
	border-top: 1px dashed var(--arched-hairline);
}
/* When JS is active it removes this margin/border split since only one
   panel shows at a time; harmless left in place when JS is off. */

.arched-uni-tabpanel ul.arched-checklist {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}
.arched-checklist li {
	position: relative;
	padding: 6px 0 6px 26px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--arched-ink-soft);
}
.arched-checklist li strong { color: var(--arched-ink); }
.arched-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--arched-blue);
}

/* ---------- timeline ---------- */

.arched-timeline {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	border-left: 2px solid var(--arched-hairline);
}
.arched-timeline li {
	position: relative;
	padding: 0 0 26px 26px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--arched-ink-soft);
}
.arched-timeline li:last-child { padding-bottom: 0; }
.arched-timeline li::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--arched-paper);
	border: 2px solid var(--arched-blue);
}
.arched-timeline li strong { color: var(--arched-ink); display: block; margin-bottom: 2px; }

/* ---------- printable checklist ---------- */

.arched-print-checklist {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	columns: 2;
	column-gap: 32px;
}
.arched-print-checklist li { break-inside: avoid; margin: 0 0 12px; }
.arched-print-checklist label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	color: var(--arched-ink);
	cursor: pointer;
}
.arched-print-checklist input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

@media print {
	body.single-page .site-header,
	body.single-page .site-footer,
	body.single-page nav,
	body.single-page .arched-cta,
	body.single-page .arched-alert,
	body.single-page .arched-uni-tabs-nav {
		display: none !important;
	}
	.arched-print-checklist { columns: 1; }
	.arched-section { padding: 8px 0 !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.arched-facts-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.arched-facts-strip { grid-template-columns: 1fr 1fr; }
	.arched-print-checklist { columns: 1; }
	.arched-uni-tabs-nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.arched-uni-tab { transition: none; }
}
/* ---------- time-limited announcement banner ---------- */

.arched-banner {
	background: var(--arched-ink);
	padding: 12px 24px;
}
.arched-banner-link {
	display: block;
	max-width: var(--arched-max);
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.arched-banner-link:hover { text-decoration: underline; }
.arched-banner-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
@media (max-width: 560px) {
	.arched-banner { padding: 10px 16px; }
	.arched-banner-link { font-size: 13px; }
}

/* =========================================================================
 * Programme / campus / quota components (university search system Phase 1).
 * ========================================================================= */

.arched-programme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 26px 0 0;
}

.arched-programme-card {
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	background: var(--arched-paper);
	padding: 24px;
}
.arched-programme-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}
.arched-programme-card-head h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	font-weight: 500;
	color: var(--arched-ink);
	margin: 0;
	line-height: 1.3;
}
.arched-badge-lang {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--arched-blue-dark);
	background: #e8f0fe;
	border-radius: 4px;
	padding: 3px 8px;
	white-space: nowrap;
}

.arched-campus-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
}
.arched-campus-badge {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--arched-ink-soft);
	border: 1px solid var(--arched-hairline);
	border-radius: 999px;
	padding: 4px 12px;
}

.arched-quota-block {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px dashed var(--arched-hairline);
}
.arched-quota-block h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--arched-ink-soft);
	margin: 0 0 10px;
}
.arched-quota-total {
	font-size: 15px;
	color: var(--arched-ink);
	margin: 0 0 10px;
}
.arched-quota-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--arched-hairline);
	font-size: 14px;
}
.arched-quota-row:last-of-type { border-bottom: none; }
.arched-quota-row--sub {
	padding-left: 14px;
	color: var(--arched-ink-soft);
	font-size: 13px;
	border-bottom: none;
}
.arched-quota-label { color: var(--arched-ink-soft); }
.arched-quota-value { color: var(--arched-ink); font-weight: 600; }
.arched-quota-note {
	display: block;
	font-size: 11.5px;
	color: var(--arched-ink-soft);
	font-style: italic;
}
.arched-quota-notes {
	font-size: 12.5px;
	color: var(--arched-ink-soft);
	margin: 10px 0 0;
	line-height: 1.6;
}
.arched-quota-verify { margin: 10px 0 0; }

@media (max-width: 680px) {
	.arched-programme-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Design refinement pass — same editorial concept (white/navy/blue, serif
 * headings, hairline structure), executed with more care: soft card
 * elevation instead of flat borders only, a hover lift, a stronger accent
 * on featured content, and a more legible quota block. Shadows stay very
 * light on purpose — this is a refinement of the editorial concept, not a
 * departure from it.
 * ========================================================================= */

:root {
	--arched-shadow-sm: 0 1px 2px rgba(22, 32, 43, 0.04), 0 1px 1px rgba(22, 32, 43, 0.03);
	--arched-shadow-md: 0 6px 20px rgba(22, 32, 43, 0.07), 0 2px 6px rgba(22, 32, 43, 0.05);
	--arched-shadow-lift: 0 14px 32px rgba(22, 32, 43, 0.1), 0 4px 10px rgba(22, 32, 43, 0.06);
}

/* ---------- kicker: small accent tick instead of bare uppercase text ---------- */

.arched-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.arched-kicker::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 2px;
	background: var(--arched-blue);
	border-radius: 1px;
}

/* ---------- cards: soft elevation + hover lift (university directory) ---------- */

.arched-uni-card {
	box-shadow: var(--arched-shadow-sm);
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
a.arched-uni-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--arched-shadow-md);
}
.arched-uni-card--featured {
	position: relative;
	border-top: 3px solid var(--arched-blue);
	box-shadow: var(--arched-shadow-md);
}
a.arched-uni-card--featured:hover {
	box-shadow: var(--arched-shadow-lift);
}
.arched-uni-card--pending {
	box-shadow: none; /* stays visually quiet — it is deliberately non-interactive */
}
.arched-uni-card--pending:hover { transform: none; }

/* ---------- programme cards: same elevation language ---------- */

.arched-programme-card {
	box-shadow: var(--arched-shadow-sm);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.arched-programme-card:hover {
	box-shadow: var(--arched-shadow-md);
	transform: translateY(-2px);
}
.arched-programme-card-head {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--arched-hairline);
	margin-bottom: 16px;
}

/* ---------- quota block: the total is the headline number ---------- */

.arched-quota-block {
	border-radius: var(--arched-radius);
	background: var(--arched-soft);
	padding: 18px 20px;
	margin-top: 22px;
	border-top: none;
}
.arched-quota-block h4 {
	color: var(--arched-blue-dark);
}
.arched-quota-total {
	font-size: 13px;
	color: var(--arched-ink-soft);
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--arched-hairline);
}
.arched-quota-total strong {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	font-weight: 500;
	color: var(--arched-ink);
	line-height: 1.1;
	margin-top: 2px;
}
.arched-quota-row { border-bottom-color: rgba(22, 32, 43, 0.08); }
.arched-quota-row--sub {
	background: var(--arched-paper);
	border-radius: 4px;
	padding: 6px 10px;
	margin-top: 4px;
}

/* ---------- badges: slightly richer ---------- */

.arched-badge-lang,
.arched-campus-badge {
	transition: none; /* purely informational, never implies interactivity */
}
.arched-campus-badge {
	background: var(--arched-paper);
	box-shadow: var(--arched-shadow-sm);
}

/* ---------- featured section heading: give it a touch more presence ---------- */

.arched-uni-featured h2.arched-h2 {
	position: relative;
	padding-left: 16px;
}
.arched-uni-featured h2.arched-h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	border-radius: 2px;
	background: var(--arched-blue);
}

@media (prefers-reduced-motion: reduce) {
	.arched-uni-card,
	.arched-programme-card,
	a.arched-uni-card:hover,
	.arched-programme-card:hover {
		transition: none !important;
		transform: none !important;
	}
}

.arched-uni-card-programme {
	font-size: 12px;
	color: var(--arched-ink-soft);
	font-style: italic;
	margin: 4px 0 0;
	line-height: 1.4;
}

/* ---------- University Guide section (class-guide.php) ---------- */

.arched-guide-section .arched-lead { margin-bottom: 28px; }

.arched-guide-subhead {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--arched-ink);
	margin: 32px 0 12px;
}

.arched-guide-block {
	margin-bottom: 20px;
}
.arched-guide-block h3 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--arched-ink);
	margin: 0 0 8px;
}
.arched-guide-block p {
	color: var(--arched-ink-soft);
	line-height: 1.6;
	margin: 0 0 10px;
}

.arched-guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px 24px;
	margin-bottom: 8px;
}
.arched-guide-grid .arched-guide-block {
	background: var(--arched-soft);
	border-radius: var(--arched-radius);
	padding: 16px 18px;
	margin-bottom: 0;
}

.arched-curriculum { margin-bottom: 20px; }
.arched-curriculum h4 {
	font-size: 15px;
	font-weight: 600;
	color: var(--arched-ink);
	margin: 0 0 10px;
}
.arched-curriculum-years {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}
.arched-curriculum-year {
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	padding: 12px 14px;
	background: var(--arched-paper);
}
.arched-curriculum-year h5 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--arched-blue-dark);
	margin: 0 0 6px;
}
.arched-curriculum-year p {
	font-size: 13px;
	color: var(--arched-ink-soft);
	margin: 0 0 4px;
	line-height: 1.5;
}

.arched-guide-faq-item {
	border-top: 1px solid var(--arched-hairline);
	padding: 14px 0;
}
.arched-guide-faq-item:first-of-type { border-top: none; padding-top: 8px; }
.arched-guide-faq-item h4 {
	font-size: 15px;
	font-weight: 600;
	color: var(--arched-ink);
	margin: 0 0 6px;
}
.arched-guide-faq-item p {
	color: var(--arched-ink-soft);
	line-height: 1.6;
	margin: 0;
}

/* ---------- Comparison tool: ratings + similar universities ---------- */

.arched-guide-ratings-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.arched-guide-rating-row {
	display: grid;
	grid-template-columns: 180px 100px 34px 1fr;
	align-items: center;
	gap: 10px;
}
.arched-guide-rating-label {
	font-size: 13px;
	color: var(--arched-ink);
	font-weight: 500;
}
.arched-guide-rating-bar {
	display: flex;
	gap: 4px;
}
.arched-guide-rating-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--arched-hairline);
}
.arched-guide-rating-dot.is-filled {
	background: var(--arched-blue);
}
.arched-guide-rating-score {
	font-size: 12px;
	color: var(--arched-ink-soft);
	font-variant-numeric: tabular-nums;
}
.arched-guide-rating-note {
	font-size: 12px;
	color: var(--arched-ink-soft);
	font-style: italic;
}
@media (max-width: 640px) {
	.arched-guide-rating-row {
		grid-template-columns: 1fr;
		gap: 4px;
		padding-bottom: 6px;
		border-bottom: 1px solid var(--arched-hairline);
	}
}

.arched-guide-similar-item {
	border-top: 1px solid var(--arched-hairline);
	padding: 14px 0;
}
.arched-guide-similar-item:first-of-type { border-top: none; padding-top: 8px; }
.arched-guide-similar-item h4 {
	font-size: 15px;
	font-weight: 600;
	color: var(--arched-ink);
	margin: 0 0 6px;
}
.arched-guide-similar-item p {
	color: var(--arched-ink-soft);
	line-height: 1.6;
	margin: 0 0 4px;
	font-size: 13px;
}

/* =========================================================================
 * Fact-based comparison tool (Phase A) — /universities-compare/ + the
 * "Add to compare" affordance on programme cards. Same tokens as the rest
 * of the site (--arched-blue / --arched-ink / --arched-hairline etc.), no
 * new palette introduced.
 * ========================================================================= */

.arched-compare-notice {
	background: var(--arched-amber-bg);
	color: var(--arched-amber-ink);
	border-radius: var(--arched-radius);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 20px;
}

/* ---------- picker ---------- */

.arched-compare-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin: 8px 0 18px;
}
.arched-compare-picker-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	padding: 16px;
	cursor: pointer;
	background: var(--arched-paper);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.arched-compare-picker-card:hover { border-color: var(--arched-blue); }
.arched-compare-picker-card:has(.arched-compare-picker-checkbox:checked) {
	border-color: var(--arched-blue);
	box-shadow: 0 0 0 1px var(--arched-blue);
	background: #f5f8ff;
}
.arched-compare-picker-checkbox {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--arched-blue);
}
.arched-compare-picker-checkbox:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}
.arched-compare-picker-card-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
	color: var(--arched-ink);
}
.arched-compare-picker-card-body strong { font-size: 15px; }
.arched-compare-picker-meta {
	color: var(--arched-ink-soft);
	font-size: 12.5px;
}
.arched-compare-picker-hint {
	font-size: 13px;
	color: var(--arched-ink-soft);
	margin: 0 0 16px;
}

/* ---------- "Add to compare" button on programme cards ---------- */

.arched-programme-card-actions {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--arched-hairline);
}
.arched-compare-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--arched-blue-dark);
	background: #e8f0fe;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 7px 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.arched-compare-add-btn:hover { background: #d7e6fd; }
.arched-compare-add-btn:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}
.arched-compare-add-btn.is-active {
	background: var(--arched-blue);
	color: #fff;
}

/* ---------- floating selection tray ---------- */

.arched-compare-tray {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--arched-ink);
	color: #fff;
	border-radius: 999px;
	padding: 10px 12px 10px 20px;
	box-shadow: var(--arched-shadow-lift);
	max-width: calc(100vw - 32px);
	flex-wrap: wrap;
}
.arched-compare-tray-count {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.arched-compare-tray-link {
	padding: 9px 18px;
	font-size: 14px;
}
.arched-compare-tray-clear {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
}
.arched-compare-tray-clear:hover { background: rgba(255, 255, 255, 0.12); }
.arched-compare-tray-clear:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.arched-compare-tray-overflow {
	font-size: 12.5px;
	color: var(--arched-amber-bg);
	width: 100%;
}

/* ---------- comparison table (desktop) ---------- */

.arched-compare-table-wrap {
	overflow-x: auto; /* safety net only — the 3-column cap plus the mobile
	                     card layout below mean this should not normally
	                     trigger, but a very long official programme name
	                     must never break the page layout. */
}
.arched-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.arched-compare-table caption { text-align: left; }
.arched-compare-table th,
.arched-compare-table td {
	border-bottom: 1px solid var(--arched-hairline);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}
.arched-compare-table thead th {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--arched-ink);
	border-bottom: 2px solid var(--arched-ink);
}
.arched-compare-table thead th a { color: var(--arched-ink); }
.arched-compare-th-label {
	width: 220px;
	color: var(--arched-ink-soft);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.arched-compare-table tbody th[scope="row"] {
	color: var(--arched-ink-soft);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}
.arched-compare-table tbody tr:hover { background: var(--arched-soft); }
.arched-compare-fact { color: var(--arched-ink); font-weight: 600; }
.arched-compare-pending {
	color: var(--arched-amber-ink);
	font-style: italic;
	font-weight: 400;
}
/* State is never colour-only: pending values are also italic and carry
   different wording ("Awaiting official publication" etc.) from a normal
   fact, so the distinction survives grayscale/colour-blind viewing. */

/* ---------- mobile: table becomes stacked cards, no horizontal scroll,
   no information hidden ---------- */

@media (max-width: 780px) {
	.arched-compare-table thead { display: none; }
	.arched-compare-table,
	.arched-compare-table tbody,
	.arched-compare-table tr,
	.arched-compare-table td,
	.arched-compare-table th {
		display: block;
		width: 100%;
	}
	.arched-compare-table-wrap { overflow-x: visible; }
	.arched-compare-table tr {
		border: 1px solid var(--arched-hairline);
		border-radius: var(--arched-radius);
		padding: 4px 14px;
		margin: 0 0 14px;
	}
	.arched-compare-table tbody th[scope="row"] {
		border-bottom: none;
		padding: 10px 0 0;
		white-space: normal;
	}
	.arched-compare-table td {
		border-bottom: 1px dashed var(--arched-hairline);
		padding: 4px 0 10px;
	}
	.arched-compare-table td:last-child { border-bottom: none; }
	.arched-compare-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--arched-ink-soft);
		margin: 0 0 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arched-compare-add-btn,
	.arched-compare-picker-card {
		transition: none;
	}
}

/* =========================================================================
 * Interactive campus map (Phase B) — /arched/universities/ directory.
 * Reuses the same tokens as the rest of the site; --arched-map-* is the
 * only new palette, and it is scoped to this widget only (see :root above).
 * ========================================================================= */

.arched-map-widget { margin: 0 0 56px; }

.arched-map-skip-link {
	position: absolute;
	left: -9999px;
}
.arched-map-skip-link:focus {
	position: static;
	display: inline-block;
	margin: 0 0 12px;
}

.arched-map-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 12px;
}
.arched-map-filter {
	font-size: 13px;
	font-weight: 600;
	color: var(--arched-ink-soft);
	background: var(--arched-paper);
	border: 1px solid var(--arched-hairline);
	border-radius: 999px;
	padding: 8px 16px;
	cursor: pointer;
}
.arched-map-filter:hover { border-color: var(--arched-blue); color: var(--arched-blue-dark); }
.arched-map-filter.is-active {
	background: var(--arched-ink);
	border-color: var(--arched-ink);
	color: #fff;
}
.arched-map-filter:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 2px;
}

.arched-map-result-count {
	font-size: 13px;
	color: var(--arched-ink-soft);
	margin: 0 0 20px;
}

.arched-map-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 28px;
	align-items: start;
}
@media (max-width: 900px) {
	.arched-map-layout { grid-template-columns: 1fr; }
}

.arched-map-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 600 / 700;
	max-height: 620px;
	background: var(--arched-paper);
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	overflow: hidden;
}
.arched-map-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.arched-map-land {
	fill: var(--arched-map-land);
	stroke: var(--arched-map-land-line);
	stroke-width: 1;
	stroke-linejoin: round;
}

.arched-map-markers {
	position: absolute;
	inset: 0;
}
.arched-map-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.arched-map-marker::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--arched-blue);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(22, 32, 43, 0.35);
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.arched-map-marker:hover::before { transform: scale(1.15); }
.arched-map-marker:focus-visible {
	outline: 2px solid var(--arched-blue-dark);
	outline-offset: 3px;
	border-radius: 50%;
}
.arched-map-marker.is-selected::before {
	background: var(--arched-map-gold);
	transform: scale(1.35);
}
/* Selection is never colour-only: the matching card also gets a visible
   border + label state change (see .is-highlighted below), and the marker
   itself grows, not just recolours. */

.arched-map-panel {
	background: var(--arched-paper);
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	padding: 20px 22px;
}

.arched-map-detail-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 500;
	color: var(--arched-ink);
	margin: 0 0 4px;
}
.arched-map-detail-meta {
	font-size: 13px;
	color: var(--arched-ink-soft);
	margin: 0 0 14px;
}
.arched-map-detail-programme {
	padding-top: 14px;
	border-top: 1px dashed var(--arched-hairline);
	margin-top: 14px;
}
.arched-map-detail-programme:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.arched-map-detail-programme h5 {
	font-size: 15px;
	font-weight: 600;
	color: var(--arched-ink);
	margin: 0 0 10px;
}
.arched-map-detail-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
	margin: 0 0 14px;
}
.arched-map-detail-facts div { font-size: 13px; }
.arched-map-detail-facts span {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--arched-ink-soft);
	margin: 0 0 2px;
}
.arched-map-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.arched-map-detail-actions .arched-btn { padding: 9px 16px; font-size: 13px; }
.arched-map-detail-source {
	font-size: 12.5px;
	color: var(--arched-blue-dark);
}

.arched-map-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin: 20px 0 0;
}
.arched-map-card {
	border: 1px solid var(--arched-hairline);
	border-radius: var(--arched-radius);
	padding: 20px;
	background: var(--arched-paper);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.arched-map-card:hover { border-color: var(--arched-blue); }
.arched-map-card.is-highlighted {
	border-color: var(--arched-map-gold);
	box-shadow: 0 0 0 1px var(--arched-map-gold);
	background: var(--arched-map-gold-bg);
}

@media (max-width: 640px) {
	.arched-map-detail-facts { grid-template-columns: 1fr 1fr; }
	.arched-map-stage { max-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
	.arched-map-marker::before,
	.arched-map-card {
		transition: none;
	}
}

/* =========================================================================
 * Methodology page (Phase B) — long-form prose, existing tokens only.
 * ========================================================================= */

.arched-methodology { max-width: 760px; }
.arched-methodology .arched-h2 { margin-top: 40px; }
.arched-methodology .arched-h2:first-child { margin-top: 0; }
.arched-methodology .arched-lead { margin-bottom: 0; }