/*
Theme Name: Mak-RIF
Theme URI: https://rif.mak.ac.ug/
Author: Makerere University Research and Innovations Fund
Author URI: https://rif.mak.ac.ug/
Description: A custom WordPress block theme (FSE) for the Makerere University Research and Innovations Fund. Replaces the Digiqole theme and its 18 "newszone-*" Elementor widgets, removing the hard dependency on the abandoned Unyson plugin and lifting the Elementor 3.4.8 version freeze. Ships a locked Makerere brand palette, self-hosted Poppins and Fraunces, and fully modular homepage section patterns that can be toggled, reordered or swapped in the Site Editor without affecting one another.
Version: 0.1.8
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: makrif
Tags: full-site-editing, block-patterns, education, one-column, custom-colors, custom-menu, block-styles, wide-blocks, accessibility-ready
*/

/*
 * theme.json carries the design system (palette, type scale, layout, spacing,
 * block styles). Only what theme.json cannot express belongs here.
 */

/* Uganda flag mark used in the header topbar. The national flag keeps its own
   official colours and is deliberately exempt from the locked brand palette,
   same rule as the Makerere coat of arms. */
.makrif-flag {
	display: inline-block;
	width: 18px;
	height: 12px;
	flex: none;
	border-radius: 2px;
	background: url( "assets/images/flag-uganda.svg" ) center / cover no-repeat;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.35 );
}

/* Visible focus ring. Gold on dark surfaces so it stays legible on the green
   header/footer bands. */
:focus-visible {
	outline: 3px solid var( --wp--preset--color--mak-green-dark );
	outline-offset: 3px;
	border-radius: 4px;
}

.makrif-on-dark :focus-visible,
.wp-block-template-part[data-area="header"] :focus-visible,
.wp-block-template-part[data-area="footer"] :focus-visible {
	outline-color: var( --wp--preset--color--mak-gold );
}

/* Sticky green nav bar. */
.makrif-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba( 0, 113, 58, 0.3 ), 0 6px 24px rgba( 0, 113, 58, 0.14 );
}

/* A sticky element can only travel within its PARENT's box. The header template
   part wraps the topbar + nav in a div that is only ~110px tall, so on its own
   .makrif-header:sticky sticks for ~110px and then scrolls away with the
   wrapper — no header on a long article. display:contents removes that wrapper
   box, so the nav's containing block becomes the full-height page wrapper and it
   sticks the whole way down. The topbar (still a normal-flow child) scrolls off
   first, exactly as in the mockup. Scoped to the header part via :has so the
   footer part is untouched. */
.wp-block-template-part:has( > .makrif-topbar ),
.wp-block-template-part:has( > .makrif-header ) {
	display: contents;
}

/* Header nav: white links, translucent hover, gold underline on the current page. */
.makrif-nav a {
	/* colour comes from .makrif-nav (the scheme switch) — see the header scheme
	   block at the foot of this file. */
	text-decoration: none;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.makrif-nav a:hover {
	background: rgba( 255, 255, 255, 0.16 );
}

.makrif-nav .current-menu-item > a {
	box-shadow: inset 0 -3px 0 var( --wp--preset--color--mak-gold );
}

/* Footer section headings get the gold rule from the mockup. */
.makrif-footer-heading::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-top: 0.5rem;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
}

/* Government of Uganda funding acknowledgment. */
.makrif-ack {
	border-left: 4px solid var( --wp--preset--color--mak-gold );
	padding: 0.2rem 0 0.2rem 1rem;
	font-style: italic;
	max-width: 42ch;
}

/* White chips behind the logos on the green-dark footer. */
.makrif-logo-chip img {
	background: var( --wp--preset--color--base );
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
}

/* Skip link. */
.makrif-skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 200;
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
	font-weight: 600;
	padding: 0.7rem 1.2rem;
	border-radius: 0 0 10px 10px;
	text-decoration: none;
	transition: top 0.2s ease;
}

.makrif-skip-link:focus {
	top: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   HOMEPAGE SECTION PATTERNS
   ==========================================================================
   Every rule below is scoped to exactly one pattern's own root class
   (.makrif-hero-split, .makrif-impact, …). No section reads another section's
   classes, so removing, reordering or swapping any pattern in the Site Editor
   leaves the rest untouched — the client's modularity requirement. Deleting a
   pattern leaves its rules here as dead CSS, which is harmless; deleting the
   matching block below is the tidy-up, not a fix.

   The only exceptions are the SHARED UTILITIES immediately following. They are
   theme-level, owned by no pattern, and used by several — so they are not a
   cross-pattern dependency: no pattern's removal can take them away.

   Colours here only ever come from --wp--preset--color--* (theme.json). No
   hardcoded hex. Where the mockup used rgba() of a palette colour, that is
   reproduced with color-mix() against the same custom property.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED UTILITIES (theme-level, not owned by any one pattern)
   -------------------------------------------------------------------------- */

/* Gold-dash kicker above a section heading. */
.makrif-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
}

.makrif-kicker::before {
	content: "";
	width: 34px;
	height: 4px;
	flex: none;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
}

.makrif-section-head.is-center {
	text-align: center;
}

.makrif-section-head.is-center .makrif-kicker {
	justify-content: center;
}

/* Arrow affordance on CTA buttons. The mockup draws an SVG inside the <a>;
   core's button RichText will not hold one, so it is a pseudo-element. */
.makrif-btn-arrow .wp-block-button__link::after {
	content: "→";
	margin-left: 0.5rem;
	font-weight: 700;
}

/* Button variants the mockup uses that theme.json's single button element
   style cannot express. Core's is-style-outline supplies the transparent
   fill and currentColor border; these only add the hover behaviour. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
}

.makrif-btn-outline-light.is-style-outline > .wp-block-button__link:hover {
	background-color: color-mix( in srgb, var( --wp--preset--color--base ) 14%, transparent );
	color: var( --wp--preset--color--base );
}

.makrif-btn-green > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--mak-green );
}

.wp-block-button > .wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.wp-block-button > .wp-block-button__link:hover {
	transform: translateY( -2px );
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/hero-split
   -------------------------------------------------------------------------- */

.makrif-hero-split {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(
		155deg,
		var( --wp--preset--color--tint-green ) 0%,
		var( --wp--preset--color--base ) 58%
	);
}

/* Gold swash under "Uganda". Targets the bare <mark>, not the class: core's
   RichText keeps the tag but may drop the className when the line is edited. */
.makrif-hero-split h1 mark {
	position: relative;
	z-index: 0;
	background: transparent;
	color: inherit;
	white-space: nowrap;
}

.makrif-hero-split h1 mark::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: 0.05em;
	height: 0.16em;
	border-radius: 3px;
	background: var( --wp--preset--color--mak-gold );
}

.makrif-hero-split h1 {
	max-width: 14ch;
}

.makrif-hero-split .makrif-lede {
	max-width: 46ch;
}

/* Green trust-mark dots. */
.makrif-hero-split .makrif-trust p {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.makrif-hero-split .makrif-trust p::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var( --wp--preset--color--mak-green );
}

.makrif-hero-split .makrif-slide {
	box-shadow: var( --wp--custom--shadow--lg );
	overflow: hidden;
}

/* The mockup's bottom-weighted scrim.
   The cover sets dimRatio 0, so core emits
   `.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-0
    { opacity: 0 }` — specificity (0,4,0). The dim classes must therefore be named
   here too, or the scrim renders invisible and the headline sits unreadable on
   the photo. Do not simplify this selector back to the bare element. */
.makrif-hero-split .makrif-slide .wp-block-cover__background.has-background-dim.has-background-dim-0 {
	opacity: 1;
	background: linear-gradient(
		to top,
		color-mix( in srgb, var( --wp--preset--color--mak-black ) 92%, transparent ) 0%,
		color-mix( in srgb, var( --wp--preset--color--mak-black ) 62%, transparent ) 38%,
		color-mix( in srgb, var( --wp--preset--color--mak-black ) 12%, transparent ) 100%
	);
}

.makrif-hero-split .makrif-slide h3 {
	max-width: 26ch;
}

/* The tag is a pill, so it must shrink to its text. It sits in the cover's
   inner container, which is a CONSTRAINED (flow) layout — `align-self` has no
   flex parent to talk to there and silently did nothing, so the red pill
   painted as a full-width band across the photo. width:fit-content is what
   actually holds; align-self stays for any flex context this lands in.

   wp:post-terms renders the category as a LINK inside the pill. Left alone it
   inherits the global link colour and underline: green text on the red pill,
   which is both wrong and unreadable. The pill's own colour is authoritative. */
.makrif-hero-split .makrif-tag {
	align-self: flex-start;
	display: block;
	width: fit-content;
	max-width: 100%;
}

.makrif-hero-split .makrif-tag a {
	color: inherit;
	text-decoration: none;
}

.makrif-hero-split .makrif-tag a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.makrif-hero-split .makrif-slide-more a {
	text-decoration: none;
}

.makrif-hero-split .makrif-slide-more a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Slideshow: stacking, crossfade and controls --------------------------
   The four slides are the <li> elements core's post-template emits, one per
   queried post. They are stacked on top of each other rather than laid out in
   flow, so .makrif-slides has to carry the height the single cover used to give
   the column by itself.

   NO-JS DEFAULT: first slide shown, the rest hidden. hero-slideshow.js adds
   .is-enhanced in the same tick that it marks slide 1 .is-active, which hands
   the show/hide decision over to .is-active with no flash in between. If the
   script never runs, the first rule stands: one true slide, no dead controls,
   nothing to fix up. Do not "simplify" this by hiding slides unconditionally —
   that is what makes the no-JS hero go blank. */

.makrif-hero-split .makrif-slideshow {
	position: relative;
}

.makrif-hero-split .makrif-slides {
	position: relative;
	height: 470px;
}

.makrif-hero-split .makrif-slides > li {
	position: absolute;
	inset: 0;
	transition: opacity 0.55s ease;
}

.makrif-hero-split .makrif-slides > li ~ li {
	opacity: 0;
	visibility: hidden;
}

.makrif-hero-split .makrif-slideshow.is-enhanced .makrif-slides > li {
	opacity: 0;
	visibility: hidden;
}

.makrif-hero-split .makrif-slideshow.is-enhanced .makrif-slides > li.is-active {
	opacity: 1;
	visibility: visible;
}

.makrif-hero-split .makrif-slides > li > .makrif-slide {
	height: 100%;
}

/* The controls sit over the scrim's darkest band, which is why the slide body
   reserves room for them in its bottom padding. */
