/* ==========================================================================
   Base: reset, typography, layout primitives, shared components.
   All values come from tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(12px + var(--header-float-h) + 16px + var(--wp-admin--admin-bar--height, 0px)); font-variant-emoji: text; }
body {
  margin: 0;
  background: var(--color-section-page);
  color: var(--color-type-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

/* Lenis housekeeping (smooth scroll library) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Scroll lock while a dialog is open. nav.js sets --scrollbar-comp to the width of
   the scrollbar that disappears (0 with overlay scrollbars), so nothing shifts sideways */
html.has-dialog { overflow: hidden; }
html.has-dialog body { padding-right: var(--scrollbar-comp, 0px); }
html.has-dialog .site-header { right: var(--scrollbar-comp, 0px); }

/* ---- Accessibility helpers --------------------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--color-accent); color: var(--color-on-accent); font-weight: 600;
  transform: translateY(-160%); transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; }

:focus:not(:focus-visible), html[data-input="pointer"] :focus, html[data-input="pointer"] :focus::before, html[data-input="pointer"] :focus::after { outline: none !important; }
:focus-visible { outline: 2px solid var(--focus, var(--color-focus)); outline-offset: 3px; }
.on-dark { --focus: var(--color-accent); }
.on-green { --focus: var(--c-ink); }

/* ---- Layout primitives -------------------------------------------------- */
.rail { width: var(--rail); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--editorial { padding-block: var(--section-y-editorial); }

/* Near-bleed rounded color panel (sage / ochre / green) */
.panel {
  margin-inline: var(--panel-inset);
  border-radius: var(--r-xl);
  position: relative;
  overflow: clip;
  isolation: isolate;
}

/* List + image pairing (site-wide rule, see --pair-list-size in tokens.css):
   the image sets the height; the list fits inside it.
   Markup: .pair > .pair__list (list first) + .pair__media (image second).
   The list is size-contained, so the image alone sizes the row; its items then
   share that height evenly. Below 1024px the lock is released: the section
   stacks and the list flows naturally. */
@media (min-width: 1024px) {
  .pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
  .pair__list {
    grid-column: 1 / span 6;
    contain: size;
    display: grid; grid-auto-rows: 1fr;
    font-size: var(--pair-list-size);
  }
  .pair__media { grid-column: 7 / span 6; }
}

/* ---- Typography --------------------------------------------------------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-heading);
  max-width: var(--measure-h2);
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.005em;
  max-width: var(--measure-lead);
}
.prose { max-width: var(--measure-body); }
.prose > * + * { margin-top: 1.1em; }
.pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3-list);
  line-height: var(--lh-h3-list);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Eyebrow: one small uppercase tracked word in the body font, no leading rule (14au, #170). Words only, never numbers. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: 1.33;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow, var(--c-forest));
}
@media (max-width: 480px) { .eyebrow { font-size: 11px; } }

/* Full-width hairline rule that draws on reveal (kept from staging) */
.rule { height: 1px; background: var(--rule, var(--color-border)); transform-origin: left center; }

/* Section head: optional rule + eyebrow + H2 (+ lead). Shared by every page
   (moved here unchanged from sections/about.css in WO-11) */
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 28px + 3vw, 72px); justify-items: start; }
.section-head .rule { width: 100%; margin-bottom: 16px; }

/* ---- Buttons: pill + circled arrow -------------------------------------- */
.btn {
  --btn-bg: var(--color-accent); --btn-fg: var(--color-on-accent);
  --icon-bg: var(--color-on-accent); --icon-fg: var(--color-accent);
  --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 8px 8px 8px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-button); line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn__icon {
  width: var(--circle-md); height: var(--circle-md); flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--icon-bg); color: var(--icon-fg);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn__icon svg, .arrow svg { width: var(--circle-glyph); height: var(--circle-glyph); transition: transform var(--dur-flow) var(--ease-flow); }
/* ONE ARROW HOVER (button flow, #196; replaces 14bc's nudge): on hover/focus every circle changes colour (each variant sets it) and the
   arrow inside turns --circle-turn (30° up). A circle on its own stays put; a pill's circle also slides across (below). Reduced motion: colour only. */
@media (prefers-reduced-motion: no-preference) {
  .btn:is(:hover, :focus-visible) .btn__icon svg,
  :is(.mcard, .xcard, .ecard, .acard):is(:hover, :focus-visible) .arrow svg { transform: rotate(var(--circle-turn)); }
}

