/*
Theme Name: WP-Jazz Bursaries
Theme URI: http://www.solostream.com
Author: Solostream
Author URI: http://www.solostream.com/
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
Text Domain: wp-jazz
Description: Bursaries Africa's adaptation of the WP-Jazz bursary/magazine-listing theme (originally built for ScholarshipVine), modernized for the Customizer, HTML5, and mobile-first responsive layout. Colors/logo are set via Appearance > Customize after activation - no code changes needed to rebrand.

Released under GPL: http://www.opensource.org/licenses/gpl-license.php
*/

/* -------------------[ Custom Properties ]------------------- */

:root {
	--s4d-accent: #ee8f0f;
	--s4d-link: #2e6484;
	--s4d-link-hover: #14384a;
	--s4d-header-bg: #ffffff;
	--s4d-topnav-bg: #33566e;
	--s4d-logo-height: 70px;
	--s4d-text: #333333;
	--s4d-muted: #666666;
	--s4d-border: #dddddd;
	--s4d-bg: #f4f4f2;
	--s4d-surface: #ffffff;
	--s4d-font: arial, helvetica, sans-serif;
	--s4d-heading-font: georgia, times, serif;
	--s4d-max-width: 1180px;
}

/* -------------------[ Reset & Base ]------------------- */

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: var(--s4d-bg);
	color: var(--s4d-text);
	font-family: var(--s4d-font);
	font-size: 15px;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
}

a, a:link, a:visited {
	color: var(--s4d-link);
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: var(--s4d-link-hover);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--s4d-heading-font);
	font-weight: normal;
	line-height: 1.3;
	color: #222;
}

ul, ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -------------------[ Top Navigation ]------------------- */

#topnav {
	background: var(--s4d-topnav-bg);
	color: #fff;
}

#topnav .limit {
	max-width: var(--s4d-max-width);
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	position: relative;
}

.nav-toggle-bars::before {
	content: "";
	position: absolute;
	top: -7px;
}

.nav-toggle-bars::after {
	content: "";
	position: absolute;
	top: 7px;
}

.topnav-collapse {
	width: 100%;
	display: none;
}

.topnav-collapse.is-open {
	display: block;
}

#topnav-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#topnav-menu li {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#topnav-menu li a {
	display: block;
	padding: 12px 5px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
}

#topnav-menu li a:hover {
	color: var(--s4d-accent);
	text-decoration: none;
}

#topsearch {
	margin: 10px 0;
}

.search-form {
	display: flex;
}

.search-form input[type="search"] {
	border: 0;
	padding: 8px 10px;
	width: 100%;
	font-size: 13px;
}

.search-form button {
	border: 0;
	background: var(--s4d-accent);
	color: #fff;
	padding: 0 12px;
	cursor: pointer;
}

/* -------------------[ Header ]------------------- */

#header {
	background: var(--s4d-header-bg);
	padding: 15px;
	border-bottom: 1px solid var(--s4d-border);
}

#head-content {
	max-width: var(--s4d-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.header-align-left #head-content {
	justify-content: space-between;
}

#sitetitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.header-align-left #sitetitle {
	align-items: flex-start;
	text-align: left;
}

#sitetitle h1,
#sitetitle .title {
	margin: 0;
	font-size: 28px;
}

#sitetitle h1 a,
#sitetitle .title a {
	color: var(--s4d-text);
}

#sitetitle .description {
	margin: 4px 0 0;
	color: var(--s4d-muted);
	font-size: 13px;
}

#header-graphic img {
	display: block;
	max-height: 70px;
	width: auto;
}

.custom-logo-link {
	display: inline-block;
}

.custom-logo-link img {
	display: block;
	max-width: 100%;
	max-height: var(--s4d-logo-height);
	width: auto;
	height: auto;
}

/* -------------------[ Category Navigation ]------------------- */

#nav {
	background: #fff;
	border-bottom: 1px solid var(--s4d-border);
}

#nav ul {
	max-width: var(--s4d-max-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

#nav li a {
	display: block;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: bold;
	color: var(--s4d-text);
}

#nav li a:hover {
	color: var(--s4d-accent);
	text-decoration: none;
}

/* -------------------[ Page Frame ]------------------- */

#wrap {
	max-width: var(--s4d-max-width);
	margin: 0 auto;
	padding: 20px 15px 0;
}

#page {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#contentleft {
	min-width: 0;
}