.makrif-hero-split .makrif-ss-controls {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.15rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.makrif-hero-split .makrif-ss-dots {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.makrif-hero-split .makrif-ss-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: color-mix( in srgb, var( --wp--preset--color--base ) 45%, transparent );
	transition: background 0.2s ease, transform 0.2s ease;
}

.makrif-hero-split .makrif-ss-dot:hover {
	background: color-mix( in srgb, var( --wp--preset--color--base ) 80%, transparent );
}

.makrif-hero-split .makrif-ss-dot[aria-current="true"] {
	background: var( --wp--preset--color--mak-gold );
	transform: scale( 1.4 );
}

.makrif-hero-split .makrif-ss-arrows {
	display: flex;
	gap: 0.5rem;
}

.makrif-hero-split .makrif-ss-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid color-mix( in srgb, var( --wp--preset--color--base ) 55%, transparent );
	background: color-mix( in srgb, var( --wp--preset--color--mak-black ) 40%, transparent );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.makrif-hero-split .makrif-ss-btn:hover {
	background: var( --wp--preset--color--mak-gold );
	color: var( --wp--preset--color--mak-black );
	border-color: var( --wp--preset--color--mak-gold );
}

.makrif-hero-split .makrif-slideshow :focus-visible {
	outline: 2px solid var( --wp--preset--color--mak-gold );
	outline-offset: 2px;
}

/* One button, two icons: the state lives in the class, the label swaps in JS. */
.makrif-hero-split .makrif-ss-toggle .makrif-icon-play {
	display: none;
}

.makrif-hero-split .makrif-slideshow.is-paused .makrif-ss-toggle .makrif-icon-play {
	display: block;
}

.makrif-hero-split .makrif-slideshow.is-paused .makrif-ss-toggle .makrif-icon-pause {
	display: none;
}

/* The script already refuses to autoplay here; kill the crossfade too, so a
   user-driven slide change is an instant cut rather than a long dissolve. */
@media ( prefers-reduced-motion: reduce ) {
	.makrif-hero-split .makrif-slides > li,
	.makrif-hero-split .makrif-ss-dot,
	.makrif-hero-split .makrif-ss-btn {
		transition: none;
	}
}

@media ( max-width: 991px ) {
	.makrif-hero-split h1 {
		max-width: 18ch;
	}

	.makrif-hero-split .makrif-slide {
		min-height: 340px !important;
	}

	.makrif-hero-split .makrif-slides {
		height: 340px;
	}
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/hero-playlist  (alternate hero — not placed by default)
   -------------------------------------------------------------------------- */

.makrif-hero-playlist .makrif-lead {
	box-shadow: var( --wp--custom--shadow--lg );
	overflow: hidden;
}

.makrif-hero-playlist .makrif-lead .wp-block-cover__background {
	opacity: 1;
	background: linear-gradient(
		180deg,
		transparent 34%,
		color-mix( in srgb, var( --wp--preset--color--mak-black ) 62%, transparent ) 68%,
		color-mix( in srgb, var( --wp--preset--color--mak-black ) 90%, transparent ) 100%
	);
}

.makrif-hero-playlist .makrif-lead .wp-block-cover__image-background {
	object-position: center 35%;
}

.makrif-hero-playlist .makrif-lead h2 {
	max-width: 24ch;
}

.makrif-hero-playlist .makrif-tag {
	align-self: flex-start;
}

.makrif-hero-playlist .makrif-playlist {
	height: 100%;
	overflow: hidden;
	background: color-mix( in srgb, var( --wp--preset--color--base ) 7%, transparent );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--base ) 16%, transparent );
}

.makrif-hero-playlist .makrif-playlist-head {
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--base ) 16%, transparent );
}

.makrif-hero-playlist .makrif-playlist-all a,
.makrif-hero-playlist .makrif-pl-title a {
	text-decoration: none;
}

.makrif-hero-playlist .makrif-playlist-all a:hover,
.makrif-hero-playlist .makrif-pl-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.makrif-hero-playlist .makrif-pl-item {
	border-left: 4px solid transparent;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.makrif-hero-playlist .makrif-pl-item + .makrif-pl-item {
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--base ) 12%, transparent );
}

.makrif-hero-playlist .makrif-pl-item:hover {
	background: color-mix( in srgb, var( --wp--preset--color--base ) 10%, transparent );
}

/* is-current marks the story the lead slide is showing. Once the carousel is
   wired this becomes aria-current="true" on a button and this rule follows it. */
.makrif-hero-playlist .makrif-pl-item.is-current {
	background: color-mix( in srgb, var( --wp--preset--color--mak-gold ) 16%, transparent );
	border-left-color: var( --wp--preset--color--mak-gold );
}

.makrif-hero-playlist .makrif-pl-thumb {
	flex: none;
	margin: 0;
}

.makrif-hero-playlist .makrif-pl-thumb img {
	border-radius: 6px;
}

.makrif-hero-playlist .makrif-pl-text {
	min-width: 0;
}

