/* ==========================================================================
   Metameta Uplift
   Loaded after halpes-template (and after the theme's 99999 inline colour slot).

   Breakpoints follow the theme's *recompiled* Bootstrap 4 variables, not stock BS4:
   sm 576 / md 768 / lg 1025 / xl 1200. The desktop-vs-mobile header swap happens at
   1025px (sass/bootstrap/_variables.scss:167). Using 992 anywhere would put this
   stylesheet 33px out of phase with the theme's own header.
   ========================================================================== */

:root {
	/* Brand teal is kept for decoration only. White on #15C8A0 is 2.14:1, which fails
	   WCAG AA (needs 4.5:1) -- it is the theme's default button and is currently
	   illegible to low-vision users. */
	--mm-brand: #15C8A0;
	--mm-brand-tint: #E7F8F4;

	/* Accessible action colour: #0B7A60 on white is 5.3:1. Used for anything a donor
	   has to read or click. */
	--mm-action: #0B7A60;
	--mm-action-hover: #095C49;

	--mm-ink: #1F2230;          /* 7.4:1 on brand teal, 15.4:1 on white */
	--mm-body: #4A5250;         /* darkened from the theme's #707876 (4.53:1) */
	--mm-line: #E5EEEC;
	--mm-surface: #FFFFFF;
	--mm-surface-alt: #F6FAF9;

	--mm-focus: #0B5FFF;

	--mm-radius: 14px;
	--mm-radius-sm: 10px;
	--mm-shadow: 0 18px 50px rgba(31, 34, 48, .18);

	--mm-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   Accessibility baseline
   The theme removes every focus ring in sass/template/_base.scss:9-16 and again
   with !important in _plugins.scss:361,425. Restoring it needs equal force.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mm-focus) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

.mm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--mm-ink);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.mm-skip:focus {
	left: 8px;
	top: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.mm-reveal,
	.mm-drawer__dialog,
	.mm-bar {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Scroll reveal (IntersectionObserver-driven; no animate.css)
   -------------------------------------------------------------------------- */

.mm-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
.mm-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Donation drawer
   Bootstrap 4's .modal ships with the theme but carries no theme styling at all,
   so everything below is additive -- there is no parent specificity to fight.
   -------------------------------------------------------------------------- */

.mm-drawer .mm-drawer__dialog {
	max-width: 520px;
	margin: 0 0 0 auto;
	min-height: 100%;
	display: flex;
	align-items: stretch;
}

.mm-drawer.fade .mm-drawer__dialog {
	transform: translateX(40px);
	transition: transform .32s ease-out;
}
.mm-drawer.show .mm-drawer__dialog {
	transform: none;
}

.mm-drawer__content {
	border: 0;
	border-radius: 0;
	box-shadow: var(--mm-shadow);
	font-family: var(--mm-font);
	color: var(--mm-body);
	width: 100%;
}

.mm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	border-bottom: 1px solid var(--mm-line);
}

.mm-drawer__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 800;
	color: var(--mm-ink);
}

.mm-drawer__close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mm-line);
	border-radius: 50%;
	background: #fff;
	color: var(--mm-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.mm-drawer__close:hover {
	background: var(--mm-surface-alt);
}

.mm-drawer__body {
	padding: 24px 28px 32px;
	overflow-y: auto;
}

.mm-field {
	border: 0;
	padding: 0;
	margin: 0 0 22px;
}

.mm-field__legend {
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mm-ink);
	margin-bottom: 10px;
	padding: 0;
	width: auto;
	border: 0;
}

/* Frequency toggle */
.mm-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 5px;
	background: var(--mm-surface-alt);
	border-radius: var(--mm-radius-sm);
}
.mm-toggle__opt {
	border: 0;
	background: transparent;
	border-radius: 7px;
	padding: 11px 8px;
	font-weight: 700;
	font-size: .95rem;
	color: var(--mm-body);
	cursor: pointer;
}
.mm-toggle__opt.is-active {
	background: #fff;
	color: var(--mm-ink);
	box-shadow: 0 1px 4px rgba(31, 34, 48, .12);
}
.mm-toggle__opt[disabled] {
	opacity: .55;
	cursor: not-allowed;
}
.mm-toggle__soon {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 20px;
	background: var(--mm-brand-tint);
	color: var(--mm-action);
	font-size: .65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: middle;
}