.btn--green:hover { --btn-bg: var(--color-accent-hover); }
.btn--glass {
  --btn-bg: color-mix(in srgb, var(--c-white) 6%, transparent); --btn-fg: var(--c-white); --btn-border: color-mix(in srgb, var(--c-white) 70%, transparent);
  --icon-bg: color-mix(in srgb, var(--c-white) 16%, transparent); --icon-fg: var(--c-white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--glass:hover { --btn-bg: color-mix(in srgb, var(--c-white) 14%, transparent); --icon-bg: var(--c-white); --icon-fg: var(--c-ink); }
.btn--ink { --btn-bg: var(--c-ink); --btn-fg: var(--c-light); --icon-bg: var(--c-light); --icon-fg: var(--c-ink); }
.btn--ink:hover { --icon-bg: var(--color-accent); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: var(--c-ink); --icon-bg: var(--c-ink); --icon-fg: var(--c-light); }
.btn--outline:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-light); --icon-bg: var(--c-light); --icon-fg: var(--c-ink); }
.btn--white { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --icon-bg: var(--c-ink); --icon-fg: var(--c-white); }
.btn--white:hover { --icon-bg: var(--c-forest); }
/* .btn--mono keeps its name (markup and seeds use it) but is the plain small button in the body font: no monospace (14au, #170) */
.btn--mono { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0; }
.btn--sm { min-height: 40px; padding: 4px 4px 4px 16px; gap: 10px; font-size: 13px; }
.btn--sm .btn__icon { width: var(--circle-sm); height: var(--circle-sm); }
/* A pill with no circle (e.g. the Subscribe dialog's Copy): even side padding, label centred (WNM-FEEDBACK-2026-10-08) */
.btn:not(:has(> .btn__icon)) { justify-content: center; padding-inline: 24px; }
.btn--sm:not(:has(> .btn__icon)) { padding-inline: 16px; }
/* PILL FLOW (#196, after 21st.dev "button with icon"): with a mouse, the pill's circle slides from the right end to the left end and the label
   slides right into the space it left (only a pill that has a circle: `:has(> .btn__icon)`). The circle is taken out of the flow and the padding swaps sides, so the pill's width never changes.
   After the variants (.btn--sm sets padding/min-height) so these win. Touch and reduced motion: today's colour change only. The WPBakery button (stock.css) uses the same --flow-* values. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:has(> .btn__icon) {
    --flow-s: 24px; --flow-e: 8px; --flow-gap: 14px; --flow-c: var(--circle-md);
    position: relative;
    min-height: calc(var(--flow-c) + 2 * var(--flow-e) + 3px); /* the height the in-flow circle gave: circle + block padding + the 1.5px border */
    padding-inline: var(--flow-s) calc(var(--flow-e) + var(--flow-c) + var(--flow-gap));
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), padding var(--dur-flow) var(--ease-flow);
  }
  .btn--sm:has(> .btn__icon) { --flow-s: 16px; --flow-e: 4px; --flow-gap: 10px; --flow-c: var(--circle-sm); }
  .btn > .btn__icon {
    position: absolute; top: 50%; right: var(--flow-e); translate: 0 -50%;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), right var(--dur-flow) var(--ease-flow);
  }
  .btn:has(> .btn__icon):is(:hover, :focus-visible) { padding-inline: calc(var(--flow-e) + var(--flow-c) + var(--flow-gap)) var(--flow-s); }
  .btn:is(:hover, :focus-visible) > .btn__icon { right: calc(100% - var(--flow-e) - var(--flow-c)); }
}

.btn-pin {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--c-ink); color: var(--c-ink); background: transparent;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn-pin svg { width: var(--circle-glyph); height: var(--circle-glyph); }
.btn-pin:is(:hover, :focus-visible) { background: var(--c-ink); color: var(--c-light); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 600px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}

/* Standalone arrow circle (cards, rows, carousel controls) */
.arrow {
  width: var(--circle-md); height: var(--circle-md); flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--arrow-border, color-mix(in srgb, var(--c-white) 50%, transparent));
  color: var(--arrow-fg, var(--c-white));
  background: var(--arrow-bg, transparent);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

