/* KwaZulu-Natal page styles */
body.kwazulunatal {
	background: #f6faf7;
	color: #0e2b22;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	text-align: left;
}
.kwazulunatal main{
	margin: 0;
	padding-bottom: 24px;
}
.site-header{
	background:#fff;
	border-bottom:1px solid #e4ede8;
}
.header-inner{
	max-width: 1100px;
	margin: 0 auto;
	padding: 18px 20px 12px;
}
.site-header .logo{
	font-weight:700;
	font-size:24px;
	color:#0b6b47;
	margin-bottom:6px;
}
.kwazulunatal nav{
	background:#fff;
}
.kwazulunatal .navbar ul{
	flex-wrap:wrap;
	justify-content:flex-start;
	gap:10px;
	padding:0;
}
.kwazulunatal .navbar a{
	color:#0f2f24;
	padding:8px 12px;
	border-radius:6px;
}
.kwazulunatal .navbar a:hover{
	background:#f0f4f2;
}
.navbar .dropdown{
	position:relative;
}
.navbar .dropdown-toggle{
	background:transparent;
	border:1px solid transparent;
	color:#0f2f24;
	padding:8px 12px;
	border-radius:6px;
	font: inherit;
	cursor:pointer;
}
.navbar .dropdown-toggle:focus{
	outline:2px solid #0b6b47;
	outline-offset:2px;
}
.navbar .dropdown-menu{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	list-style:none;
	margin:0;
	padding:6px 0;
	min-width:220px;
	border-radius:10px;
	box-shadow:0 14px 30px rgba(9, 37, 27, 0.12);
	border:1px solid #e2ebe6;
	z-index:10;
}
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown:focus-within .dropdown-menu,
.navbar .dropdown.is-open .dropdown-menu{
	display:block;
}
.navbar .dropdown-menu li{
	margin:0;
}
.navbar .dropdown-menu a,
.navbar .dropdown-menu span{
	display:block;
	padding:8px 12px;
	color:#113326;
	text-decoration:none;
	text-align:left;
	white-space:nowrap;
}
.navbar .dropdown-menu span{
	color:#4c6b5e;
	cursor:default;
}
.hero{
	background: linear-gradient(120deg,#0b6b47 0%,#1f8f6b 70%,#2aa982 100%);
	color:#fff;
	padding:56px 0;
}
.hero-content{
	max-width:1100px;
	margin:0 auto;
	padding:0 20px;
	text-align:left;
}
.hero .eyebrow{
	text-transform:uppercase;
	letter-spacing:1.8px;
	font-size:12px;
	margin:0 0 10px;
	opacity:0.85;
}
.hero h1{
	margin:0 0 10px;
	font-size:38px;
}
.hero p{
	margin:0 0 20px;
	font-size:18px;
	max-width:540px;
}
.hero-actions{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 18px;
	border-radius:8px;
	text-decoration:none;
	font-weight:600;
}
.btn.primary{
	background:#ffffff;
	color:#0b6b47;
}
.btn.secondary{
	background:transparent;
	color:#ffffff;
	border:1px solid rgba(255,255,255,0.7);
}
.section{
	max-width:1100px;
	margin:0 auto;
	padding:26px 20px 0;
}
.section h2{
	margin:0 0 12px;
	color:#0b6b47;
	font-size:24px;
}
.province-content{
	text-align:left;
}
.districts{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:12px;
	list-style:none;
	padding:0;
	margin:0;
}
.districts li{
	background:#fff;
	border:1px solid #e2ebe6;
	padding:12px 14px;
	border-radius:10px;
	box-shadow:0 6px 14px rgba(15, 47, 36, 0.06);
}
.districts a{
	color:#0b6b47;
	font-weight:600;
	text-decoration:none;
}
.news{
	text-align:left;
}
.news-list{
	list-style:none;
	padding:0;
	margin:0;
}
.news-list li{
	background:#fff;
	border:1px solid #e2ebe6;
	border-left:4px solid #0b6b47;
	padding:10px 12px;
	border-radius:10px;
	margin-bottom:10px;
}
.quick-links{
	text-align:left;
}
.quick-links-list{
	list-style:none;
	padding:0;
	margin:0;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:12px;
}
.quick-links-list a{
	background:#fff;
	border:1px solid #e2ebe6;
	color:#0f2f24;
	padding:12px 14px;
	border-radius:10px;
	text-decoration:none;
	font-weight:600;
	box-shadow:0 6px 14px rgba(15, 47, 36, 0.06);
}
.quick-links-list a:hover{
	border-color:#0b6b47;
	color:#0b6b47;
}
@media(max-width:640px){
	.navbar .dropdown-menu{
		position:static;
		box-shadow:none;
		border-radius:0;
		border:0;
	}
	.navbar .dropdown-toggle{
		width:100%;
		text-align:left;
	}
	.kwazulunatal .navbar ul{
		justify-content:center;
	}
	.hero h1{
		font-size:30px;
	}
}
@media(max-width:480px){
	.hero h1{ font-size:26px }
	.section{ padding:20px 16px 0 }
}