/* Amount tiers */
.mm-tiers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.mm-tier {
	padding: 15px 10px;
	border: 2px solid var(--mm-line);
	border-radius: var(--mm-radius-sm);
	background: #fff;
	font-weight: 800;
	font-size: 1rem;
	color: var(--mm-ink);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.mm-tier:hover {
	border-color: var(--mm-action);
}
.mm-tier.is-active {
	border-color: var(--mm-action);
	background: var(--mm-brand-tint);
}

.mm-custom {
	display: block;
	margin-top: 14px;
}
.mm-custom__label {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	color: var(--mm-body);
	margin-bottom: 6px;
}
.mm-custom__wrap {
	display: flex;
	align-items: center;
	border: 2px solid var(--mm-line);
	border-radius: var(--mm-radius-sm);
	overflow: hidden;
	background: #fff;
}
.mm-custom__wrap:focus-within {
	border-color: var(--mm-action);
}
.mm-custom__sym {
	padding: 0 12px;
	font-weight: 800;
	color: var(--mm-ink);
	background: var(--mm-surface-alt);
	align-self: stretch;
	display: flex;
	align-items: center;
}
.mm-custom__input {
	flex: 1 1 auto;
	border: 0;
	padding: 13px 14px;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--mm-ink);
	width: 100%;
	background: #fff;
}
.mm-custom__input:focus {
	outline: none;
}

.mm-impact {
	margin: 12px 0 0;
	padding: 11px 14px;
	background: var(--mm-brand-tint);
	border-radius: var(--mm-radius-sm);
	color: var(--mm-ink);
	font-size: .92rem;
	font-weight: 600;
	min-height: 44px;
}

/* Payment methods */
.mm-methods {
	display: grid;
	gap: 10px;
}
.mm-method {
	text-align: left;
	padding: 14px 16px;
	border: 2px solid var(--mm-line);
	border-radius: var(--mm-radius-sm);
	background: #fff;
	cursor: pointer;
	transition: border-color .18s ease;
}
.mm-method:hover {
	border-color: var(--mm-action);
}
.mm-method.is-active {
	border-color: var(--mm-action);
	background: var(--mm-brand-tint);
}
.mm-method__label {
	display: block;
	font-weight: 800;
	color: var(--mm-ink);
	font-size: 1rem;
}
.mm-method__note {
	display: block;
	margin-top: 3px;
	font-size: .82rem;
	color: var(--mm-body);
}

/* Inputs */
.mm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.mm-input {
	display: block;
}
.mm-input__label {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	color: var(--mm-body);
	margin-bottom: 6px;
}
.mm-input input {
	width: 100%;
	padding: 13px 14px;
	border: 2px solid var(--mm-line);
	border-radius: var(--mm-radius-sm);
	font-size: 1rem;
	color: var(--mm-ink);
	background: #fff;
}
.mm-input input:focus {
	border-color: var(--mm-action);
}
.mm-input__hint {
	display: block;
	margin-top: 6px;
	font-size: .8rem;
	color: var(--mm-body);
}
.mm-req {
	color: #B3261E;
}

.mm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.mm-drawer__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--mm-radius-sm);
	background: #FDECEA;
	color: #8C1D18;
	font-weight: 600;
	font-size: .9rem;
}

.mm-submit {
	width: 100%;
	padding: 17px 20px;
	border: 0;
	border-radius: var(--mm-radius-sm);
	background: var(--mm-action);
	color: #fff;               /* 5.3:1 */
	font-size: 1.08rem;
	font-weight: 800;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background .18s ease;
}
.mm-submit:hover:not([disabled]) {
	background: var(--mm-action-hover);
}
.mm-submit[disabled] {
	opacity: .7;
	cursor: progress;
}

