:root {
	--sa-ink: #1a1a1a;
	--sa-muted: #6c757d;
	--sa-surface: #f5f5f6;
	--sa-accent: #8a1c2b;
}

body {
	font-family: 'Play', Arial, sans-serif;
	color: var(--sa-ink);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

main {
	display: block;
	min-height: 60vh;
	padding-top: 1.5rem;
	padding-bottom: 3rem;
}

a {
	color: var(--sa-accent);
}

a:hover {
	color: var(--sa-ink);
}

/* ---------- Navbar ---------- */
.navbar-custom {
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.master-logo {
	width: 180px;
	height: auto;
}

.navbar-custom .nav-link {
	color: #000;
	font-weight: bold;
}

.navbar-custom .nav-link.active,
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
	color: var(--sa-accent);
}

/* ---------- Hero / carousel ---------- */
.hero-carousel .carousel-item {
	height: 46vh;
	min-height: 260px;
	background-size: cover;
	background-position: center;
}

.hero-carousel .carousel-caption {
	background: rgba(0, 0, 0, 0.45);
	border-radius: 8px;
	bottom: 2rem;
}

/* ---------- Home page ---------- */
.home-portrait {
	border-radius: 50px;
	margin-top: 1rem;
	max-width: 100%;
}

.ul-style li {
	font-size: 1.25rem;
	margin-bottom: 0.25rem;
}

/* Pure-CSS auto-scrolling photo marquee (replaces the old jQuery/slick gallery) */
.marquee-wrap {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: sa-marquee 40s linear infinite;
}

.marquee-wrap:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-track img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
}

@keyframes sa-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
		overflow-x: auto;
	}
}

/* ---------- Cards (awards / education) ---------- */
.info-card {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	border: none;
	height: 100%;
}

.info-card .info-card-icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/* ---------- Timeline (career / training / NGO positions) ---------- */
.timeline {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.timeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20px;
	width: 3px;
	background: var(--sa-surface);
}

.timeline-item {
	position: relative;
	padding-left: 55px;
	margin-bottom: 2rem;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sa-accent);
	border: 3px solid #fff;
	box-shadow: 0 0 0 3px var(--sa-surface);
}

.timeline-item .timeline-date {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--sa-accent);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.timeline-item .timeline-body {
	background: var(--sa-surface);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-top: 0.35rem;
}

/* ---------- Feature blocks (charity / organisations) ---------- */
.feature-block img {
	max-width: 100%;
	height: auto;
}

/* ---------- Contact form ---------- */
.honeypot-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Footer ---------- */
footer {
	background-color: var(--sa-surface);
	padding: 2.5rem 0 1.5rem;
	margin-top: 3rem;
}

footer a {
	color: var(--sa-ink);
}

footer h4 {
	font-size: 1.05rem;
}