/* ---------------------------------------------------------------
   Mike Reese Memorial Fund - design elements
   Mirrors the layout/motifs of the original chariti-based site:
   1240px container, coral section dividers, wave shape dividers,
   photo hero + parallax bands, translucent-photo feature cards.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   TOKENS

   Two scales feed this file, and they divide by who is allowed to
   change them:

   - theme.json owns anything an editor can pick in the block editor
     - the colour palette, the type scale, the spacing scale. Those
     surface as `--wp--preset--*` and are referenced directly below,
     so a change in Appearance -> Editor lands on the front end.

   - the `--mrmf-*` tokens here are the things the editor never
     touches: component geometry measured off the original site, and
     the handful of colours that appear in chrome but should never be
     assignable to a block. Aliases onto the palette are here too, so
     component rules read in brand terms instead of `accent-6`.

   Add a value here before repeating it; that is the whole point.
   --------------------------------------------------------------- */
:root {
	/* Palette aliases - the editor palette stays the source of truth. */
	--mrmf-blue: var(--wp--preset--color--accent-1);
	--mrmf-coral: var(--wp--preset--color--accent-2);
	--mrmf-heading: var(--wp--preset--color--accent-3);
	--mrmf-muted-gray: var(--wp--preset--color--accent-5);
	--mrmf-white: var(--wp--preset--color--base);

	/* Chrome colours held out of the palette on purpose: they belong to
	   one component each, and nothing in the editor should be set to them. */
	--mrmf-card-bg: #7083d8;
	--mrmf-card-frame: #4345bc;
	--mrmf-social-icon: #b9baff;
	--mrmf-page-caption: #c8c8f8;
	--mrmf-footer-text: #c7c7c7;
	--mrmf-colophon-bg: #191919;
	--mrmf-table-rule: #e6e6e6;
	--mrmf-table-stripe: #f7f7f8;

	/* Section geometry, measured off the original at a 1440px viewport. */
	--mrmf-header-h: 198px;         /* transparent header band - bigger than the
	                                    original's 163px so the crest logo reads
	                                    clearly instead of shrinking to fit */
	--mrmf-header-sticky-h: 76px;   /* compact bar once scrolled, matches the original */
	--mrmf-header-sticky-bg: #212121; /* the original's scrolled header background */
	--mrmf-nav-drop: 37px;          /* puts the menu baseline at y=61 */
	--mrmf-wave-h: 144px;           /* wave shape divider */
	--mrmf-hero-pad-top: 180px;     /* wordmark top edge inside the hero - a hair
	                                    below the original's 160px so it clears
	                                    the now-larger 150px logo more cleanly */
	--mrmf-page-title-h: 446px;
	--mrmf-page-title-pad-top: 227px;
	--mrmf-page-caption-h: 42px;    /* 13px gap + the 29px caption line */
	--mrmf-colophon-h: 86px;
	--mrmf-card-min-h: 370px;
	--mrmf-parallax-h: 430px;

	/* Repeated detail values. */
	--mrmf-accent-rule: 3px;        /* coral rule weight, divider and nav */
	--mrmf-radius: 6px;             /* photos, map */
	--mrmf-button-radius: 27px;     /* the original's buttons are pills */
	--mrmf-button-gradient: linear-gradient(#5354bc, var(--mrmf-blue));
}

/* ---------- Header ----------
   The original site runs a transparent header sitting on top of the hero /
   page-title photo, with the white logo and white menu over the image. */
header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}
/* The header is lifted out of the flow, so <main> would still inherit the
   sibling block-gap and leave a white strip above the hero. */
.wp-site-blocks {
	padding-top: 0;
}
.wp-site-blocks > main {
	margin-block-start: 0;
}
/* Original header band is 163px tall with the menu baseline at y=61. */
.mrmf-header {
	min-height: var(--mrmf-header-h);
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}
.mrmf-header > .wp-block-group {
	width: 100%;
}
.mrmf-header .wp-block-site-logo img {
	height: auto;
}
/* Drops the menu to the original's baseline, 61px from the top of the band.
   Scoped to the element - the block puts `wp-block-navigation` on the inner
   <ul> as well, so an unscoped margin would be applied twice. */
.mrmf-header nav.wp-block-navigation {
	margin-top: var(--mrmf-nav-drop);
	align-self: flex-start;
}
/* Original menu: Poppins 14px/700, 3px tracking, uppercase, 20px between items,
   with the coral rule under the current page sitting 18px below the label. */
