/*
 * wlf.css — Wiki Loves Folklore page (/wiki-loves-folklore/) only.
 * Loaded after blog.css and pages.css, which provide the hero, sections and
 * split layout; this file adds the mission list, motto and the
 * "how to take part" steps.
 */

/* ---------- Hero buttons ---------- */
.ohf-wlf-hero__actions { margin-top: 30px; }
.ohf-wlf-hero__actions .ohf-btn,
.ohf-wlf-step__actions .ohf-btn { gap: 8px; } /* space for the external-link icon */

/* ---------- Mission + motto ---------- */
.ohf-wlf-mission { margin-top: 0; }
.ohf-wlf-mission p { overflow-wrap: normal; }
.ohf-wlf-mission ul { margin: 14px 0 0; padding-left: 1.2em; color: var(--ohf-text); line-height: 1.6; }
.ohf-wlf-mission li { margin-bottom: 8px; }
.ohf-wlf-mission li::marker { color: var(--ohf-ochre); }

.ohf-wlf-motto { margin: 36px 0 0; color: var(--ohf-text); font-size: 18px; text-align: center; }

/* ---------- Steps (icon + text + action buttons) ---------- */
.ohf-wlf-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ohf-wlf-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 24px;
	border-radius: 14px;
	background: var(--ohf-beige);
	color: var(--ohf-text);
}
.ohf-wlf-step__icon { flex: none; color: var(--ohf-ochre-dark); }
.ohf-wlf-step h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.ohf-wlf-step p { margin: 0; color: var(--ohf-muted); font-size: 15px; }
.ohf-wlf-step__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* Smaller than the default page button; needs .ohf-page to beat ".ohf-page .ohf-btn" in pages.css. */
.ohf-page .ohf-wlf-step__actions .ohf-btn { padding: 10px 20px; font-size: 14px; }
/* The outline button is designed for dark backgrounds; recolour it for the beige cards. */
.ohf-wlf-step__actions .ohf-btn--outline { color: var(--ohf-ochre-dark) !important; }
.ohf-wlf-step__actions .ohf-btn--outline:hover,
.ohf-wlf-step__actions .ohf-btn--outline:focus-visible { color: var(--ohf-on-accent) !important; }