.col-3 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.maincontent {
	min-width: 0;
	background: var(--s4d-surface);
	padding: 20px;
	/* No border here on purpose: on the homepage/archives this wraps a stream of
	   .post-card articles that each already draw their own 1px border (see
	   .post-card below) - an outer border here stacked a second, ~20px-offset
	   rectangle around the whole column for the full page height, which is the
	   double-border effect. The white background (--s4d-surface) against the
	   page's light-gray background (--s4d-bg) is enough to frame this area on
	   its own, matching how the sidebar boxes on the right (#contentright's
	   aside elements) are framed - individual blocks get a border, wrappers
	   around several of them don't. */
}

#sidebarleft {
	background: var(--s4d-surface);
	padding: 15px;
	border: 1px solid var(--s4d-border);
}

#contentright {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#sidebar,
#sidebar-bottom-left,
#sidebar-bottom-right {
	background: var(--s4d-surface);
	padding: 15px;
	border: 1px solid var(--s4d-border);
}

#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#sidebar > div {
	margin-bottom: 20px;
}

#sidebar > div:last-child {
	margin-bottom: 0;
}

.widgettitle {
	font-family: var(--s4d-heading-font);
	font-size: 16px;
	border-bottom: 2px solid var(--s4d-accent);
	padding-bottom: 6px;
	margin-bottom: 10px;
}

.region-tab-list li,
.tips-list li {
	padding: 6px 0 6px 16px;
	border-bottom: 1px solid var(--s4d-border);
	position: relative;
	font-size: 13px;
}

.region-tab-list li:last-child,
.tips-list li:last-child {
	border-bottom: 0;
}

.region-tab-list li::before,
.tips-list li::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	color: var(--s4d-accent);
}

@media (min-width: 768px) {
	#topnav .limit {
		flex-wrap: nowrap;
	}

	.nav-toggle {
		display: none;
	}

	.topnav-collapse {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: auto;
		flex: 1;
	}

	#topnav-menu ul {
		display: flex;
	}

	#topnav-menu li {
		border-top: 0;
		position: relative;
	}

	#topnav-menu li a {
		padding: 14px 12px;
	}

	#topnav-menu .sub-menu {
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		background: var(--s4d-topnav-bg);
		min-width: 200px;
		list-style: none;
		margin: 0;
		padding: 0;
		z-index: 10;
	}

	#topnav-menu li:hover > .sub-menu,
	#topnav-menu li.is-open > .sub-menu {
		display: block;
	}

	#topsearch {
		margin: 0 0 0 15px;
	}

	.search-form input[type="search"] {
		width: 160px;
	}

	#page {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	#nav {
		flex: 1 1 100%;
	}

	#contentleft {
		flex: 1;
	}

	#contentright {
		width: 300px;
		flex-shrink: 0;
	}

	.col-3 {
		flex-direction: row;
	}

	.maincontent {
		flex: 1;
	}

	#sidebarleft {
		width: 220px;
		flex-shrink: 0;
	}
}

/* -------------------[ Banner Ads ]------------------- */

.banner468,
#head-banner468 {
	text-align: center;
	margin-bottom: 15px;
}

/* -------------------[ In-Content Ad Zones ]------------------- */
/*
 * min-height reserves space for the ad before its script/iframe finishes loading, so the
 * surrounding paragraphs don't jump or overlap when it renders in (the layout-shift problem
 * seen with the previous plugin-inserted ad units). min-height is a floor, not a cap - if the
 * ad turns out taller than reserved, the box grows and pushes content below it down (never
 * overlapping); overflow:hidden here is just a defensive backstop against a creative that
 * uses internal absolute positioning/negative margins to bleed outside its own box, not a
 * general height clamp.
 *
 * js/ad-zones.js (enqueued in functions.php) removes any leftover empty space once a
 * responsive ad's real size is known, but only while the zone is off-screen, so shrinking it
 * never causes a visible jump - see that file for the full explanation.
 *
 * This CSS class only applies to the two in-content zones (top/end - see
 * inc/template-tags.php's s4d_ad_zone_html()). The header/above-content/sidebar ad slots use
 * their own separate markup in header.php/banner468.php/sidebar.php and are unaffected by it.
 *
 * --s4d-ad-min-height is mobile-first (matches this theme's existing 768px breakpoint - see
 * functions.php/style.css elsewhere): a shorter default under 768px since mobile ad formats
 * (e.g. 300x250, 320x100) tend to be shorter than common desktop formats (336x280, 728x90
 * leaderboard) - this is the starting estimate js/ad-zones.js then corrects for real.
 */