.mrmf-header .wp-block-navigation a {
	color: var(--mrmf-white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 18px;
}
.mrmf-header .wp-block-navigation a:hover {
	color: var(--mrmf-coral);
}
/* Current page reads coral, with the short rule the original draws under it. */
.mrmf-header .wp-block-navigation .current-menu-item > a {
	color: var(--mrmf-coral);
	box-shadow: inset 0 calc(-1 * var(--mrmf-accent-rule)) 0 0 var(--mrmf-coral);
}
/* Core's Navigation block draws a 2px solid outline on :focus with no color
   set, so it inherits currentColor - coral on these links, showing as a box
   on every mouse click, not just keyboard use. Move it to :focus-visible so
   Tab navigation still gets a visible ring but clicking doesn't. */
.mrmf-header .wp-block-navigation-item__content:focus {
	outline: none;
}
.mrmf-header .wp-block-navigation-item__content:focus-visible {
	outline: solid 2px var(--mrmf-coral);
}
.mrmf-header .wp-block-navigation__responsive-container-open,
.mrmf-header .wp-block-navigation__responsive-container-close {
	color: var(--mrmf-white);
}
/* The mobile menu opens over a dark panel, so links stay readable there too. */
.mrmf-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--mrmf-white);
}

/* Sticky header: transparent and 198px at rest (above), pins to the viewport
   and shrinks to a solid 76px bar once `sticky-header.js` adds `is-stuck` on
   scroll - the original does the same rather than letting the header scroll
   away with the page. */
header.wp-block-template-part.is-stuck {
	position: fixed;
}
/* The group block sets its own padding as an inline style, hence !important. */
header.wp-block-template-part.is-stuck .mrmf-header {
	min-height: var(--mrmf-header-sticky-h);
	background-color: var(--mrmf-header-sticky-bg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	transition: min-height 0.3s, background-color 0.3s;
}
header.wp-block-template-part:not(.is-stuck) .mrmf-header {
	transition: min-height 0.3s, background-color 0.3s;
}
/* The Site Logo block sets width as an inline style, so shrinking it back down
   on scroll needs !important to win over that. */
header.wp-block-template-part.is-stuck .wp-block-site-logo img {
	width: 60px !important;
	transition: width 0.3s;
}
header.wp-block-template-part.is-stuck .mrmf-header nav.wp-block-navigation {
	margin-top: 20px;
}

/* Accent divider used above section headings (original: 24px x 3px coral).
   The rule stays full width so WordPress's constrained layout can still centre
   it like any other block; the short bar is drawn at its left edge. Shrinking
   the <hr> itself would kill the auto margins and shove it to the page edge. */
.mrmf-divider {
	position: relative;
	width: 100% !important;
	height: var(--mrmf-accent-rule) !important;
	border: none !important;
	background: none !important;
	opacity: 1 !important;
	margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--30) !important;
}
/* No leading gap when the divider opens a section or column. */
.mrmf-divider:first-child {
	margin-top: 0 !important;
}
.mrmf-divider::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: var(--mrmf-accent-rule);
	background-color: var(--mrmf-coral);
}

/* Section headings, measured off the original: Poppins 41px/1.2, weight 800,
   1px tracking, uppercase, heading grey. Card titles opt out below. */
.mrmf-section h2,
.mrmf-section h3 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mrmf-heading);
	margin-top: 0;
	margin-bottom: 22px;
}

