/**
 * Anchorage Park Foundation - main stylesheet
 *
 * Structure:
 *   1. Token aliases      short names for theme.json's generated variables
 *   2. Reset              minimal, modern
 *   3. Base typography    element defaults
 *   4. Layout             content widths, section rhythm
 *   5. Accessibility      focus, skip link, reduced motion
 *   6. Block styles       core block appearance matching the design system
 *   7. Components         reusable pieces (buttons, cards, banners)
 *   8. Utilities
 *
 * Colours, font sizes and spacing come from theme.json, which generates CSS
 * custom properties named --wp--preset--*. Those names are long, so section 1
 * aliases them. Always change a value in theme.json, never here - otherwise
 * the block editor's colour picker and the front end drift apart.
 */

/* =========================================================================
   1. Token aliases
   ========================================================================= */

:root {
	/* Brand palette (source of truth: theme.json) */
	--apf-dark-sage: var(--wp--preset--color--dark-sage, #6F755A);
	--apf-warm-sage: var(--wp--preset--color--warm-sage, #9B9B88);
	--apf-bone:      var(--wp--preset--color--bone, #D8D6CD);
	--apf-white:     var(--wp--preset--color--white, #FFFFFF);
	--apf-ink:       var(--wp--preset--color--ink, #333333);
	--apf-coral:     var(--wp--preset--color--coral, #E66B5B);
	--apf-sky:       var(--wp--preset--color--sky-blue, #9CC5C9);
	--apf-lime:      var(--wp--preset--color--lime, #C2CD23);
	--apf-gold:      var(--wp--preset--color--goldenrod, #FDB724);

	/* Derived tints. Defined once so hover states stay consistent. */
	--apf-sage-08:   rgba(111, 117, 90, 0.08);
	--apf-sage-20:   rgba(111, 117, 90, 0.20);
	--apf-sage-70:   rgba(111, 117, 90, 0.70);
	--apf-bone-20:   rgba(216, 214, 205, 0.20);
	--apf-bone-50:   rgba(216, 214, 205, 0.50);
	--apf-sky-hover: #82B5B9;
	--apf-muted:     #6B7280;   /* body-copy grey used throughout the design */

	/* Typography */
	--apf-font-heading: var(--wp--preset--font-family--heading, Merriweather, Georgia, serif);
	--apf-font-body:    var(--wp--preset--font-family--body, Inter, system-ui, sans-serif);

	/* Layout */
	--apf-content: var(--wp--style--global--content-size, 1024px);
	--apf-wide:    var(--wp--style--global--wide-size, 1280px);
	--apf-gutter:  clamp(1rem, 4vw, 2rem);

	/* Chrome */
	--apf-header-height: 88px;
	--apf-radius:        0.75rem;
	--apf-radius-pill:   999px;

	/* Motion - referenced everywhere so it can be neutralised in one place */
	--apf-transition: 200ms ease;
}

/* =========================================================================
   2. Reset
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset in-page anchors so the sticky header does not cover the target. */
	scroll-padding-top: calc(var(--apf-header-height) + 1rem);
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	background-color: var(--apf-white);
	color: var(--apf-ink);
	font-family: var(--apf-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* Prevent long URLs and unbroken strings from forcing horizontal scroll. */
p,
h1, h2, h3, h4, h5, h6,
li, dt, dd, figcaption {
	overflow-wrap: break-word;
}

/* =========================================================================
   3. Base typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--apf-font-heading);
	color: var(--apf-dark-sage);
	text-wrap: balance;   /* avoids a single orphaned word on the last line */
}

h1 { font-size: var(--wp--preset--font-size--title); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--wp--preset--font-size--section); font-weight: 700; line-height: 1.3; }
h3 { font-size: var(--wp--preset--font-size--heading); font-weight: 400; line-height: 1.4; }
h4 { font-size: var(--wp--preset--font-size--subhead); font-weight: 400; line-height: 1.5; }

h5 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

h6 {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--apf-warm-sage);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

p {
	margin: 0 0 1.25rem;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--apf-dark-sage);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: color var(--apf-transition);
}

a:hover {
	color: var(--apf-coral);
}

strong, b { font-weight: 700; }
em, i     { font-style: italic; }

small {
	font-size: 0.875rem;
	color: var(--apf-muted);
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background-color: var(--apf-bone);
}

/* =========================================================================
   4. Layout
   ========================================================================= */

.apf-container {
	width: 100%;
	max-width: var(--apf-wide);
	margin-inline: auto;
	padding-inline: var(--apf-gutter);
}

.apf-container--narrow {
	max-width: var(--apf-content);
}

/*
 * Core's alignment model for classic themes.
 * `.entry-content > *` is constrained to the content width; alignwide and
 * alignfull break out. This is what makes align-wide work without a full
 * block theme.
 */
.entry-content > * {
	max-width: var(--apf-content);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: var(--apf-wide);
}

.entry-content > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.entry-content > .alignleft {
	float: left;
	margin: 0.375rem 1.5rem 1rem 0;
}

.entry-content > .alignright {
	float: right;
	margin: 0.375rem 0 1rem 1.5rem;
}

.entry-content > .aligncenter {
	margin-inline: auto;
}

/* Vertical rhythm between blocks, overridable per block by the editor. */
.entry-content > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.5rem);
}

/* Full-bleed sections used by page banners and CTA bands. */
.apf-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.apf-section--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.apf-section--loose { padding-block: clamp(4rem, 9vw, 8rem); }

/* =========================================================================
   5. Accessibility
   ========================================================================= */

/*
 * Visible focus ring. Uses :focus-visible so it appears for keyboard users
 * without putting a ring around every mouse click.
 */
:focus-visible {
	outline: 2px solid var(--apf-dark-sage);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark backgrounds the sage ring disappears - switch to white. */
.apf-on-dark :focus-visible {
	outline-color: var(--apf-white);
}

/* Screen-reader-only text, per the WordPress accessibility standard. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ...but visible when focused, so the skip link works. */
.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	background-color: var(--apf-white);
	color: var(--apf-dark-sage);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--apf-radius);
	box-shadow: 0 4px 12px rgba(51, 51, 51, 0.2);
}

/*
 * Respect the OS "reduce motion" setting. Anyone who gets motion sickness from
 * animation has usually already turned this on; honouring it is not optional.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   6. Block styles
   ========================================================================= */

/* ---- Buttons ---------------------------------------------------------- */

.wp-block-button__link,
.apf-button {
	display: inline-block;
	padding: 0.875rem 2rem;
	border: 2px solid transparent;
	border-radius: var(--apf-radius-pill);
	background-color: var(--apf-sky);
	color: var(--apf-ink);
	font-family: var(--apf-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--apf-transition), color var(--apf-transition), border-color var(--apf-transition);
}

.wp-block-button__link:hover,
.apf-button:hover {
	background-color: var(--apf-sky-hover);
	color: var(--apf-ink);
}

/* Outline variant - registered as a block style in inc/setup.php. */
.is-style-outline > .wp-block-button__link,
.apf-button--outline {
	background-color: transparent;
	border-color: currentColor;
	color: var(--apf-dark-sage);
}

.is-style-outline > .wp-block-button__link:hover,
.apf-button--outline:hover {
	background-color: var(--apf-dark-sage);
	border-color: var(--apf-dark-sage);
	color: var(--apf-white);
}

/* Outline on a photographic or dark background (hero CTAs). */
.apf-on-dark .apf-button--outline,
.apf-on-dark .is-style-outline > .wp-block-button__link {
	color: var(--apf-white);
}

.apf-on-dark .apf-button--outline:hover,
.apf-on-dark .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--apf-white);
	border-color: var(--apf-white);
	color: var(--apf-ink);
}

/* Coral variant for primary conversion actions. */
.apf-button--coral {
	background-color: var(--apf-coral);
	color: var(--apf-white);
}

.apf-button--coral:hover {
	background-color: #D25546;
	color: var(--apf-white);
}

/* ---- Lists ------------------------------------------------------------ */

/*
 * The design uses a sage dot for bullets and a filled sage circle for numbers,
 * rather than browser defaults.
 */
.entry-content ul:not(.apf-plain-list):not(.wp-block-social-links),
.entry-content ol:not(.apf-plain-list) {
	margin: 0 0 1.25rem;
	padding-left: 0;
	list-style: none;
}

.entry-content ul:not(.apf-plain-list):not(.wp-block-social-links) > li,
.entry-content ol:not(.apf-plain-list) > li {
	position: relative;
	margin-bottom: 0.75rem;
	padding-left: 1.75rem;
	color: #4B5563;
}

.entry-content ul:not(.apf-plain-list):not(.wp-block-social-links) > li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--apf-dark-sage);
}

