/**
 * Monument Hill Foundation — homepage spacing + light modernization overlay.
 * Original look is saved in /homepage-original-backup-2026-08-24/
 * Disable by renaming mhf-homepage-refresh.php (add .off to the filename).
 */

/* ---------- Site header / compact centered nav ---------- */
.header-container {
	margin: 8px 10px 6px !important;
	border: none !important;
	box-shadow: 0 10px 28px rgba(16, 40, 60, 0.16);
	border-radius: 10px !important;
	overflow: hidden;
}

.container-4 {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: auto !important;
	margin: 0 10px 6px !important;
	padding: 0 !important;
	border: none !important;
	background-color: transparent !important;
	overflow: visible;
}

.bde-wp-menu.wp-menu-1,
.mhf-max-mega-menu-wrap,
#mega-menu-wrap-max_mega_menu_2 {
	width: auto !important;
	max-width: 100%;
	flex: 0 1 auto;
}

.mhf-max-mega-menu-wrap {
	justify-content: center !important;
}

#mega-menu-wrap-max_mega_menu_2 {
	border-radius: 8px;
}

@media (min-width: 769px) {
	#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 {
		display: flex !important;
		justify-content: center;
		width: auto !important;
	}

	#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li.mega-menu-item {
		flex: 0 0 auto;
		text-align: center;
	}

	#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li.mega-menu-item > a.mega-menu-link {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media (max-width: 768px) {
	.bde-wp-menu.wp-menu-1,
	.mhf-max-mega-menu-wrap,
	#mega-menu-wrap-max_mega_menu_2 {
		width: 100% !important;
	}
}

.footer-container {
	border-color: rgba(16, 40, 60, 0.12) !important;
	box-shadow: 0 -4px 18px rgba(16, 40, 60, 0.06);
}

/* ---------- Homepage only ---------- */
body.home .container-2 {
	margin: 0 10px 8px !important;
}

body.home .text-6 {
	color: #1d3d5c !important;
	font-size: clamp(1.55rem, 2.2vw, 2.05rem) !important;
	font-weight: 650 !important;
	letter-spacing: -0.02em;
	line-height: 1.25 !important;
	padding: 0.7rem 0.5rem 0.15rem !important;
}

body.home .container-3 {
	gap: 1rem !important;
	padding: 0.25rem 0.5rem 0.65rem !important;
	align-items: start !important;
}

body.home .container-28,
body.home .container-24 {
	width: 50% !important;
}

body.home .container-24 {
	gap: 1rem !important;
	padding: 0 !important;
}

body.home .grid-for-images-container {
	gap: 10px !important;
}

body.home .grid-for-images-container .oxy-image {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 3 / 2;
	object-fit: cover !important;
	margin: 0 !important;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(16, 40, 60, 0.12);
}

body.home .homepage-rich-text {
	background: #fff;
	padding: 1.05rem 1.2rem 1.15rem;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(16, 40, 60, 0.06);
	/* Color/font must live on the container: the lower block's
	   donation copy is a bare text node, not a <p>, so Oxygen's
	   p { color: blue } never reaches it. */
	color: #0000ff;
	font-size: 20px;
	line-height: 1.62;
}

body.home .homepage-rich-text p:empty {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.home .homepage-rich-text p:not(.confucius) {
	color: inherit;
	line-height: 1.62 !important;
	margin: 0 0 0.7rem !important;
}

body.home .homepage-rich-text a {
	display: inline-block;
	background: #0e8ec8;
	color: #fff !important;
	font-size: 0.92rem !important;
	font-weight: 650 !important;
	padding: 0.38rem 0.85rem;
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1.2;
	vertical-align: baseline;
}

body.home .homepage-rich-text a:hover,
body.home .homepage-rich-text a:focus {
	background: #0b739f;
	color: #fff !important;
}

body.home .confucius {
	color: green !important;
	font-style: italic;
	line-height: 1.45 !important;
	border-left: 4px solid #0e8ec8;
	padding: 0.55rem 0.85rem !important;
	margin: 0.85rem 0 0 !important;
	background: #f3fafc;
	border-radius: 0 8px 8px 0;
}

body.home .container-29 {
	gap: 0.7rem !important;
	padding: 0.85rem 1rem 1rem !important;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(16, 40, 60, 0.06);
	align-items: stretch !important;
}

body.home .Page-Header-Text {
	width: 100% !important;
	color: #1d3d5c !important;
	font-size: 1.35rem !important;
	text-align: left !important;
	letter-spacing: -0.01em;
}

body.home .container-30 {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.85rem 1.25rem !important;
	width: 100% !important;
}

body.home .container-30 .oxy-image,
body.home .container-30 .support-image {
	width: auto !important;
	height: 68px !important;
	max-width: 170px !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	background: #fff;
	padding: 6px 10px;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(16, 40, 60, 0.08);
}

body.home .grant-rich-text,
body.home .grant-rich-text p {
	width: 100% !important;
	max-width: none !important;
	margin: 0.15rem 0 0 !important;
	line-height: 1.5 !important;
	text-align: center;
}

body.home .container-36 {
	width: calc(100% - 1.2rem) !important;
	max-width: none !important;
	margin: 0.35rem auto 1rem !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-template-rows: auto !important;
	align-items: stretch !important;
	justify-items: stretch !important;
	justify-content: stretch !important;
	gap: 10px !important;
}

body.home .container-36 .oxy-image {
	width: 100% !important;
	height: 220px !important;
	max-width: none !important;
	aspect-ratio: auto;
	object-fit: cover !important;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(16, 40, 60, 0.12);
}

/* Portrait Picture4 — show the full image instead of cropping it */
body.home .container-36 .oxy-image-33-139,
body.home .container-36 img[src*="Picture4"] {
	object-fit: contain !important;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 300px;
	justify-self: center;
	align-self: center;
}

@media (max-width: 1023px) {
	body.home .container-28,
	body.home .container-24 {
		width: 100% !important;
	}

	body.home .container-36 {
		grid-template-columns: 1fr 1fr !important;
		width: 100% !important;
	}

	body.home .Page-Header-Text {
		text-align: center !important;
	}
}

@media (max-width: 479px) {
	body.home .container-36 {
		grid-template-columns: 1fr !important;
	}

	body.home .grid-for-images-container {
		grid-template-columns: 1fr !important;
	}

	.container-4 {
		margin-left: 6px !important;
		margin-right: 6px !important;
	}
}

/* ---------- Label + indented dash note (any page) ----------
 * <p class="mhf-label-dash">
 *   <span>Bold heading</span>
 *   <span>Note text (do not type the dash)</span>
 * </p>
 */
.mhf-label-dash {
	margin: 0 0 0.7rem;
}

.mhf-label-dash > span:first-of-type {
	display: block;
	font-weight: 700;
}

.mhf-label-dash > span:nth-of-type(2) {
	display: block;
	font-weight: 400;
	margin-left: 1.25em;
	padding-left: 0.9em;
	text-indent: -0.9em;
}

.mhf-label-dash > span:nth-of-type(2)::before {
	content: "- ";
}