/*
 * mpf.ngo — shared stylesheet for the three static pages (/, /about/, /contact/).
 *
 * Everything here is lifted from themes/mpf-2026 rather than approximated:
 * the palette hex values are theme.json's, the 8-point star is main.css's
 * two-overlaid-squares construction, and the eyebrow is its 0.2em-tracked
 * uppercase Fira Sans. Square corners throughout, hairline rules, no shadows.
 */

/* Self-hosted brand fonts, subset exactly as the theme declares them.
   No Google Fonts, no CDN — same privacy posture as the main site. */
@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/literata-400-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/assets/fonts/literata-400-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/fira-sans-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/fira-sans-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette lifted verbatim from themes/mpf-2026/theme.json. */
:root {
	--green-900: #1B4332;
	--gold-500: #E2A337;
	--cream-50: #F9F7F0;
	--ink-900: #20211E;
	--hairline: rgba(249, 247, 240, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	background-color: var(--green-900);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--green-900);
	color: var(--cream-50);
	font-family: 'Literata', Georgia, 'Times New Roman', serif;
	-webkit-font-smoothing: antialiased;
}

/* The home page is a single centred field; interior pages stack from the top. */
body.is-home main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 52px 24px;
}

a { color: inherit; }

a:focus-visible {
	outline: 2px solid var(--gold-500);
	outline-offset: 3px;
}

/* ---------- Dove ---------- */
/* Masked so it takes its colour from the text, as in the theme. */
.dove {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-image: url('/assets/img/mpf-logo-only.svg');
	mask-image: url('/assets/img/mpf-logo-only.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.dove--lg { width: 76px; height: 63px; }
.dove--sm { width: 34px; height: 28px; }

/* ---------- Masthead (interior pages only) ---------- */
.masthead {
	border-bottom: 1px solid var(--hairline);
}

.masthead__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.masthead__lockup {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--cream-50);
}

.masthead__name {
	font-size: 18px;
	line-height: 1.2;
}

.masthead__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 14px;
}

.masthead__nav a {
	color: rgba(249, 247, 240, 0.78);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 150ms ease, border-color 150ms ease;
}

.masthead__nav a:hover,
.masthead__nav a:focus-visible { color: var(--cream-50); border-bottom-color: var(--gold-500); }
.masthead__nav a[aria-current="page"] { color: var(--cream-50); border-bottom-color: var(--gold-500); }

/* ---------- Shared type ---------- */
.page {
	width: 100%;
	max-width: 660px;
}

.page--home { text-align: center; }

.page--interior {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 8px;
}

.eyebrow {
	margin: 26px 0 0;
	font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-500);
}

.page--interior .eyebrow { margin-top: 0; }

h1 {
	margin: 14px 0 0;
	font-weight: 400;
	font-size: clamp(30px, 6.2vw, 48px);
	line-height: 1.16;
	letter-spacing: -0.01em;
}

.page--interior h1 { font-size: clamp(28px, 5vw, 38px); }

h2 {
	margin: 40px 0 0;
	font-weight: 400;
	font-size: clamp(20px, 3vw, 24px);
	line-height: 1.25;
}

/* ---------- Star divider ---------- */
/* 8-point star — two overlaid squares, one rotated 45°. On this deep surface
   the theme's green square is invisible, so it takes the --on-deep cream. */
.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 28px 0;
}
.divider__rule {
	height: 1px;
	width: 64px;
	background: linear-gradient(90deg, transparent, rgba(249, 247, 240, 0.45));
}
.divider__rule--right {
	background: linear-gradient(270deg, transparent, rgba(249, 247, 240, 0.45));
}
.star {
	position: relative;
	display: inline-block;
	flex: none;
	width: 18px;
	height: 18px;
}
.star::before,
.star::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1.3px solid;
}
.star::before { border-color: var(--gold-500); }
.star::after {
	border-color: var(--cream-50);
	transform: rotate(45deg);
}

/* ---------- Body copy ---------- */
.lede {
	margin: 0 auto;
	max-width: 56ch;
	font-size: clamp(17px, 2.2vw, 19px);
	line-height: 1.66;
	color: rgba(249, 247, 240, 0.92);
}

.page--interior .lede { margin: 26px 0 0; }

.note {
	margin: 22px auto 0;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.66;
	color: rgba(249, 247, 240, 0.74);
}

.page--interior p {
	max-width: 62ch;
	font-size: 17px;
	line-height: 1.72;
	color: rgba(249, 247, 240, 0.84);
}

.page--interior a:not(.cta) {
	color: var(--cream-50);
	text-decoration: none;
	border-bottom: 1px solid rgba(226, 163, 55, 0.6);
	transition: border-color 150ms ease;
}
.page--interior a:not(.cta):hover { border-bottom-color: var(--gold-500); }

/* ---------- Call to action ---------- */
/* Square corners — radius is reserved for avatars in this design system. */
.cta {
	display: inline-block;
	margin-top: 32px;
	padding: 14px 30px;
	background-color: var(--gold-500);
	color: var(--ink-900);
	font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1px solid var(--gold-500);
	transition: background-color 150ms ease, color 150ms ease;
}
.cta:hover,
.cta:focus-visible {
	background-color: transparent;
	color: var(--gold-500);
}

/* ---------- Link rows ---------- */
.sections {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 14px;
}
.sections a {
	color: rgba(249, 247, 240, 0.78);
	text-decoration: none;
	border-bottom: 1px solid rgba(249, 247, 240, 0.28);
	padding-bottom: 2px;
	transition: color 150ms ease, border-color 150ms ease;
}
.sections a:hover,
.sections a:focus-visible {
	color: var(--cream-50);
	border-bottom-color: var(--gold-500);
}

/* ---------- Colophon ---------- */
.colophon {
	margin-top: 44px;
	padding: 22px 24px 40px;
	border-top: 1px solid var(--hairline);
	font-family: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(249, 247, 240, 0.62);
}
.colophon__inner { max-width: 760px; margin: 0 auto; }
.page--home .colophon { padding-inline: 0; padding-bottom: 0; }
.colophon p { margin: 0; }
.colophon p + p { margin-top: 6px; }
.colophon .scripture {
	margin-top: 8px;
	font-family: 'Literata', Georgia, serif;
	font-weight: 400;
	font-style: italic;
}
.colophon .scripture cite {
	font-style: normal;
	color: rgba(249, 247, 240, 0.5);
}
.colophon a {
	color: rgba(249, 247, 240, 0.78);
	text-decoration: none;
	border-bottom: 1px solid rgba(249, 247, 240, 0.28);
}
.colophon a:hover { color: var(--cream-50); border-bottom-color: var(--gold-500); }

/* Interior pages get the colophon as a real page footer. */
body:not(.is-home) > .colophon { margin-top: auto; }

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

@media (max-width: 480px) {
	body.is-home main { padding: 48px 20px; }
	.page--interior { padding: 36px 20px 8px; }
	.divider { margin: 26px 0; }
	.divider__rule { width: 40px; }
	.masthead__inner { padding: 16px 20px; }
	.colophon { padding-inline: 20px; }
}