.entry-content ol:not(.apf-plain-list) {
	counter-reset: apf-counter;
}

.entry-content ol:not(.apf-plain-list) > li {
	padding-left: 2.75rem;
	counter-increment: apf-counter;
}

.entry-content ol:not(.apf-plain-list) > li::before {
	content: counter(apf-counter);
	position: absolute;
	top: 0.1em;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--apf-dark-sage);
	color: var(--apf-white);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
}

/* Nested lists reset the padding so they do not compound. */
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.75rem;
	margin-bottom: 0;
}

/* ---- Quote ------------------------------------------------------------ */

.wp-block-quote {
	position: relative;
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 2rem;
	border-left: 4px solid var(--apf-dark-sage);
	font-family: var(--apf-font-heading);
	font-style: italic;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.6;
	color: var(--apf-ink);
}

/* The oversized decorative opening quotation mark from the style guide. */
.wp-block-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.35em;
	left: 0.15em;
	font-family: Georgia, serif;
	font-size: 6rem;
	line-height: 1;
	color: var(--apf-sage-20);
	pointer-events: none;
	user-select: none;
}

.wp-block-quote cite,
.wp-block-quote__citation {
	display: block;
	margin-top: 1rem;
	color: var(--apf-dark-sage);
	font-family: var(--apf-font-body);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---- Table ------------------------------------------------------------ */

.wp-block-table {
	margin: 2rem 0;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--apf-radius);
	overflow: hidden;
	font-size: 0.9375rem;
	box-shadow: 0 0 0 1px var(--apf-bone);
}

.wp-block-table thead tr,
.wp-block-table th {
	background-color: var(--apf-dark-sage);
	color: var(--apf-white);
	font-weight: 600;
	text-align: left;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.75rem 1.25rem;
	border: 0;
}

.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--apf-bone-20);
}

.wp-block-table td {
	color: #4B5563;
}

.wp-block-table td:first-child {
	color: var(--apf-ink);
	font-weight: 500;
}

/*
 * Tables must never force the page to scroll sideways. Below 640px the table
 * scrolls inside its own container instead.
 */
@media (max-width: 640px) {
	.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-table table {
		min-width: 34rem;
	}
}

/* ---- Separator -------------------------------------------------------- */

.wp-block-separator {
	height: 1px;
	margin: 2.5rem auto;
	border: 0;
	background-color: var(--apf-bone);
	opacity: 1;
}

/* Short sage rule - block style "Accent". */
.wp-block-separator.is-style-apf-accent {
	width: 4rem;
	height: 2px;
	margin-inline: 0;
	background-color: var(--apf-dark-sage);
}

/* Five-colour brand stripe - block style "Brand stripe". */
.wp-block-separator.is-style-apf-brand-stripe {
	height: 0.375rem;
	width: 100%;
	border-radius: var(--apf-radius-pill);
	background: linear-gradient(
		90deg,
		var(--apf-lime) 0%,   var(--apf-lime) 20%,
		var(--apf-sky)  20%,  var(--apf-sky)  40%,
		var(--apf-gold) 40%,  var(--apf-gold) 60%,
		var(--apf-coral) 60%, var(--apf-coral) 80%,
		var(--apf-dark-sage) 80%, var(--apf-dark-sage) 100%
	);
}

/* ---- Images and figures ----------------------------------------------- */

.wp-block-image img {
	border-radius: var(--apf-radius);
}

.wp-block-image.alignfull img,
.wp-block-image.is-style-apf-square img {
	border-radius: 0;
}

.wp-block-image figcaption,
figcaption {
	margin-top: 0.625rem;
	color: var(--apf-warm-sage);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: left;
}

/* ---- Embeds ----------------------------------------------------------- */

.wp-block-embed iframe {
	max-width: 100%;
	border-radius: var(--apf-radius);
}

/* ---- Code ------------------------------------------------------------- */

.wp-block-code,
pre {
	padding: 1rem 1.25rem;
	overflow-x: auto;
	background-color: #F5F5F2;
	border-radius: var(--apf-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* =========================================================================
   7. Components
   ========================================================================= */

/* ---- Section label (eyebrow + rule) ----------------------------------- */

.apf-section-label {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.apf-section-label__text {
	color: var(--apf-warm-sage);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.apf-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--apf-bone);
}

/* ---- Eyebrow (standalone) --------------------------------------------- */

.apf-eyebrow {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* ---- Breadcrumbs ------------------------------------------------------ */

.apf-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-block: 1.25rem;
	color: var(--apf-muted);
	font-size: 0.875rem;
}

.apf-breadcrumbs a {
	color: var(--apf-muted);
	text-decoration: none;
}

.apf-breadcrumbs a:hover {
	color: var(--apf-dark-sage);
}

.apf-breadcrumbs__sep {
	color: var(--apf-bone);
}

.apf-breadcrumbs [aria-current="page"] {
	color: var(--apf-dark-sage);
}

/* ---- Card ------------------------------------------------------------- */

.apf-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--apf-white);
	border: 1px solid var(--apf-bone);
	border-radius: var(--apf-radius);
	transition: box-shadow var(--apf-transition), transform var(--apf-transition);
}

.apf-card:hover {
	box-shadow: var(--wp--preset--shadow--raised, 0 4px 12px rgba(51, 51, 51, 0.1));
	transform: translateY(-2px);
}

/*
 * Media box holds a fixed 3:2 frame so every card is the same height, but the
 * image is CONTAINed, not cropped - the client's thumbnails are a mix of aspect
 * ratios (square graphics, wide banners, posters with text) and cover-cropping
 * them cut off titles and subjects. A soft neutral fills the letterbox so the
 * framing reads as intentional. Pair with a proportional image size (large),
 * NOT the hard-cropped apf-card, or the served file would already be cropped.
 */
.apf-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--apf-bone-20);
}

.apf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.apf-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.25rem;
}

.apf-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.35;
}

.apf-card__title a {
	text-decoration: none;
}

