/* Chris Hani: Highland plateau style (page-scoped) */
body.chrishani {
	background:
		radial-gradient(circle at 12% 8%, rgba(239, 68, 68, 0.14), transparent 34%),
		radial-gradient(circle at 88% 26%, rgba(59, 130, 246, 0.14), transparent 36%),
		linear-gradient(180deg, #1f2937 0%, #111827 100%);
	color: #e8eef5;
}

body.chrishani .hero {
	position: relative;
	padding: 24px 14px 0;
	background:
		linear-gradient(90deg, rgba(69, 10, 10, 0.95), rgba(30, 58, 138, 0.92)),
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.08) 0,
			rgba(255, 255, 255, 0.08) 8px,
			rgba(0, 0, 0, 0.08) 8px,
			rgba(0, 0, 0, 0.08) 16px
		);
	border-bottom: 3px solid #ef4444;
}

body.chrishani .hero h1 {
	margin: 0 0 16px;
	color: #f6f9fc;
	font-size: clamp(1.8rem, 2.8vw, 2.5rem);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.24);
}

body.chrishani .navbar {
	background: rgba(9, 16, 26, 0.9);
	border-top: 1px solid rgba(92, 122, 164, 0.35);
}

body.chrishani .navbar a {
	color: #dbebf8;
	border-radius: 8px;
	font-weight: 600;
}

body.chrishani .navbar a:hover {
	background: #7f1d1d;
	color: #fecaca;
}

body.chrishani main {
	width: min(1040px, calc(100% - 22px));
	margin: 20px auto 24px;
	padding: 18px;
	border-radius: 16px;
	border: 1px solid #3c4f66;
	background: linear-gradient(145deg, #1a2533, #131c27);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.33);
}

body.chrishani .province-content h2 {
	margin: 4px 0 14px;
	color: #f3f8fc;
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

body.chrishani .province-content h2::after {
	content: '';
	display: block;
	width: 88px;
	height: 4px;
	margin-top: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #ef4444, #3b82f6);
}

body.chrishani .province-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

body.chrishani .province-content li {
	border-radius: 12px;
	border: 1px solid #415b79;
	background: linear-gradient(145deg, #182b3f, #152636);
	box-shadow: 0 7px 16px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
}

body.chrishani .province-content li::before,
body.chrishani .province-content li::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

body.chrishani .province-content li::before {
	left: 12px;
	background: #ef4444;
}

body.chrishani .province-content li::after {
	left: 24px;
	background: #3b82f6;
}

body.chrishani .province-content a {
	display: block;
	padding: 12px 12px 12px 42px;
	color: #e9f2fb;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.3;
}

body.chrishani .province-content a:hover {
	color: #fecaca;
	background: linear-gradient(145deg, #1e364f, #183148);
}

body.chrishani .province-content li.is-highlighted {
	transform: translateY(-2px);
	border-color: #ef4444;
}

body.chrishani footer {
	background: #0b121c;
	color: #ceddea;
	border-top: 1px solid #2f4259;
}

body.chrishani footer a {
	color: #b6d3e8;
}

body.chrishani footer a:hover {
	color: #fecaca;
}

body.chrishani .footer-bottom {
	color: #8ea9bf;
}

@media (max-width: 640px) {
	body.chrishani main {
		width: calc(100% - 12px);
		margin: 12px auto 14px;
		padding: 12px;
	}

	body.chrishani .province-content ul {
		grid-template-columns: 1fr;
	}
}