/* The circle arrow at the foot of a link card (14bc, C1/C2): a pseudo-element circle that holds a typed arrow, the same ring as the
   routing/ministry cards everywhere. Rest = ring in the link colour; hover/focus = the ring fills with the accent and the arrow turns
   --circle-turn (#196); the circle never moves. Same arrow for in-page links.
   The arrow is the site's one arrow (#197: the #i-arrow SVG as a mask, --icon-arrow), drawn by a second pseudo-element that sits last in the
   row and steps back over the ring (negative start margin = ring + row gap, so the row's layout is unchanged). Routing cards use the last line's
   ::after for it, because the link's ::before is the stretched click area. */
.gcard__cta::after,
.vc_row.wnm-pattern--linkcards .vc_inner .wpb_text_column p:last-child > a::after,
.youth-related__list a::after,
.vc_row .wpb_text_column.wnm-t--links a::after {
  content: ""; flex: none; box-sizing: border-box; width: var(--circle-md); height: var(--circle-md); border-radius: 50%; margin-inline-start: auto; /* auto: the ring and its arrow stay together at the end of a space-between row */
  border: 1.5px solid currentColor; padding: 0;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.gcard__cta::before,
.vc_row.wnm-pattern--linkcards .vc_inner .wpb_text_column p:last-child:has(> a)::after,
.youth-related__list a::before,
.vc_row .wpb_text_column.wnm-t--links a::before {
  content: ""; order: 99; flex: none; width: var(--circle-md); height: var(--circle-md); margin-inline-start: calc(-1 * (var(--circle-md) + var(--s-4)));
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / var(--circle-glyph) no-repeat; mask: var(--icon-arrow) center / var(--circle-glyph) no-repeat;
  transition: background-color var(--dur-base) var(--ease-out), rotate var(--dur-flow) var(--ease-flow);
}
.gcard:is(:hover, :focus-within) .gcard__cta::after,
.vc_row.wnm-pattern--linkcards .vc_inner .wpb_text_column p:last-child > a:is(:hover, :focus-visible)::after,
.youth-related__list a:is(:hover, :focus-visible)::after,
.vc_row .wpb_text_column.wnm-t--links a:is(:hover, :focus-visible)::after { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.gcard:is(:hover, :focus-within) .gcard__cta::before,
.vc_row.wnm-pattern--linkcards .vc_inner .wpb_text_column p:last-child:has(> a:is(:hover, :focus-visible))::after,
.youth-related__list a:is(:hover, :focus-visible)::before,
.vc_row .wpb_text_column.wnm-t--links a:is(:hover, :focus-visible)::before { background: var(--color-on-accent); }
@media (prefers-reduced-motion: no-preference) {
  .gcard:is(:hover, :focus-within) .gcard__cta::before,
  .vc_row.wnm-pattern--linkcards .vc_inner .wpb_text_column p:last-child:has(> a:is(:hover, :focus-visible))::after,
  .youth-related__list a:is(:hover, :focus-visible)::before,
  .vc_row .wpb_text_column.wnm-t--links a:is(:hover, :focus-visible)::before { rotate: var(--circle-turn); }
}

/* Underline that draws from the left */
.link-draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  padding-bottom: 2px;
}
.link-draw:hover, .link-draw:focus-visible { background-size: 100% 1px; }

/* Image frames */
.frame { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--color-surface-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Reveal states (only when JS marks motion as allowed) -------------- */
.motion-ok [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.motion-ok [data-reveal].is-in { opacity: 1; transform: none; }

.motion-ok .rule[data-reveal] { transform: scaleX(0); transition: transform 900ms var(--ease-out) 120ms; }
.motion-ok .rule[data-reveal].is-in { transform: scaleX(1); }
.motion-ok .rule[data-reveal] { opacity: 1; }

.motion-ok [data-reveal="clip"] {
  transform: none; opacity: 1;
  clip-path: inset(14% 0 0 0 round var(--r-lg));
  transition: clip-path 1100ms var(--ease-out);
}
.motion-ok [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r-lg)); }

/* Masked line rise (hero lines, MORE stack) */
.mask-line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mask-line > span { display: block; }
.motion-ok [data-reveal="mask"] { opacity: 1; transform: none; }
.motion-ok [data-reveal="mask"] .mask-line > span {
  transform: translateY(105%);
  transition: transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion-ok [data-reveal="mask"].is-in .mask-line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* WNM-WO-42: sticky editorial headings use the same landing line as anchors. */
@media (min-width: 1024px) {
  html:root .vc_row .wnm-sticky-intro > .vc_column-inner { top: var(--anchor-offset, calc(12px + var(--header-float-h) + 16px + var(--wp-admin--admin-bar--height, 0px))); }
}