.makrif-hero-playlist .makrif-pl-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media ( max-width: 991px ) {
	.makrif-hero-playlist .makrif-lead {
		min-height: 320px !important;
	}
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/impact-numbers
   -------------------------------------------------------------------------- */

/* Two-class selector so it outranks the .wp-container-* rule core prints for
   the grid layout, whatever order the two stylesheets land in. */
.makrif-impact .makrif-impact-grid > .makrif-stat {
	border-left: 3px solid color-mix( in srgb, var( --wp--preset--color--mak-gold ) 45%, transparent );
	padding: 0.1rem 0 0.1rem 1rem;
}

.makrif-impact .makrif-stat-num {
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 991px ) {
	.makrif-impact .makrif-impact-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.makrif-impact .makrif-impact-grid > :last-child {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 479px ) {
	.makrif-impact .makrif-stat-num {
		font-size: 1.5rem !important;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/featured-stories
   -------------------------------------------------------------------------- */

.makrif-featured .makrif-story-card {
	overflow: hidden;
	background: var( --wp--preset--color--base );
	box-shadow: var( --wp--custom--shadow--lg );
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.makrif-featured .makrif-story-card:hover {
	transform: translateY( -8px );
}

/* Raised centre card, per the mockup. The grid is a wp:post-template now, so
   the cards are li.wp-block-post, not wp-block-column. */
@media ( min-width: 782px ) {
	.makrif-featured .makrif-featured-grid > .wp-block-post:nth-child( 2 ) .makrif-story-card {
		transform: translateY( -2.2rem );
	}

	.makrif-featured .makrif-featured-grid > .wp-block-post:nth-child( 2 ) .makrif-story-card:hover {
		transform: translateY( calc( -2.2rem - 8px ) );
	}
}

.makrif-featured .makrif-story-media {
	position: relative;
}

.makrif-featured .makrif-story-media figure {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.makrif-featured .makrif-story-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.makrif-featured .makrif-story-card:hover .makrif-story-media img {
	transform: scale( 1.05 );
}

.makrif-featured .makrif-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	margin: 0;
	box-shadow: 0 4px 12px color-mix( in srgb, var( --wp--preset--color--mak-black ) 25%, transparent );
}

.makrif-featured .makrif-story-body {
	border-top: 4px solid var( --wp--preset--color--mak-gold );
}

.makrif-featured .makrif-story-more a {
	text-decoration: none;
}

.makrif-featured .makrif-story-more a::after {
	content: "→";
	margin-left: 0.45rem;
}

.makrif-featured .makrif-story-more a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/funding-calls
   -------------------------------------------------------------------------- */

.makrif-calls .makrif-call-card {
	height: 100%;
	box-shadow: var( --wp--custom--shadow--sm );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.makrif-calls .makrif-call-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--custom--shadow--md );
}

.makrif-calls .makrif-status {
	white-space: nowrap;
	margin: 0;
}

/* Pin the buttons to the bottom so the two cards' CTAs line up even when the
   descriptions differ in length. */
.makrif-calls .makrif-call-card > .wp-block-buttons {
	margin-top: auto;
}

.makrif-calls .makrif-call-card {
	display: flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/about-fund
   -------------------------------------------------------------------------- */

/* z-index:0 is load-bearing: it makes this a stacking context so the gold
   frame's z-index:-1 sits behind the photo but still in FRONT of the white
   section background. Without it the frame paints behind the section and never
   renders at all. */
.makrif-about .makrif-about-media {
	position: relative;
	z-index: 0;
}

.makrif-about .makrif-about-media figure {
	margin: 0;
}

.makrif-about .makrif-about-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var( --wp--custom--shadow--md );
}

.makrif-about .makrif-about-media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -1.1rem -1.1rem auto;
	width: 58%;
	height: 58%;
	border: 5px solid var( --wp--preset--color--mak-gold );
	border-radius: var( --wp--custom--radius );
}

.makrif-about .makrif-about-chip {
	position: absolute;
	left: 1.2rem;
	bottom: 1.2rem;
	box-shadow: var( --wp--custom--shadow--md );
}

/* Green check marks in place of list bullets. */
.makrif-about .makrif-about-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.75rem;
}

.makrif-about .makrif-about-list li {
	display: flex;
	gap: 0.75rem;
}

.makrif-about .makrif-about-list li::before {
	content: "✓";
	flex: none;
	font-weight: 800;
	color: var( --wp--preset--color--mak-green );
}

.makrif-about .makrif-ack-card {
	position: relative;
	overflow: hidden;
}

.makrif-about .makrif-ack-card::after {
	content: "";
	position: absolute;
	right: -1.8rem;
	top: -1.8rem;
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	border: 14px solid color-mix( in srgb, var( --wp--preset--color--mak-gold ) 22%, transparent );
}

.makrif-about .makrif-ack-card p {
	position: relative;
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/latest-news
   -------------------------------------------------------------------------- */

.makrif-news .makrif-news-card {
	height: 100%;
	overflow: hidden;
	box-shadow: var( --wp--custom--shadow--sm );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.makrif-news .makrif-news-card:hover {
	transform: translateY( -5px );
	box-shadow: var( --wp--custom--shadow--md );
}

.makrif-news .makrif-news-media {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.makrif-news .makrif-news-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.makrif-news .makrif-news-card:hover .makrif-news-media img {
	transform: scale( 1.04 );
}

.makrif-news .makrif-news-meta p {
	margin: 0;
}

.makrif-news .makrif-news-body h3 a {
	color: inherit;
	text-decoration: none;
}

.makrif-news .makrif-news-card:hover h3 a {
	color: var( --wp--preset--color--mak-green-dark );
}

/* --------------------------------------------------------------------------
   BLOCK: makrif/related-stories (article footer, reuses .makrif-news cards)
   -------------------------------------------------------------------------- */

.makrif-related {
	background: var( --wp--preset--color--tint-neutral );
	padding: 4rem 0;
	margin-top: 4rem;
}

/* related-head @250 vs related-grid @100 in the mockup put the heading 150px
   inboard of its cards; here both share the SAME 1240 inner wrap, so the
   heading and the first card line up on one edge. */
.makrif-related-inner {
	width: min( 1240px, 100% - 3rem );
	margin-inline: auto;
}

.makrif-related-topline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.makrif-related-heading {
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 800;
	font-size: var( --wp--preset--font-size--xx-large );
	color: var( --wp--preset--color--mak-black );
	line-height: 1.18;
}

.makrif-related-all {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	border: 2px solid var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--mak-green-dark );
	background: transparent;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.makrif-related-all:hover {
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
	transform: translateY( -2px );
}

.makrif-related .makrif-news-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.8rem;
}

/* The card is one anchor (no nested links), so styling hangs off the classes
   directly rather than post-title's inner <a>. */
.makrif-related .makrif-news-card {
	display: flex;
	flex-direction: column;
	background: var( --wp--preset--color--base );
	border-radius: var( --wp--custom--radius );
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var( --wp--custom--shadow--sm );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.makrif-related .makrif-news-card:hover {
	transform: translateY( -5px );
	box-shadow: var( --wp--custom--shadow--md );
}

.makrif-related .makrif-news-body {
	padding: 1.4rem 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	flex: 1;
}

.makrif-related .makrif-news-meta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 0.76rem;
}

.makrif-related .makrif-tag-soft {
	background: var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-dark );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
}

.makrif-related .makrif-news-date {
	color: var( --wp--preset--color--ink-soft );
	font-weight: 500;
}

.makrif-related .makrif-news-title {
	font-family: var( --wp--preset--font-family--sans );
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	color: var( --wp--preset--color--mak-black );
}

.makrif-related .makrif-news-card:hover .makrif-news-title {
	color: var( --wp--preset--color--mak-green-dark );
}

@media ( max-width: 991px ) {
	.makrif-related .makrif-news-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 639px ) {
	.makrif-related .makrif-news-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/publications-subjects
   -------------------------------------------------------------------------- */

.makrif-subjects .makrif-subjects-big + p {
	max-width: 44ch;
}

/* Equal-width subject cards. The 2-up grid itself comes from the block's own
   core grid layout (columnCount 2) — this only styles the card. */
.makrif-subjects .makrif-chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 12px;
	background: var( --wp--preset--color--base );
	font-weight: 600;
	font-size: 0.92rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.makrif-subjects .makrif-chip a {
	color: var( --wp--preset--color--mak-black );
	text-decoration: none;
}

/* Whole card clickable. Safe here because the card holds nothing but this one
   link — no text or second control is swallowed by the overlay. */
.makrif-subjects .makrif-chip a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.makrif-subjects .makrif-chip::after {
	content: "→";
	flex: none;
	color: var( --wp--preset--color--mak-green );
	transition: transform 0.18s ease;
}

.makrif-subjects .makrif-chip:hover {
	border-color: var( --wp--preset--color--mak-green );
	box-shadow: var( --wp--custom--shadow--sm );
	transform: translateY( -2px );
}

.makrif-subjects .makrif-chip:hover::after {
	transform: translateX( 3px );
}

.makrif-subjects .makrif-chip:focus-within {
	border-color: var( --wp--preset--color--mak-green );
}

/* Publication count per subject. Sits between the name and the arrow, so the
   flex order is name / count / ::after arrow and every arrow still lines up —
   which was the whole point of the equal-width grid. Tabular figures stop the
   counts jittering against each other between one and three digits.
   aria-hidden in the markup: the count is announced via the link's aria-label
   instead, because "Health & Medicine 72" read aloud is a riddle. */
.makrif-subjects .makrif-chip-count {
	flex: none;
	margin-left: auto;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-text );
	font-size: 0.74rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/publications-list  (the publications + subject archives)
   -------------------------------------------------------------------------- */

.makrif-pub-list .makrif-pub-card {
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.makrif-pub-list .makrif-pub-card:hover {
	border-color: var( --wp--preset--color--mak-green );
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-pub-list .makrif-pub-card h2 a {
	color: var( --wp--preset--color--mak-black );
	text-decoration: none;
}

.makrif-pub-list .makrif-pub-card:hover h2 a {
	color: var( --wp--preset--color--mak-green-text );
}

/* NOT a stretched-link card, unlike .makrif-chip. The card holds two competing
   links — the title and the download — so an overlay would swallow the download
   and every card would silently lead to the wrong place. */

/* inline-flex, not flex: a block-level flex container stretches to the full card
   width, which read as one long tinted stripe rather than a row of badges. */
.makrif-pub-list .makrif-pub-subjects {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* The pill is on the <a>, not on the block wrapper. post-terms only lets you
   colour the wrapper, which would paint one bar behind every subject at once —
   so the block ships unstyled and the badge lives here, one per term. */
.makrif-pub-list .makrif-pub-subjects a {
	display: inline-block;
	border-radius: 6px;
	padding: 0.3rem 0.7rem;
	background: var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-dark );
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.makrif-pub-list .makrif-pub-subjects a:hover {
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
}

.makrif-pub-list .makrif-pub-author {
	margin: 0;
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.88rem;
	font-style: italic;
}

.makrif-pub-list .makrif-pub-foot {
	border-top: 1px solid var( --wp--preset--color--rule );
	padding-top: 0.8rem;
}

.makrif-pub-list .makrif-pub-download {
	margin: 0;
	margin-left: auto;
}

.makrif-pub-list .makrif-pub-download-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 8px;
	padding: 0.4rem 0.9rem;
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.18s ease;
}

.makrif-pub-list .makrif-pub-download-link:hover {
	background: var( --wp--preset--color--mak-green-text );
}

.makrif-pub-list .makrif-pub-download-meta {
	font-weight: 500;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/newsletter-signup
   -------------------------------------------------------------------------- */

.makrif-newsletter .makrif-newsletter-card {
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-newsletter .makrif-newsletter-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.makrif-newsletter .makrif-newsletter-row {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
}

.makrif-newsletter .makrif-newsletter-form input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 0.95rem 1.3rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var( --wp--preset--color--ink );
	background: var( --wp--preset--color--tint-neutral );
	border: 2px solid var( --wp--preset--color--rule );
	border-radius: 999px;
}

.makrif-newsletter .makrif-newsletter-form input[type="email"]:focus {
	outline: 3px solid var( --wp--preset--color--mak-green-dark );
	outline-offset: 2px;
	border-color: var( --wp--preset--color--mak-green );
}

.makrif-newsletter .makrif-newsletter-form button {
	cursor: pointer;
	border: 0;
}

.makrif-newsletter .makrif-form-note {
	width: 100%;
	margin-top: 0.6rem;
	font-size: 0.78rem;
	color: var( --wp--preset--color--ink-soft );
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/cta-band
   -------------------------------------------------------------------------- */

.makrif-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(
		140deg,
		var( --wp--preset--color--mak-green-dark ) 0%,
		var( --wp--preset--color--mak-green ) 100%
	);
}

.makrif-cta-band h2 {
	max-width: 22ch;
	margin-inline: auto;
}

.makrif-cta-band p {
	max-width: 56ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   PATTERN: makrif/call-status-ticker  (in the inserter, not placed by default)
   -------------------------------------------------------------------------- */

.makrif-ticker .makrif-ticker-row {
	min-height: 52px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.makrif-ticker .makrif-ticker-row::-webkit-scrollbar {
	display: none;
}

.makrif-ticker .makrif-ticker-row > p {
	flex: none;
	margin: 0;
}

/* Green status dot before the CALL STATUS label. */
.makrif-ticker .makrif-ticker-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.makrif-ticker .makrif-ticker-label::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var( --wp--preset--color--mak-green-dark );
}

/* Bullet separators between items, drawn rather than marked up so the
   separators cannot be edited into the wrong place. */
.makrif-ticker .makrif-ticker-item + .makrif-ticker-item::before,
.makrif-ticker .makrif-ticker-item + .makrif-ticker-link::before {
	content: "•";
	margin-right: 2rem;
	color: color-mix( in srgb, var( --wp--preset--color--mak-black ) 35%, transparent );
}

.makrif-ticker .makrif-ticker-link a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.makrif-ticker :focus-visible {
	outline-color: var( --wp--preset--color--mak-green-dark );
}

/* ---------------------------------------------------------------------------
   LEGACY ELEMENTOR COMPATIBILITY SHIM
   ---------------------------------------------------------------------------
   Still-unmigrated pages (Contact, Projects, feedback, gmc...) were authored
   against the Digiqole theme, which supplied page gutters. Digiqole is gone.
   (About RIF and Grant Info are now native block templates — no longer here.)

   `elementor-section-stretched` breaks a section out to the full viewport. With
   Digiqole gone its .elementor-container had no width limit, so the content
   sprawled edge-to-edge — and, being viewport-relative, sprawled ever WIDER on
   larger screens (the Contact form and map flew apart). We now CAP the stretched
   container to the site wrap using the exact `.wrap` formula, so its content
   edges line up with the footer and the Related-stories grid (24 / 1256 at
   1280px) instead of running to the screen edge. A full-width section BACKGROUND
   still spans the viewport (it's on the section, not the container); only the
   content is boxed — the standard full-bleed-band / boxed-content pattern.

   Boxed sections are untouched: their container already self-limits to 1140px.

   TEMPORARY. Delete this block once these pages are migrated off Elementor.
   ------------------------------------------------------------------------ */
.wp-block-post-content .elementor-section-stretched > .elementor-container {
	width: min( 1240px, 100% - 3rem );
	max-width: none;
	margin-inline: auto;
}

/* ===========================================================================
   CONTACT PAGE (templates/contact.html)
   ===========================================================================
   Dark page-head + two columns: message form (left) / details card + map
   (right). Form styling lives on the CF7 wrapper class `.makrif-cf7` so it
   travels with the form to any page (Contact and Feedback both use form 3400). */
.makrif-page-head-intro {
	/* No max-width: the intro (post-excerpt, align:wide) filled a narrow box that
	   the constrained layout then CENTRED, leaving a dead band to its left while
	   the title and grids ran full width. Let it span the same full width and
	   justify it so it reads end-to-end, flush under the title. */
	margin-top: 0.9rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.9 );
	text-align: justify;
	text-align-last: left;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Body intro paragraph on the GMC / member pages — same treatment so it lines up
   with the full-width member grids below instead of sitting in a centred box. */
.makrif-page-lead {
	text-align: justify;
	text-align-last: left;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.makrif-contact-grid {
	align-items: start;
	margin-top: 3rem;
}

.makrif-contact-form-col > h2,
.makrif-contact-card h2 {
	font-size: 1.5rem;
}

.makrif-contact-lead {
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.95rem;
	margin: 0.4rem 0 1.6rem;
}

/* ---- Contact details card ---- */
.makrif-contact-card {
	background: var( --wp--preset--color--tint-green );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: var( --wp--custom--radius );
	padding: 1.8rem;
}

.makrif-contact-card > * + * {
	margin-top: 1rem;
}

.makrif-contact-org {
	font-weight: 600;
	color: var( --wp--preset--color--mak-green-text );
	line-height: 1.4;
}

.makrif-contact-line {
	margin: 0;
	line-height: 1.5;
}

.makrif-contact-line strong {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	margin-bottom: 0.15rem;
}

.makrif-contact-line a {
	text-decoration: none;
	font-weight: 600;
	color: var( --wp--preset--color--mak-green-text );
}

.makrif-contact-line a:hover {
	text-decoration: underline;
}

.makrif-contact-note {
	font-size: 0.85rem;
	font-style: italic;
	color: var( --wp--preset--color--ink-soft );
	border-top: 1px solid var( --wp--preset--color--rule );
	padding-top: 1rem;
}

/* ---- Map ---- */
.makrif-contact-map {
	margin: 1.5rem 0 0;
	border-radius: var( --wp--custom--radius );
	overflow: hidden;
	border: 1px solid var( --wp--preset--color--rule );
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-contact-map iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

/* ---- Contact Form 7 (styled via its own .makrif-cf7 wrapper) ---- */
.makrif-cf7 .makrif-field {
	margin: 0 0 1.1rem;
}

.makrif-cf7 .makrif-flabel {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	margin-bottom: 0.4rem;
}

.makrif-cf7 .makrif-flabel b {
	color: var( --wp--preset--color--mak-red );
	font-weight: 700;
}

.makrif-cf7 input[type="text"],
.makrif-cf7 input[type="email"],
.makrif-cf7 input[type="tel"],
.makrif-cf7 textarea {
	width: 100%;
	font-family: var( --wp--preset--font-family--sans );
	font-size: 1rem;
	color: var( --wp--preset--color--ink );
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--mak-silver );
	border-radius: 10px;
	padding: 0.75rem 0.9rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.makrif-cf7 textarea {
	min-height: 130px;
	resize: vertical;
}

.makrif-cf7 input:focus,
.makrif-cf7 textarea:focus {
	outline: none;
	border-color: var( --wp--preset--color--mak-green );
	box-shadow: 0 0 0 3px rgba( 0, 166, 81, 0.15 );
}

.makrif-cf7 .makrif-field-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.makrif-cf7 .makrif-submit-row {
	margin: 0.4rem 0 0;
}

.makrif-cf7 input[type="submit"] {
	font-family: var( --wp--preset--font-family--sans );
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --wp--preset--color--mak-black );
	background: var( --wp--preset--color--mak-gold );
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.makrif-cf7 input[type="submit"]:hover {
	box-shadow: var( --wp--custom--shadow--md );
	transform: translateY( -1px );
}

.makrif-cf7 .wpcf7-not-valid-tip {
	color: var( --wp--preset--color--mak-red );
	font-size: 0.8rem;
	margin-top: 0.3rem;
}

.makrif-cf7 input.wpcf7-not-valid,
.makrif-cf7 textarea.wpcf7-not-valid {
	border-color: var( --wp--preset--color--mak-red );
}

.wpcf7 .wpcf7-response-output {
	border-radius: 10px;
	border-width: 1px;
	padding: 0.8rem 1rem;
	font-size: 0.9rem;
	margin: 1rem 0 0;
}

@media ( max-width: 781px ) {
	.makrif-cf7 .makrif-field-pair {
		grid-template-columns: 1fr;
	}

	.makrif-contact-info-col {
		margin-top: 2rem;
	}
}

/* ===========================================================================
   RESOURCE LIBRARIES (templates/resource.html)
   ===========================================================================
   Download-card grids for Bulletins, Newsletters, Communications, Research
   Agenda; a video gallery + press grid for RIF in the Media. Cards are plain
   core blocks (group + heading + paragraph + button) with these classes, so the
   officer duplicates a card and edits text/links — no custom blocks. */

/* ---- Section head (kicker rule + title), reused across resource sections ---- */
.makrif-res-section {
	margin-top: 3.5rem;
}

.makrif-res-section:first-child {
	margin-top: 2.5rem;
}

.makrif-res-section-title {
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.3rem;
}

.makrif-res-section-title::before {
	content: "";
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
	flex: none;
}

.makrif-res-section-note {
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
}

/* ---- Download-card grid ---- */
.makrif-doc-grid {
	display: grid;
	/* 3 per row on desktop (like the news "Related stories" grid), collapsing to
	   2 then 1 as the wrap narrows. The grid itself is alignwide in the content,
	   so its edges line up with the footer. */
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 340px ), 1fr ) );
	gap: 1.5rem;
	margin-top: 2rem;
}

.makrif-doc-card {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 16px;
	padding: 1.6rem 1.6rem 1.7rem;
	box-shadow: var( --wp--custom--shadow--sm );
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.makrif-doc-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--custom--shadow--md );
	border-color: var( --wp--preset--color--mak-green );
}

/* Document glyph in a tinted-green tile, drawn in CSS so no image upload is
   needed per card. */
.makrif-doc-card::before {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: 12px;
	flex: none;
	margin-bottom: 0.3rem;
	background-color: var( --wp--preset--color--tint-green );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300713A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h6'/%3E%3C/svg%3E" );
}

.makrif-doc-card-title {
	font-size: 1.12rem;
	line-height: 1.3;
	font-weight: 600;
	margin: 0;
}

.makrif-doc-card-meta {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
	margin: 0;
}

/* Download button pinned to the card foot so cards of unequal title length
   still line their buttons up. */
.makrif-doc-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.9rem;
}

.makrif-doc-card .wp-block-button__link,
.makrif-doc-dl .wp-block-button__link {
	background: var( --wp--preset--color--mak-green );
	color: var( --wp--preset--color--base );
	font-size: 0.85rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.6rem 1.2rem;
}

.makrif-doc-card .wp-block-button__link:hover {
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
}

/* ---- Featured single document (Research Agenda) ---- */
.makrif-doc-feature {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	align-items: center;
	gap: 1.6rem;
	background: var( --wp--preset--color--tint-green );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 18px;
	padding: 2rem;
	margin-top: 2rem;
}

.makrif-doc-feature::before {
	content: "";
	width: 96px;
	height: 96px;
	border-radius: 16px;
	background-color: var( --wp--preset--color--base );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 46px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300713A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h6'/%3E%3C/svg%3E" );
}

.makrif-doc-feature-body h3 {
	margin: 0 0 0.3rem;
	font-size: 1.35rem;
}

.makrif-doc-feature-body p {
	margin: 0;
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.95rem;
}

@media ( max-width: 640px ) {
	.makrif-doc-feature {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

/* ---- Video gallery (RIF in the Media) ---- */
.makrif-video-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 1.5rem;
	margin-top: 2rem;
}

.makrif-video-card {
	display: block;
	line-height: 0; /* kill the inline gap under the block thumb when a card has no title */
	text-decoration: none;
	color: inherit;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var( --wp--custom--shadow--sm );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.makrif-video-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--custom--shadow--md );
}

.makrif-video-thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var( --wp--preset--color--mak-green-dark );
	background-size: cover;
	background-position: center;
}

/* Play triangle overlay */
.makrif-video-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: rgba( 237, 28, 36, 0.92 );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: 54% center;
	background-size: 24px;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.35 );
}

.makrif-video-title {
	display: block;
	padding: 0.9rem 1rem 1.1rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

/* ---- Press grid (newspaper clippings + external coverage) ---- */
.makrif-press-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	gap: 1rem;
	margin-top: 1.5rem;
}

.makrif-press-card {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 12px;
	padding: 1.1rem 1.2rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.makrif-press-card:hover {
	border-color: var( --wp--preset--color--mak-green );
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-press-card::before {
	content: "";
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 8px;
	background-color: var( --wp--preset--color--tint-neutral );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231F20' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8M15 18h-5M10 6h8v4h-8V6Z'/%3E%3C/svg%3E" );
}

.makrif-press-card-source {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	margin-bottom: 0.15rem;
}

.makrif-press-card-title {
	font-size: 0.92rem;
	line-height: 1.4;
	font-weight: 500;
}

/* ===========================================================================
   COMMITTEE / TEAM MEMBERS (GMC pages, resource template)
   ===========================================================================
   A grid of member cards — portrait photo, name, role. Office-bearers get a
   gold top accent (.is-lead). Cards are core blocks (image + heading +
   paragraphs) with these classes, so a member is added by duplicating one. */
.makrif-member-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 220px ), 1fr ) );
	gap: 1.6rem;
	margin-top: 2rem;
}