.apf-card__meta {
	color: var(--apf-warm-sage);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.apf-card__excerpt {
	color: var(--apf-muted);
	font-size: 0.9375rem;
}

.apf-card__actions {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* ---- On-dark context -------------------------------------------------- */

/*
 * Applied to any full-bleed band with a dark background. Resets heading and
 * body colour so the same components work on sage or photography without
 * needing dark-specific variants of every rule.
 */
.apf-on-dark,
.apf-on-dark p,
.apf-on-dark li {
	color: var(--apf-white);
}

.apf-on-dark h1,
.apf-on-dark h2,
.apf-on-dark h3,
.apf-on-dark h4,
.apf-on-dark h5,
.apf-on-dark h6 {
	color: var(--apf-white);
}

.apf-on-dark a {
	color: var(--apf-white);
}

.apf-on-dark a:hover {
	color: var(--apf-bone);
}

/* ---- Gradient CTA band ------------------------------------------------ */

.apf-cta-band {
	background: var(--wp--preset--gradient--coral-goldenrod, linear-gradient(90deg, #E66B5B 0%, #FDB724 100%));
	text-align: center;
}

.apf-cta-band__title {
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--section);
}

.apf-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-top: 2rem;
}

/* On the gradient, the solid button is white with coral text. */
.apf-cta-band .apf-button--solid {
	background-color: var(--apf-white);
	color: var(--apf-coral);
}

.apf-cta-band .apf-button--solid:hover {
	background-color: var(--apf-bone);
	color: var(--apf-coral);
}

/*
 * Keyboard focus ring on the CTA buttons is always WHITE, never the sage
 * default. `.apf-on-dark :focus-visible` already does this, but pin it here at
 * higher specificity so the bright CTA band can never fall back to the dark
 * sage ring - the "random dark outline" symptom of an older/cached stylesheet.
 */
.apf-cta-band .apf-button:focus-visible {
	outline-color: var(--apf-white);
}

/*
 * Heart icon: an outline by default (stroke = currentColor), filling with that
 * same colour on hover/focus of the Donate button. Base fill is `transparent`
 * rather than the SVG's `none` so the fill can fade in; currentColor stays
 * coral throughout, so the heart reads as a solid coral heart on hover.
 */
.apf-cta-band .apf-button--solid .apf-button__icon {
	fill: transparent;
	transition: fill var(--apf-transition);
}

.apf-cta-band .apf-button--solid:hover .apf-button__icon,
.apf-cta-band .apf-button--solid:focus-visible .apf-button__icon {
	fill: currentColor;
}

/* =========================================================================
   8. Utilities
   ========================================================================= */

.apf-visually-hidden { /* alias of .screen-reader-text for non-WP contexts */
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.apf-text-center { text-align: center; }
.apf-no-margin   { margin: 0 !important; }

/* Constrain a raw block of prose to a comfortable reading measure. */
.apf-measure {
	max-width: 68ch;
}

/* Print: drop chrome, keep content readable. */
@media print {
	.apf-site-header,
	.apf-site-footer,
	.apf-cta-band,
	.apf-breadcrumbs {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}

/* =========================================================================
   9. Site header
   ========================================================================= */

.apf-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--apf-white);
	border-bottom: 1px solid #E5E7EB;
}

.apf-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--apf-header-height);
}

/* ---- Logo ------------------------------------------------------------- */

.apf-logo {
	margin: 0;
	font-size: inherit;
	line-height: 0;
	flex: none;
}

.apf-logo img,
.apf-logo .custom-logo {
	width: auto;
	height: 52px;
	max-width: none;
}

@media (min-width: 640px)  { .apf-logo img, .apf-logo .custom-logo { height: 60px; } }
@media (min-width: 1024px) { .apf-logo img, .apf-logo .custom-logo { height: 68px; } }

/* ---- Primary navigation ------------------------------------------------ */

.apf-site-header__nav {
	display: none;   /* mobile uses the drawer */
	flex: 1 1 auto;
	justify-content: flex-end;
}

@media (min-width: 1024px) {
	.apf-site-header__nav { display: flex; }
}

.apf-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apf-menu__item {
	position: relative;
	margin: 0;
	padding: 0;
}

.apf-menu__link,
.apf-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.625rem;
	border: 0;
	background: none;
	color: #374151;
	font-family: var(--apf-font-body);
	font-size: 0.8125rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 6px;
	transition: color var(--apf-transition), background-color var(--apf-transition);
}

@media (min-width: 1280px) {
	.apf-menu__link,
	.apf-menu__toggle { font-size: 0.875rem; padding-inline: 0.75rem; }
}

.apf-menu__link:hover,
.apf-menu__toggle:hover,
.apf-menu__toggle[aria-expanded="true"] {
	color: var(--apf-dark-sage);
	background-color: var(--apf-sage-08);
}

.apf-menu__link[aria-current="page"] {
	color: var(--apf-dark-sage);
	font-weight: 600;
}

/* Chevron on items that open a submenu. */
.apf-menu__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--apf-transition);
}

.apf-menu__toggle[aria-expanded="true"] .apf-menu__chevron {
	transform: translateY(1px) rotate(-135deg);
}

/* ---- Dropdown ---------------------------------------------------------- */

.apf-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 15rem;
	margin: 0.5rem 0 0;
	padding: 0.5rem;
	list-style: none;
	background-color: var(--apf-white);
	border: 1px solid #F3F4F6;
	border-radius: var(--apf-radius);
	box-shadow: 0 12px 32px rgba(51, 51, 51, 0.14);
}

.apf-submenu[hidden] { display: none; }

.apf-submenu .apf-menu__link {
	display: block;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #1F2937;
	white-space: normal;
}

.apf-submenu .apf-menu__link:hover {
	color: var(--apf-dark-sage);
	background-color: var(--apf-sage-08);
}

/* ---- Header utilities -------------------------------------------------- */

.apf-site-header__utils {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
}

.apf-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #6B7280;
	transition: color var(--apf-transition), background-color var(--apf-transition);
}

.apf-iconbtn:hover {
	color: var(--apf-dark-sage);
	background-color: var(--apf-sage-08);
}

.apf-iconbtn svg { width: 1.25rem; height: 1.25rem; }

/* Search is desktop-only; the drawer carries its own on mobile. */
.apf-site-header__search-toggle { display: none; }
@media (min-width: 1024px) { .apf-site-header__search-toggle { display: inline-flex; } }

/* Hamburger is mobile-only. */
@media (min-width: 1024px) { .apf-site-header__menu-toggle { display: none; } }

.apf-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 1.25rem;
	height: 1.25rem;
}

.apf-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--apf-transition), opacity var(--apf-transition);
}

[aria-expanded="true"] .apf-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .apf-burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .apf-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Donate button in the header. */
.apf-button--donate {
	padding: 0.625rem 1.5rem;
	font-size: 0.9375rem;
	white-space: nowrap;
}

/* Hidden on the smallest screens - the drawer carries it there, and at
   360px it crowds the logo off the row. */
.apf-site-header__utils .apf-button--donate { display: none; }
@media (min-width: 480px) { .apf-site-header__utils .apf-button--donate { display: inline-block; } }

.apf-button--block { display: block; width: 100%; }
.apf-button--small { padding: 0.5rem 1.25rem; font-size: 0.875rem; }

.apf-button__icon {
	width: 1.125rem;
	height: 1.125rem;
	display: inline-block;
	vertical-align: -0.2em;
	margin-right: 0.5rem;
}

/*
 * Full-width "Donate Now" banner button (patterns/donate-banner.php) - a
 * Buttons block set to 100% width, so it fills the content column at every
 * screen size without a flattened image. The icon is a background-image on
 * ::before, cropped from the logo mark, since the core Button block has no
 * child markup to hang a real <img> on.
 */
