/* gcf-programme-menu — a flat, icon-led list of programme links (no
   category grouping/headings — client asked to drop those), flowed into
   columns (megamenu panel). Intrinsic column width: the browser picks the
   count from the panel width (3 in the 1140px desktop panel, fewer as it
   narrows). */

.gcf-programme-menu__flat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 260px;
	column-gap: 40px;
}

.gcf-programme-menu__flat-item {
	break-inside: avoid;
	margin: 0 0 4px;
}

.gcf-programme-menu__flat-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #21293b;
	text-decoration: none;
	transition: color 180ms ease;
}

/* Text-colour-only hover, matching the theme's own dropdowns (their item
   hover background is the ElementsKit default: transparent). */
.gcf-programme-menu__flat-item a:hover {
	color: #0093d0;
}

.gcf-programme-menu__icon-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #e6f4fb;
	color: #21293b;
}

/* Chip backgrounds reuse the badge palette (see .gcf-badge--* in
   campaigns.css) so the menu speaks the same color language as the cards. */
.gcf-programme-menu__icon-chip--cancer-blood {
	background: #f2bfd4;
}

.gcf-programme-menu__icon-chip--heart {
	background: #8fd9c4;
}

.gcf-programme-menu__icon-chip--specialist-clinics {
	background: #b9a8d8;
}

.gcf-programme-menu__icon-chip--newborns-child-wellness {
	background: #f0a868;
}

.gcf-programme-menu__icon-chip svg {
	width: 15px;
	height: 15px;
}

/* Programme cards + grid — the programmes archive listing
   (design reference: static-site/programs.html). */

.gcf-programme-grid {
	display: grid;
	/* 340px floor = 3 columns at desktop container widths. */
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 24px;
}

/* Archive intro band. */
.gcf-programme-archive-intro {
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 1.65;
	color: #5c6270;
}

/* "How program funding works" steps strip (archive). */
.gcf-programme-steps {
	margin-top: 64px;
}

.gcf-programme-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.gcf-programme-step {
	background: #ffffff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 6px 24px rgba(33, 41, 59, 0.08);
}

.gcf-programme-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: #eaf6fc;
	color: #0093d0;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 14px;
}

.gcf-programme-step__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #21293b;
}

.gcf-programme-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #5c6270;
}

.gcf-programme-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(33, 41, 59, 0.1);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.gcf-programme-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(33, 41, 59, 0.14);
}

.gcf-programme-card__media {
	position: relative;
	height: 170px;
}

.gcf-programme-card__media--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
}

.gcf-programme-card__img,
.gcf-programme-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gcf-programme-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

.gcf-programme-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex: 1;
}

.gcf-programme-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #21293b;
}

.gcf-programme-card__blurb {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #5c6270;
	flex: 1;
}

.gcf-programme-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	border-top: 1px solid rgba(33, 41, 59, 0.1);
	padding-top: 14px;
}

.gcf-programme-card__stat {
	font-size: 13px;
	color: #5c6270;
}

.gcf-programme-card__more {
	font-size: 14px;
	font-weight: 600;
	color: #0093d0;
	white-space: nowrap;
}

.gcf-programme-archive-pagination {
	margin-top: 40px;
	text-align: center;
}

.gcf-programme-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0 4px;
	border: 1px solid rgba(33, 41, 59, 0.14);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: #21293b;
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease;
}

.gcf-programme-archive-pagination .page-numbers.current,
.gcf-programme-archive-pagination .page-numbers:hover {
	background: #0093d0;
	border-color: #0093d0;
	color: #ffffff;
}



/* Megamenu panel hosting the programme menu: cap + center the ekit
   full-width panel (which is 100vw anchored to the nav wrapper and would
   otherwise overflow the right edge), and give it the design-system
   panel look. Desktop only - the mobile drawer keeps ekit's own layout. */

@media (min-width: 1025px) {
	/* The panel is absolutely positioned, so it centers on its nearest
	   positioned ancestor - by default the nav-menu widget, which sits
	   left of page center in the header layout. Make the menu wrappers
	   static (scoped to the nav that hosts the programme menu) so the
	   panel anchors to the page-centered header bar container instead.
	   Other dropdowns anchor to their own <li> and are unaffected. */
	.elementskit-menu-container:has(.gcf-programme-menu),
	.elementor-widget-ekit-nav-menu:has(.gcf-programme-menu),
	.e-con:has(> .elementor-widget-ekit-nav-menu .gcf-programme-menu) {
		position: static !important;
	}

	.elementskit-megamenu-panel:has(.gcf-programme-menu) {
		/* ekit anchors the panel to the header bar, whose bottom sits 25px
		   below the nav item; pull it level with the theme's dropdowns.
		   ponytail: 25px = header row bottom padding + menu centring slack. */
		top: calc(100% - 25px) !important;
		left: 50% !important;
		width: min(1140px, calc(100vw - 48px)) !important;
		transform: translate(-50%, -10px) !important;
	}

	.elementskit-megamenu-panel:has(.gcf-programme-menu) > .elementor {
		background: #ffffff;
		border-radius: 20px;
		box-shadow: 0 16px 40px rgba(33, 41, 59, 0.14);
		overflow: hidden;
	}

	.elementskit-megamenu-has:hover .elementskit-megamenu-panel:has(.gcf-programme-menu) {
		transform: translate(-50%, 0) !important;
	}
}

