/* Imani Christian School: blue + yellow gradient theme.
   Load AFTER css/styles.min.css so these rules override the template. */

:root {
	--imani-blue-deep: #062341;
	--imani-blue: #0e4884;
	--imani-blue-light: #1c69ba;
	--imani-yellow: #f1b31c;
	--imani-yellow-soft: #ffd35c;
	--imani-yellow-hover: #d99f12;

	--grad-blue: linear-gradient(120deg, var(--imani-blue-deep) 0%, var(--imani-blue) 55%, var(--imani-blue-light) 100%);
	--grad-yellow: linear-gradient(135deg, var(--imani-yellow-soft) 0%, var(--imani-yellow) 100%);
	/* Blue does the heavy lifting; yellow appears as a warm glow so white text stays readable */
	--grad-hero: radial-gradient(circle at 100% 100%, rgba(241, 179, 28, .55) 0, rgba(241, 179, 28, 0) 45%), var(--grad-blue);
}

/* Header: blue gradient with a thin yellow underline */
.header--front {
	background: var(--grad-blue) !important;
	border-bottom: 4px solid var(--imani-yellow);
}
.main-menu__link,
.aside-menu__link,
.mobile-menu__link { color: #fff !important; }
.main-menu__link:hover { color: var(--imani-yellow-soft) !important; }

/* Buttons: yellow gradient, blue text */
.button--squared,
.button--primary,
.subscribe-form__submit {
	background: var(--grad-yellow) !important;
	color: var(--imani-blue-deep) !important;
	border: 0 !important;
	font-weight: 700;
	transition: filter .2s ease, transform .2s ease;
}
.button--squared:hover,
.button--primary:hover,
.subscribe-form__submit:hover {
	filter: brightness(.93);
	transform: translateY(-1px);
}
.button:focus-visible,
a:focus-visible,
input:focus-visible {
	outline: 3px solid var(--imani-yellow-soft);
	outline-offset: 3px;
}

/* Gradient sections */
.about-us--blue { background: var(--grad-blue) !important; }
.icons-section { background: var(--imani-blue) !important; }
.payment-section-custom { background: var(--grad-hero) !important; }
.subscribe { background: var(--grad-blue) !important; }
.footer { background: var(--imani-blue-deep) !important; border-top: 4px solid var(--imani-yellow); }

/* Small accents */
.heading__pre-title { color: var(--imani-yellow) !important; }
.about-us--blue .heading__pre-title,
.payment-section-custom .heading__pre-title { color: var(--imani-yellow-soft) !important; }
.icon-item__icon { fill: var(--imani-yellow) !important; color: var(--imani-yellow) !important; }
.projects-masonry__badge {
	background: var(--grad-yellow) !important;
	color: var(--imani-blue-deep) !important;
	font-weight: 700;
}

/* Donation cards */
.bank-card {
	background: #fff;
	border-top: 5px solid var(--imani-yellow);
	border-radius: 8px;
	padding: 25px;
	margin-bottom: 20px;
	box-shadow: 0 6px 20px rgba(6, 35, 65, .18);
}
.bank-card h4 {
	color: var(--imani-blue);
	border-bottom: 2px solid var(--imani-yellow);
	padding-bottom: 10px;
	margin-bottom: 15px;
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
	.button, .subscribe-form__submit { transition: none; }
}

/* ---------- Hero slides: real photos, cropped to keep faces visible ---------- */
.promo-slider__item--style-1 .img--bg { object-position: center 35%; }
.promo-slider__item--style-2 .img--bg { object-position: center 25%; }

/* Blue overlay so hero text stays readable over any photo */
.promo-slider__item { position: relative; }
.promo-slider__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6,35,65,.85) 0%, rgba(14,72,132,.55) 55%, rgba(14,72,132,.15) 100%);
	z-index: 1;
	pointer-events: none;
}
.promo-slider__item .container { position: relative; z-index: 2; }