.apf-donate-banner .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	width: 100%;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
	border-radius: 1.5rem;
	background-color: var(--apf-sky);
	color: var(--apf-ink);
	font-family: var(--apf-font-heading);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 400;
	text-decoration: none;
}

.apf-donate-banner .wp-block-button__link:hover {
	background-color: var(--apf-sky-hover);
	color: var(--apf-ink);
}

.apf-donate-banner .wp-block-button__link::before {
	content: '';
	flex: 0 0 auto;
	width: clamp(2.5rem, 6vw, 3.5rem);
	height: clamp(2.5rem, 6vw, 3.5rem);
	background: url('../images/icon-mark.png') center / contain no-repeat;
	/* icon-mark.png ships sage green; force it to white rather than shipping a second file. */
	filter: brightness(0) invert(1);
}

/* =========================================================================
   10. Search
   ========================================================================= */

.apf-search-panel {
	border-top: 1px solid #F3F4F6;
	padding-block: 1rem;
	background-color: var(--apf-white);
}

.apf-search-panel[hidden] { display: none; }

/* Form on the left growing to fill, close button pinned to the right. */
.apf-search-panel__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.apf-search-panel__inner .apf-searchform {
	flex: 1;
}

.apf-search-panel__close {
	flex-shrink: 0;
}

.apf-searchform {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	border-bottom: 2px solid var(--apf-dark-sage);
	padding-bottom: 0.375rem;
}

.apf-searchform__icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	color: var(--apf-dark-sage);
}

.apf-searchform__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.25rem 0;
	font-size: 1rem;
	color: var(--apf-ink);
}

.apf-searchform__input:focus { outline: none; }
.apf-searchform__input::placeholder { color: #9CA3AF; }

.apf-searchform__submit {
	flex: none;
	border: 0;
	background: none;
	padding: 0.25rem 0.5rem;
	color: var(--apf-dark-sage);
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 4px;
}

.apf-searchform__submit:hover { background-color: var(--apf-sage-08); }

/* =========================================================================
   11. Mobile drawer
   ========================================================================= */

.apf-drawer {
	position: fixed;
	inset: var(--apf-header-height) 0 0;
	z-index: 39;
}

.apf-drawer[hidden] { display: none; }

.apf-drawer__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
}

.apf-drawer__panel {
	position: relative;
	width: 100%;
	max-width: 24rem;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--apf-white);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}

.apf-drawer__search {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #F3F4F6;
}

.apf-drawer__cta { padding: 1.5rem 1.25rem; }

/* Drawer menu: stacked, full-width rows. */
.apf-menu--drawer {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.apf-menu--drawer .apf-menu__item { width: 100%; }

.apf-menu--drawer .apf-menu__link,
.apf-menu--drawer .apf-menu__toggle {
	width: 100%;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	font-size: 1rem;
	font-weight: 500;
	color: #1F2937;
	border-radius: 0;
	border-bottom: 1px solid #F3F4F6;
}

.apf-menu--drawer .apf-submenu {
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: rgba(111, 117, 90, 0.05);
}

.apf-menu--drawer .apf-submenu .apf-menu__link {
	padding-left: 2.25rem;
	font-size: 0.9375rem;
	color: var(--apf-dark-sage);
	border-bottom-color: rgba(111, 117, 90, 0.12);
}

/* =========================================================================
   12. Hero
   ========================================================================= */

.apf-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 30rem;
	overflow: hidden;
	background-color: var(--apf-dark-sage);
}

/*
 * From md the hero is 16:9, capped so it does not swallow an entire large
 * screen.
 *
 * Do NOT express this as `aspect-ratio: 16/9` + `max-height`. When the height
 * clamps, the browser recomputes the WIDTH from the ratio to keep it - so at
 * 1440px wide the hero rendered 1252px wide (704 x 16/9) with a white gap down
 * the right-hand side. `height: min()` sets the same 16:9 relationship
 * (56.25vw == 9/16) without ever constraining width.
 */
@media (min-width: 768px) {
	.apf-hero {
		min-height: 0;
		height: min(56.25vw, 44rem);
	}
}

.apf-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Scrim. On mobile the copy sits over the middle of the photo, so the overlay
 * runs top-to-bottom; from md the design anchors copy left, so it runs
 * left-to-right and lets the right side of the photo stay clear.
 *
 * These alphas are the LIGHTEST that keep white text accessible on the current
 * hero photo (APF-Home-Hero.jpg), measured per-pixel behind the actual text:
 * the small lede holds ~6.2:1 on mobile / ~5.3:1 on desktop (WCAG AA needs
 * 4.5:1) and the large title ~3.8:1 / ~5.1:1 (needs 3:1) - conservative, since
 * the title's text-shadow adds contrast this doesn't count. The mobile values
 * are near-maximal because this photo is bright behind the copy; a darker (or
 * differently framed) hero would allow a lighter scrim. Re-measure whenever the
 * hero image is swapped - a brighter photo can drop the text below AA.
 */
.apf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.70) 60%, rgba(0,0,0,.78) 100%);
}

@media (min-width: 768px) {
	.apf-hero__scrim {
		background: linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.32) 75%, rgba(0,0,0,0) 100%);
	}
}

.apf-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 3rem;
}

.apf-hero__copy { max-width: 34rem; }

/*
 * The hero headline and body copy come from the Home Banner "Message" field, a
 * WYSIWYG - so the client writes the tags and the theme cannot put classes on
 * them. Styling hangs off descendant selectors instead, which means an h1, an
 * h2 or three paragraphs all come out looking right.
 *
 * The .apf-hero__title / .apf-hero__lede classes are kept alongside for the
 * no-ACF fallback markup in the hero template part.
 */
.apf-hero__message :is(h1, h2, h3),
.apf-hero__title {
	margin: 0 0 1rem;
	color: var(--apf-white);
	font-size: clamp(1.875rem, 1.1rem + 3.4vw, 3.75rem);
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* A second or third heading is a subhead, not another 60px title. */
.apf-hero__message :is(h2, h3) {
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
}

.apf-hero__message :is(h1) ~ :is(h2, h3) {
	margin-top: 0.75rem;
}

.apf-hero__message p,
.apf-hero__lede {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.6;
}

/*
 * The gap above the button row belongs to the row, not to whatever element
 * happens to be last in the client's message - which may be a paragraph, a
 * heading or a list.
 */
.apf-hero__message > :last-child {
	margin-bottom: 0;
}

.apf-hero__lede {
	margin-bottom: 1.75rem;
}

.apf-hero__message a {
	color: var(--apf-white);
}

.apf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/*
 * Interior photo banner (template-ways-to-give.php) - the homepage hero at
 * two-thirds the height: 20rem vs 30rem on mobile, and min(37.5vw, 29.333rem)
 * vs min(56.25vw, 44rem) from md.
 *
 * min-height rather than height, so a longer message grows the banner instead
 * of being clipped by the hero's overflow:hidden.
 */
.apf-hero--page {
	min-height: 20rem;
}

@media (min-width: 768px) {
	.apf-hero--page {
		height: auto;
		min-height: min(37.5vw, 29.333rem);
	}
}

/* No breadcrumbs on this template, so the content needs its own top space. */
.apf-main--photo-banner {
	padding-top: clamp(2rem, 5vw, 3rem);
}

/* =========================================================================
   13. Our Impact
   ========================================================================= */

.apf-impact {
	position: relative;
	overflow: hidden;
	background-color: var(--apf-dark-sage);
	padding-block: clamp(3rem, 6vw, 4rem);
}

/*
 * The mountain graphic sits at 12% opacity. Any higher and white text over the
 * peaks drops below the 4.5:1 contrast ratio required for AA.
 */
.apf-impact__mountains {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
	opacity: 0.12;
	pointer-events: none;
}

.apf-impact__inner { position: relative; z-index: 1; }

.apf-impact__title {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	text-align: center;
	color: var(--apf-white);
}

.apf-impact__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.apf-impact__grid { grid-template-columns: repeat(4, 1fr); }
}

