/* PNGCORE — patterns shared by several page templates (loaded on every request after components.css).
   Page-specific rules go in pages/<name>.css (see README.md). */

/* In-page section navigation for long pages (Policy, Membership, About, Events): a chip row under the hero.
   <nav class="pc-anchor-nav" aria-label="On this page"><div class="pc-container"><ul class="pc-chips">…</ul></div></nav> */
.pc-anchor-nav{position:sticky;top:var(--pc-header-h);z-index:calc(var(--pc-z-header) - 1);background:var(--pc-bg);border-bottom:1px solid var(--pc-line);padding:var(--pc-s3) 0}
.pc-anchor-nav .pc-chips{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.pc-anchor-nav .pc-chip{white-space:nowrap}
.admin-bar .pc-anchor-nav{top:calc(var(--pc-header-h) + var(--wp-admin--admin-bar--height,32px))}
/* Focus and anchor jumps clear the header AND the sticky bar (WCAG 2.4.11). main.js sets --pc-anchor-h to the bar's
   measured height while it is sticky (0 when a page makes it static); 72px is the no-JS estimate. */
html:has(.pc-anchor-nav){scroll-padding-top:calc(var(--pc-header-h) + var(--pc-anchor-h,72px) + 16px)}
/* The chip of the section in view (main.js scroll-spy sets aria-current="true"; server-set "page" keeps the filled chip) */
.pc-anchor-nav .pc-chip[aria-current=true]{background:var(--pc-brand-50);border-color:var(--pc-brand-700);color:var(--pc-brand-800);box-shadow:inset 0 0 0 1px var(--pc-brand-700)}
/* A row that scrolls says so: fade at the cut edge(s); prev/next buttons for mouse users (main.js adds them) */
.pc-anchor-nav .pc-container{position:relative}
.pc-anchor-nav.is-scroll-end .pc-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.pc-anchor-nav.is-scroll-start .pc-chips{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 64px),transparent)}
.pc-anchor-nav.is-scroll-start.is-scroll-end .pc-chips{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.pc-anchor-scroll{position:absolute;top:50%;z-index:1;display:none;place-items:center;width:44px;height:44px;margin-top:-23px;border:1px solid var(--pc-line-strong);border-radius:50%;background:var(--pc-bg);color:var(--pc-ink);box-shadow:var(--pc-shadow-sm);cursor:pointer}
.pc-anchor-scroll:hover{border-color:var(--pc-brand-700);color:var(--pc-brand-800);background:var(--pc-brand-50)}
.pc-anchor-scroll .pc-icon{width:20px;height:20px}
.pc-anchor-scroll--prev{left:calc(var(--pc-gutter) - 8px)}
.pc-anchor-scroll--next{right:calc(var(--pc-gutter) - 8px)}
@media (hover:hover) and (pointer:fine){.pc-anchor-nav.is-scroll-start .pc-anchor-scroll--prev,.pc-anchor-nav.is-scroll-end .pc-anchor-scroll--next{display:grid}}
@media (max-width:959px){.pc-anchor-nav .pc-chips{scroll-snap-type:x proximity;scroll-padding-inline:var(--pc-s2)}.pc-anchor-nav .pc-chips > li{scroll-snap-align:start}}

/* Prose without the 68ch measure (for full-width text inside split layouts) */
.pc-prose--wide{max-width:none}

/* Source line under a figure, table or number (every statistic carries one) */
.pc-source{margin:var(--pc-s3) 0 0;font-size:var(--pc-fs-meta);line-height:1.45;color:var(--pc-muted)}
.pc-source a{color:inherit}
.pc-dark .pc-source{color:var(--pc-on-dark-muted)}