/* ---------- Project cards: readable text over photos ---------- */
.projects-masonry__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6,35,65,.92) 0%, rgba(6,35,65,.7) 55%, rgba(6,35,65,.35) 100%);
	z-index: 1;
	pointer-events: none;
}
.projects-masonry__inner { position: relative; z-index: 2; }
.projects-masonry__title,
.projects-masonry__title a { color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.projects-masonry__title a:hover { color: var(--imani-yellow-soft) !important; }
.projects-masonry__inner p,
.projects-masonry__details-item { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ---------- Tighter vertical spacing (removes the big empty gaps) ---------- */
.section { padding-top: 60px; padding-bottom: 60px; }
.section.no-padding-top { padding-top: 0; }
.margin-bottom { margin-bottom: 24px; }
.heading { margin-bottom: 24px; }
@media (max-width: 767px) {
	.section { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------- Objectives photo frame ---------- */
.objectives-photo {
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	border-bottom: 5px solid var(--imani-yellow);
	box-shadow: 0 6px 20px rgba(6, 35, 65, .18);
	aspect-ratio: 4 / 3;
	max-height: 460px;
}
.objectives-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@media (max-width: 991px) { .objectives-photo { max-height: 320px; margin-top: 24px; } }

/* ---------- Auto-fading hero (used by js/imani-slider.js) ---------- */
.promo-slider.is-auto { position: relative; height: calc(100vh - 90px); min-height: 480px; overflow: hidden; }
.promo-slider.is-auto .promo-slider__item {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity 1s ease, visibility 1s ease;
}
.promo-slider.is-auto .promo-slider__item.is-active { opacity: 1; visibility: visible; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.promo-slider.is-auto .promo-slider__item { transition: none; }
}

/* ---------- Impact cards: three across on desktop, wrapping on smaller screens ---------- */
.impact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 24px;
	align-items: stretch;
}
.impact-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border-bottom: 5px solid var(--imani-yellow);
	box-shadow: 0 6px 20px rgba(6, 35, 65, .12);
	transition: transform .25s ease, box-shadow .25s ease;
}
.impact-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(6, 35, 65, .2); }
.impact-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.impact-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.impact-card__badge {
	position: absolute; left: 16px; bottom: 16px;
	padding: 5px 14px; border-radius: 999px;
	background: var(--grad-yellow); color: var(--imani-blue-deep);
	font-weight: 700; font-size: .85rem;
}
.impact-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.impact-card__title { margin: 0 0 12px; font-size: 1.35rem; }
.impact-card__title a { color: var(--imani-blue); }
.impact-card__title a:hover { color: var(--imani-blue-light); }
.impact-card__body p { color: #4a5568; line-height: 1.6; margin: 0 0 12px; }
.impact-card__meta { color: var(--imani-blue) !important; font-size: .95rem; }
.impact-card__link {
	margin-top: auto; padding-top: 8px;
	font-weight: 700; color: var(--imani-blue);
}
.impact-card__link:hover { color: var(--imani-yellow-hover); }
@media (prefers-reduced-motion: reduce) { .impact-card { transition: none; } .impact-card:hover { transform: none; } }

/* ---------- Infrastructure needs: numbered project cards ---------- */
.needs { background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); }
.needs-grid {
	list-style: none; margin: 0; padding: 0;
	counter-reset: need;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 24px;
}
.need-card {
	position: relative;
	counter-increment: need;
	display: flex; flex-direction: column;
	padding: 28px 24px 24px 24px;
	background: #fff;
	border-radius: 10px;
	border-left: 6px solid var(--imani-yellow);
	box-shadow: 0 6px 20px rgba(6, 35, 65, .1);
	transition: transform .25s ease, box-shadow .25s ease;
}
.need-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(6, 35, 65, .18); }
.need-card::before {
	content: counter(need, decimal-leading-zero);
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin-bottom: 14px;
	border-radius: 50%;
	background: var(--grad-blue); color: var(--imani-yellow-soft);
	font-weight: 700; font-size: 1rem;
}
.need-card__title { margin: 0 0 8px; font-size: 1.3rem; color: var(--imani-blue); }
.need-card p { margin: 0 0 14px; color: #4a5568; line-height: 1.6; }
.need-card__link { margin-top: auto; font-weight: 700; color: var(--imani-blue); }
.need-card__link:hover { color: var(--imani-yellow-hover); }
.needs-cta { margin-top: 36px; }
@media (prefers-reduced-motion: reduce) { .need-card { transition: none; } .need-card:hover { transform: none; } }

/* ---------- Remove the big gap between News cards and "Partner With Us" ---------- */
main .section.blog {
	padding-bottom: 40px !important;
	margin-bottom: 0 !important;
}
main .section.blog .row.offset-margin { margin-bottom: 0 !important; }
main .section.blog .blog-item { margin-bottom: 0; }
main #support { padding-top: 40px; margin-top: 0; }

/* ---------- Global fix: consistent spacing between EVERY section ---------- */
main > section {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
main > section.section {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}
main > section.section.no-padding-top { padding-top: 0 !important; }
/* Some template helper classes add extra space under rows/cards */
main > section .margin-bottom { margin-bottom: 24px; }
main > section .margin-bottom-30 { margin-bottom: 24px; }
main > section .margin-bottom-20 { margin-bottom: 16px; }
@media (max-width: 767px) {
	main > section.section { padding-top: 40px !important; padding-bottom: 40px !important; }
}