@media (max-width: 600px) {
	.mrmf-section h2,
	.mrmf-section h3 {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

.mrmf-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}
.mrmf-section p {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}
/* Text-only pages (Our Mission) breathe more than the homepage sections do. */
.mrmf-section-lg {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* ---------- Two-column copy + photo rows (Our Mission) ----------
   The original runs a 728/472 split with a 40px gutter inside the 1240 column;
   as percentages that is 58.7 + 3.2 + 38.1. Column widths ride on the block's
   own flex-basis, so only the stacking behaviour needs stating here. */
.mrmf-mission-row {
	margin-bottom: var(--wp--preset--spacing--50);
}
.mrmf-mission-row:last-child {
	margin-bottom: 0;
}
.mrmf-mission-row .wp-block-image {
	margin: 0;
}
.mrmf-mission-row .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 781px) {
	/* Stacked, the photo reads better after the copy it illustrates - so the
	   row that leads with the image on desktop flips its order on mobile. */
	.mrmf-mission-row {
		margin-bottom: 36px;
	}
	.mrmf-mission-row:nth-child(even) {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* Drop cap opening each half of the mission copy (original: 48px Poppins,
   floated, on a 30px line so it sits into the first two lines of text). */
.mrmf-dropcap {
	float: left;
	font-size: 48px;
	line-height: 30px;
	font-weight: 700;
	color: var(--mrmf-heading);
	margin: 18px 20px 8px 0;
}

/* ---------- Hero (original: 900px full-width Revolution Slider) ----------
   The slide runs the photo at full strength - no dim - with the wordmark set
   left, its top edge 160px down, and the wave eating the bottom 144px. */
.mrmf-hero {
	align-items: flex-start;
	padding-top: var(--mrmf-hero-pad-top);
	padding-bottom: 0;
}
/* The slider draws this photo at 1:1, so the 2560px original fills the 1440x900
   band as a tight crop rather than the whole frame. `cover` scales it to 0.5625,
   so scale it back up by 1/0.5625 and pin the origin on the same focal point. */
.mrmf-hero img.wp-block-cover__image-background {
	object-position: 50% 30%;
	transform: scale(1.78);
	transform-origin: 35.4% 20.4%;
}
@media (max-width: 900px) {
	.mrmf-hero img.wp-block-cover__image-background {
		transform: scale(1.2);
		transform-origin: 45% 25%;
	}
}
.mrmf-hero .wp-block-cover__inner-container {
	text-align: left;
}
.mrmf-hero .wp-block-image {
	margin: 0;
}
.mrmf-hero .wp-block-image img {
	width: 100%;
	max-width: 525px;
	height: auto;
	margin-left: 76px;
}
@media (max-width: 781px) {
	.mrmf-hero {
		/* At the desktop padding-top (160px) the wordmark sits right under the
		   150px-tall logo+menu overlaid on the same photo, so on a narrow phone
		   where the wordmark image runs nearly full width, its top edge collides
		   with the crest icon. Dropping it further down the 900px-tall band
		   clears the header and reads as a deliberate lower placement instead. */
		padding-top: 560px;
	}
	.mrmf-hero .wp-block-image img {
		margin-left: 0;
	}
}

/* ---------- Wave shape divider (motif from the original, redrawn path) ---------- */
@media (max-width: 781px) {
	:root {
		/* The path is drawn for the 1440px desktop band, roughly a 10:1
		   width:height ratio. Keeping the height fixed at 144px while the width
		   drops to phone-size stretches the curve tall and narrow, so the crests
		   read as spikes instead of a gentle wave - flatten it to match. */
		--mrmf-wave-h: 48px;
	}
}
.mrmf-wave {
	position: relative;
	z-index: 3;
	line-height: 0;
	pointer-events: none;
	/* The path runs above the viewBox in places; the original clips it too. */
	overflow: hidden;
}
.mrmf-wave svg {
	display: block;
	width: 100%;
	height: var(--mrmf-wave-h);
}
.mrmf-wave svg path {
	fill: var(--mrmf-white);
}
/* The wave lives in its own full-width group so it can be lifted out of the
   flow. WordPress zeroes margin-block-start on a layout's first child, which
   outranks a plain class, hence the !important on the lift. */
.mrmf-wave-wrap {
	position: relative;
	z-index: 3;
	margin-block-start: 0 !important;
}
.mrmf-wave-wrap + * {
	margin-block-start: 0 !important;
}
/* Closes the band above it - the original flips the shape here, so the crest
   points up into the photo and the fill hangs below the curve. */
.mrmf-wave-wrap > .mrmf-wave-up {
	margin-block-start: calc(-1 * var(--mrmf-wave-h)) !important;
	transform: rotate(180deg);
}
/* Opens the band below it - drawn in the shape's native orientation. */
.mrmf-wave-wrap > .mrmf-wave-down {
	margin-bottom: calc(-1 * var(--mrmf-wave-h));
}

/* ---------- Rounded photo treatment (original: 6px radius) ---------- */
.mrmf-photo img {
	border-radius: var(--mrmf-radius);
	width: 100%;
	height: auto;
	display: block;
}
.mrmf-caption {
	font-style: italic;
	color: var(--mrmf-heading);
	font-size: var(--wp--preset--font-size--medium);
	margin-top: 14px;
}

/* ---------- Feature cards (Grants / Scholarships) ---------- */
.mrmf-card {
	position: relative;
	background-color: var(--mrmf-card-bg);
	overflow: hidden;
	padding: 70px 40px 45px;
	text-align: center;
	color: var(--mrmf-white);
	height: 100%;
	min-height: var(--mrmf-card-min-h);
	box-sizing: border-box;
}
.mrmf-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.3;
}
/* Inset outline, as on the original feature boxes: 5px, 20px in from the edge */
.mrmf-card-frame {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 5px solid var(--mrmf-card-frame);
	pointer-events: none;
}
.mrmf-card-content {
	position: relative;
	z-index: 1;
}
/* Card titles are the one heading the original leaves small and sentence-case,
   so they opt out of the .mrmf-section h2/h3 treatment above. */
.mrmf-section .mrmf-card h3,
.mrmf-card h3 {
	color: var(--mrmf-white);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	margin: 18px 0 16px;
}
/* `table` keeps the shrink-to-fit width of inline-block but stays block-level,
   so the button below drops onto its own centered line. */
.mrmf-card ul {
	display: table;
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	margin: 0 auto 30px;
	padding-left: 20px;
}
.mrmf-card-icon {
	font-size: 42px;
	line-height: 1;
	display: block;
}
/* ---------- Buttons ----------
   Colour, type and padding are theme.json's (`elements.button`), so the core
   button block already arrives styled and an editor can still see where the
   values come from. Only the gradient the original paints over its blue is
   left here - it is chrome, not a palette choice.

   `.mrmf-button` is the hand-rolled twin for the cards that are raw HTML;
   the two share every rule below so the site has one button, not two. */
.mrmf-button,
.wp-block-button__link {
	background-image: var(--mrmf-button-gradient);
}
/* Dropping the gradient lets theme.json's coral hover show through. The
   original leaves the gradient in place and so has no hover state at all. */
.mrmf-button:hover,
.wp-block-button__link:hover {
	background-image: none;
}
.mrmf-button {
	display: inline-block;
	background-color: var(--mrmf-blue);
	color: var(--mrmf-white);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 12px 29px 15px;
	border-radius: var(--mrmf-button-radius);
}
.mrmf-button:hover {
	background-color: var(--mrmf-coral);
	color: var(--mrmf-white);
}

/* ---------- Grant panels (Grants, Scholarships) ----------
   Both pages run each entry as a full-width column with its photo dropped
   to 10% behind the copy. A cover block reaches the same place the block way -
   the photo at full strength under a 90% white overlay - so the only thing
   left here is geometry: covers default to 430px tall, and these are as tall
   as their copy. Type sizes ride on the blocks' own attributes.

   The 30px gap the original leaves between panels is also what it leaves
   between the last panel and whatever follows it (Grants' shared button,
   Scholarships' section end), so one margin covers both. */
.wp-block-cover.mrmf-grant {
	min-height: 0;
	margin-bottom: 30px;
}
/* Grant/scholarship titles are sentence-case blue, not section headings - the
   same opt-out the feature-card titles take from .mrmf-section h2/h3 above. */
.mrmf-section .mrmf-grant h2 {
	font-size: 37px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--mrmf-blue);
	margin: 0 0 20px;
}
.mrmf-grant p:last-child {
	margin-bottom: 0;
}
/* Scholarships gives each panel its own button, 10px below the copy - Grants'
   shared button sits outside the panels and doesn't use this class. */
.mrmf-grant-button {
	margin-top: 10px;
}

@media (max-width: 600px) {
	.mrmf-section .mrmf-grant h2 {
		font-size: 28px;
	}
}

/* Inline text link with arrow, as on the original mission section */
.mrmf-arrow-link {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	color: var(--mrmf-heading);
	text-decoration: none;
}
.mrmf-arrow-link:hover {
	color: var(--mrmf-blue);
}
.mrmf-arrow-link::after {
	content: " \2192";
}

/* ---------- District 59 Leaflet map ---------- */
#mrmf-district-map {
	height: 320px;
	width: 100%;
	border-radius: var(--mrmf-radius);
	z-index: 0;
}
/* On the standalone district page the map is the subject rather than a column
   companion to the text, so it runs the original's full 400px height. */