.s4d-ad-zone {
	--s4d-ad-min-height: 250px;
	min-height: var( --s4d-ad-min-height );
	max-width: 100%;
	overflow: hidden;
	margin: 20px auto;
	text-align: center;
	clear: both;
	transition: min-height 0.15s ease;
}

@media (min-width: 768px) {
	.s4d-ad-zone {
		--s4d-ad-min-height: 280px;
	}
}

/* -------------------[ Featured Tabs & Side Tabs ]------------------- */

.featured-tabs,
.side-tabs {
	margin-bottom: 20px;
}

.tabs-nav {
	list-style: none;
	margin: 0 0 15px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--s4d-border);
}

.tabs-nav .tab-link {
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 8px 14px;
	margin-bottom: -2px;
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;
	color: var(--s4d-muted);
}

.tabs-nav .tab-link.active,
.tabs-nav .tab-link:hover {
	color: var(--s4d-accent);
	border-bottom-color: var(--s4d-accent);
}

.is-tabbed .tab-panel {
	display: none;
}

.is-tabbed .tab-panel.active {
	display: block;
}

.feature-entry {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--s4d-border);
}

.feature-entry:last-child {
	border-bottom: 0;
}

.feature-photo img {
	float: left;
	margin: 0 12px 8px 0;
	max-width: 140px;
}

/* -------------------[ Posts / Cards ]------------------- */

.post {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--s4d-border);
}

.post:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.post-thumb {
	display: block;
	float: left;
	margin: 0 15px 10px 0;
	max-width: 200px;
}

.entry h2 {
	font-size: 20px;
	margin: 0 0 6px;
}

.scholarship-facts {
	font-size: 13px;
	color: var(--s4d-muted);
	margin: 0 0 8px;
}

.postdate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	color: var(--s4d-muted);
	margin-top: 8px;
}

.ad-badge {
	display: inline-block;
	background: #f0ad4e;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	padding: 1px 5px;
	margin-left: 6px;
	border-radius: 2px;
	vertical-align: middle;
}

.s4d-status-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.4;
	padding: 2px 8px;
	border-radius: 3px;
	vertical-align: middle;
	white-space: nowrap;
}

.s4d-status-badge--open {
	background: #2e7d32;
	color: #fff;
}

.s4d-status-badge--closed {
	background: #b3261e;
	color: #fff;
}

.s4d-status-badge-full {
	display: none;
}

.s4d-status-badge-short {
	display: inline;
}

@media (min-width: 768px) {
	.s4d-status-badge-full {
		display: inline;
	}

	.s4d-status-badge-short {
		display: none;
	}
}

.more-link {
	font-weight: bold;
}

/* -------------------[ Homepage Post Stream ]------------------- */

.post-stream {
	display: flex;
	flex-direction: column;
}

.post-card {
	display: flex;
	flex-wrap: wrap;
}

/* Featured cards: posts with no scholarship meta get an image + trimmed
   excerpt so they read as editorial features rather than scholarship
   listings. The thumbnail floats so the excerpt wraps around it and
   reclaims the full card width once the text runs past the image. */
.post-card--featured {
	display: block;
	background: var(--s4d-surface);
	border: 1px solid var(--s4d-border);
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	margin-bottom: 20px;
	overflow: hidden;
}

.post-card--featured:last-child {
	margin-bottom: 0;
}

.post-card--featured .entry {
	padding: 15px 15px 12px;
}

.post-card--featured .entry h2 {
	margin: 0 0 14px;
}

.post-card-thumb {
	display: block;
	float: left;
	width: 140px;
	height: 140px;
	margin: 0 18px 10px 0;
	overflow: hidden;
	border-radius: 3px;
}

.post-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card-excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: justify;
	color: var(--s4d-text);
}

.post-card--featured .postdate {
	margin: 0;
	padding: 10px 15px;
	background: var(--s4d-bg);
	border-top: 1px dashed var(--s4d-border);
	clear: both;
}

/* Listing cards: posts with scholarship meta show a title, a two-column
   sponsor/degree + deadline/study/course-start facts grid, and a footer
   bar with the last-updated date and a Read More link. No thumbnail or
   excerpt — these are opportunity listings, not editorial features. */
.post-card--listing {
	background: var(--s4d-surface);
	border: 1px solid var(--s4d-border);
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	margin-bottom: 16px;
	overflow: hidden;
}