.apf-stat { text-align: center; }

.apf-stat__value {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--apf-white);
	font-family: var(--apf-font-body);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.apf-stat__label {
	display: block;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.9375rem;
}

/* =========================================================================
   14. Features
   ========================================================================= */

.apf-features {
	background-color: #F9FAF8;
	padding-block: clamp(3rem, 7vw, 6rem);
}

.apf-features__head { text-align: center; margin-bottom: 2.5rem; }
.apf-features__title { margin-bottom: 0.5rem; }
.apf-features__lede { margin: 0; color: var(--apf-muted); }

.apf-features__grid {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px)  { .apf-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .apf-features__grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   15. Explore Activities
   ========================================================================= */

.apf-activities {
	background-color: var(--apf-white);
	padding-block: clamp(3rem, 6vw, 4rem);
	overflow-x: clip;   /* same containment as .apf-featured */
}

.apf-activities__title {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	text-align: center;
}

/* Horizontal scroll strip. Items come from the Activity CPT, so the count
 * grows; the strip scrolls rather than wrapping to more rows. Native swipe on
 * touch; carousel.js adds prev/next arrows (no dots - too many items). */
.apf-activities__carousel { position: relative; }

/* Two rows that flow in columns and scroll horizontally, matching the comp's
 * 4x2 grid. `grid-auto-flow: column` fills top-then-bottom of each column, so
 * new columns appear as you scroll right - the correct order for a horizontal
 * 2-row strip. `grid-auto-columns` fixes each column's width. */
.apf-activities__track {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	/*
	 * minmax(7.5rem, 1fr): columns grow to fill the width evenly when they fit
	 * (matching the comp's even 4-across distribution and the Featured block's
	 * width above), but hold a 7.5rem floor when there are more than fit - so
	 * they never squish, and the track scrolls instead.
	 *
	 * NOT justify-content: space-between - that distributes correctly when
	 * items fit but breaks a horizontal scroll container when they overflow
	 * (content gets pushed out of the scrollable area and the arrows misjudge
	 * scrollability). minmax has neither problem.
	 */
	grid-auto-columns: minmax(7.5rem, 1fr);
	column-gap: clamp(1rem, 3vw, 2rem);
	row-gap: 2rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.apf-activities__track::-webkit-scrollbar { display: none; }

.apf-activities__slide {
	scroll-snap-align: start;
	text-align: center;
}

/* An odd number of activities leaves one lonely item in the top row of the
 * last column; that is expected and reads fine. */

.apf-activity { text-align: center; }

.apf-activity__link,
.apf-activity__static {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	color: #374151;
	font-weight: 500;
	text-decoration: none;
}

.apf-activity__disc {
	display: grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	color: #3D4133;
	transition: transform var(--apf-transition);
}

.apf-activity__disc--0 { background-color: var(--apf-coral); }
.apf-activity__disc--1 { background-color: var(--apf-sky); }
.apf-activity__disc--2 { background-color: var(--apf-lime); }
.apf-activity__disc--3 { background-color: var(--apf-gold); }

.apf-activity__icon { width: 3rem; height: 3rem; }
.apf-activity__img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	border-radius: 0;
}

/* Static (unlinked) activity: no hover lift, but still readable. */
.apf-activity__static .apf-activity__disc { cursor: default; }

.apf-activity__link:hover .apf-activity__disc { transform: scale(1.08); }
.apf-activity__link:hover { color: var(--apf-dark-sage); }

/* =========================================================================
   16. Interior page banner
   ========================================================================= */

.apf-page-banner {
	position: relative;
	overflow: hidden;
	background-color: var(--apf-dark-sage);
	padding-block: clamp(2rem, 5vw, 2.75rem);
}

/*
 * Topo texture. `screen` blend lightens only where the pattern is light,
 * so the lines read as a subtle emboss rather than a flat overlay.
 */
.apf-page-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../images/topo.png");
	background-size: cover;
	background-position: center;
	mix-blend-mode: screen;
	opacity: 0.4;
	pointer-events: none;
}

.apf-page-banner > * { position: relative; z-index: 1; }

.apf-page-banner__eyebrow { color: var(--apf-white); margin-bottom: 0.5rem; }

.apf-page-banner__title {
	margin: 0;
	color: var(--apf-white);
	line-height: 1.15;
}

/* The bone strip beneath the banner, from the comp. */
.apf-page-banner__strip {
	height: 12px;
	background-color: var(--apf-bone);
}

.apf-main { padding-bottom: clamp(3rem, 6vw, 4rem); }
.apf-main--home { padding-bottom: 0; }

/* Get in Touch: single brand color for the social icons block */
body.page-id-15350 .wp-block-social-links .wp-social-link {
	background-color: #9CC5C9;
}

.apf-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 2rem;
	font-size: 0.9375rem;
}

.apf-page-links__label { color: var(--apf-muted); }

/* =========================================================================
   17. Site footer
   ========================================================================= */

.apf-site-footer {
	background-color: var(--apf-dark-sage);
	padding-block: clamp(2.5rem, 5vw, 3rem);
}

.apf-site-footer__grid {
	display: grid;
	gap: 2rem;
	margin-bottom: 2rem;
}

@media (min-width: 640px)  { .apf-site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .apf-site-footer__grid { grid-template-columns: 1.2fr 1fr 1.2fr; } }

/*
 * align-self keeps the logo flush with the top of the other columns' content
 * (the address), rather than centered against their taller, fuller content.
 * The fixed height + overflow:hidden crop the source PNG's transparent
 * padding (see the img rule below) so that crop holds on every row layout,
 * not just when the brand column happens to sit beside the address.
 */
.apf-site-footer__brand {
	align-self: start;
	height: 9.852rem;
	overflow: hidden;
}

/*
 * The stacked logo ships as dark artwork; invert flips it to white without
 * shipping a second file. Works because the mark is pure black on transparent.
 * display: block drops the inline image's baseline gap. The source PNG also
 * carries ~21% transparent padding above and below the mark itself (92px and
 * 93px of 440px); the negative margin plus the container's clipped height
 * above crop that away so the visible logo - not the file's empty margin -
 * lines up with the top of the address text beside it.
 */
.apf-site-footer__brand img {
	display: block;
	height: 17rem;
	width: auto;
	margin-top: -3.555rem;
	filter: brightness(0) invert(1);
}

.apf-site-footer__address {
	display: grid;
	gap: 0.5rem;
	color: var(--apf-white);
	font-size: 1rem;
	font-style: normal;
}

.apf-site-footer__address a {
	color: var(--apf-white);
	text-decoration: none;
}

.apf-site-footer__address a:hover {
	color: var(--apf-bone);
	text-decoration: underline;
}