.mm-trust {
	margin: 14px 0 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--mm-body);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Persistent mobile donate bar (below the theme's 1025px desktop switch)
   -------------------------------------------------------------------------- */

.mm-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--mm-line);
	box-shadow: 0 -6px 24px rgba(31, 34, 48, .12);
	transform: translateY(110%);
	transition: transform .28s ease;
}
.mm-bar.is-visible {
	transform: none;
}
.mm-bar__text {
	flex: 1 1 auto;
	font-family: var(--mm-font);
	font-size: .88rem;
	font-weight: 700;
	color: var(--mm-ink);
	line-height: 1.3;
}
.mm-bar__cta {
	flex: 0 0 auto;
	padding: 13px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--mm-action);
	color: #fff;
	font-weight: 800;
	font-size: .95rem;
	cursor: pointer;
}
.mm-bar__cta:hover {
	background: var(--mm-action-hover);
}

@media (max-width: 1024.98px) {
	.mm-bar {
		display: flex;
	}
	.mm-drawer .mm-drawer__dialog {
		max-width: 100%;
		margin: 0;
	}
	.mm-drawer__body {
		padding: 20px 18px 28px;
	}
	.mm-drawer__head {
		padding: 18px 18px;
	}
	/* Clear the fixed bar so it never covers the footer or the back-to-top control. */
	body.mm-has-bar #wp-footer {
		padding-bottom: 76px;
	}
}

