/* MSDN theme styles (design "A Path to Walk"). Colours and fonts come from theme.json. */
::selection { background: var(--wp--preset--color--green); color: #fff; }
a:focus-visible { outline: 3px solid var(--wp--preset--color--orange); outline-offset: 3px; border-radius: 6px; }

/* Header */
.msdn-header { max-width: 1232px; margin-inline: auto; }
.msdn-wordmark { font: 700 1.05rem/1 var(--wp--preset--font-family--sans); letter-spacing: .06em; margin: 0; }
.msdn-wordmark a { text-decoration: none; }
.msdn-nav { font-weight: 600; }
.msdn-nav a { text-decoration: none; }
.msdn-nav a:hover { color: var(--wp--preset--color--green-ink); }
.msdn-nav .msdn-donate > a { border: 2px solid var(--wp--preset--color--navy); padding: .35rem .95rem; border-radius: 99px; }

/* Hero: two balanced halves: headline centred in one, an arched photo window centred in the other (stacks on phones) */
.msdn-hero-cols { gap: clamp(1.5rem, 4vw, 3.5rem) !important; max-width: 1200px; margin: 0 auto !important; }
.msdn-hero-text { text-align: center; }
.msdn-tag { font: italic 500 clamp(1.25rem, 2vw, 1.6rem)/1.2 var(--wp--preset--font-family--serif); color: var(--wp--preset--color--green-ink); margin: 0; }
.msdn-title { font-size: clamp(2.3rem, 3.6vw, 3.6rem) !important; max-width: 12em; margin: .35rem auto 0 !important; text-wrap: balance; }
.msdn-sub { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--slate); margin: .8rem 0 0 !important; }
.msdn-arch { margin: 0 auto !important; position: relative; width: 100%; max-width: 360px; }
.msdn-arch img { width: 100%; aspect-ratio: 9 / 10; height: auto; max-height: 340px; object-fit: cover; object-position: 42% 50%; display: block; filter: saturate(.85);
	border-radius: 180px 180px 18px 18px; }
.msdn-arch figcaption { position: absolute; right: 14px; bottom: 10px; margin: 0; background: rgba(246, 241, 231, .92);
	font: italic 500 1rem var(--wp--preset--font-family--serif); padding: .2rem .7rem; border-radius: 99px; color: var(--wp--preset--color--navy); }

/* The path and its three stops */
.msdn-walk h2 { margin: 0 0 1.1rem; }
.msdn-stops { position: relative; max-width: 1200px; margin-inline: auto; }
.msdn-line { position: absolute; left: 0; top: 0; width: 100%; height: 52px; pointer-events: none; z-index: 0; }
.msdn-line path { fill: none; stroke: var(--wp--preset--color--green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 10; }
.msdn-paths { gap: clamp(1.5rem, 4vw, 3.5rem) !important; position: relative; z-index: 1; }
.msdn-stop { padding-top: calc(22px + .9rem); position: relative; }
.msdn-stop::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
	background: var(--wp--preset--color--paper); border: 4px solid var(--wp--preset--color--green); box-sizing: border-box; transition: background .3s; }
.msdn-stop:nth-child(2) { margin-top: 30px; }
.msdn-stop:hover::before, .msdn-stop:focus-within::before { background: var(--wp--preset--color--green); }
.msdn-stop h3 { margin-top: 0; }
.msdn-stop h3 a { text-decoration: none; }
.msdn-stop h3 a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--green); }
.msdn-stop p { color: var(--wp--preset--color--slate); max-width: 30ch; margin-inline: auto; }
.msdn-go a { font-weight: 700; color: var(--wp--preset--color--orange-ink); text-decoration: none; border-bottom: 2px solid currentColor; }
.msdn-retreat { margin: 3rem auto 0 !important; max-width: 760px; background: var(--wp--preset--color--sage); border-radius: 16px; padding: 1rem 1.4rem; }
.msdn-retreat strong { font: 700 1.25rem var(--wp--preset--font-family--serif); }
.msdn-retreat a { font-weight: 700; color: var(--wp--preset--color--green-ink); }