.apf-site-footer__heading {
	margin: 0 0 1rem;
	color: var(--apf-white);
	font-family: var(--apf-font-heading);
	font-size: 1.125rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Newsletter -------------------------------------------------------- */

.apf-newsletter {
	margin-top: 1rem;
}

/*
 * Subscribe button: 25% smaller than the standard .apf-button, then halved
 * again horizontally only - width is cut to 50% of the column, height/type
 * size stay at the 25%-smaller baseline.
 */
.apf-newsletter .apf-button {
	width: 50%;
	padding: 0.65625rem 1.5rem;
	font-size: 0.75rem;
}

/* ---- Footer bar -------------------------------------------------------- */

.apf-site-footer__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
	.apf-site-footer__bar { flex-direction: row; justify-content: space-between; }
}

.apf-site-footer__copy {
	margin: 0;
	color: var(--apf-bone);
	font-size: 0.875rem;
}

.apf-social {
	display: flex;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.apf-social__link {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--apf-white);
	text-decoration: none;
	border-radius: 50%;
	transition: color var(--apf-transition);
}

.apf-social__link:hover { color: var(--apf-bone); }
.apf-social__link svg { width: 1.875rem; height: 1.875rem; }

/* ---- CTA band spacing -------------------------------------------------- */

.apf-cta-band { padding-block: clamp(3rem, 7vw, 5rem); }
.apf-cta-band__lede { margin: 0 auto; max-width: 46ch; font-size: 1.125rem; }

/* ---- Admin-only notice ------------------------------------------------- */

.apf-menu-notice {
	margin: 0;
	padding: 0.5rem 0.75rem;
	background-color: #FEF3C7;
	border: 1px solid #FCD34D;
	border-radius: 6px;
	color: #78350F;
	font-size: 0.8125rem;
}

/* =========================================================================
   18. Archives, single posts, search, 404
   ========================================================================= */

.apf-archive__intro {
	max-width: var(--apf-content);
	margin: 0 auto 2.5rem;
	color: var(--apf-muted);
}

.apf-archive__grid {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px)  { .apf-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .apf-archive__grid { grid-template-columns: repeat(3, 1fr); } }

/* The card is defined in section 7; archives only adjust the heading level. */
.apf-archive__grid .apf-card__title { font-size: var(--wp--preset--font-size--subhead); }

/* ---- Pagination -------------------------------------------------------- */

.navigation.pagination,
.apf-pagination {
	margin-top: 1rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--apf-bone);
	border-radius: 8px;
	color: var(--apf-dark-sage);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color var(--apf-transition), color var(--apf-transition);
}

.nav-links .page-numbers:hover {
	background-color: var(--apf-sage-08);
}

.nav-links .page-numbers.current {
	background-color: var(--apf-dark-sage);
	border-color: var(--apf-dark-sage);
	color: var(--apf-white);
	font-weight: 600;
}

.nav-links .page-numbers.dots {
	border-color: transparent;
	min-width: 1.5rem;
	padding-inline: 0;
}

/* ---- Single post ------------------------------------------------------- */

.apf-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	color: var(--apf-warm-sage);
	font-size: 0.875rem;
}

.apf-post__meta a { color: var(--apf-dark-sage); text-decoration: none; }
.apf-post__meta a:hover { text-decoration: underline; }
.apf-post__meta-sep { color: var(--apf-bone); }

.apf-post__featured {
	margin: 0 0 2rem;
}

.apf-post__featured img {
	width: 100%;
	border-radius: var(--apf-radius);
}

.apf-post__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--apf-bone);
	font-size: 0.875rem;
}

.apf-post__tags-label {
	color: var(--apf-warm-sage);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
}

.apf-post__tags a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--apf-bone);
	border-radius: 999px;
	color: var(--apf-dark-sage);
	text-decoration: none;
}

.apf-post__tags a:hover {
	background-color: var(--apf-sage-08);
}

/* ---- Prev / next ------------------------------------------------------- */

.apf-postnav {
	display: grid;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--apf-bone);
}

@media (min-width: 640px) {
	.apf-postnav { grid-template-columns: 1fr 1fr; }
}

.apf-postnav__link {
	display: block;
	padding: 1rem 1.25rem;
	border: 1px solid var(--apf-bone);
	border-radius: var(--apf-radius);
	text-decoration: none;
	transition: background-color var(--apf-transition), border-color var(--apf-transition);
}

.apf-postnav__link:hover {
	background-color: var(--apf-bone-20);
	border-color: var(--apf-warm-sage);
}

.apf-postnav__link--next { text-align: right; }

/* On one column, "Next" reading right-aligned looks like a mistake. */
@media (max-width: 639px) {
	.apf-postnav__link--next { text-align: left; }
}

.apf-postnav__label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--apf-warm-sage);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.apf-postnav__title {
	display: block;
	color: var(--apf-dark-sage);
	font-family: var(--apf-font-heading);
	font-size: 1rem;
	line-height: 1.4;
}

/* ---- Search & empty states --------------------------------------------- */

.apf-search-count {
	margin-bottom: 2rem;
	color: var(--apf-muted);
	font-size: 0.9375rem;
}

.apf-empty {
	max-width: 40rem;
	margin-inline: auto;
	padding-block: 2rem 1rem;
	text-align: center;
}

.apf-empty__lede {
	margin-inline: auto;
	color: var(--apf-muted);
	font-size: 1.0625rem;
}

.apf-empty .apf-searchform {
	margin-block: 2rem;
	text-align: left;
}

.apf-empty__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.apf-empty__links a {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--apf-bone);
	border-radius: 999px;
	color: var(--apf-dark-sage);
	font-size: 0.9375rem;
	text-decoration: none;
}

.apf-empty__links a:hover {
	background-color: var(--apf-sage-08);
	border-color: var(--apf-warm-sage);
}

/* =========================================================================
   19. Person card (Staff / Board patterns)
   ========================================================================= */

/*
 * Cards render as horizontal rows (photo left, info right), so each row
 * needs the full content width rather than a share of a 3-across grid.
 */
.apf-person-grid.wp-block-columns {
	flex-direction: column !important;
	gap: 2.5rem !important;
}

.apf-person-grid.wp-block-columns > .wp-block-column {
	flex-basis: 100% !important;
	width: 100%;
}

.apf-person {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.apf-person > * {
	margin: 0 !important;
}

.apf-person__photo {
	flex: 0 0 300px;
	width: 300px;
}

.apf-person__photo img {
	width: 300px;
	height: 300px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--apf-radius);
}

/*
 * A person with no photo yet should not collapse the card - a bone-tinted
 * placeholder keeps the row even while staff gather headshots.
 */
.apf-person__photo img:not([src]),
.apf-person__photo img[src=""] {
	background-color: var(--apf-bone-50);
}

/*
 * The 300x300 crop is centered by default, which can clip a head in a
 * tall/off-center source photo. Add one of these as an "Additional CSS
 * class" on the Image block (editor sidebar > Advanced) to nudge the crop.
 */
.apf-person__photo.apf-photo--top img { object-position: center top; }
.apf-person__photo.apf-photo--bottom img { object-position: center bottom; }

/*
 * A flex column with its own `gap` for rhythm between name/role/contact/bio.
 * Every child's margin is zeroed so nothing - not even WP's own global-styles
 * block-gap CSS - can push the first line down away from the photo's top.
 */
.apf-person__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.apf-person__info > * {
	margin: 0 !important;
}

.apf-person__name {
	line-height: 1.1;
}