@media (max-width: 575.98px) {
	.mm-grid {
		grid-template-columns: 1fr;
	}
	.mm-drawer__title {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   PHASE 2
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contrast

   The theme paints every button $theme-color (#15C8A0) with white text
   (sass/template/_base.scss:920-964). That is 2.14:1 -- it fails WCAG AA for
   normal text (4.5:1) and even AA-large (3:1). #0B7A60 on white is 5.3:1.

   Each selector in the theme's long comma chain is a single class (0,1,0), so
   matching specificity plus later source order is enough; no !important needed.
   -------------------------------------------------------------------------- */

.btn,
.btn-theme,
.btn-white,
input[type*="submit"]:not(.fa):not(.btn-theme),
#tribe-events .tribe-events-button,
.tribe-events-button,
.give-btn,
.give-btn-reveal,
.give-submit,
.gsc-button > a {
	background: var(--mm-action);
	color: #fff;
}

.btn:hover,
.btn-theme:hover,
.btn-white:hover,
input[type*="submit"]:not(.fa):not(.btn-theme):hover,
#tribe-events .tribe-events-button:hover,
.tribe-events-button:hover,
.give-btn:hover,
.give-btn-reveal:hover,
.give-submit:hover,
.gsc-button > a:hover {
	background: var(--mm-action-hover);
	color: #fff;
}

/* Teal-on-white text is 2.14:1 wherever it appears as a link or accent.
   Scoped to LIGHT surfaces only. A global a:hover override would also repaint links in
   the header and footer, both of which sit on #1F2230 -- #0B7A60 on that is 2.98:1, so a
   blanket rule would trade one contrast failure for another. The homepage also has teal,
   orange and red Elementor bands inside main content, where #0B7A60 would be 2.47:1 -- so
   this matches prose links (p > a, li > a) rather than every anchor. Buttons are handled
   above by their own background. */
#wp-main-content p > a:hover,
#wp-main-content p > a:focus,
#wp-main-content li > a:hover,
#wp-main-content li > a:focus,
.wp-sidebar .widget a:hover,
.wp-sidebar .widget a:focus,
.entry-content a:hover,
.entry-title a:hover {
	color: var(--mm-action);
}

/* Dark surfaces get the bright brand teal instead: #15C8A0 on #1F2230 is 7.37:1. */
#wp-footer a:hover,
#wp-footer a:focus,
.header-builder-frontend a:hover,
.header-builder-frontend a:focus {
	color: var(--mm-brand);
}

/* Where teal stays as a FILL, the text on it becomes near-black: 7.4:1. */
.btn-gray,
.bg-theme,
.background-theme {
	color: var(--mm-ink);
}

/* --------------------------------------------------------------------------
   Keyboard-accessible desktop submenus

   The theme opens submenus on :hover only (css/template.css:3936, :4080), so
   they cannot be reached with a keyboard at all. Mirroring each rule with
   :focus-within opens them on tab without touching the theme's markup or JS.
   -------------------------------------------------------------------------- */

ul.gva-nav-menu > li:focus-within > .submenu-inner {
	top: 100%;
	opacity: 1;
	filter: alpha(opacity=100);
	visibility: visible;
	height: auto;
	display: block;
}

ul.gva-nav-menu > li .submenu-inner li:focus-within > ul.submenu-inner,
ul.gva-nav-menu > li ul.submenu-inner li:focus-within > ul.submenu-inner {
	opacity: 1;
	visibility: visible;
}

ul.gva-nav-menu > li.megamenu-main:focus-within .megamenu-wrap-inner {
	-webkit-transform: rotateX(0) translateX(-50%) !important;
	transform: rotateX(0) translateX(-50%) !important;
}

/* --------------------------------------------------------------------------
   Typography

   The theme's heading scale tops out at h1 2rem / h2 1.6rem
   (sass/bootstrap/_variables.scss:245-250), which reads as body copy on a modern hero.

   Deliberately excluded on Elementor-built pages. Elementor styles headings with
   .elementor-<id> .elementor-element-<id> .elementor-heading-title -- specificity (0,3,1) --
   while an #wp-main-content selector is (1,0,1) and an ID outranks any number of classes.
   A blanket rule here would silently override every typography and colour choice made in
   the page builder, including the eleven places Elementor sets white text on coloured
   sections. So this applies only where nobody has designed the page.

   No colour is set on body copy at all: the theme's #707876 is 4.53:1 and already passes.
   -------------------------------------------------------------------------- */

body:not(.elementor-page) #wp-main-content h1,
body:not(.elementor-page) .entry-title,
body:not(.elementor-page) .page-title {
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

body:not(.elementor-page) #wp-main-content h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
	line-height: 1.22;
}

body:not(.elementor-page) #wp-main-content h3 {
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Sticky donate bar (desktop; phones get the bottom bar instead)
   Injected at the theme's halpes_after_header hook, which is otherwise unused.
   -------------------------------------------------------------------------- */

.mm-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9997;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 11px 24px;
	background: var(--mm-ink);
	color: #fff;
	font-family: var(--mm-font);
	transform: translateY(-100%);
	transition: transform .28s ease;
}
.mm-sticky.is-visible {
	transform: none;
}
.mm-sticky__text {
	font-size: .95rem;
	font-weight: 700;
}
.mm-sticky__cta {
	padding: 10px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--mm-brand);   /* dark text on teal = 7.4:1 */
	color: var(--mm-ink);
	font-weight: 800;
	font-size: .92rem;
	cursor: pointer;
}
.mm-sticky__cta:hover {
	background: #11b592;
}

@media (max-width: 1024.98px) {
	.mm-sticky {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Icon-only controls the theme ships with no accessible name.
   JS adds the labels; this gives them a visible focus target.
   -------------------------------------------------------------------------- */

.return-top {
	cursor: pointer;
}
.return-top:focus-visible,
.canvas-menu > a.dropdown-toggle:focus-visible,
.gva-search > a.control-search:focus-visible {
	outline: 3px solid var(--mm-focus) !important;
	outline-offset: 3px !important;
}

/* The drawer swaps its TZS and USD halves with the hidden attribute; .mm-tiers and
   .mm-custom set their own display, which would otherwise override it. */
.mm-drawer [hidden] {
	display: none !important;
}

/* "Giving from abroad?" / "In Tanzania?" line above each donation form. */
.mm-currency-switch {
	margin: 0 0 1.25rem;
	padding: .75rem 1rem;
	border-left: 3px solid currentColor;
	background: rgba(0, 0, 0, .04);
	font-size: .95rem;
}
.mm-currency-switch a,
.mm-currency-switch button {
	font-weight: 600;
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
}