/* ═════════════════════════════════════════════════════════════════════════════
   NGO brand layer — soothing typography for Mayuge Hope Ministries.
   Lora (variable, 400–700) for headings · Nunito Sans (variable) for body.
   Loaded after global styles so the preset overrides win.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Lora + Nunito Sans are registered in theme.json fontFamilies (so they appear
   as selectable options in the editor Font Library) and set as the body/heading
   defaults. The @font-face below guarantees the files actually load on the front
   end (WP's theme.json font-face output is cache-sensitive); duplicates are
   harmless. */
@font-face {
	font-family: 'Nunito Sans';
	src: url('../fonts/nunito-sans/nunito-sans-variable.woff2') format('woff2-variations');
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('../fonts/lora/lora-variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
body { -webkit-font-smoothing: antialiased; }

/* Heading letter-spacing lives in theme.json: -0.04em on h1-h3, 0 below,
   both measured. A blanket -0.01em here (and a -0.02em in plinthworks.css)
   loaded after the global-styles inline CSS at the same specificity, so
   between them they overrode every heading on the site and the mhm-script
   variation's +0.05em with it. Removed; theme.json governs. */

/* ══════════════════════════════════════════════════════════════════════════
   Rich content utilities (Mayuge Hope) — highlights, brush, marquee,
   image placeholders, feature icons, parallax placeholder covers.
   Loaded front end + editor. Respects prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* Marker highlight behind words */
.mhm-mark {
	background-image: linear-gradient(120deg,
		var(--wp--preset--color--accent-2, #E9BA13) 0%,
		var(--wp--preset--color--accent-2, #E9BA13) 100%);
	background-repeat: no-repeat;
	background-size: 100% 40%;
	background-position: 0 82%;
	padding: 0 0.08em;
	color: inherit;
}
/* Hand-drawn brush underline under words */
.mhm-brush {
	color: inherit;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 6 110 6 150 11 S 250 18 296 9' fill='none' stroke='%23CD6B74' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 0.55em;
	background-position: 0 100%;
	padding-bottom: 0.14em;
}
.mhm-accent { color: var(--wp--preset--color--accent, #EFC940); }

/* Feature icon badge (lucide inside a wp:html span) */
.mhm-feature-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--accent, #EFC940) 12%, transparent);
	color: var(--wp--preset--color--surface-deep, #343877);
}
.mhm-feature-icon i, .mhm-feature-icon svg { width: 28px; height: 28px; }

/* Image placeholder frame — intentional, swap for a real photo later */
.mhm-imgph {
	position: relative; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 10px;
	aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; color: #fff; text-align: center;
	background: linear-gradient(135deg,
		var(--wp--preset--color--accent, #EFC940) 0%,
		var(--wp--preset--color--accent-2, #E9BA13) 100%);
}
.mhm-imgph::after {
	content: ""; position: absolute; inset: 0; opacity: 0.35;
	background-image: radial-gradient(rgba(255,255,255,0.5) 1.3px, transparent 1.3px);
	background-size: 16px 16px;
}
.mhm-imgph > * { position: relative; z-index: 1; margin: 0; }
.mhm-imgph i, .mhm-imgph svg { width: 46px; height: 46px; opacity: 0.95; }
.mhm-imgph__label { font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.9; }
.mhm-imgph--tall { aspect-ratio: 3 / 4; }
.mhm-imgph--wide { aspect-ratio: 16 / 9; }
.mhm-imgph--soft { background: linear-gradient(135deg, var(--wp--preset--color--accent-3, #F36F8F) 0%, var(--wp--preset--color--accent-2, #E9BA13) 100%); }

/* Text marquee strip */
.mhm-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mhm-marquee__track { display: flex; width: max-content; will-change: transform; animation: mhm-marquee 34s linear infinite; }
.mhm-marquee__track span { display: inline-flex; align-items: center; padding: 0.35em 0; white-space: nowrap; font-family: var(--wp--preset--font-family--lora, inherit); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.7rem); letter-spacing: -0.01em; }
.mhm-marquee__track span::after { content: "\2726"; margin: 0 clamp(1.25rem, 4vw, 2.75rem); opacity: 0.45; font-size: 0.7em; }
.mhm-marquee:hover .mhm-marquee__track { animation-play-state: paused; }
@keyframes mhm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mhm-marquee__track { animation: none; transform: none; } }

/* Section eyebrow with a leading rule (raw class + block-style variant).

   display:flex + width:fit-content rather than inline-flex: an inline-flex box
   shrink-wraps and is positioned by its PARENT's text-align, so the block's own
   Left/Centre/Right control could never move it. As a fit-content block it
   still hugs its text, and the alignment classes below place it. */
.mhm-eyebrow,
.wp-block-paragraph.is-style-mhm-eyebrow { display: flex; width: fit-content; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--contrast-3, #727272); }
.mhm-eyebrow::before,
.wp-block-paragraph.is-style-mhm-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; flex-shrink: 0; }

/* Honour the block toolbar's alignment. Right mirrors the layout so the rule
   sits on the outer edge, matching how it reads when left-aligned. */
.mhm-eyebrow.has-text-align-center,
.wp-block-paragraph.is-style-mhm-eyebrow.has-text-align-center { margin-inline: auto; }

.mhm-eyebrow.has-text-align-right,
.wp-block-paragraph.is-style-mhm-eyebrow.has-text-align-right { margin-inline: auto 0; flex-direction: row-reverse; }

/* Lucide icons render a touch thin globally (they default to a heavy 2px stroke).
   Applies to inline data-lucide icons (feature badges, program/cause cards, etc.).
   The plinthworks/icon block overrides this per-icon via --pw-icon-stroke. */
:where(svg.lucide) { stroke-width: 1.75px; }
:where(.mhm-feature-icon svg.lucide) { stroke-width: 1.9px; }

/* ==========================================================================
   Content links — no resting underline, accent underline wipes in on hover.

   The underline is a background gradient rather than text-decoration, because
   text-decoration cannot be animated across a width.

   Worth knowing rather than rediscovering: with no resting underline, a link in
   body copy is told apart from the text around it by colour alone — brick
   against near-black — which is the situation WCAG 1.4.1 is about. This is a
   deliberate client decision, not an oversight.

   accent-2 is a fill colour, never a text colour: #E0832F is 2.66:1 on white.
   It appears here only as an underline and as a transient hover state.

   .pw-card-link is the fourth exclusion. A card block sets its own ink per
   treatment — the news mosaic puts white on its feature tile and heading ink
   on its card — and this rule is (0,4,1) — `a` plus four `:not(.class)`;
   `:where()` contributes nothing — which is more specific than anything a block
   can reasonably write about its own title. A card title is not a prose link
   and must not take the prose link colour or its animated underline.

   .wp-block-social-link-anchor is the fifth, and it was found the same way the
   fourth was, one phase later. At (0,4,1) this rule also beat core's own
   `.wp-block-social-links … .wp-block-social-link-anchor{color:currentcolor;
   fill:currentcolor}` at (0,4,0), so every social icon on the site was painted
   surface-deep instead of inheriting the colour its list item carries — which
   on the hero's dark photograph made the rail invisible while it stayed visible
   in the editor canvas, where this selector does not match at all. A social
   icon is not a prose link: its colour belongs to the block's own Icon color
   control, and an underline animating across a 24px glyph is meaningless.
   ========================================================================== */

:where(.entry-content, .wp-block-post-content, .mhm-prose)
	a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.pw-card-link):not(.wp-block-social-link-anchor) {
	color: var(--wp--preset--color--surface-deep);
	text-decoration: none;
	/* No resting underline, by direction: links are brick against near-black
	   body text and carry the accent underline on hover only. */
	background-image:
		linear-gradient(var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-2));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	padding-bottom: 2px;
	transition:
		background-size var(--wp--custom--transition--base, 200ms ease),
		color var(--wp--custom--transition--base, 200ms ease);
}

:where(.entry-content, .wp-block-post-content, .mhm-prose)
	a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.pw-card-link):not(.wp-block-social-link-anchor):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--surface-deep);
	background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
	:where(.entry-content, .wp-block-post-content, .mhm-prose)
		a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.pw-card-link):not(.wp-block-social-link-anchor) {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Carousel cards are not prose.

   Every link on a cause card - the title, the category pill, the photo - is
   matched by the rule above, because a card rendered by a core/query inside
   post content IS inside .wp-block-post-content. Left alone they would each
   take surface-deep ink and grow an accent underline on hover: a heading that
   underlines itself, and a pill whose white-on-pink label turns indigo.

   Handled here, once, for the whole track rather than per element. The card
   blocks are core - core/post-title, core/post-terms, core/post-featured-image
   - so there is no markup to add a class to without a filter rewriting core's
   output on every render. The exclusion the rule already documents,
   .pw-card-link, is for blocks that emit their own anchors; core's do not.

   Specificity is the whole trick and is deliberate: :where() contributes
   nothing, .pw-carousel__track is (0,1,0), and the anchor compound repeats all
   five of the rule's own exclusions for (0,5,1). Total (0,6,1) against the
   rule's (0,4,1), so this wins wherever it applies and nowhere else. The five
   :not()s are restated rather than trimmed so the two selectors stay legibly
   the same shape - and so an anchor the rule already excludes stays excluded
   here too, rather than being caught by the reset instead.
   -------------------------------------------------------------------------- */

:where(.entry-content, .wp-block-post-content, .mhm-prose)
	.pw-carousel__track
	a:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.pw-card-link):not(.wp-block-social-link-anchor) {
	color:            inherit;
	background-image: none;
	padding-bottom:   0;
	text-decoration:  none;
}