.apf-person__role {
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.apf-person__bio {
	color: var(--apf-muted);
	font-size: 0.9375rem;
}

/* Shrink the photo on narrow phones so the info column keeps room to read. */
@media (max-width: 600px) {
	.apf-person__photo {
		flex-basis: 140px;
		width: 140px;
	}

	.apf-person__photo img {
		width: 140px;
		height: 140px;
	}
}

/* =========================================================================
   20. Featured Items block (apf/featured)
   ========================================================================= */

/*
 * Shares the .apf-card component and the same grid as the homepage Features
 * section, so the block-managed version and any template-rendered cards stay
 * visually identical.
 */
.apf-featured {
	padding-block: clamp(3rem, 7vw, 6rem);
	/* Contain the scroll-snap track. The track scrolls internally via its own
	 * overflow-x:auto; clip here stops a Chrome quirk where a horizontal
	 * scroll-snap container inflates the document scrollWidth and can spawn a
	 * stray page scrollbar. `clip` (not hidden) is sticky-safe. */
	overflow-x: clip;
}

/* On a white page background, tint it like the original Features band. */
.apf-featured:not(.apf-on-dark) {
	background-color: #F9FAF8;
}

.apf-featured__head {
	text-align: center;
	margin-bottom: 2.5rem;
}

.apf-featured__title { margin-bottom: 0.5rem; }
.apf-featured__intro { margin: 0; color: var(--apf-muted); }

/* ---- White panel (from the comp) ---- */
.apf-featured__panel {
	background-color: var(--apf-white);
	border-radius: var(--apf-radius);
	box-shadow: 0 10px 40px rgba(51, 51, 51, 0.12), 0 2px 8px rgba(51, 51, 51, 0.06);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* ---- Scroll-snap track ----
 * Native horizontal scroll + snap: swipes on touch, scrolls by keyboard, works
 * with no JavaScript. The arrows and dots (added by carousel.js) just drive
 * scrollBy() on top of this.
 */
.apf-featured__track {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;              /* Firefox - JS controls replace it */
	-webkit-overflow-scrolling: touch;
}

.apf-featured__track::-webkit-scrollbar { display: none; }

.apf-featured__track:focus-visible {
	outline: 2px solid var(--apf-dark-sage);
	outline-offset: 4px;
	border-radius: var(--apf-radius);
}

/* Slides: 1-up on phones (with a peek of the next), 2-up on tablets, 3-up on
 * desktop. flex-basis is the visible width; the peek invites the swipe. */
.apf-featured__slide {
	flex: 0 0 86%;
	scroll-snap-align: start;
}

@media (min-width: 640px)  { .apf-featured__slide { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .apf-featured__slide { flex-basis: calc((100% - 3rem) / 3); } }

/* ---- Control bar ---- */
.apf-featured__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid #EDEDE8;
}

.apf-featured__controls[hidden] { display: none; }

.apf-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	border: 0;
	border-radius: 50%;
	background-color: var(--apf-bone-50);
	color: var(--apf-dark-sage);
	transition: background-color var(--apf-transition), opacity var(--apf-transition);
}

.apf-carousel__arrow:hover { background-color: var(--apf-bone); }
.apf-carousel__arrow svg { width: 1.25rem; height: 1.25rem; }

.apf-carousel__arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- Dots ---- */
.apf-carousel__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.apf-carousel__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--apf-warm-sage);
	transition: width var(--apf-transition), background-color var(--apf-transition);
}

.apf-carousel__dot.is-active {
	width: 2rem;
	background-color: var(--apf-dark-sage);
}

.apf-card__kicker {
	margin: 0 0 0.25rem;
	color: var(--apf-warm-sage);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Editor placeholder shown before any items are picked. */
.apf-featured--placeholder {
	padding: 2rem;
	border: 2px dashed var(--apf-bone);
	border-radius: var(--apf-radius);
	text-align: center;
	color: var(--apf-muted);
	background-color: var(--apf-bone-20);
}

/* ---- Three card columns pattern (patterns/card-columns.php) ----
 * The same .apf-card tiles as the Featured block, built from core blocks and
 * without the white panel or carousel controls. These rules only undo the
 * spacing core adds to Columns / Group / Image / Buttons so the tiles match.
 */
.apf-card-columns.wp-block-columns {
	gap: 1.5rem;
	margin-block: 2rem;
}

/* Equal-height cards, so the buttons line up across the row. */
.apf-card-columns .apf-card {
	height: 100%;
}

.apf-card-columns .apf-card > *,
.apf-card-columns .apf-card__body > * {
	margin: 0;
}

.apf-card-columns .apf-card__body {
	flex: 1;
}

/* Beat core's `.wp-block-image img { height: auto }` so the 3:2 frame holds. */
.apf-card-columns .apf-card__media img {
	width: 100%;
	height: 100%;
}

/* An image left empty in the editor shouldn't leave a blank grey frame on the
 * site (the editor's upload placeholder is exempt so it stays usable). */
.apf-card-columns .apf-card__media:not(:has(img[src], .components-placeholder)) {
	display: none;
}

.apf-card-columns .apf-card__actions {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* Match .apf-button--small from the Featured cards. */
.apf-card-columns .apf-card__actions .wp-block-button__link {
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
}

/* =========================================================================
   Trail-map gallery (page content: Anchorage Park & Trail System)

   A core Group using the native Grid layout holds one card per trail. The
   grid itself (columns, gaps) is WordPress's; these rules only dress the
   cards and, importantly, keep each map thumbnail inside its cell - the
   source images are a fixed 300px and would otherwise overflow a narrow
   column.
   ========================================================================= */

.apf-trail-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	border: 1px solid var(--apf-sage-20);
	border-radius: var(--apf-radius);
	background-color: var(--apf-white);
	text-align: center;
}

.apf-trail-card .wp-block-image,
.apf-trail-card figure {
	margin: 0;
}

.apf-trail-card img {
	width: 100%;
	height: auto;
	border-radius: calc(var(--apf-radius) - 0.25rem);
}

.apf-trail-card h3 {
	margin: 0.25rem 0 0;
	font-size: 1.125rem;
	color: var(--apf-dark-sage);
}

/* Push the PDF link to the bottom so cards of unequal text line up. */
.apf-trail-card p {
	margin: 0;
	margin-top: auto;
	font-size: 0.9375rem;
}

/* =========================================================================
   Accordions (page content)

   Migration turned SiteOrigin tabs AND accordions into core Details blocks
   (<details>/<summary>). Left unstyled they show the browser's default
   disclosure triangle; these rules dress them to match the Accordion in the
   style guide (figma-make StylesPage): flat, no box - a divider per item,
   the question on the left, a dark-sage chevron on the right that rotates
   when open, and muted answer copy. Scoped to .entry-content so only page
   body content is affected.
   ========================================================================= */

.entry-content .wp-block-details {
	border-bottom: 1px solid var(--apf-bone);
}

/* No divider beneath the final item of a consecutive accordion run, matching
   the guide's `last:border-0`. */
.entry-content .wp-block-details:not(:has(+ .wp-block-details)) {
	border-bottom: 0;
}

.entry-content .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	list-style: none; /* removes the default disclosure triangle */
	cursor: pointer;
	color: var(--apf-ink);
	font-weight: 500;
	transition: color var(--apf-transition);
}

/* Safari still paints a marker unless this is removed explicitly. */
.entry-content .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.entry-content .wp-block-details > summary:hover {
	color: var(--apf-dark-sage);
}

/* Chevron on the right (dark sage), pointing down and rotating 180° when open. */
.entry-content .wp-block-details > summary::after {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236F755A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--apf-transition);
}

