/**
 * Empower Africa — People Directory Intent
 * Scoped frontend styles. All rules are namespaced under .ea-people-directory
 * or .ea-people-profile and use the .ea-people- class prefix to avoid any
 * collision with BuddyBoss / BuddyPress styles.
 *
 * Brand: navy #0F1E2E (ink), orange #FA3C00 (primary CTA / accent),
 * coral chips, white cards, subtle borders, rounded corners.
 */

:root {
	--ea-ink: #0f1e2e;
	--ea-ink-soft: #3a4a5a;
	--ea-accent: #fa3c00;
	--ea-accent-soft: #fff1ec;
	--ea-coral: #ff6a45;
	--ea-coral-soft: #fff0eb;
	--ea-line: #e6e9ee;
	--ea-muted: #6b7785;
	--ea-card-bg: #ffffff;
	--ea-radius: 12px;
	--ea-radius-sm: 8px;
	--ea-radius-pill: 999px;
}

/* ---- Card business block ---------------------------------------------- */
/* Styles key off the .ea-people-business-card class itself (always present in
   the markup), so they apply even if the body class is missing in AJAX or
   page-builder contexts. */
.ea-people-business-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 10px;
	padding: 12px 14px;
	text-align: left;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
	border: 1px solid var(--ea-line);
	border-left: 4px solid var(--ea-accent);
	border-radius: var(--ea-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 30, 46, .04);
}
.ea-people-business-card.ea-people-no-data {
	display: none; /* nothing to show for this member; keep the card clean */
}

.ea-people-business-card .ea-people-role {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ea-ink);
}

.ea-people-business-card .ea-people-location {
	margin: 0;
	font-size: 12px;
	color: var(--ea-muted);
	display: flex;
	align-items: center;
	gap: 4px;
}

.ea-people-business-card .ea-people-pin {
	width: 10px;
	height: 10px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 2px solid var(--ea-muted);
	flex: 0 0 auto;
}

/* ---- Tags / chips ----------------------------------------------------- */
.ea-people-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.ea-people-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ea-ink-soft);
	background: #f3f5f8;
	border: 1px solid var(--ea-line);
	border-radius: var(--ea-radius-pill);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ea-people-tag--more {
	color: var(--ea-muted);
	background: transparent;
}

/* Small leading label for grouped tags (Operates in / Looking for / Can offer). */
.ea-people-tag-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ea-muted);
	margin-right: 2px;
	align-self: center;
}

/* Business intent — the headline signal, coral so it stands out. */
.ea-people-intent {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ea-accent);
	background: var(--ea-coral-soft);
	border: 1px solid #ffd9cd;
	border-radius: var(--ea-radius-pill);
}

/* ---- Verification badge ----------------------------------------------- */
.ea-people-verify {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	border-radius: var(--ea-radius-pill);
	color: var(--ea-ink);
	background: #eef6ef;
	border: 1px solid #cfe6d4;
	align-self: flex-start;
}