.makrif-member-card {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var( --wp--custom--shadow--sm );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.makrif-member-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--custom--shadow--md );
}

/* wp:image renders a <figure>; kill its default margins and size the photo. */
.makrif-member-photo {
	margin: 0;
}

.makrif-member-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top center;
	background: var( --wp--preset--color--tint-green );
}

.makrif-member-body {
	padding: 1rem 1.15rem 1.25rem;
}

.makrif-member-name {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	color: var( --wp--preset--color--mak-black );
}

.makrif-member-role {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	margin: 0.45rem 0 0;
}

.makrif-member-note {
	font-size: 0.82rem;
	line-height: 1.35;
	color: var( --wp--preset--color--ink-soft );
	margin: 0.3rem 0 0;
}

/* Office-bearers: gold top accent + a taller portrait photo + larger name so
   the leadership row reads as the senior tier and fills the full width (it
   shares the 5-up grid with the members below, so the edges line up). */
.makrif-member-card.is-lead {
	border-top: 3px solid var( --wp--preset--color--mak-gold );
}

.makrif-member-card.is-lead .makrif-member-photo img {
	aspect-ratio: 4 / 5;
}

.makrif-member-card.is-lead .makrif-member-name {
	font-size: 1.18rem;
}

.makrif-member-card.is-lead .makrif-member-role {
	color: var( --wp--preset--color--mak-green-dark );
}

/* When a leadership tier has only a couple of office-bearers (the 2019–2022
   committee had a Chair + Coordinator), centre the pair rather than leave a big
   empty gap to the right. */
.makrif-member-grid.is-lead-pair {
	grid-template-columns: repeat( 2, minmax( 0, 250px ) );
	justify-content: center;
}

@media ( max-width: 520px ) {
	.makrif-member-grid.is-lead-pair {
		grid-template-columns: minmax( 0, 250px );
	}
}

/* Initials-avatar placeholder for members whose photo we do not have yet. */
.makrif-member-photo.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background:
		radial-gradient( circle at 50% 38%, var( --wp--preset--color--base ) 0 22%, transparent 22% ),
		var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-text );
}

.makrif-member-card.is-lead .makrif-member-photo.is-placeholder {
	aspect-ratio: 4 / 5;
}

.makrif-member-photo.is-placeholder span {
	font-family: var( --wp--preset--font-family--display );
	font-size: 1.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Link to the related inauguration / launch news article. */
.makrif-gmc-article-link {
	margin-top: 3rem;
}

.makrif-gmc-article-link .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--mak-green-text );
	border: 2px solid var( --wp--preset--color--mak-green );
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.7rem 1.6rem;
}

.makrif-gmc-article-link .wp-block-button__link:hover {
	background: var( --wp--preset--color--mak-green );
	color: var( --wp--preset--color--base );
}

/* ===========================================================================
   SINGLE ARTICLE — Article A side-rail (templates/single.html)
   ===========================================================================
   Built from inner-article-a.html. The whole design is ONE left edge: the rail,
   the gap and the body measure all live inside the same 1240 wrap as the header
   and footer, so the rail's left edge == the logo's left edge == the footer's
   left edge, and title/hero/prose share a single edge with nothing straying.
   Geometry that block attributes cannot express lives here. */