#mrmf-district-map.mrmf-map-tall {
	height: 400px;
}
.leaflet-container {
	font-family: inherit;
}

/* ---------- Parallax photo band closing the homepage ---------- */
.mrmf-parallax {
	position: relative;
	min-height: var(--mrmf-parallax-h);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
@media (max-width: 900px) {
	.mrmf-parallax {
		background-attachment: scroll;
		min-height: 260px;
	}
}

/* ---------- Page title band (original: chariti-page-title-wrap) ---------- */
/* Original band: 446px tall, header overlaid in its top 163px, title centred
   in the remaining 283px at 65px/78px. */
.mrmf-page-title {
	min-height: var(--mrmf-page-title-h) !important;
	/* Cover blocks centre their inner container, which fights a padded offset.
	   Pinning to the top lets padding place the heading outright: the original
	   sets its top edge at y=227 in the 446px band, clear of the transparent
	   header floating over the first 163px. */
	align-items: flex-start;
	padding-top: var(--mrmf-page-title-pad-top);
	padding-bottom: 0;
}
.mrmf-page-title .wp-block-cover__inner-container {
	text-align: center;
}
.mrmf-page-title h1 {
	color: var(--mrmf-white);
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 78px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}
/* Pages that carry a caption under the title (Grants) grow by exactly the
   caption's own box; the title stays put at y=227. */
.mrmf-page-title-captioned {
	min-height: calc(var(--mrmf-page-title-h) + var(--mrmf-page-caption-h)) !important;
}
.mrmf-page-caption {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--mrmf-page-caption);
	margin: 13px 0 0;
}