.entry-content .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

/* Answer copy: muted, with room before the divider only while open. */
.entry-content .wp-block-details[open] {
	padding-bottom: 1rem;
}

.entry-content .wp-block-details > :not(summary) {
	color: var(--apf-muted);
}

.entry-content .wp-block-details > :not(summary):first-of-type {
	margin-top: 0;
}

/* =========================================================================
   Mountain bands (patterns/mountain-band-split.php, mountain-band-intro.php)

   A full-bleed tinted band with the mountain range along its bottom edge, used
   to break up the white sections of a page. Everything above the range is an
   ordinary block area that grows with whatever the editor puts in it.

   Three things are worth knowing before changing anything here:

   1. The bleed is done with `width: 100vw; margin-inline: calc(50% - 50vw)`,
      not with `.alignfull`. Core's full alignment only escapes as far as its
      containing element, and on this site page content renders inside
      .apf-container--narrow (1024px), so alignfull alone gets nowhere near the
      viewport edge. The calc works in either context - in a container already
      the full width, `50% - 50vw` resolves to 0 - and `body { overflow-x:
      hidden }` in section 2 absorbs the scrollbar's worth of 100vw overflow.

   2. The range is a ::after IN THE NORMAL FLOW, not an absolutely positioned
      one. It was absolute at first, with bottom padding sized in `vw` to
      reserve room for it - which broke in the editor: the artwork's height
      comes from the band's own width, the padding came from the viewport, and
      in the editor the canvas is narrower than the viewport, so the range rode
      up over the text an editor was trying to work on. A block in the flow
      takes its own space by definition, in any canvas, at any width.

   3. It is still a ::after rather than an <img> or an Image block, because it
      is decoration: it should stay out of the accessibility tree, and out of
      the list of things an editor can select, move or delete by accident.

   The band's colour is whatever palette colour the editor picks on the Group;
   the patterns ship with Bone. Nothing here hard-codes a background, so the
   sidebar colour control keeps working.
   ========================================================================= */

.apf-mountain-band {
	/*
	 * Named container, so the single-column variant below can lay itself out
	 * from the BAND's width rather than the viewport's. In the editor those are
	 * two very different numbers - the canvas is inset by the editor's chrome
	 * and whatever sidebar is open - so a viewport media query made the band
	 * show its stacked phone layout while the page it was editing would render
	 * side by side.
	 */
	container: apf-band / inline-size;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* No bottom padding: the range itself closes the band off. */
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/*
 * The bleed itself, and only the bleed, is repeated at the higher specificity
 * needed to beat `.entry-content > *` in section 4 (which boxes every direct
 * child to the content width). Keep everything else out of this rule: anything
 * in here also outranks the variant rules further down, which are plain
 * single-class selectors.
 */
.apf-mountain-band,
.entry-content > .apf-mountain-band {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

/*
 * The range.
 *
 * ::before, NOT ::after - this is the important one. Gutenberg draws a block's
 * selected / hovered / focused outline with `::after` on that block's own
 * element (`.block-editor-block-list__block...is-selected::after` and friends
 * in block-editor/content.css). Putting artwork on ::after means sharing a
 * pseudo-element with the editor's own UI: the moment an editor clicked the
 * band, core's rule won on `position` and `inset` and stretched the range over
 * the whole block, on top of the text being edited. Core claims nothing on
 * ::before, so the range lives there instead.
 *
 * Which puts it FIRST in source order - hence the flex column above and
 * `order: 1`, which move it back to the bottom without any positioning.
 *
 * `aspect-ratio` matches the SVG's own 2000x440 box, so `background-size:
 * 100% 100%` fills it exactly without distorting - the artwork scales with the
 * width of the band the way it does in the comps - and gives the element a
 * height without anything having to know that ratio. `margin-top` is the
 * breathing room between the blocks above and the peaks.
 */
.apf-mountain-band::before {
	content: "";
	order: 1;
	display: block;
	width: 100%;
	aspect-ratio: 2000 / 444;
	margin-top: clamp(2rem, 5vw, 4rem);
	background: url("../images/mountain-range.webp") bottom center / 100% 100% no-repeat;
}

/*
 * Alternative artwork: the plain geometric range, no figures. Add
 * `apf-mountain-band--ridge` to the Group's Additional CSS classes to swap.
 * Different source file, and a hair shorter, hence the ratio.
 */
.apf-mountain-band--ridge::before {
	aspect-ratio: 2000 / 440;
	background-image: url("../images/mountain-ridge.svg");
}

/*
 * Content sits back inside the reading container the rest of the page uses.
 *
 * `width: 100%` is load-bearing, not belt-and-braces: the band is a flex
 * column, and a flex item with `auto` cross-axis margins does not stretch -
 * it shrinks to fit its content and centres. Without the explicit width the
 * single-column variant's Group collapsed to the width of its own copy (608px
 * of a 1024px well) and sat in the middle of the band.
 */
.apf-mountain-band__inner {
	width: 100%;
	max-width: var(--apf-content);
	margin-inline: auto;
	padding-inline: var(--apf-gutter);
}

.apf-mountain-band__inner > :first-child { margin-top: 0; }
.apf-mountain-band__inner > :last-child  { margin-bottom: 0; }

.apf-mountain-band__actions {
	margin-top: 1.75rem;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ---- Single-column variant --------------------------------------------- */

.apf-mountain-band--intro .apf-mountain-band__copy > :first-child { margin-top: 0; }

/*
 * From this width the range sits to the right and the copy is capped to a
 * readable measure on the left, as in the comp. Narrower than this - a phone,
 * or a band dropped into a genuinely narrow column - and it falls back to the
 * two-column variant's layout: copy full width, range full width beneath.
 *
 * Measured against the band, not the window: see `container` above.
 */
@container apf-band (min-width: 600px) {
	.apf-mountain-band--intro::before {
		width: min(72%, 70rem);
		margin-left: auto;
		margin-top: clamp(1rem, 2.5vw, 2rem);
	}

	.apf-mountain-band--intro .apf-mountain-band__copy {
		max-width: 34rem;
	}
}

/* ---- Dark background guardrail ----------------------------------------- */

/*
 * The colour control is left open, so an editor can pick Dark Sage or Ink.
 * Headings default to dark sage and body copy to near-black, both of which
 * fail contrast on those backgrounds - so flip the text to white when one is
 * chosen, the same treatment .apf-on-dark applies elsewhere.
 */
.apf-mountain-band.has-dark-sage-background-color,
.apf-mountain-band.has-ink-background-color {
	color: var(--apf-white);
}

.apf-mountain-band.has-dark-sage-background-color :is(h1, h2, h3, h4, h5, h6),
.apf-mountain-band.has-ink-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--apf-white);
}

.apf-mountain-band.has-dark-sage-background-color .is-style-outline > .wp-block-button__link,
.apf-mountain-band.has-ink-background-color .is-style-outline > .wp-block-button__link {
	color: var(--apf-white);
}

.apf-mountain-band.has-dark-sage-background-color .is-style-outline > .wp-block-button__link:hover,
.apf-mountain-band.has-ink-background-color .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--apf-white);
	border-color: var(--apf-white);
	color: var(--apf-ink);
}

/* Dark sage is close enough to the range's own greens to swallow it; lifting
   the artwork keeps the ridgelines visible. */
.apf-mountain-band.has-dark-sage-background-color::before {
	opacity: 0.55;
}