.makrif-article-layout {
	--makrif-rail: 240px;
	--makrif-rail-gap: 64px;
	display: grid;
	/* The prose column FILLS the remaining width (1fr) so the article's right
	   edge lines up with the footer and the "Related stories" grid below, which
	   both run the full wrap width. The rail keeps its fixed left position, so
	   the left edge stays flush with the breadcrumb and footer-left. This lifts
	   the mockup's deliberate 716px/67ch cap — a considered trade of a slightly
	   longer line (~88ch at this width) for consistent full-width alignment
	   (user decision, 2026-07). Justify + hyphens (set on .makrif-prose p) keep
	   the wider measure tidy; on Elementor-built posts the extra width helps. */
	grid-template-columns: var( --makrif-rail ) minmax( 0, 1fr );
	gap: 0 var( --makrif-rail-gap );
	align-items: start;
	padding: 2.5rem 0 4rem;
}

/* The rail COLUMN is full height and carries the gold vertical rule that runs
   the length of the article; the rail's CONTENT is what sticks. */
.makrif-rail-col {
	position: relative;
	align-self: stretch;
	height: 100%;
}

.makrif-rail-col::after {
	content: "";
	position: absolute;
	top: 0.35rem;
	bottom: 0;
	right: calc( var( --makrif-rail-gap ) / -2 );
	width: 2px;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
}

.makrif-rail.wp-block-group {
	position: sticky;
	top: 94px;
	align-items: flex-start;
	gap: 1.15rem;
}

/* Red category tag. Pill lives on the <a>, not the post-terms wrapper (a
   background on the wrapper would merge multiple terms into one bar — gotcha).
   white on --mak-red #ED1C24 is 4.38:1 and FAILS AA at this size; --mak-red-dark
   #C1121A gives 6.23:1 and still reads unmistakably red. */
.makrif-cat-tag {
	line-height: 1;
}

.makrif-cat-tag a {
	display: inline-block;
	background: var( --wp--preset--color--mak-red-dark );
	color: var( --wp--preset--color--base );
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	text-decoration: none;
}

.makrif-cat-tag a:hover {
	background: var( --wp--preset--color--mak-red );
	color: var( --wp--preset--color--mak-black );
}

.makrif-rail-meta.wp-block-group {
	gap: 0.85rem;
	width: 100%;
}

.makrif-rail-item.wp-block-group {
	gap: 0.15rem;
}

.makrif-rail-dt {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
}

/* post-date, post-author-name and the reading-time block all wear this. */
.makrif-rail-dd,
.makrif-reading-time {
	font-size: 0.88rem;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	line-height: 1.45;
}

.makrif-rail-dd a {
	color: inherit;
	text-decoration: none;
}

.makrif-rail-h {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
	margin-bottom: 0.6rem;
	font-family: var( --wp--preset--font-family--sans );
}

.makrif-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.makrif-chip {
	display: inline-block;
	background: var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-dark );
	font-size: 0.74rem;
	font-weight: 700;
	padding: 0.32rem 0.65rem;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid transparent;
}

.makrif-chip:hover {
	border-color: var( --wp--preset--color--mak-green-dark );
}

.makrif-share {
	display: flex;
	gap: 0.45rem;
	flex-wrap: wrap;
}

.makrif-share a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var( --wp--preset--color--rule );
	background: var( --wp--preset--color--base );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --wp--preset--color--ink-soft );
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.makrif-share a:hover {
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--mak-green-dark );
}

/* ---- Rail "Latest News": recency discovery inside the sticky rail ---- */
/* The block filters to the News category, so this never fills with Round 1
   grantee profiles. Hidden < 900px, where the rail unpins into a horizontal
   meta strip above the article and a vertical list would shove the story down
   — the full-width Related row at the foot covers mobile discovery. */
.makrif-rail-latest .makrif-rail-latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.makrif-rail-latest-item a {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.makrif-rail-latest-media {
	flex: 0 0 46px;
	line-height: 0;
}

.makrif-rail-latest-media img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.makrif-rail-latest-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.makrif-rail-latest-title {
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	color: var( --wp--preset--color--ink );
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.makrif-rail-latest-item a:hover .makrif-rail-latest-title {
	color: var( --wp--preset--color--mak-green-text );
}

.makrif-rail-latest-date {
	font-size: 0.7rem;
	color: var( --wp--preset--color--ink-soft );
}

.makrif-rail-latest-all {
	display: inline-block;
	margin-top: 0.95rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	text-decoration: none;
}

.makrif-rail-latest-all:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Body column: one left edge, generous rhythm ---- */
.makrif-article-body {
	min-width: 0;
}

.makrif-article-title {
	font-size: clamp( 1.8rem, 3.2vw, 2.7rem );
	line-height: 1.12;
	letter-spacing: -0.02em;
}

/* Featured image: contained + rounded, sharing the body column's left edge —
   NOT a full-bleed slab above text that starts further in. */
.makrif-article-hero {
	margin: 1.5rem 0 0;
}

.makrif-article-hero img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var( --wp--custom--radius );
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-prose {
	margin-top: 2.5rem;
	/* 20px, up from 17px: the prose column now fills the full wrap width (see
	   .makrif-article-layout), so larger type is what keeps a wide line readable
	   — it cuts the measure from ~104 to ~88 characters and reads as a confident
	   editorial body rather than a thin column stretched too far. Elementor-built
	   posts set their own widget typography, so this mainly lifts plain-text
	   posts, which is exactly where the long-line problem lives. */
	font-size: 1.25rem;
	line-height: 1.75;
}

.makrif-prose > * + * {
	margin-top: 1.45rem;
}

/* h2s in the body get the gold-adjacent top rule from the mockup so the (rare)
   author subheading reads as a section break. */
.makrif-prose h2 {
	font-size: 1.4rem;
	margin-top: 2.5rem;
	padding-top: 1.6rem;
	border-top: 1px solid var( --wp--preset--color--rule );
}

.makrif-prose figure img {
	border-radius: var( --wp--custom--radius );
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-prose figcaption {
	margin-top: 0.7rem;
	padding-left: 0.85rem;
	border-left: 3px solid var( --wp--preset--color--mak-gold-bronze );
	font-size: 0.82rem;
	line-height: 1.55;
	color: var( --wp--preset--color--ink-soft );
}

/* ---- Breadcrumb ---- */
.makrif-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 0;
	margin-top: 0;
	border-bottom: 1px solid var( --wp--preset--color--rule );
	font-size: 0.8rem;
	color: var( --wp--preset--color--ink-soft );
}

.makrif-crumb a {
	color: var( --wp--preset--color--mak-green-text );
	text-decoration: none;
	font-weight: 600;
}

.makrif-crumb a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.makrif-crumb-sep {
	color: var( --wp--preset--color--mak-silver );
}

.makrif-crumb-here {
	color: var( --wp--preset--color--ink-soft );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 40ch;
}

/* ---- Article responsive ---- */
@media ( max-width: 1100px ) {
	.makrif-article-layout {
		--makrif-rail: 212px;
		--makrif-rail-gap: 48px;
	}
}

@media ( max-width: 900px ) {
	/* Rail unpins and becomes a horizontal meta strip ABOVE the article. One
	   left edge is preserved — everything now shares the wrap's edge. */
	.makrif-article-layout {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
	}

	.makrif-rail-col::after {
		display: none;
	}

	.makrif-rail-col {
		height: auto;
		padding-bottom: 1.5rem;
		margin-bottom: 1.5rem;
		border-bottom: 2px solid var( --wp--preset--color--mak-gold );
	}

	.makrif-rail.wp-block-group {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem 1.6rem;
	}

	.makrif-rail-meta.wp-block-group {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.6rem;
		width: auto;
	}

	/* The rail is now a horizontal strip above the story; a vertical news list
	   here would push the article far down. Discovery falls to the full-width
	   Related row at the foot. */
	.makrif-rail-latest {
		display: none;
	}
}

@media ( max-width: 520px ) {
	.makrif-prose {
		font-size: 1rem;
	}

	.makrif-article-hero img {
		aspect-ratio: 4 / 3;
	}
}

/* ===========================================================================
   SINGLE ARTICLE — Magazine alternate (templates/article-magazine.html)
   ===========================================================================
   Photo-led cover + centred reading column. Ported from inner-article-b.html. */
.makrif-cover.wp-block-cover {
	align-items: flex-end;
	color: var( --wp--preset--color--base );
}

/* Left-align the cover content in a 1140 rail rather than centring it in the
   narrow contentSize — the mockup sits title + category at the bottom-left. */
.makrif-cover .wp-block-cover__inner-container {
	width: min( 1140px, 100% - 3rem );
	margin-inline: auto;
	text-align: left;
	padding-block: 2.5rem;
}

.makrif-cover .wp-block-cover__inner-container > * {
	margin-inline: 0;
	max-width: 100%;
}

/* Category pill on the cover: same red-dark pill as Article A (white on
   #C1121A = 6.23:1), so it reads on the scrim regardless of the photo. */
.makrif-cover-cat {
	line-height: 1;
	margin-bottom: 1rem;
}

.makrif-cover-cat a {
	display: inline-block;
	background: var( --wp--preset--color--mak-red-dark );
	color: var( --wp--preset--color--base );
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	text-decoration: none;
}

.makrif-cover-title {
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 4.4vw, 3.3rem );
	line-height: 1.1;
	letter-spacing: -0.01em;
	max-width: 22ch;
}

.makrif-mag-body {
	padding-block: 3rem 4rem;
}

.makrif-mag-meta {
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var( --wp--preset--color--rule );
}

/* The magazine body is centred and slightly narrower than Article A's measure,
   for the single-column read. contentSize (760) already gives ~66ch at 17px. */
.makrif-mag-prose {
	font-size: 1.0625rem;
	line-height: 1.8;
}

.makrif-mag-foot {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --wp--preset--color--rule );
	gap: 2.5rem;
	align-items: flex-start;
}

.makrif-mag-foot .makrif-rail-block {
	flex: 1 1 12rem;
}

/* ===========================================================================
   PAGE — Narrative template + makrif/narrative-* band patterns
   ===========================================================================
   Ported from inner-about.html. One left edge for every band; alternating
   text/image, then image/text, on alternating backgrounds. */

.makrif-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* ---- Hero ---- */
.makrif-narrative-hero {
	border-bottom: 1px solid var( --wp--preset--color--rule );
	padding-block: clamp( 2.2rem, 5vw, 3.6rem );
}

/* The breadcrumb loses its article-context underline inside the hero band. */
.makrif-narrative-hero .makrif-crumb {
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 1.2rem;
	margin-top: 0;
}

.makrif-narrative-title {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: clamp( 2.3rem, 5.6vw, 4.1rem );
	line-height: 1.03;
	letter-spacing: -0.02em;
	max-width: 16ch;
}

.makrif-narrative-standfirst {
	margin-top: 1.2rem;
	max-width: 60ch;
	font-size: clamp( 1.02rem, 1.5vw, 1.24rem );
	line-height: 1.55;
	color: var( --wp--preset--color--ink );
}

/* ---- Bands ---- */
.makrif-band {
	padding-block: clamp( 3rem, 6vw, 5.5rem );
}