@media (max-width: 781px) {
	/* Between the 30px and 65px steps of the scale - a purely responsive
	   size, so it stays a literal rather than earning a preset. */
	.mrmf-page-title h1 {
		font-size: 42px;
		line-height: 1.2;
	}
	.mrmf-page-caption {
		font-size: 14px;
		letter-spacing: 2px;
	}
}

/* ---------- Footer socials ----------
   One row per contact: icon in a fixed-width gutter so the labels line up
   whatever the glyph's natural width. */
.mrmf-social {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--medium);
}
.mrmf-social a {
	display: flex;
	align-items: center;
	gap: 10px;
	word-break: break-word;
}
/* The original tints the footer glyphs periwinkle, not coral. */
.mrmf-social i {
	flex: 0 0 18px;
	text-align: center;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--mrmf-social-icon);
}
.mrmf-social a:hover i {
	color: inherit;
}

/* ---------- Footer / nav ----------
   Sizes come from the blocks themselves (footer.html sets the Medium preset),
   so only colour and the widget-title treatment live here. */
footer a {
	color: var(--mrmf-footer-text);
	text-decoration: none;
}
footer a:hover {
	color: var(--mrmf-coral);
}
/* Widget titles: 15px/700, 2px tracking, uppercase, 35px of air beneath.
   Colour still needs !important - it is beating the theme.json heading rule. */
footer h3 {
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mrmf-white) !important;
	margin: 0 0 35px;
}
footer p {
	line-height: 1.7;
	color: var(--mrmf-footer-text);
}
.wp-block-navigation a {
	font-weight: 600;
}
.wp-block-navigation a:hover {
	color: var(--mrmf-coral) !important;
}

/* ---------- Colophon (original: separate #191919 band, 86px tall) ---------- */
.mrmf-colophon {
	background-color: var(--mrmf-colophon-bg);
	min-height: var(--mrmf-colophon-h);
	display: flex;
	align-items: center;
}
.mrmf-colophon > .wp-block-group {
	width: 100%;
}
.mrmf-colophon p {
	margin: 0;
	color: var(--mrmf-muted-gray);
}
.mrmf-colophon a {
	color: var(--mrmf-muted-gray);
}

/* ---------- Penny Court roster tables ----------
   The original pastes a raw spreadsheet export here. Kept the roster in a real
   table but held it to the width of a text column so it reads as a list rather
   than a full-bleed grid. */
/* Capping the table rather than the figure keeps its left edge on the text
   column instead of centring it in the section. */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	max-width: 760px;
	font-size: var(--wp--preset--font-size--medium);
}
.wp-block-table th {
	background-color: var(--mrmf-blue);
	color: var(--mrmf-white);
	text-align: left;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--x-small);
	padding: 12px 16px;
}
.wp-block-table td {
	padding: 7px 16px;
	border-bottom: 1px solid var(--mrmf-table-rule);
}
.wp-block-table tbody tr:nth-child(even) td {
	background-color: var(--mrmf-table-stripe);
}
.wp-block-table td:first-child {
	color: var(--mrmf-heading);
	font-weight: 600;
}