/* Programme detail sidebar - "Outcomes so far" stats card
   (design reference: static-site/programme-detail.html). */

.gcf-programme-outcomes {
	background: #ffffff;
	border: 1px solid rgba(33, 41, 59, 0.1);
	border-radius: 16px;
	padding: 28px;
}

.gcf-programme-outcomes__heading {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5c6270;
}

.gcf-programme-outcomes__stat + .gcf-programme-outcomes__stat {
	margin-top: 20px;
}

.gcf-programme-outcomes__value {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	color: #21293b;
}

.gcf-programme-outcomes__value::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	background: rgba(33, 41, 59, 0.2);
	margin: 10px 0;
}

.gcf-programme-outcomes__label {
	font-size: 14px;
	line-height: 1.5;
	color: #5c6270;
}

.gcf-programme-fund-heading {
	margin-bottom: 4px;
}

.gcf-programme-fund-intro {
	margin: 0 0 12px;
	font-size: 14px;
	color: #5c6270;
}

/* Compact campaign cards - the "Campaigns in this programme" grid on the
   programme detail page: 4-up, shorter media, tighter type. The sidebar
   donate card is the page's CTA, so these cards stay lightweight teasers. */

.gcf-campaign-grid--compact {
	--gcf-grid-columns: 4;
}

.gcf-campaign-grid--compact .gcf-campaign-card__media {
	height: 130px;
}

.gcf-campaign-grid--compact .gcf-campaign-card__body {
	padding: 16px;
}

.gcf-campaign-grid--compact .gcf-campaign-card__title {
	font-size: 16px;
}

.gcf-campaign-grid--compact .gcf-campaign-card__blurb {
	display: none;
}

@media (max-width: 1024px) {
	.gcf-campaign-grid--compact {
		--gcf-grid-columns: 2;
	}
}

@media (max-width: 640px) {
	.gcf-campaign-grid--compact {
		--gcf-grid-columns: 1;
	}
}

/* Programme detail body sections (render_programme_sections()). */

.gcf-programme-section {
	margin-top: 40px;
}

/* One shared surface, each tier a row - matches the site's established
   "How You Can Support" list convention (see e.g. the Cancer programme's own
   hand-authored copy), not a boxed card per tier. */
.gcf-programme-tiers__table {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba(33, 41, 59, 0.08);
	overflow: hidden;
	margin-top: 20px;
}

.gcf-programme-tier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(33, 41, 59, 0.08);
	transition: background-color 180ms ease;
}

.gcf-programme-tier:last-child {
	border-bottom: none;
}

a.gcf-programme-tier:hover {
	background-color: #f6f9fb;
}

.gcf-programme-tier__text {
	min-width: 0;
}

.gcf-programme-tier__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #21293b;
}

.gcf-programme-tier__desc {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: #5c6270;
	margin-top: 2px;
}

.gcf-programme-tier__price {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-left: 16px;
}

.gcf-programme-tier__amount {
	font-weight: 700;
	color: #0093d0;
	font-size: 14px;
	white-space: nowrap;
}

.gcf-programme-tier__more {
	color: #0093d0;
	font-size: 14px;
}

.gcf-programme-highlights__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
}

.gcf-programme-highlights__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
	color: #21293b;
}

.gcf-programme-highlights__check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 999px;
	background: #eaf6fc;
	color: #0093d0;
	font-size: 12px;
}

.gcf-programme-callout__box {
	background: #eaf6fc;
	border-radius: 16px;
	padding: 28px 32px;
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.6;
	color: #21293b;
}

.gcf-programme-wishlist__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
}

.gcf-programme-wishlist__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: #ffffff;
	border-radius: 12px;
	padding: 14px 20px;
	box-shadow: 0 2px 12px rgba(33, 41, 59, 0.06);
}

.gcf-programme-wishlist__label {
	font-size: 15px;
	color: #21293b;
}

.gcf-programme-wishlist__amount {
	font-size: 15px;
	font-weight: 700;
	color: #0093d0;
	white-space: nowrap;
}

.gcf-programme-highlights__title {
	display: block;
	color: #21293b;
	font-size: 16px;
	margin-bottom: 2px;
}

.gcf-programme-related {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 32px 0;
}

.gcf-programme-related__label {
	color: rgba(33, 41, 59, 0.65);
	font-size: 14px;
	margin-right: 4px;
}

.gcf-programme-related__chip {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid rgba(33, 41, 59, 0.12);
	background: #ffffff;
	color: #21293b;
	font-size: 14px;
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}

.gcf-programme-related__chip:hover {
	border-color: #0093d0;
	color: #0093d0;
}

/* Native WP [gallery] shortcode output on a programme post. */
.post-entry .gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 16px 0 0;
}

.post-entry .gallery-item {
	margin: 0;
}

.post-entry .gallery-icon a {
	display: block;
	cursor: zoom-in;
}

.post-entry .gallery-icon img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
}

.post-entry .gallery-caption {
	display: none;
}

@media (max-width: 767px) {
	.post-entry .gallery-columns-4,
	.post-entry .gallery-columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}