/**
 * Redux Framework's own field_social_profiles_frontend.css ships
 * "ul.redux-social-media-list { margin-top: -20px }", tuned for its
 * typical widget/sidebar placement. In the ekko theme's topbar that
 * negative margin yanks the icon (e.g. LinkedIn) 20px upward, out of
 * vertical alignment with the search icon next to it. Cancel it here,
 * scoped to the topbar only, so other uses of the shortcode/widget
 * elsewhere are unaffected.
 */
.topbar-socials ul.redux-social-media-list {
	margin-top: 0;
}

/**
 * The "Who We Are" page's row IDs (board-of-directors_row, members_row,
 * partners_row) are used as anchors for the horizontal section menu, but
 * the ekko theme's navbar is position:fixed (.navbar-fixed-top), so a
 * plain #anchor jump lands the section title right under it. Reserve
 * space above each target so the scrolled-to content clears the navbar.
 */
#board-of-directors_row,
#members_row,
#partners_row {
	scroll-margin-top: 140px;
}

/**
 * The theme's Team Member element (.team-member) sizes itself to its
 * image's intrinsic width and stays left-aligned inside its column —
 * text-align:center on .team-member only centers *inline* content, not
 * the block itself, and .team-image doesn't carry auto margins of its
 * own. Invisible in the 3-column Board of Directors grid (the column is
 * nearly as narrow as the avatar), but glaring for the single Secretary
 * General avatar sitting in a full-width column.
 *
 * Scoped by page (page-id-7911 = "Who We Are"), not by the row's el_id:
 * that id gets reassigned whenever the row is re-saved in the editor
 * (it moved to the button row during a previous edit), so anchoring the
 * fix to it made this rule silently stop matching.
 */
.page-id-7911 .team-member {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/**
 * Member Logo Mosaic (Who We Are > Members). Filtering is done client-side
 * by toggling .is-hidden; a plain flex-wrap container reflows automatically
 * as items disappear, no masonry library needed.
 */
.member-filter-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 30px;
}

.member-filter-btn {
	appearance: none;
	cursor: pointer;
	background: #fff;
	border: 1px solid #ba4335;
	color: #ba4335;
	border-radius: 30px;
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.member-filter-btn.is-active {
	background: #ba4335;
	color: #fff;
}

.member-filter-btn:not(.is-active) {
	opacity: .5;
}

.member-mosaic {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.member-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 90px;
	padding: 10px;
	opacity: 1;
	transform: none;
	transition: opacity .25s ease, transform .25s ease;
}

.member-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	filter: grayscale(100%);
	opacity: .75;
	transition: filter .2s ease, opacity .2s ease;
}

.member-logo:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* Initial page-load stagger, and the fade used when a logo (dis)appears
   on a filter click — the FLIP slide for logos that stay visible is
   handled separately, via an inline transform set from JS. */
.member-logo.is-loading,
.member-logo.is-entering,
.member-logo.is-leaving {
	opacity: 0;
	transform: scale(.85);
}

.member-logo.is-hidden {
	display: none;
}