.dsbn-community-connections {
	line-height: 1.45;
}

.dsbn-community-connections a {
	overflow-wrap: anywhere;
}

/* A rounded card, matching the same card language as the category/partner
   entries below it, instead of a bare unbordered block. Not sticky here —
   only .is-compact (below) pins itself to the viewport; previously this
   whole block was unconditionally sticky, so it started covering page
   content the moment you scrolled past it, well before the compact
   transform ever kicked in. Now the full legend just scrolls away like
   everything else; only the small quick-reference pill it becomes once
   scrolled past stays pinned. */
.dsbn-cc-legend {
	background: var(--dsbn-color-surface);
	border: 1px solid var(--dsbn-color-card-border);
	border-radius: 22px;
	margin-bottom: 2.25rem;
	padding: 1.75rem;
	/* Only box-shadow animates here -- it's paint-only, so the compositor
	   handles it without triggering layout. padding was in this list too
	   (to visually shrink the card into the compact pill), but animating a
	   box-model property forces a reflow of this subtree on every frame,
	   unlike box-shadow/opacity/transform -- a real inefficiency even
	   though it wasn't large enough here to reliably measure a dropped
	   frame. The item-level content collapse (max-height/opacity below) is
	   what actually reads as "shrinking" to the eye; the padding number
	   changing along with it added cost without adding to that perception,
	   so it now snaps instantly instead of easing. */
	transition: box-shadow 0.25s ease;
}

/* No z-index -- deliberately. This page's sidebar (.dsbn-inside-sidebar,
   style.css) is ALSO position:sticky, with no z-index of its own; a
   positioned element with an explicit z-index (this used to be z-index:5)
   always stacks above a z-index:auto sibling regardless of DOM order,
   which is what put the compact pill over the sidebar in the one case it
   DID overlap. Left at z-index:auto as a safety net -- measured live that
   the pill and sidebar never actually overlap at any real desktop width
   though (it's centered within the narrower content column, well short of
   the sidebar column), so this alone was never the real fix. The real
   ask -- the pill docked underneath the sidebar's own nav, not floating
   separately -- is handled in JS (community-connections.js): once
   compact, the whole element is moved into .dsbn-inside-sidebar, and
   moved back out once scrolled back above the threshold. The rule below
   overrides this base standalone-pill styling for that docked state. */
.dsbn-cc-legend.is-compact {
	position: sticky;
	top: 1rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	padding: 0.85rem 1.5rem;
	margin: 0 auto 2.25rem;
	width: fit-content;
}

/* Docked inside the sidebar (JS moved it there): no sticky/top of its own
   -- the sidebar itself is already position:sticky, so this just needs to
   sit in normal flow as a full-width block within it, growing/shrinking
   with the sidebar's own column width instead of shrinking to fit its own
   content. margin-top separates it from the nav links above it; the
   sidebar itself has no bottom padding for this to otherwise land flush
   against. */
.dsbn-inside-sidebar .dsbn-cc-legend.is-compact {
	position: static;
	top: auto;
	width: auto;
	margin: 1.25rem 0 0;
}

/* Always visible (project owner's explicit call — stays up regardless of
   filter state, not just a JS-shown hint), living INSIDE the legend card
   rather than a separate paragraph floating below it. Only .is-compact
   (below) hides it — a full sentence doesn't belong in a small sticky
   pill. */
.dsbn-cc-message {
	font-weight: 800;
	text-align: left;
	margin: 0 0 1.25rem;
	transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
	max-height: 3rem;
	opacity: 1;
	overflow: hidden;
}

/* Badges + labels stacked as left-aligned rows (one per letter), matching
   the project owner's explicit steer after seeing the centered/wrapping
   version live. */