/* verticalAlignment top gives align-items:flex-start, which is what lets the
   media column be sticky instead of stretching to the copy column's height. */
.makrif-band-cols.wp-block-columns {
	gap: clamp( 2rem, 4.5vw, 4.5rem );
}

.makrif-band-media {
	position: sticky;
	top: calc( 78px + 2rem );
}

.makrif-band-figure img {
	width: 100%;
	height: auto;
	border-radius: var( --wp--custom--radius );
	box-shadow: var( --wp--custom--shadow--md );
	background: var( --wp--preset--color--tint-neutral );
}

.makrif-band-figure figcaption {
	margin-top: 0.8rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var( --wp--preset--color--ink-soft );
	border-left: 3px solid var( --wp--preset--color--mak-gold-bronze );
	padding-left: 0.8rem;
	max-width: 44ch;
	text-align: left;
}

.makrif-band-copy h2 {
	font-size: clamp( 1.65rem, 3vw, 2.4rem );
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin-bottom: 1.3rem;
}

.makrif-band-copy p {
	max-width: 64ch;
	line-height: 1.72;
}

.makrif-band-copy .makrif-lead::first-letter {
	float: left;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: 3.4em;
	line-height: 0.82;
	margin: 0.06em 0.12em 0 0;
	color: var( --wp--preset--color--mak-green-text );
}

/* Reverse band: media to the left on wide screens. Source order keeps the
   heading first (a11y + mobile stack); flex order does the visual swap, and the
   swap is undone when core stacks the columns so the image never jumps above
   its own heading. */
@media ( min-width: 782px ) {
	.makrif-band-reverse .makrif-band-media {
		order: -1;
	}
}

.makrif-run-lead {
	margin-top: 1.6rem;
	font-weight: 600;
	color: var( --wp--preset--color--mak-black );
}

.makrif-run.wp-block-list {
	margin-top: 1rem;
	counter-reset: makrif-run;
	list-style: none;
	padding-left: 0;
}

.makrif-run li {
	position: relative;
	padding-left: 2.6rem;
	line-height: 1.6;
	max-width: 60ch;
}

.makrif-run li + li {
	margin-top: 0.9rem;
}

.makrif-run li::before {
	counter-increment: makrif-run;
	content: counter( makrif-run );
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-text );
	font-size: 0.8rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The one question the authors put to the reader, given the weight it asks. */
.makrif-question {
	margin-top: 1.8rem;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-left: 5px solid var( --wp--preset--color--mak-green );
	border-radius: 0 var( --wp--custom--radius ) var( --wp--custom--radius ) 0;
	padding: 1.6rem 1.7rem;
	box-shadow: var( --wp--custom--shadow--sm );
}

.makrif-question-q {
	font-weight: 600;
	font-size: clamp( 1.05rem, 1.7vw, 1.32rem );
	line-height: 1.42;
	color: var( --wp--preset--color--mak-black );
	max-width: 46ch;
}

.makrif-question-a {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var( --wp--preset--color--mak-green-text );
	margin-top: 0.9rem;
}

/* ---- Impact strip (static numbers, no count-up) ---- */
.makrif-impact-strip {
	padding-block: clamp( 1.6rem, 3vw, 2.4rem );
}

.makrif-impact-grid {
	gap: 0.9rem 1.4rem;
}

.makrif-stat {
	border-left: 3px solid rgba( 251, 202, 84, 0.45 );
	padding: 0.1rem 0 0.1rem 1rem;
}

.makrif-stat-num {
	font-weight: 800;
	color: var( --wp--preset--color--mak-gold );
	font-size: clamp( 1.45rem, 2.1vw, 2.05rem );
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.makrif-stat-cap {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var( --wp--preset--color--tint-green );
	font-weight: 500;
	line-height: 1.35;
}

/* ---- Pull-quote band ---- */
.makrif-pullquote-band {
	padding-block: clamp( 3rem, 6vw, 5rem );
}

/* Size on the blockquote so the ch measure resolves against Fraunces display. */
.makrif-pullquote.wp-block-quote {
	margin-inline: auto;
	text-align: center;
	border: 0;
	padding: 0;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: clamp( 1.35rem, 3vw, 2.3rem );
	max-width: 26ch;
}

.makrif-pullquote.wp-block-quote::before {
	content: "";
	display: block;
	width: 56px;
	height: 5px;
	border-radius: 3px;
	background: var( --wp--preset--color--mak-gold );
	margin: 0 auto 1.8rem;
}

.makrif-pullquote p {
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--mak-green-dark );
}

.makrif-pullquote cite {
	display: block;
	margin-top: 1.6rem;
	font-style: normal;
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
}

/* ---- Funding acknowledgment ---- */
.makrif-ack-band {
	padding-block: 0 clamp( 3rem, 6vw, 5rem );
}

.makrif-ack-panel {
	background: var( --wp--preset--color--tint-green );
	border-left: 6px solid var( --wp--preset--color--mak-gold );
	border-radius: 0 var( --wp--custom--radius ) var( --wp--custom--radius ) 0;
	padding: clamp( 1.8rem, 3.4vw, 2.6rem ) clamp( 1.5rem, 3vw, 2.6rem );
	gap: 1.6rem;
}

.makrif-ack-crest {
	width: 64px;
	height: 44px;
	flex: none;
	border-radius: 4px;
	background: url( "assets/images/flag-uganda.svg" ) center / cover no-repeat;
	box-shadow: 0 0 0 1px var( --wp--preset--color--mak-silver );
}

.makrif-ack-label {
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	margin-bottom: 0.6rem;
}

.makrif-ack-text {
	font-weight: 600;
	font-size: clamp( 1.05rem, 1.9vw, 1.4rem );
	line-height: 1.4;
	color: var( --wp--preset--color--mak-black );
	max-width: 52ch;
}

/* ---- Next-step cards ---- */
.makrif-next {
	padding-block: clamp( 3rem, 6vw, 5rem );
	border-top: 1px solid var( --wp--preset--color--rule );
}

.makrif-next-intro {
	margin-top: 0.6rem;
	max-width: 58ch;
}

.makrif-next-grid.wp-block-columns {
	margin-top: 2.4rem;
	gap: 1.4rem;
}

.makrif-next-card {
	height: 100%;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-top: 4px solid var( --wp--preset--color--mak-green );
	border-radius: var( --wp--custom--radius );
	padding: 1.7rem;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.makrif-next-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --wp--custom--shadow--md );
	border-top-color: var( --wp--preset--color--mak-gold );
}

.makrif-next-card h3 {
	font-size: 1.12rem;
	font-weight: 700;
	font-family: var( --wp--preset--font-family--sans );
}

.makrif-next-card h3 a {
	text-decoration: none;
	color: inherit;
}

.makrif-next-card h3 a:hover {
	color: var( --wp--preset--color--mak-green-dark );
}

.makrif-next-card p {
	margin-top: 0.6rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var( --wp--preset--color--ink-soft );
}

@media ( max-width: 781px ) {
	.makrif-band-media {
		position: static;
	}

	.makrif-impact-grid.wp-block-group {
		grid-template-columns: repeat( 2, 1fr );
	}

	.makrif-narrative-title {
		max-width: none;
	}
}

/* ===========================================================================
   PAGE — Reference (long document) template + makrif/toc
   ===========================================================================
   Ported from inner-reference.html, with its three measured defects fixed:

   FIX 1 (259px width step): in the mockup .keyfacts escaped the body measure to
     full width (942px) while sections sat at 68ch (683px) — a jarring 259px
     step. Here the key-facts card shares the body measure, so the card's right
     edge lines up with the prose. Wider-than-text elements (tables) still
     escape, but deliberately and to a controlled width, not 259px adrift.

   FIX 2 (76-83 chars/line): the mockup's max-width:68ch measured ~76-83 real
     characters, because `ch` is the width of "0" and most letters are wider.
     The body measure here is 40rem (~64-66 real chars at 17px) — a genuine
     reading measure, not a nominal one.

   FIX 3 (sticky offset overshoot): the mockup's --header-h was 116px, which
     counted the NON-sticky topbar as well as the sticky nav, so every anchor
     landed 54px too low. Only the nav (.makrif-header) is sticky, so the offset
     here is its height alone. */
.makrif-doc {
	--makrif-sticky-h: 84px; /* sticky NAV height only — the topbar is not sticky */
	display: grid;
	grid-template-columns: 240px minmax( 0, 1fr );
	gap: clamp( 2rem, 4vw, 4rem );
	align-items: start;
	padding-block: clamp( 2.5rem, 5vw, 4rem ) clamp( 3.5rem, 7vw, 6rem );
}

/* ---- Page head (dark band) ---- */
.makrif-page-head {
	padding-block: clamp( 2.4rem, 5vw, 3.8rem );
}

.makrif-page-head .makrif-crumb {
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 1.1rem;
	margin-top: 0;
	font-size: 0.9rem; /* was 0.8rem — too small/faint on the dark band */
	color: var( --wp--preset--color--tint-green );
}

.makrif-page-head .makrif-crumb a {
	color: var( --wp--preset--color--mak-gold );
}

/* The current-page crumb was ink-soft grey — near-invisible on green-dark.
   Override to a readable light tint on the dark band (still muted vs the gold
   links, so it reads as "you are here"). */
.makrif-page-head .makrif-crumb-here {
	color: rgba( 255, 255, 255, 0.82 );
	max-width: none;
}

.makrif-page-head .makrif-crumb-sep {
	color: rgba( 255, 255, 255, 0.5 );
}

.makrif-page-head-title {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: clamp( 2.1rem, 4.6vw, 3.4rem );
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--base );
	max-width: 20ch;
}

/* ---- TOC rail ---- */
.makrif-toc {
	position: sticky;
	top: calc( var( --makrif-sticky-h ) + 1rem );
	max-height: calc( 100vh - var( --makrif-sticky-h ) - 2rem );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.makrif-toc-h {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	padding-bottom: 0.7rem;
	font-family: var( --wp--preset--font-family--sans );
}

.makrif-toc-h::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-top: 0.55rem;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
}

.makrif-toc-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	border-left: 2px solid var( --wp--preset--color--rule );
}

