/* ==========================================================================
   WPA Board Members Accordion
   ========================================================================== */

.wpa-board {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  gap: 8px;
  align-items: start;
max-width: 1000px;
margin: 0 auto;
}

/* ── Member card ── */
.wpa-member {
	background: var(--grey-light);
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

/* ── Header row ── */
.wpa-member__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
}

/* Make the header keyboard-focusable when it has a bio */
.wpa-member__header[role="button"] {
	cursor: pointer;
	outline: none;
}

.wpa-member__header[role="button"]:focus-visible {
	box-shadow: inset 0 0 0 3px var(--cyan, #00cbcc);
}

/* ── Photo ── */
.wpa-member__photo {
	flex-shrink: 0;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	overflow: hidden;
	background: #c8cdd4;
}

.wpa-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Initials fallback */
.wpa-member__photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #b0b8c4;
}

.wpa-member__photo--initials span {
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.02em;
}

/* ── Name / role ── */
.wpa-member__info {
	flex: 1;
	min-width: 0;
}

.wpa-member__name {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--navy, #002b5c) !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

.wpa-member__role {
	font-size: 0.875rem !important;
	color: #555 !important;
	margin: 0 !important;
}

/* ── Actions (LinkedIn + toggle) ── */
.wpa-member__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* LinkedIn button */
.wpa-member__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--navy, #002b5c);
	color: #fff !important;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 4px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.wpa-member__linkedin:hover,
.wpa-member__linkedin:focus-visible {
	opacity: 0.82;
	color: #fff !important;
}

/* Toggle button (+/×) */
.wpa-member__toggle {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cyan, #00cbcc);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.2s;
}

.wpa-member__toggle:hover,
.wpa-member__toggle:focus-visible {
	background: var(--teal-dark, #007b85);
	outline: none;
}

.wpa-toggle-icon {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	display: block;
	/* Rotate to × when open */
	transition: transform 0.25s ease;
	/* Nudge up 1px — optical centre of + glyph */
	margin-top: -1px;
}

.wpa-member.is-open {
	grid-column: 1 / -1;
}

.wpa-member.is-open .wpa-toggle-icon {
	transform: rotate(45deg);
}

/* ── Bio panel ── */
.wpa-member__bio {
	padding: 4px 20px 22px 102px; /* indent to align with name */
	color: #333;
	font-size: 0.95rem;
	line-height: 1.75;
}

/* hidden attribute hides it; JS removes the attribute to reveal */
.wpa-member__bio[hidden] {
	display: none;
}

.wpa-member__bio p {
	margin: 0 0 1em;
}

.wpa-member__bio p:last-child {
	margin-bottom: 0;
}

.wpa-member:not(.is-open) .wpa-member__linkedin {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
	.wpa-member__header {
		flex-wrap: wrap;
		gap: 12px;
	}

	.wpa-member__actions {
		/* Push actions to the right when wrapped */
		margin-left: auto;
	}

	.wpa-member__bio {
		padding-left: 20px;
	}

	.wpa-member__linkedin span {
		/* Hide text on very small screens, keep icon */
		display: none;
	}

	.wpa-member__linkedin {
		padding: 8px 10px;
	}
	.wpa-board {
    grid-template-columns: 1fr;
  	}
  	.wpa-member.is-open {
    	grid-column: auto;
  	}
	.wpa-member__photo {
		width: 100px;
		height: 100px;
	}
}