.post-card--listing:last-child {
	margin-bottom: 0;
}

.post-card--listing .entry {
	flex: 1 1 100%;
	padding: 15px 15px 12px;
}

.post-card--listing .entry h2 {
	font-size: 18px;
	margin: 0 0 10px;
}

.scholarship-info {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px 15px;
}

.scholarship-info-col {
	flex: 1 1 0;
	min-width: 0;
}

.scholarship-info-col:first-child {
	flex: 0 1 40%;
}

.scholarship-info-col p {
	margin: 0 0 4px;
}

.scholarship-info-col p:last-child {
	margin-bottom: 0;
}

.scholarship-sponsor {
	font-style: italic;
}

.post-card--listing .postdate {
	flex-basis: 100%;
	margin: 0;
	padding: 10px 15px;
	background: var(--s4d-bg);
	border-top: 1px solid var(--s4d-border);
}

.post-card .postdate .left::after {
	content: "|";
	margin-left: 8px;
	color: var(--s4d-border);
}

.post-card .more-link::after {
	content: "\2192";
	margin-left: 4px;
}

@media (max-width: 480px) {
	.post-card-thumb {
		width: 90px;
		height: 90px;
	}
}

/* -------------------[ Single Post ]------------------- */

.auth-bio {
	background: #f7f7f5;
	border: 1px solid var(--s4d-border);
	padding: 12px;
	margin-bottom: 20px;
}

.auth-bio img {
	float: left;
	margin-right: 12px;
	border-radius: 50%;
}

.singlepost h1 {
	font-size: 26px;
	margin: 0 0 8px;
}

.postinfo {
	font-size: 12px;
	color: var(--s4d-muted);
	margin: 0 0 15px;
}

.scholarship-quick-facts {
	background: #fbf7ee;
	border: 1px solid #e9dfc4;
	padding: 15px;
	margin-bottom: 20px;
}

.scholarship-quick-facts dl {
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 15px;
}

.scholarship-quick-facts dt {
	font-weight: bold;
	color: var(--s4d-muted);
}

.scholarship-quick-facts dd {
	margin: 0;
}

.cats,
.tags {
	font-size: 13px;
	margin: 15px 0 0;
}

.related-scholarships {
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid var(--s4d-border);
}

.related-scholarships h3 {
	font-size: 18px;
	margin: 0 0 8px;
}

.related-scholarships ul {
	list-style: disc;
	margin: 0;
	padding-left: 1.2em;
}

/* -------------------[ Comments ]------------------- */

.comments-area {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid var(--s4d-border);
}

.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.commentlist .children {
	list-style: none;
	margin: 0 0 0 30px;
	padding: 0;
}

.commentlist article,
.commentlist .comment-body {
	padding: 12px 0;
	border-bottom: 1px solid var(--s4d-border);
}

.comment-form p {
	margin: 0 0 12px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 500px;
	padding: 8px;
	border: 1px solid var(--s4d-border);
}

.comment-form textarea {
	max-width: 100%;
}

.form-submit input {
	background: var(--s4d-accent);
	color: #fff;
	border: 0;
	padding: 10px 20px;
	cursor: pointer;
}

/* -------------------[ Pagination ]------------------- */

.navigation.pagination {
	margin-top: 20px;
	text-align: center;
}

.navigation.pagination .nav-links a,
.navigation.pagination .nav-links span {
	display: inline-block;
	padding: 6px 12px;
	margin: 0 2px;
	border: 1px solid var(--s4d-border);
}

.navigation.pagination .nav-links .current {
	background: var(--s4d-accent);
	color: #fff;
	border-color: var(--s4d-accent);
}

/* -------------------[ Sitemap ]------------------- */

.sitemap-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.sitemap-col {
	flex: 1;
	min-width: 220px;
}

.sitemap-col-wide {
	flex: 2;
}

/* -------------------[ Footer ]------------------- */

#footer {
	max-width: var(--s4d-max-width);
	margin: 20px auto 0;
	padding: 15px;
	font-size: 13px;
	color: var(--s4d-muted);
	text-align: center;
	border-top: 1px solid var(--s4d-border);
}

.footer-copyright,
.footer-disclaimer {
	margin: 0 0 8px;
}

.footer-links-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 10px;
}

.footer-links-list li {
	position: relative;
	padding-right: 10px;
	border-right: 1px solid var(--s4d-border);
}

.footer-links-list li:last-child {
	padding-right: 0;
	border-right: 0;
}