.makrif-toc-top > a {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	text-decoration: none;
	padding: 0.5rem 0.8rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.makrif-toc-n {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	color: var( --wp--preset--color--mak-silver );
	font-size: 0.74rem;
	flex: none;
}

.makrif-toc-top > a:hover {
	color: var( --wp--preset--color--mak-black );
	background: var( --wp--preset--color--tint-neutral );
	border-left-color: var( --wp--preset--color--mak-green );
	border-radius: 0 6px 6px 0;
}

.makrif-toc-sub {
	list-style: none;
	margin: 0;
	padding: 0.15rem 0 0.6rem 1.75rem;
}

.makrif-toc-sub a {
	display: block;
	text-decoration: none;
	color: var( --wp--preset--color--ink-soft );
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.35;
	padding: 0.28rem 0;
}

.makrif-toc-sub a:hover {
	color: var( --wp--preset--color--mak-green-text );
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media ( max-width: 1023px ) {
	.makrif-doc {
		grid-template-columns: minmax( 0, 1fr );
	}

	.makrif-toc {
		position: static;
		max-height: none;
		order: -1;
		border: 1px solid var( --wp--preset--color--rule );
		border-radius: var( --wp--custom--radius );
		padding: 1rem 1.1rem;
		background: var( --wp--preset--color--base );
	}
}

/* ---- Doc body: the reading measure (FIX 2) ---- */
.makrif-doc-body > * {
	max-width: 40rem;
}

/* FIX 1: the key-facts card shares the prose measure (40rem), so its right edge
   lines up with the text — no step. Only genuinely tabular content escapes, and
   only to a controlled +6rem, not the mockup's 259px adrift. A data table
   stepping out slightly is conventional; a "card" doing it read as a bug. */
.makrif-doc-body > .wp-block-table,
.makrif-doc-body > figure.wp-block-table {
	max-width: 46rem;
}

.makrif-doc-body h2 {
	scroll-margin-top: calc( var( --makrif-sticky-h ) + 1rem );
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: clamp( 1.6rem, 3vw, 2.15rem );
	letter-spacing: -0.01em;
	border-top: 3px solid var( --wp--preset--color--mak-black );
	padding-top: 1.4rem;
	margin-top: clamp( 2.5rem, 5vw, 4rem );
}

.makrif-doc-body h3 {
	scroll-margin-top: calc( var( --makrif-sticky-h ) + 1rem );
	font-size: 1.16rem;
	font-weight: 700;
	position: relative;
	padding-bottom: 0.7rem;
	margin-top: 2rem;
}

.makrif-doc-body h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
}

/* ---- Key-facts card ---- */
.makrif-keyfacts {
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: var( --wp--custom--radius );
	overflow: hidden;
	box-shadow: var( --wp--custom--shadow--sm );
	margin-bottom: 2.5rem;
	background: var( --wp--preset--color--base );
}

.makrif-keyfacts-h {
	background: var( --wp--preset--color--tint-neutral );
	border-bottom: 1px solid var( --wp--preset--color--rule );
	padding: 0.9rem 1.4rem;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var( --wp--preset--font-family--sans );
}

.makrif-keyfacts-h::before {
	content: "";
	width: 26px;
	height: 4px;
	flex: none;
	border-radius: 2px;
	background: var( --wp--preset--color--mak-gold );
}

.makrif-keyfacts-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
}

.makrif-kf {
	padding: 1.25rem 1.4rem;
	border-right: 1px solid var( --wp--preset--color--rule );
	border-bottom: 1px solid var( --wp--preset--color--rule );
}

.makrif-kf:nth-child( 3n ) {
	border-right: 0;
}

.makrif-kf:nth-last-child( -n + 3 ) {
	border-bottom: 0;
}

.makrif-kf dt,
.makrif-kf .makrif-kf-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
	margin-bottom: 0.4rem;
}

.makrif-kf dd,
.makrif-kf .makrif-kf-value {
	font-size: 1.02rem;
	font-weight: 700;
	color: var( --wp--preset--color--mak-black );
	line-height: 1.35;
	margin: 0;
}

@media ( max-width: 767px ) {
	.makrif-keyfacts-grid {
		grid-template-columns: 1fr;
	}

	.makrif-kf {
		border-right: 0;
	}

	.makrif-kf:nth-last-child( -n + 3 ) {
		border-bottom: 1px solid var( --wp--preset--color--rule );
	}

	.makrif-kf:last-child {
		border-bottom: 0;
	}
}

/* ---- Callout panels ---- */
.makrif-callout {
	background: var( --wp--preset--color--tint-green );
	border-left: 5px solid var( --wp--preset--color--mak-green-dark );
	border-radius: 0 10px 10px 0;
	padding: 1.2rem 1.4rem;
	margin-block: 1.3rem;
}

.makrif-callout.is-urgent {
	background: color-mix( in srgb, var( --wp--preset--color--mak-red ) 8%, var( --wp--preset--color--base ) );
	border-left-color: var( --wp--preset--color--mak-red-dark );
}

.makrif-callout-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
	margin-bottom: 0.5rem;
}

.makrif-callout.is-urgent .makrif-callout-label {
	color: var( --wp--preset--color--mak-red-dark );
}

/* ---- Core Details block as an accordion, doc-styled ---- */
.makrif-doc-body .wp-block-details {
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: var( --wp--custom--radius );
	margin-block: 1.3rem;
	padding: 0;
	overflow: hidden;
}

.makrif-doc-body .wp-block-details summary {
	padding: 1rem 1.2rem;
	cursor: pointer;
	font-weight: 600;
	color: var( --wp--preset--color--mak-black );
	background: var( --wp--preset--color--base );
	transition: background 0.15s ease;
}

.makrif-doc-body .wp-block-details summary:hover {
	background: var( --wp--preset--color--tint-neutral );
}

.makrif-doc-body .wp-block-details[open] summary {
	background: var( --wp--preset--color--tint-green );
	color: var( --wp--preset--color--mak-green-dark );
	border-bottom: 1px solid var( --wp--preset--color--rule );
}

.makrif-doc-body .wp-block-details > *:not( summary ) {
	padding-inline: 1.2rem;
}

.makrif-doc-body .wp-block-details > *:last-child {
	padding-bottom: 1.2rem;
}

/* ---- Data tables (converted from the RFA document) ---- */
.makrif-doc-table {
	margin-block: 1.3rem;
	overflow-x: auto;
}

.makrif-doc-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
	font-size: 0.9rem;
	border: 1px solid var( --wp--preset--color--mak-silver );
	border-radius: 10px;
}

.makrif-doc-table caption {
	text-align: left;
	padding: 0.9rem 1rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
	border-bottom: 1px solid var( --wp--preset--color--mak-silver );
}

.makrif-doc-table thead th {
	background: var( --wp--preset--color--tint-neutral );
	color: var( --wp--preset--color--mak-green-text );
	text-align: left;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.8rem 1rem;
	border-bottom: 2px solid var( --wp--preset--color--mak-silver );
}

.makrif-doc-table th[scope="row"] {
	font-weight: 700;
	color: var( --wp--preset--color--mak-black );
	text-align: left;
}

.makrif-doc-table td,
.makrif-doc-table th[scope="row"] {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var( --wp--preset--color--rule );
	vertical-align: top;
}

.makrif-doc-table tbody tr:nth-child( even ) {
	background: var( --wp--preset--color--tint-neutral );
}

.makrif-doc-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.makrif-doc-table tfoot th,
.makrif-doc-table tfoot td {
	padding: 0.8rem 1rem;
	background: var( --wp--preset--color--tint-green );
	font-weight: 800;
	color: var( --wp--preset--color--mak-black );
	border-top: 2px solid var( --wp--preset--color--mak-silver );
}

/* ---- Term list (definition-style, converted to a styled list) ---- */
.makrif-doc-body .makrif-term-list li {
	margin-bottom: 0.7rem;
}

.makrif-doc-body .makrif-term-list strong {
	color: var( --wp--preset--color--mak-green-text );
}

/* ---- Resource links ---- */
.makrif-doc-body .makrif-doc-resources {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.9rem;
	margin-top: 1.3rem;
}

.makrif-doc-body .makrif-doc-resources li {
	margin: 0;
}

.makrif-doc-body .makrif-doc-resources a {
	display: block;
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 10px;
	padding: 0.95rem 1.1rem;
	font-weight: 600;
	font-size: 0.93rem;
	text-decoration: none;
	color: var( --wp--preset--color--mak-black );
	transition: border-color 0.15s ease, background 0.15s ease;
}

.makrif-doc-body .makrif-doc-resources a:hover {
	border-color: var( --wp--preset--color--mak-green );
	background: var( --wp--preset--color--tint-neutral );
}

@media ( max-width: 639px ) {
	.makrif-doc-body .makrif-doc-resources {
		grid-template-columns: 1fr;
	}
}

/* ---- Doc-body lists + h4 ---- */
.makrif-doc-body ul:not( .makrif-doc-resources ):not( .makrif-toc-list ):not( .makrif-toc-sub ) {
	padding-left: 1.3rem;
}

.makrif-doc-body ol {
	padding-left: 1.3rem;
}

.makrif-doc-body li {
	margin-bottom: 0.5rem;
}

.makrif-doc-body h4 {
	font-size: 0.98rem;
	font-weight: 700;
	color: var( --wp--preset--color--mak-black );
	margin-top: 1.5rem;
}

/* ===========================================================================
   JUSTIFIED BODY TEXT (all inner pages)
   ===========================================================================
   A clean, straight right edge stands in for the absent right-hand rule on the
   inner pages. Only running body paragraphs are justified — headings, captions,
   meta, ledes and table cells stay left-aligned, where justify would look wrong.
   Hyphenation is REQUIRED with justify at these measures, or the browser opens
   large inter-word gaps ("rivers") to reach the right edge; hyphens:auto needs
   the lang attribute on <html>, which WordPress always emits. */
.makrif-prose p,
.makrif-mag-prose p,
.makrif-band-copy p,
.makrif-doc-body p,
.makrif-callout p,
.makrif-doc-body li {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* A justified LAST line is just a normal ragged line — do not stretch it.
   (This is the default, but some resets set text-align-last; make it explicit.) */
.makrif-prose p,
.makrif-mag-prose p,
.makrif-band-copy p,
.makrif-doc-body p {
	text-align-last: left;
}

/* ===========================================================================
   HEADER COLOUR SCHEME — FLIP WITH ONE LINE
   ===========================================================================
   Set MAKRIF_HEADER_SCHEME to 3 or 4 in wp-config.php (or functions.php):

       define( 'MAKRIF_HEADER_SCHEME', 3 );   // or 4

   Both schemes give WHITE nav links on a green bar and both meet WCAG AA —
   they just buy it differently. White on the official Mak Green #00A651 is
   only 3.19:1, which fails AA for normal text. There are exactly two honest
   ways to keep white text:

   SCHEME 3 (default) — keep the OFFICIAL green #00A651, and make the nav
     qualify as WCAG "large text", where the bar drops to 3:1. That needs
     >= 18.66px AND >= 700 weight, hence 1.2rem/700. Brand-exact green; the
     nav is noticeably bigger, which crowds the logo until the menu is
     shortened.

   SCHEME 4 — keep the nav at its normal 0.93rem/600 and use #068644, the
     green mak.ac.ug itself ships. 4.67:1, passes AA outright, no size change.
     Slightly deeper bar; not the print-spec green.

   The topbar stays #00713A in both, so the two-tone header survives either way.
   =========================================================================== */

.makrif-header {
	background-color: var( --nav-bar-bg ) !important;
}

/* Colour the CONTAINER, not the links. Core ships
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
    { color: inherit }` — a doubled-class selector at (0,3,0) that beats any
   sane rule aimed at the <a>. Fighting it needs escalating specificity; going
   with it does not. So we set the colour here and the links inherit, which is
   how the block is designed to be coloured. */
.makrif-nav {
	color: var( --nav-link-color );
}

.makrif-nav a,
.makrif-nav .wp-block-navigation-item__content {
	font-size: var( --nav-link-size );
	font-weight: var( --nav-link-weight );
}

/* --- Scheme 3: official green + large white nav (3.19:1, passes AA-large) --- */
.makrif-scheme-3 {
	--nav-bar-bg: var( --wp--preset--color--mak-green );
	--nav-link-color: var( --wp--preset--color--base );
	--nav-link-size: 1.2rem;    /* >= 18.66px: the WCAG large-text threshold */
	--nav-link-weight: 700;     /* large text also requires bold */
}

/* --- Scheme 4: web green + normal white nav (4.67:1, passes AA outright) --- */
.makrif-scheme-4 {
	--nav-bar-bg: var( --wp--preset--color--mak-green-web );
	--nav-link-color: var( --wp--preset--color--base );
	--nav-link-size: 0.93rem;
	--nav-link-weight: 600;
}

/* Scheme 3's larger nav crowds the logo at the current 7 items. Tighten the
   horizontal padding so it still fits at 1240px until the menu is shortened. */
.makrif-scheme-3 .makrif-nav a {
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}

/* --- Resources dropdown (submenu) --- */
/* The panel background + text come from the nav block's overlay colours
   (mak-green-dark / white) — the same tokens drive the mobile overlay, so we go
   WITH them (white on green-dark is 6.13:1) rather than fight core's overlay
   rules. We only shape the panel: rounded, raised, padded, with room to breathe.
   `--wp--custom--shadow--lg` reads on the light page behind the dark panel. */
.makrif-nav .wp-block-navigation__submenu-container {
	border: 0;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.28 );
	padding: 0.4rem;
	min-width: 252px;
	margin-top: 0.5rem;
	z-index: 200; /* sit above the dark page-head band the inner pages open over */
}

