/* Joe Gqabi: Mountain frontier style (page-scoped) */
body.joegqabi {
	background:
		radial-gradient(circle at 11% 11%, rgba(16, 185, 129, 0.14), transparent 34%),
		radial-gradient(circle at 87% 23%, rgba(99, 102, 241, 0.13), transparent 36%),
		linear-gradient(180deg, #0f172a 0%, #1f2937 100%);
	color: #e8eef5;
}

body.joegqabi .hero {
	position: relative;
	padding: 24px 14px 0;
	background:
		linear-gradient(90deg, rgba(6, 78, 59, 0.95), rgba(49, 46, 129, 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 #10b981;
}

body.joegqabi .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.joegqabi .navbar {
	background: rgba(9, 16, 26, 0.9);
	border-top: 1px solid rgba(92, 122, 164, 0.35);
}

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

body.joegqabi .navbar a:hover {
	background: #065f46;
	color: #bbf7d0;
}

body.joegqabi 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.joegqabi .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.joegqabi .province-content h2::after {
	content: '';
	display: block;
	width: 88px;
	height: 4px;
	margin-top: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #10b981, #6366f1);
}

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

body.joegqabi .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.joegqabi .province-content li::before,
body.joegqabi .province-content li::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

body.joegqabi .province-content li::before {
	left: 12px;
	background: #10b981;
}

body.joegqabi .province-content li::after {
	left: 24px;
	background: #6366f1;
}

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

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

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

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

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

body.joegqabi footer a:hover {
	color: #bbf7d0;
}

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

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

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