/*
 * MCF donate menu CTA — switchable styles A / B / C (mcf-receipt 0.2.5)
 * Scoped to #primary-menu .mcf-donate-cta so nothing else on the site changes.
 * Theme header: red gradient (#7A1515 -> #C24D4D), white 600 links, gold #FFD700 hover.
 */

#primary-menu .mcf-donate-cta > a {
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	line-height: 1.4;
}

/*
 * Desktop alignment fix (theme mainV1.css makes #primary-menu a flex row with
 * the default stretch: the 40px pill stretches its <li>, while plain text links
 * sit at the top of their line box — an ~8px vertical offset. Centre every item
 * on the cross axis so text links and the button share one centre line.
 * The hamburger layout kicks in at max-width:1020px, so this is desktop-only.
 */
@media screen and (min-width: 1021px) {
	#primary-menu {
		align-items: center;
	}
}

/*
 * The pill is taller than the nav's original ~26px text line; with the theme's
 * absolute nav (top:90 + margin-top:10) it would overflow the 130px header.
 * When a CTA is present, lift the nav so the pill sits inside the header
 * bottom edge.
 * 0.2.2: the 40px B/C pill needed a 10px lift (top:80; text moved ~3px).
 * 0.2.3: B/C shrank to padding 6px 16px (~34px tall, label/font unchanged per
 * user request R-203) -> a 4px lift (top:86) seated the pill exactly on the
 * header bottom while text links returned to ~their original cy=113.
 * 0.2.4: per R-206 the user set style B alone to vertical padding 3px (3px
 * 16px, ~28px tall); the nav stayed at 86 (the :has lift is shared by all
 * styles), leaving B ~6px above the header bottom while its label stayed
 * centred with the other menu items.
 * 0.2.5: per R-208 (shrink_c + note "A 也改") styles A and C now use the same
 * 3px 16px padding — all three styles match. A keeps its 1.5px gold border
 * (~31px tall incl. border), B/C are ~28px. nav top stays 86 (user did not
 * pick the edge-fit option): pills sit ~3px (A) / ~6px (B,C) above the
 * header bottom; labels remain centred via align-items:center.
 * :has() guarded — older browsers keep the alignment fix and simply render the
 * pill slightly past the header edge.
 */
@supports selector(:has(*)) {
	@media screen and (min-width: 1021px) {
		#site-navigation:has(#primary-menu .mcf-donate-cta) {
			top: 86px;
		}
	}
}

#primary-menu .mcf-donate-cta > a::before {
	content: "\2764";
	margin-right: 6px;
	font-family: inherit;
}

/* ---- Style A: gold outline (restrained) ---- */
/* 0.2.5: padding matched to B/C per R-208 note "A 也改" (6px -> 3px vertical);
   the 1.5px gold border is kept. */
#primary-menu .mcf-donate-cta-a > a {
	color: #FFD700;
	border: 1.5px solid #FFD700;
	border-radius: 4px;
	padding: 3px 16px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#primary-menu .mcf-donate-cta-a > a:hover {
	color: #FFE45E;
	background-color: rgba(255, 215, 0, 0.12);
}

/* ---- Style B: white pill / red text (default, strongest contrast) ---- */
/* 0.2.4: user-specified per R-206 — vertical padding 6px -> 3px (padding:
   3px 16px; ~28px tall); horizontal 16px, label text and font size unchanged.
   Style C is NOT changed by this. */
#primary-menu .mcf-donate-cta-b > a {
	background-color: #FFFFFF;
	color: #9E1B1B;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#primary-menu .mcf-donate-cta-b > a:hover {
	color: #9E1B1B;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* ---- Style C: gold pill / red text with breathing halo (boldest) ---- */
/* 0.2.5: padding matched to B per R-208 shrink_c (6px -> 3px vertical,
   padding: 3px 16px; ~28px tall); label text and halo animation unchanged. */
#primary-menu .mcf-donate-cta-c > a {
	background-color: #FFD700;
	color: #9E1B1B;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 16px;
	animation: mcf-cta-pulse 2s infinite;
}

#primary-menu .mcf-donate-cta-c > a:hover {
	color: #7A1515;
}

@keyframes mcf-cta-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
	}
}

/*
 * Mobile (aligned with the theme's 1020px breakpoint): the theme makes every
 * link display:block and full-width; keep the CTA button-sized and aligned
 * with the other items (right-aligned 769-1020px, left ≤768px).
 */
@media screen and (max-width: 1020px) {
	#primary-menu .mcf-donate-cta > a {
		width: auto;
		margin: 4px 0 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#primary-menu .mcf-donate-cta-c > a {
		animation: none;
	}
}