/* ═════════════════════════════════════════════════════════════════════════════
   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.

   ── The exclusions no longer carry the specificity. The scope does. ──

   This was written `a:not(.a):not(.b):not(.c):not(.d):not(.e)` — (0,5,1). Each
   :not() was added to stop the rule painting something it had no business
   painting: a button, a nav item, a card title, a social icon. Each one did
   that, and each one also lifted the rule another step above every mechanism
   WordPress has for saying what colour a link is:

     global styles, elements.link   :root :where(a:where(:not(…)))     (0,1,0)
     per-block elements.link        .wp-elements-N a:where(:not(…))    (0,1,1)

   So each fix guaranteed the next collision. The fourth was a link colour set
   on a core/post-title inside a cover that simply did nothing — the same bug
   as the first three, and a fifth :not() would have bought the same reprieve
   and the same certainty of a sixth. The rule was the defect, not the blocks
   it kept hitting.

   The exclusions now sit inside :where() and contribute nothing at all. The
   weight comes only from the prose scope the rule genuinely depends on, so
   every rule in this section is (0,1,0), and that places it exactly where a
   theme default belongs:

     - It TIES with global elements.link (0,1,0) and wins on source order,
       because this stylesheet is enqueued after global-styles-inline-css.
       That is what still makes a prose link surface-deep rather than the
       global contrast, and it is the one ordering this section depends on.
     - It LOSES to per-block elements.link (0,1,1). A link colour set in the
       inspector on any block now takes effect, anywhere, with nothing added
       here and nothing to add here next time.

   The five exclusions are kept, because their real job was never specificity:
   a button, a nav item, a card title and a social icon must not grow a 2px
   accent gradient or 2px of padding whatever colour they end up. They simply
   no longer buy weight while doing it.
   ========================================================================== */

:is(.entry-content, .wp-block-post-content, .mhm-prose)
	:where(a:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .pw-card-link, .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);
}

/* Same weight as the rule above and later in the file, which is what carries
   it. The colour is restated so a block that sets only a resting colour keeps
   that colour through the hover; a block that sets a hover colour too is
   (0,1,1) and wins here as well. */
:is(.entry-content, .wp-block-post-content, .mhm-prose)
	:where(a:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .pw-card-link, .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) {
	:is(.entry-content, .wp-block-post-content, .mhm-prose)
		:where(a:not(.wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content, .pw-card-link, .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.

   This used to be (0,6,1), built to out-specify the (0,5,1) above it. Now that
   the rule above is (0,1,0), so is this: the track selector sits inside
   :where() and the weight again comes from the prose scope alone. It beats the
   rule above by being later in the file, which is all it ever needed to do,
   and it loses to a per-block elements.link (0,1,1) exactly as the rule above
   does — so a colour set on a card block in the inspector reaches the card.
   -------------------------------------------------------------------------- */

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