/* Transparent bridge across the 0.5rem gap between "Resources" and the panel.
   Without it, moving the mouse down from the label crosses a dead zone (neither
   the item nor the panel) and the dropdown closes before you can click it. The
   bridge is a child of the submenu — hovering it keeps the item's open state. */
.makrif-nav .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.6rem;
	height: 0.6rem;
}

/* Normal-size item type on the panel, not the big 1.2rem bar type. */
.makrif-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.65rem 0.85rem;
	border-radius: 8px;
	line-height: 1.3;
	width: 100%;
}

/* Subtle highlight on hover/focus — a lift of white over the dark-green panel. */
.makrif-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.makrif-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background: rgba( 255, 255, 255, 0.14 );
}

/* The parent's dropdown arrow sits next to the label on the green bar. */
.makrif-nav .wp-block-navigation__submenu-icon {
	padding-left: 0.2rem;
}

/* --- Header site search (magnifying-glass icon, expands on click) --- */
/* Keeps the nav and search on one right-aligned row; the nav can shrink/wrap,
   the search icon stays put. */
.makrif-nav-group {
	flex: 0 1 auto;
	min-width: 0;
}

.makrif-search {
	margin: 0;
	flex: none;
}

/* The icon button: a plain white magnifying glass on the green bar. */
.makrif-search .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0.3rem;
	margin: 0;
	color: var( --wp--preset--color--base );
	cursor: pointer;
	display: flex;
	align-items: center;
}

.makrif-search .wp-block-search__button svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.makrif-search .wp-block-search__button:hover {
	opacity: 0.82;
}

/* The field that slides open on click. */
.makrif-search .wp-block-search__input {
	border: 0;
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font-size: 0.95rem;
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--ink );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.2 );
}

.makrif-search .wp-block-search__input:focus {
	outline: 2px solid var( --wp--preset--color--mak-gold );
	outline-offset: 1px;
}

/* button-only mode: core positions the field absolutely and animates it open
   on click. Anchor it to the RIGHT of the icon so it opens leftward across the
   nav and never runs off the right edge of the header. */
.makrif-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
	position: relative;
	border: 0;
	background: transparent;
	min-width: 0;
}

.makrif-search.wp-block-search__button-only .wp-block-search__input {
	position: absolute;
	right: 0;
	width: clamp( 14rem, 22vw, 20rem );
	max-width: 60vw;
}

/* Collapsed: only the icon shows. Core toggles searchfield-hidden via the
   Interactivity API; keep the hidden field from catching clicks or paint. */
.makrif-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	width: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* ===================================================================
   FUNDED PROJECTS — directory + case-study showcase
   =================================================================== */

/* ---- Directory: theme filter bar ---- */
.makrif-project-directory {
	margin-top: 2.5rem;
}

.makrif-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.2rem;
}

.makrif-filter-chip {
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.82rem;
	font-weight: 600;
	color: var( --wp--preset--color--mak-green-text );
	background: var( --wp--preset--color--tint-green );
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.5rem 1.05rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.makrif-filter-chip:hover {
	border-color: var( --wp--preset--color--mak-green );
}

.makrif-filter-chip.is-active {
	background: var( --wp--preset--color--mak-green-dark );
	color: var( --wp--preset--color--base );
}

/* ---- Card grid (directory + related) ---- */
.makrif-project-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 340px ), 1fr ) );
	gap: 1.6rem;
}

.makrif-project-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.makrif-project-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.12 );
	border-color: transparent;
}

.makrif-project-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.makrif-project-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var( --wp--preset--color--tint-green );
}

.makrif-project-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Photo-free designed band: green gradient with a soft decorative wash, so a
   card with no project photo still reads as intentional, never broken. */
.makrif-project-card-media.is-designed {
	position: relative;
	background: linear-gradient( 135deg, var( --wp--preset--color--mak-green ) 0%, var( --wp--preset--color--mak-green-dark ) 100% );
}

.makrif-project-card-glyph {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient( circle at 80% 24%, rgba( 255, 255, 255, 0.16 ) 0 20%, transparent 20% ),
		radial-gradient( circle at 18% 86%, rgba( 251, 202, 84, 0.22 ) 0 28%, transparent 28% );
}

.makrif-project-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.15rem 1.25rem 1.35rem;
	flex: 1;
}

.makrif-project-card-theme {
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-text );
}

.makrif-project-card-headline {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.16rem;
	line-height: 1.28;
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.makrif-project-card-foot {
	margin-top: auto;
	padding-top: 0.35rem;
	font-size: 0.8rem;
	color: var( --wp--preset--color--ink-soft );
}

/* ---- Case study: full-bleed hero ---- */
.makrif-project-hero {
	padding: 2.2rem 0 2.6rem;
}

/* The band bleeds full; its content is constrained to the site wrap. Raw-HTML
   heroes are not is-layout-constrained, so alignwide does nothing inside — this
   wrap is what lines the hero up with the header, footer and body. */
.makrif-project-hero .makrif-hero-wrap {
	width: min( 1240px, 100% - 3rem );
	margin-inline: auto;
}

.makrif-project-hero .makrif-crumb {
	border-bottom: 0;
	padding: 0 0 1rem;
}

.makrif-project-hero .makrif-crumb a {
	color: rgba( 255, 255, 255, 0.85 );
}

.makrif-project-hero .makrif-crumb-here {
	color: rgba( 255, 255, 255, 0.7 );
}

.makrif-project-hero-chip {
	display: inline-block;
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mak-green-dark );
	background: var( --wp--preset--color--mak-gold );
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
}

.makrif-project-title {
	font-size: clamp( 2rem, 4vw, 3rem );
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 1rem 0 0;
}

.makrif-project-lead {
	font-size: clamp( 1.1rem, 1.8vw, 1.35rem );
	line-height: 1.5;
	max-width: 48rem;
	margin: 1.1rem 0 0;
	color: rgba( 255, 255, 255, 0.92 );
}

.makrif-project-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem;
	margin-top: 1.9rem;
	padding-top: 1.6rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.18 );
}

.makrif-project-fact {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.makrif-project-fact .k {
	font-family: var( --wp--preset--font-family--sans );
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.72 );
}

.makrif-project-fact .v {
	font-size: 0.98rem;
	font-weight: 600;
	color: var( --wp--preset--color--base );
}

/* ---- Case study: body ---- */
.makrif-project-standfirst {
	font-size: 1.22rem;
	line-height: 1.6;
	color: var( --wp--preset--color--ink );
	margin-top: 2.2rem;
	font-weight: 500;
}

.makrif-project-section {
	margin-top: 2.4rem;
}

.makrif-project-section h2 {
	font-size: 1.5rem;
	margin: 0 0 0.9rem;
	padding-top: 1.4rem;
	border-top: 2px solid var( --wp--preset--color--mak-gold );
	display: inline-block;
}

.makrif-project-section p {
	font-size: 1.08rem;
	line-height: 1.72;
	text-align: justify;
	text-align-last: left;
	hyphens: auto;
}

.makrif-project-section p + p {
	margin-top: 1.1rem;
}

.makrif-project-quote {
	margin: 2.4rem 0;
	padding: 1.5rem 1.7rem;
	border-left: 4px solid var( --wp--preset--color--mak-gold );
	background: var( --wp--preset--color--tint-green );
	border-radius: 0 14px 14px 0;
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.3rem;
	line-height: 1.45;
	font-style: italic;
	color: var( --wp--preset--color--mak-green-dark );
}

/* ---- Outputs at a glance ---- */
.makrif-project-outputs {
	margin-top: 2.8rem;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 210px ), 1fr ) );
	gap: 1.1rem;
}

.makrif-output-card {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 14px;
	padding: 1.35rem 1.3rem;
	border-top: 3px solid var( --wp--preset--color--mak-green );
}

.makrif-output-value {
	font-family: var( --wp--preset--font-family--serif );
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.08;
	color: var( --wp--preset--color--mak-green-text );
}

.makrif-output-label {
	margin-top: 0.45rem;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var( --wp--preset--color--ink-soft );
}

/* ---- Report CTA band ---- */
.makrif-project-cta {
	margin-top: 3rem;
	padding: 1.8rem 2rem;
	background: var( --wp--preset--color--mak-green-dark );
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.1rem;
}

.makrif-project-cta p {
	color: rgba( 255, 255, 255, 0.9 );
	margin: 0;
	max-width: 40rem;
}

.makrif-project-cta .makrif-cta-btn {
	background: var( --wp--preset--color--mak-gold );
	color: var( --wp--preset--color--mak-green-dark );
	font-weight: 700;
	text-decoration: none;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	white-space: nowrap;
}

.makrif-project-cta .makrif-cta-btn:hover {
	background: var( --wp--preset--color--base );
}

/* ---- Related projects row ---- */
.makrif-project-related {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var( --wp--preset--color--rule );
}

.makrif-project-related .makrif-related-heading {
	font-size: 1.5rem;
	margin-bottom: 1.3rem;
}

@media ( max-width: 600px ) {
	.makrif-project-facts {
		gap: 1.1rem 1.6rem;
	}

	.makrif-project-cta {
		padding: 1.4rem;
	}
}