/* Option C (Matt, 2026-10-16): headline beside the photo; the three choices in one calm band */
.msdn-hero-cols { max-width: 980px !important; gap: clamp(1rem, 2.5vw, 2rem) !important; }
.msdn-hero-text { text-align: right; }
.msdn-title { margin-right: 0 !important; margin-left: auto !important; }
.msdn-hero-photo .msdn-arch { margin-left: 0 !important; }
.msdn-walk { padding-top: 0 !important; }
.msdn-band { background: var(--wp--preset--color--sage); border-radius: 28px; padding: 2.2rem 2rem 1.8rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.msdn-band-title { margin: 0 0 1.4rem !important; }
.msdn-band .msdn-stop h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); margin: 0; }
.msdn-retreat { margin-top: 1.6rem !important; background: none; }
@media (max-width: 781px) {
	.msdn-hero-text { text-align: center; }
	.msdn-title { margin-inline: auto !important; }
	.msdn-hero-photo .msdn-arch { margin-inline: auto !important; }
	.msdn-band { padding: 1.8rem 1.2rem; }
}

/* Below the band (Matt, 2026-10-16): retreat feature, why an Anabaptist Mennonite director, vision, for directors */
/* Matt: the gap between the green band and the retreat card was too big: one gap, like the one above the band */
body .msdn-walk { padding-bottom: 0 !important; }
body .msdn-retreat-feature { padding-top: clamp(1.8rem, 3vw, 2.6rem) !important; }
.msdn-retreat-card { background: var(--wp--preset--color--white); border-radius: 24px; padding: clamp(1rem, 2.5vw, 1.6rem) !important; gap: clamp(1.2rem, 3vw, 2.4rem) !important;
	box-shadow: 0 18px 40px -28px rgba(29, 39, 60, .45); margin: 0 auto !important; }
.msdn-flyer { margin: 0 !important; }
.msdn-flyer img { border-radius: 16px; display: block; width: 100%; height: auto; }
.msdn-retreat-title { font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important; margin: 0 0 .5rem !important; }
.msdn-retreat-what { font: italic 500 1.2rem/1.35 var(--wp--preset--font-family--serif); color: var(--wp--preset--color--green-ink); margin: 0 0 .8rem !important; }
.msdn-retreat-when { color: var(--wp--preset--color--slate); margin: 0 0 .8rem !important; }
.msdn-why h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important; margin-top: 0 !important; }
.msdn-why p:not(.msdn-go) { color: var(--wp--preset--color--slate); }
.msdn-round { margin: 0 auto !important; max-width: 340px; position: relative; }
.msdn-round img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 170px 170px 18px 18px; }
.msdn-round figcaption { text-align: center; font: italic 500 1rem var(--wp--preset--font-family--serif); color: var(--wp--preset--color--slate); margin-top: .5rem; }
.msdn-vision { background: #efe7d6; }
.msdn-vision-title { font: 600 1.15rem/1.2 var(--wp--preset--font-family--sans) !important; letter-spacing: .04em; color: var(--wp--preset--color--green-ink); margin: 0 auto .8rem !important; }
.msdn-vision-quote { font: italic 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.3 var(--wp--preset--font-family--serif); margin: 0 auto 1rem !important; max-width: 30ch; }
.msdn-directors-title { font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important; margin: 0 auto 1rem !important; }
.msdn-directors-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.msdn-directors-links span { display: none; }
.msdn-directors-links a { text-decoration: none; font-weight: 700; border: 2px solid var(--wp--preset--color--navy); border-radius: 99px; padding: .5rem 1.1rem; }
.msdn-directors-links a:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--paper); }

/* Footer */
.msdn-footer a { color: inherit; }
.msdn-foot-name { font: 600 1.5rem/1.1 var(--wp--preset--font-family--serif); margin: 0; }
.msdn-foot-tag { font: italic 500 1.1rem var(--wp--preset--font-family--serif); margin: 0; opacity: .85; }
.msdn-foot-links { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
	.msdn-line path { stroke-dashoffset: 600; animation: msdn-walk 2.6s .4s ease-out forwards; }
}
@keyframes msdn-walk { to { stroke-dashoffset: 0; } }

@media (max-width: 781px) {
	.msdn-arch { max-width: 280px; }
	.msdn-line { display: none; }
	.msdn-stop:nth-child(2) { margin-top: 0; }
	.msdn-paths { gap: 2.4rem !important; }
}