.ea-people-verify-tick {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #1f9d57;
	position: relative;
	flex: 0 0 auto;
}
.ea-people-verify-tick::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 2px;
	width: 3px;
	height: 6px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ea-people-verify.is-ea {
	background: var(--ea-accent-soft);
	border-color: #ffd2c4;
}
.ea-people-verify.is-ea .ea-people-verify-tick { background: var(--ea-accent); }
.ea-people-verify.is-partner { background: #eef2fb; border-color: #d3def6; }
.ea-people-verify.is-partner .ea-people-verify-tick { background: #2b59c3; }
.ea-people-verify.is-company { background: #eef6ef; border-color: #cfe6d4; }
.ea-people-verify.is-email { background: #f3f5f8; border-color: var(--ea-line); }
.ea-people-verify.is-email .ea-people-verify-tick { background: #6b7785; }

/* ---- Membership tier chip --------------------------------------------- */
.ea-people-tier {
	display: inline-flex;
	align-self: flex-start;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ea-ink);
	background: #fff7e6;
	border: 1px solid #ffe3a3;
	border-radius: var(--ea-radius-pill);
}

/* ---- Links ------------------------------------------------------------ */
.ea-people-links {
	display: flex;
	gap: 12px;
	margin-top: 2px;
}
.ea-people-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--ea-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.ea-people-link:hover {
	color: var(--ea-accent);
	border-bottom-color: var(--ea-accent);
}

/* ---- Buttons ---------------------------------------------------------- */
.ea-people-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	border-radius: var(--ea-radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ea-people-btn--primary {
	color: #fff;
	background: var(--ea-accent);
	border: 1px solid var(--ea-accent);
}
.ea-people-btn--primary:hover { background: #e23600; border-color: #e23600; }
.ea-people-btn--ghost {
	color: var(--ea-ink);
	background: #fff;
	border: 1px solid var(--ea-line);
}
.ea-people-btn--ghost:hover { border-color: var(--ea-accent); color: var(--ea-accent); }

.ea-people-card-actions {
	margin-top: 4px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- Empower Africa CTA action row ------------------------------------ */
/* Each slot holds exactly one normalised BuddyBoss anchor (URLs/nonces/AJAX
   preserved). Strict containment: a CSS grid that cannot let a button float or
   escape the card, regardless of any BuddyBoss classes still on the anchor. */
.ea-people-card-cta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #eef1f4;
	clear: both;
	position: static;
}
.ea-people-card-cta.ea-people-cta-cols-1 { grid-template-columns: minmax(0, 1fr); }
.ea-people-card-cta.ea-people-cta-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ea-people-card-cta.ea-people-cta-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ea-people-card-cta:empty { display: none; }

.ea-people-card-cta *,
.ea-people-card-cta a {
	box-sizing: border-box;
}

.ea-people-cta-slot {
	display: block;
	min-width: 0;        /* allow the grid cell to shrink, preventing overflow */
}

/* The single anchor in each slot, rendered as a full contained button. */
.ea-people-card-cta a {
	position: static !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100% !important;
	gap: 6px;
	margin: 0 !important;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	border-radius: var(--ea-radius-sm);
	text-decoration: none;
	border: 1px solid var(--ea-line);
	background: #fff;
	color: var(--ea-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Reveal the text label BuddyBoss/ReadyLaunch hides (icon-only buttons). */
.ea-people-card-cta a span {
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	margin: 0 !important;
	overflow: visible !important;
	font: inherit !important;
}
/* Hide BuddyBoss icon glyphs inside our relabelled buttons. */
.ea-people-card-cta a i[class*="bb-icon"],
.ea-people-card-cta a i[class*="bb-icons"] {
	display: none !important;
}

/* Connect = orange primary CTA. */
.ea-people-connect-action a {
	background: var(--ea-accent) !important;
	border-color: var(--ea-accent) !important;
	color: #fff !important;
}
.ea-people-connect-action a:hover {
	background: #e23600 !important;
	border-color: #e23600 !important;
	color: #fff !important;
}
/* Message = ghost/secondary with navy text. */
.ea-people-message-action a {
	background: #fff !important;
	border-color: var(--ea-line) !important;
	color: var(--ea-ink) !important;
}
.ea-people-message-action a:hover {
	border-color: var(--ea-accent) !important;
	color: var(--ea-accent) !important;
}
/* Request intro = ghost secondary. */
.ea-people-request-intro-action a {
	background: #fff;
	border-color: var(--ea-line);
	color: var(--ea-ink);
}

/* ---- Hide the native BuddyBoss icon action toolbar on the directory --- */
/* IMPORTANT: only the social action toolbar is hidden. Moderation/report/block
   (.bb_more_options / .bb-rl-context-wrap), avatar links, name links, and the
   more-options menu are deliberately left untouched. */
#members-list .bb-rl-member-buttons-wrap,
#members-list .member-buttons-wrap {
	display: none !important;
}

/* ---- De-emphasise BuddyBoss social metadata --------------------------- */
/* Follower count, profile-type label, and joined date are suppressed in PHP
   via the BuddyBoss Pro per-element filters when Pro is active. This CSS is the
   cross-version fallback for non-Pro installs and for the AJAX-rendered loop.
   It targets the members list directly (#members-list), which is the same
   container id in both the bp-nouveau and readylaunch stacks, so it does not
   depend on the body class being present. */
#members-list .follow-container,
#members-list .followers-wrap,
#members-list .item-meta.member-type,
#members-list .bb-rl-item-block-heading .member-type {
	display: none !important;
}

/* De-emphasise joined date / last-activity so business info leads. */
#members-list .item-meta.last-activity,
#members-list .bb-rl-item-meta-asset {
	font-size: 11px;
	color: var(--ea-muted);
	opacity: .75;
}

/* ---- Profile header business strip ------------------------------------ */
/* De-emphasise the generic profile-type label ("Member") in the header so the
   business credentials lead. Pro installs suppress it via the Pro filter; this
   is the non-Pro CSS fallback. Targets the header heading area only. */
.single-headers .header-information .bb-profile-type,
.bb-rl-profile-info .member-type,
.single-headers .activity-update-form .member-type {
	display: none !important;
}

.ea-people-header-business {
	margin: 6px 0 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ea-people-header-strip {
	margin: 0;
	font-size: 14px;
	color: var(--ea-ink);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.ea-people-header-strip .ea-people-h-role { font-weight: 600; }
.ea-people-header-strip .ea-people-h-location { color: var(--ea-muted); }
.ea-people-sep { color: var(--ea-line); }
.ea-people-header-chips { margin-top: 2px; }
.ea-people-header-actions { margin-top: 4px; }

/* ---- Mobile-first: no horizontal overflow ----------------------------- */
@media (max-width: 480px) {
	.ea-people-tags { gap: 4px; }
	.ea-people-tag,
	.ea-people-intent,
	.ea-people-verify { font-size: 10px; }
	.ea-people-card-actions .ea-people-btn { flex: 1 1 auto; }
	/* Keep the CTA contained; allow buttons to stack if very narrow. */
	.ea-people-card-cta { gap: 8px; }
	.ea-people-card-cta a { font-size: 12px; padding: 9px 10px; }
}

/* ---- Accessibility: focus visibility ---------------------------------- */
.ea-people-btn:focus-visible,
.ea-people-link:focus-visible {
	outline: 2px solid var(--ea-accent);
	outline-offset: 2px;
}

/* ---- 1.1.5: Opportunity preferences (onboarding-owned) ----------------- */
.ea-people-opportunity-prefs {
	margin: 24px 0 8px;
	padding: 16px 18px;
	border: 1px solid var(--ea-line, #e5e7eb);
	border-radius: 12px;
	background: #fff;
}
.ea-people-opportunity-prefs__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ea-ink, #111827);
}
.ea-people-opportunity-prefs__list {
	margin: 0;
	display: grid;
	gap: 10px;
}
.ea-people-opportunity-prefs__row {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}
.ea-people-opportunity-prefs__row dt {
	margin: 0;
	font-size: 13px;
	color: var(--ea-muted, #6b7280);
}
.ea-people-opportunity-prefs__row dd {
	margin: 0;
	font-size: 14px;
	color: var(--ea-ink, #111827);
	overflow-wrap: anywhere;
}
.ea-people-opportunity-prefs__private {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--ea-line, #e5e7eb);
}
.ea-people-opportunity-prefs__private-note {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--ea-muted, #6b7280);
}
.ea-people-header-supplies {
	margin: 0;
	font-size: 13px;
	color: var(--ea-muted, #6b7280);
}
@media (max-width: 480px) {
	.ea-people-opportunity-prefs__row { grid-template-columns: 1fr; gap: 2px; }
}