.dsbn-cc-legend__items {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.dsbn-cc-legend__item {
	align-items: center;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 90px minmax(0, 1fr);
	text-align: left;
}

.dsbn-cc-legend__item h3 {
	line-height: 1.1;
	margin: 0 0 0.25rem;
}

.dsbn-cc-legend__item p {
	line-height: 1.2;
	margin: 0;
}

/* The label+description column fades/collapses instead of hard-cutting via
   display:none — display itself can't transition, but opacity/max-height
   can, which is most of what made the old switch feel like a jump rather
   than a change. A full liquid width/position morph would need JS-driven
   measurement like the FAQ/icon-card slide animation uses for height — not
   worth that complexity here, this gets the large majority of the felt
   "snap" without it. */
.dsbn-cc-legend__item > div {
	max-height: 6rem;
	opacity: 1;
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}

/* Compact (scrolled-past quick-reference pill): badges only, in a row —
   the instruction text and every item's label/description collapse away,
   and the stacked column of rows becomes a tight horizontal row of just
   the three circles. */
.dsbn-cc-legend.is-compact .dsbn-cc-message {
	max-height: 0;
	opacity: 0;
	margin: 0;
}

.dsbn-cc-legend.is-compact .dsbn-cc-legend__items {
	flex-direction: row;
	justify-content: space-between;
	gap: 1rem;
}

.dsbn-cc-legend.is-compact .dsbn-cc-legend__item {
	display: flex;
	gap: 0;
}

/* max-width, not just max-height -- collapsing only the height left the
   label/description <div> still reserving its own (invisible) block-level
   width next to the badge, since a block box's WIDTH isn't touched by
   capping its height. That reserved-but-invisible space is what read as a
   "random empty div next to each letter button" and threw off centering,
   even with max-height already at 0. */
.dsbn-cc-legend.is-compact .dsbn-cc-legend__item > div {
	max-height: 0;
	max-width: 0;
	opacity: 0;
}

.dsbn-cc-filter-badge {
	align-items: center;
	background: var(--bs-primary, #0056b8);
	border: 0;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 3.2rem;
	font-weight: 800;
	height: 5.5rem;
	justify-content: center;
	line-height: 1;
	width: 5.5rem;
}

button.dsbn-cc-filter-badge {
	cursor: pointer;
	transition: filter 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

button.dsbn-cc-filter-badge:hover,
button.dsbn-cc-filter-badge:focus-visible {
	filter: brightness(0.95);
	transform: translateY(-1px);
}

button.dsbn-cc-filter-badge[aria-pressed="false"] {
	background: #777;
	opacity: 0.72;
}

.dsbn-cc-filter-badge--building-knowledge {
	background: var(--bs-warning, #f68f32);
}

.dsbn-cc-filter-badge--community-supports {
	background: var(--bs-success, #4cbb88);
}

.dsbn-cc-message {
	font-weight: 800;
	text-align: center;
}

/* .dsbn-cc-category is now ALSO .dsbn-faq__item (see the plugin's PHP) —
   the rounded card border, background, open-state shadow, and plus/minus
   toggle icon all come from that shared class for free. Spacing between
   categories mirrors .dsbn-faq's own gap-based rhythm (patterns.css),
   just as a margin here since .dsbn-cc-categories isn't itself a
   .dsbn-faq flex container. */
.dsbn-cc-category {
	margin-bottom: 0.75rem;
}

/* The category title is a real <h3> (for heading-based navigation between
   categories — this is a long directory page, not a short FAQ list) nested
   inside .dsbn-faq__item's <summary>, unlike the site's plain-text FAQ
   questions. A heading has its own font-size/weight from .pg-contents,
   which doesn't automatically match .dsbn-faq__item summary's own
   (smaller, --dsbn-fs-body-header-sm) FAQ-question sizing — inherit
   instead, so this still reads as a matching row in the same accordion
   list, not a differently-sized one-off. */
.dsbn-cc-category__heading {
	font: inherit;
	margin: 0;
}

.dsbn-cc-category__panel {
	display: flex;
	flex-direction: column;
	padding-top: 0.5rem;
}

/* A bordered/radius'd card here (tried first) put a card inside the
   .dsbn-faq__item card it already lives in — reads as a nested box, not a
   list. A bottom divider (project owner's own steer) keeps entries clearly
   separated without that "card in a card" look; the last partner's divider
   is dropped so the list doesn't end on a trailing line right before the
   panel's own bottom padding. */
/* Hidden by default -- and unconditionally so. This used to be an
   author-CSS `display: grid` with hidden/showing left to the `hidden`
   attribute, but an author-stylesheet `display` rule at equal specificity
   to the UA stylesheet's own `[hidden] { display: none }` wins the cascade
   (author beats UA at a tie), so that unconditional `display: grid` was
   silently cancelling `hidden` out -- partners rendered visible regardless
   of what the attribute said. Visibility is driven entirely by the three
   selectors below instead: no attribute for anything to fight over. */
.dsbn-cc-partner {
	border-bottom: 1px solid var(--dsbn-color-line);
	display: none;
	gap: 1.75rem;
	grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
	margin: 0;
	padding: 1.75rem 0;
}

/* A partner shows only when: its own category is open (native <details>
   [open], the single source of truth -- no separate JS-tracked flag that
   could drift from it) AND the root carries the matching data-active-<key>
   marker community-connections.js sets when that letter is pressed. Three
   fixed filter keys (from the plugin's own $filters map), OR'd via a
   comma-separated selector list -- matches the "any pressed filter that
   applies" behaviour the JS already implements. */
.dsbn-community-connections[data-active-advocacy] .dsbn-cc-category[open] .dsbn-cc-partner[data-filters~="advocacy"],
.dsbn-community-connections[data-active-building-knowledge] .dsbn-cc-category[open] .dsbn-cc-partner[data-filters~="building-knowledge"],
.dsbn-community-connections[data-active-community-supports] .dsbn-cc-category[open] .dsbn-cc-partner[data-filters~="community-supports"] {
	display: grid;
}

/* :last-of-type, not :last-child -- the panel's own trailing
   .dsbn-cc-category__empty <p> always comes after the last partner
   <article>, so :last-child never matched anything (a real, confirmed bug:
   every partner kept its divider, including the actual last one). */
.dsbn-cc-partner:last-of-type {
	border-bottom: none;
	padding-bottom: 0.5rem;
}

.dsbn-cc-partner__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	justify-content: center;
	padding-top: 0.25rem;
}

.dsbn-cc-partner__badges .dsbn-cc-filter-badge {
	font-size: 2.95rem;
	height: 4.7rem;
	width: 4.7rem;
}

.dsbn-cc-partner__content {
	max-width: 54rem;
}

.dsbn-cc-partner__contact {
	margin-bottom: 0.65rem;
}

.dsbn-cc-partner__contact strong {
	font-weight: 800;
}

.dsbn-cc-partner__description p {
	margin: 0 0 0.65rem;
}

.dsbn-cc-partner__description ul {
	margin-top: 0.65rem;
}

.dsbn-cc-category__empty {
	font-style: italic;
	margin: 1rem 0 2rem;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* 1024px, NOT 768px — this must match the THEME's own breakpoint for when
   .dsbn-inside-sidebar stops being a side column (style.css: at <=1024px
   .dsbn-inside-layout goes single-column and the sidebar becomes
   position:static with order:-1, i.e. it moves ABOVE the content and
   scrolls away with the page). This block used to stop at 768px, which
   left a broken 769-1024px band: the layout was already stacked, but the
   legend still went sticky/pill AND still docked into a sidebar that was
   now sitting at the top of the page — the legend appeared to jump around
   and show up twice while scrolling. Compact mode only makes sense while
   there's a real sticky side column to dock into, so it's disabled
   wherever there isn't one. community-connections.js gates the DOM move
   on this same 1024px boundary. */
@media (max-width: 1024px) {
	/* Keeps the card look (border, radius, padding), just never pins
	   itself or shrinks to a fit-content pill. */
	.dsbn-cc-legend.is-compact {
		box-shadow: none;
		margin: 0 0 2.25rem;
		padding: 1.75rem;
		position: static;
		width: auto;
	}

	.dsbn-cc-legend.is-compact .dsbn-cc-message,
	.dsbn-cc-legend.is-compact .dsbn-cc-legend__item > div {
		max-height: none;
		max-width: none;
		opacity: 1;
	}

	.dsbn-cc-legend.is-compact .dsbn-cc-legend__items {
		flex-direction: column;
	}

	.dsbn-cc-legend.is-compact .dsbn-cc-legend__item {
		display: grid;
		gap: 1.25rem;
	}
}

/* Phone-width content layout — genuinely about narrow screens, not about
   whether a sidebar column exists, so this stays at 768px. */
@media (max-width: 768px) {
	.dsbn-cc-partner {
		grid-template-columns: 1fr;
	}

	.dsbn-cc-partner__badges {
		justify-content: flex-start;
	}
}