/* ==========================================================================
   The Hope Delivery Foundation — brand overrides
   --------------------------------------------------------------------------
   Loaded after cleenhearts-theme.css. Everything here exists because the
   foundation's real logo is a circular brush lockup, where the template was
   built around a wide 160x50 horizontal one.

   Kept in its own file rather than merged into the theme so that
   assets/brand/reskin.py's mechanical colour pass and these hand-written
   rules never have to share a diff.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------
   The lockup is square, so constraining width the way the template did makes
   it render at its full height and forces a ~200px header. Height is the
   controlling dimension here; width follows.
   -------------------------------------------------------------------------- */

.main-header__logo img {
	width: auto;
	height: 96px;
	max-width: none;
}

.main-header__inner {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* The nav, not the logo, is what set the header's height: the template gave
   each menu item 51px of vertical padding to clear a 50px-tall wordmark plus
   generous air. Against a 76px circle that produced a 158px bar. Re-tuned so
   the nav column and the logo column come out the same height. */
.main-menu .main-menu__list > li {
	padding-top: 48px;
	padding-bottom: 48px;
}

.sticky-header--cloned .main-menu .main-menu__list > li {
	padding-top: 26px;
	padding-bottom: 26px;
}

/* Six menu items, not five.
   The template's 43px gaps were measured for Home / About / What We Do /
   Gallery / Contact. Adding "Volunteer" made a sixth item and the row grew
   into the Donate button, which sits to its right. Tightened rather than
   dropped, because every one of the six is a real destination. */
.main-menu .main-menu__list > li + li {
	margin-left: 30px;
}

@media (max-width: 1599px) {
	.main-menu .main-menu__list > li + li {
		margin-left: 24px;
	}
}

@media (min-width: 1200px) and (max-width: 1399px) {
	.main-menu .main-menu__list > li + li {
		margin-left: 17px;
	}
}

/* The sticky clone shows a smaller mark so the bar stays out of the way. */
.sticky-header--cloned .main-header__logo img {
	height: 58px;
}

.sticky-header--cloned .main-header__inner {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* The circle reads as heavier than a wordmark at the same height, and the
   grid toggle was spaced for a lockup that ended in a straight edge. */
.main-header__logo {
	gap: 26px;
}

.main-header__sidebar-btn {
	margin-left: 0;
}

@media (max-width: 1599px) {
	.main-header__sidebar-btn {
		margin-left: 0;
	}
}

@media (max-width: 1850px) {
	.main-header__sidebar-btn {
		margin-left: 0;
	}
}

@media (max-width: 1199px) {
	.main-header__logo img {
		height: 66px;
	}

	.main-header__inner {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

@media (max-width: 767px) {
	.main-header__logo img {
		height: 58px;
	}

	.main-header__logo {
		gap: 0;
	}
}

@media (max-width: 375px) {
	.main-header__logo img {
		height: 52px;
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-widget__logo img {
	width: auto;
	height: 128px;
	max-width: 100%;
}

.footer-widget__logo {
	margin-bottom: 28px;
}

@media (max-width: 767px) {
	.footer-widget__logo img {
		height: 104px;
	}
}

/* --------------------------------------------------------------------------
   Dark surfaces — the mobile drawer and the offcanvas sidebar both sit on
   deep purple, so they take the cream-typed lockup.
   -------------------------------------------------------------------------- */

.mobile-nav__content .logo-box img,
.sidebar-one__logo img {
	width: auto;
	height: 96px;
	max-width: 100%;
}

.mobile-nav__content .logo-box {
	margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Five Core Programs
   --------------------------------------------------------------------------
   The template's support-card carries an image and a title and nothing else,
   which cannot express a program that has a summary line and a paragraph.
   Purpose-built, but drawn entirely from the theme's own tokens so it sits in
   the same visual language as the sections either side of it.
   -------------------------------------------------------------------------- */

.hdf-programs {
	position: relative;
	background-color: var(--cleenhearts-white, #fff);
}

.hdf-programs__intro {
	max-width: 760px;
	margin: -14px auto 50px;
	text-align: center;
	color: var(--cleenhearts-text, #757277);
}

.hdf-programs__grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, 1fr);
}

/* Five items into three columns leaves a two-item last row. Rather than let
   it sit left-aligned under a full row, the last two are nudged inward by
   half a column each so the block stays centred. */
.hdf-programs__grid > .hdf-program:nth-child(4) {
	grid-column: 1 / span 1;
	transform: translateX(calc(50% + 15px));
}

.hdf-programs__grid > .hdf-program:nth-child(5) {
	grid-column: 2 / span 1;
	transform: translateX(calc(50% + 15px));
}

.hdf-program {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--cleenhearts-white2, #F5F1E9);
	transition: transform 400ms ease, box-shadow 400ms ease;
}

.hdf-program:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(var(--cleenhearts-base-rgb, 54, 22, 80), 0.12);
}

.hdf-program__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.hdf-program__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}

.hdf-program:hover .hdf-program__media img {
	transform: scale(1.06);
}

/* The icon disc straddles the image edge, echoing the circular logo. */
.hdf-program__icon {
	position: absolute;
	right: 24px;
	bottom: -26px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--cleenhearts-secondary, #D2A851);
	color: var(--cleenhearts-base, #361650);
	font-size: 26px;
	line-height: 1;
}

.hdf-program__body {
	position: relative;
	flex: 1 1 auto;
	padding: 34px 30px 34px;
}

.hdf-program__index {
	display: block;
	margin-bottom: 6px;
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--cleenhearts-purple, #783CAA);
}

.hdf-program__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.3;
	color: var(--cleenhearts-base, #361650);
}

.hdf-program__lead {
	margin: 0 0 14px;
	font-weight: 600;
	color: var(--cleenhearts-purple, #783CAA);
}

.hdf-program__text {
	margin: 0;
	color: var(--cleenhearts-text, #757277);
}

@media (max-width: 1199px) {
	.hdf-programs__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Six cells, five cards: the last one centres across both columns. */
	.hdf-programs__grid > .hdf-program:nth-child(4) {
		grid-column: auto;
		transform: none;
	}

	.hdf-programs__grid > .hdf-program:nth-child(5) {
		grid-column: 1 / span 2;
		transform: none;
		max-width: calc(50% - 15px);
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.hdf-programs__grid {
		grid-template-columns: 1fr;
	}

	.hdf-programs__grid > .hdf-program:nth-child(5) {
		grid-column: auto;
		max-width: none;
	}

	.hdf-program__body {
		padding: 30px 24px;
	}
}

/* --------------------------------------------------------------------------
   Causes carousel
   --------------------------------------------------------------------------
   The carousel overlaps the appeal banner's deep purple ground, so the
   section heading inherits the default near-black purple and disappears into
   it. The template never hit this because it had no heading here.
   -------------------------------------------------------------------------- */

.donations-one .sec-title__title,
.donations-one .sec-title__title__inner {
	color: var(--cleenhearts-white, #fff);
}

.donations-one .sec-title__tagline {
	color: var(--cleenhearts-secondary, #D2A851);
}

.donation-card__text {
	margin: 0 0 22px;
	color: var(--cleenhearts-text, #757277);
}

/* --------------------------------------------------------------------------
   Donate call to action
   --------------------------------------------------------------------------
   The template hid .main-header__btn below 1350px, which on this site meant
   a phone had no way to give from the header — and on a donation-funded
   charity site most traffic is a phone. It stays, compacting instead of
   disappearing, and the mobile drawer gets one of its own.
   -------------------------------------------------------------------------- */

@media (max-width: 1350px) {
	.main-header__btn {
		display: inline-block;
	}
}

@media (max-width: 1199px) {
	.main-header__btn {
		padding: 12px 20px 12px 12px;
	}

	.main-header__btn .cleenhearts-btn__text {
		font-size: 15px;
	}
}

/* Below this the toggler, the logo and a labelled button stop fitting
   together, so the button becomes the icon alone. It keeps an accessible
   name through aria-label. */
@media (max-width: 480px) {
	/* The theme absolutely positions the icon box, so simply hiding the label
	   collapsed the button to a 16px sliver — well under the 44px minimum
	   touch target. The icon becomes the button instead. */
	.main-header__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
	}

	.main-header__btn .cleenhearts-btn__icon-box,
	.main-header__btn .cleenhearts-btn__icon-box__inner {
		position: static;
		width: 48px;
		height: 48px;
	}

	.main-header__btn .cleenhearts-btn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
		margin-left: 0;
	}
}

.mobile-nav__donate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 26px;
	padding: 15px 22px;
	border-radius: 100px;
	background-color: var(--cleenhearts-secondary, #D2A851);
	color: var(--cleenhearts-base, #361650);
	font-family: var(--cleenhearts-heading-font, "Quicksand", sans-serif);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: background-color 250ms ease, color 250ms ease;
}

.mobile-nav__donate:hover,
.mobile-nav__donate:focus-visible {
	background-color: var(--cleenhearts-white, #fff);
	color: var(--cleenhearts-base, #361650);
}