/**
 * NNA Member Profiles — front-end + admin styles.
 * Intentionally low-specificity and inherits the theme's font/colours so the
 * directory reads as part of the site rather than a plugin skin.
 */

.nna-mp {
	--nna-mp-gap: 1.5rem;
	--nna-mp-radius: 10px;
	--nna-mp-border: rgba(0, 0, 0, 0.1);
	--nna-mp-muted: rgba(0, 0, 0, 0.6);

	/* Brand tokens. Elementor publishes the site kit's palette as
	   --e-global-color-*, so the directory picks up the theme's own colours
	   automatically; the fallbacks keep it sane on themes that don't. */
	--nna-mp-brand: var(--e-global-color-primary, #e89b3c);
	--nna-mp-ink: var(--e-global-color-text, #1c1c1c);
	--nna-mp-field-bg: #fff;
	--nna-mp-field-border: rgba(0, 0, 0, 0.16);
	--nna-mp-field-h: 2.875rem;

	font: inherit;
	color: inherit;
}

/* ---- Controls (search + category + sort) ---- */
.nna-mp-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
	margin: 0 0 var(--nna-mp-gap);
}
.nna-mp-controls__search {
	flex: 1 1 260px;
	min-width: 0;
}

/* Each control is a labelled stack, so a lone dropdown still reads as a
   deliberate filter rather than a stray form field. */
.nna-mp-controls__search,
.nna-mp-controls__cat,
.nna-mp-controls__sort {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
/* Scoped under .nna-mp to outrank the Elementor kit's `.elementor-kit-N h3`
   rule, which is (0,1,1) and would otherwise force the display face onto the
   category heading.

   These labels are interface chrome rather than headings, so they take the
   kit's *text* font. That is deliberate as well as practical: the display face
   has an ascent taller than its em box, so uppercase text in it sits proud of
   a tight line box and the tops of the capitals look shaved. */
.nna-mp .nna-mp-controls__label {
	display: block;
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nna-mp-muted);
}

/* Shared field styling so the search box, both dropdowns and the button all
   sit on one baseline at the same height. */
.nna-mp-controls__search input[type="search"],
.nna-mp-controls__cat select,
.nna-mp-controls__sort select {
	width: 100%;
	height: var(--nna-mp-field-h);
	box-sizing: border-box;
	margin: 0;
	padding: 0 0.9rem;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--nna-mp-ink);
	background-color: var(--nna-mp-field-bg);
	border: 1px solid var(--nna-mp-field-border);
	border-radius: var(--nna-mp-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Native select chrome varies wildly between browsers — strip it and draw our
   own chevron so both dropdowns look identical everywhere. */
.nna-mp-controls__cat select,
.nna-mp-controls__sort select {
	width: auto;
	min-width: 16rem;
	max-width: 100%;
	padding-right: 2.75rem;
	font-weight: 500;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23444' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.95rem center;
	background-size: 12px 8px;
	cursor: pointer;
}

.nna-mp-controls__search input[type="search"]:hover,
.nna-mp-controls__cat select:hover,
.nna-mp-controls__sort select:hover {
	border-color: rgba(0, 0, 0, 0.3);
}
.nna-mp-controls__search input[type="search"]:focus-visible,
.nna-mp-controls__cat select:focus-visible,
.nna-mp-controls__sort select:focus-visible {
	outline: none;
	border-color: var(--nna-mp-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 30%, transparent);
}

/* Scoped under .nna-mp on purpose: themes commonly reset bare `button` and
   `[type="submit"]`, which match at the same specificity as a lone class and
   would otherwise win on source order. */
.nna-mp .nna-mp-controls__go {
	height: var(--nna-mp-field-h);
	padding: 0 1.5rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: var(--nna-mp-brand);
	border: 1px solid var(--nna-mp-brand);
	border-radius: var(--nna-mp-radius);
	cursor: pointer;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.nna-mp .nna-mp-controls__go:hover {
	filter: brightness(0.93);
	color: #fff;
	background-color: var(--nna-mp-brand);
}
.nna-mp .nna-mp-controls__go:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 35%, transparent);
}
.nna-mp .nna-mp-controls__go:active {
	transform: translateY(1px);
}

/* Phones: one control per row, full width, so nothing is cramped. */
@media (max-width: 560px) {
	.nna-mp-controls {
		gap: 0.5rem;
	}
	.nna-mp-controls__search,
	.nna-mp-controls__cat,
	.nna-mp-controls__sort {
		flex: 1 1 100%;
	}
	.nna-mp-controls__cat select,
	.nna-mp-controls__sort select {
		width: 100%;
		min-width: 0;
	}
	/* Scoped for the same reason as the base button rule: theme resets on
	   `button` match at equal specificity and would win on source order. */
	.nna-mp .nna-mp-controls__go {
		width: 100%;
		flex: 1 1 100%;
	}
}

/* ---- Sidebar filter layout ---- */
.nna-mp-directory--sidebar {
	display: grid;
	/* Wide enough that the longer category names don't shred into three lines,
	   but still weighted towards the cards. */
	grid-template-columns: minmax(180px, 225px) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
.nna-mp-filters {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	/* Follows the list on long pages without covering the admin bar. */
	position: sticky;
	top: 2rem;
}
.nna-mp-filters__search {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}
.nna-mp-filters__search-row {
	display: flex;
	gap: 0.5rem;
}
.nna-mp-filters__search input[type="search"] {
	width: 100%;
	height: var(--nna-mp-field-h);
	box-sizing: border-box;
	padding: 0 0.9rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--nna-mp-ink);
	background-color: var(--nna-mp-field-bg);
	border: 1px solid var(--nna-mp-field-border);
	border-radius: var(--nna-mp-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nna-mp-filters__search input[type="search"]:focus-visible {
	outline: none;
	border-color: var(--nna-mp-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 30%, transparent);
}
/* Reset the theme's heading spacing, but leave the label's own top padding
   alone — it is what keeps the capitals off the edge of the line box. */
.nna-mp-filters__cats h3 {
	margin: 0 0 0.625rem;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.nna-mp-catlist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nna-mp-catlist li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nna-mp-catlist__link {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	padding: 0.5rem 0.625rem;
	border-radius: 8px;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.nna-mp-catlist__link:hover,
.nna-mp-catlist__link:focus-visible {
	background-color: rgba(0, 0, 0, 0.04);
	text-decoration: none;
}
.nna-mp-catlist__link.is-active {
	font-weight: 600;
	background-color: rgba(0, 0, 0, 0.06);
}
/* Colour chip ties each row to its banner. */
.nna-mp-catlist__dot {
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: 0.38rem;
	border-radius: 2px;
	background: var(--nna-mp-cat-color, #999);
}

/* Wide screens: the list is the filter, the dropdown is redundant. */
.nna-mp-filters__select {
	display: none;
	margin: 0;
}

/* Narrow screens: one compact dropdown instead of a wall of chips, and the
   whole block tightened so members are visible without a long scroll. */
@media (max-width: 860px) {
	.nna-mp-directory--sidebar {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.nna-mp-filters {
		position: sticky;
		top: 0;
		z-index: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		padding: 0.625rem 0;
		/* Matches the page background so content scrolls under it cleanly. */
		background: var(--e-global-color-background, #fdfbf7);
		/* Shorter fields than the desktop sidebar — the bar sits above the
		   members here, so every pixel it takes is a member pushed off screen. */
		--nna-mp-field-h: 2.5rem;
	}

	/* The labels are redundant once the controls are side by side: the
	   placeholder and the selected option already say what each one is. Hidden
	   visually but kept for screen readers rather than removed. */
	.nna-mp-filters .nna-mp-controls__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Search and category sit side by side; search takes the spare room. */
	.nna-mp-filters__search {
		flex: 1 1 55%;
		min-width: 0;
		gap: 0;
	}
	.nna-mp-filters__select {
		display: flex;
		flex-direction: column;
		gap: 0;
		flex: 1 1 42%;
		min-width: 0;
	}
	.nna-mp-filters__search input[type="search"],
	.nna-mp-filters__select select {
		height: var(--nna-mp-field-h);
		font-size: 0.875rem;
	}
	.nna-mp-filters__select select {
		width: 100%;
		box-sizing: border-box;
		padding: 0 2.1rem 0 0.75rem;
		font-family: inherit;
		font-weight: 500;
		color: var(--nna-mp-ink);
		background-color: var(--nna-mp-field-bg);
		border: 1px solid var(--nna-mp-field-border);
		border-radius: var(--nna-mp-radius);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
		/* A long category name is cut with an ellipsis rather than clipped. */
		text-overflow: ellipsis;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23444' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
	}
	.nna-mp-filters__select select:focus-visible {
		outline: none;
		border-color: var(--nna-mp-brand);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 30%, transparent);
	}
	/* The chip list is replaced by the dropdown here. */
	.nna-mp-filters__cats {
		display: none;
	}
}

/* Very narrow: stack the two controls rather than squeezing both. */
@media (max-width: 430px) {
	.nna-mp-filters__search,
	.nna-mp-filters__select {
		flex: 1 1 100%;
	}
}

/* ---- Results (AJAX-swapped region) ---- */
.nna-mp-results {
	transition: opacity 0.15s ease;
	/* After filtering, the script scrolls this block into view. The gap that
	   keeps a sticky theme header off the first row is declared here rather
	   than measured in JS, so a theme with a taller header is a one-line
	   change. The admin bar is only ever on screen for signed-in staff. */
	scroll-margin-top: 1.5rem;
}
.admin-bar .nna-mp-results {
	scroll-margin-top: 4.5rem;
}
.nna-mp-results:focus {
	/* It only receives focus programmatically, to move the reading position
	   after a filter — a focus ring there would look like a stray outline. */
	outline: none;
}
.nna-mp-directory.is-loading .nna-mp-results {
	opacity: 0.45;
	pointer-events: none;
}
/* Keep the block from collapsing while the new markup is swapped in. */
.nna-mp-results:empty {
	min-height: 12rem;
}
@media (prefers-reduced-motion: reduce) {
	.nna-mp-results {
		transition: none;
	}
}

/* ---- Grid ----
   Columns use minmax(0, 1fr), not plain 1fr: `1fr` is shorthand for
   minmax(auto, 1fr), and that auto floor lets one long org name widen its
   column and squeeze the others, so cards and photos end up different sizes.
   grid-auto-rows: 1fr then makes every row the same height, so all cards in a
   section match regardless of how much text each one carries. */
.nna-mp-grid {
	display: grid;
	gap: 2.25rem 2.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}
.nna-mp-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.nna-mp-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nna-mp-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nna-mp-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.nna-mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones keep two columns rather than dropping to one: a single column turns
   a 30-member category into a very long scroll, and the card is mostly a
   square photo, which still reads at half a phone's width. The gap and type
   scale down to buy that room back. */
@media (max-width: 560px) {
	.nna-mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nna-mp-controls { position: sticky; top: 0; }
}

@media (max-width: 560px) {
	.nna-mp-grid {
		gap: 1.5rem 1rem;
	}
	.nna-mp-card {
		padding-bottom: 1rem;
	}
	.nna-mp-card__photo {
		margin-bottom: 0.65rem;
	}
	.nna-mp-card__name {
		font-size: 0.95rem;
	}
	.nna-mp-card__org,
	.nna-mp-card__title {
		font-size: 0.85rem;
	}
	.nna-mp-card__initials {
		font-size: 2rem;
	}
}

/* ---- Card (matches the site: square photo, left-aligned, divider) ---- */
.nna-mp-card {
	display: flex;
	flex-direction: column;
	min-width: 0; /* Let long org names wrap instead of widening the column. */
	border-bottom: 1px solid var(--nna-mp-border);
	padding-bottom: 1.25rem;
}
.nna-mp-grid--cols-1 .nna-mp-card__photo {
	max-width: 320px;
}

/* Drop the divider on the final row of each section: there is no next row for
   it to separate, and a trailing rule reads as a broken boundary right before
   the next category banner.

   Each pair finds the first card of the last row — a card at the start of a
   row that also sits within the last N cards — then clears it and everything
   after it.

   Each breakpoint owns its rules inside a min/max range rather than relying on
   later rules to override earlier ones: media queries add no specificity, and
   these column selectors are specific enough that a wider rule would otherwise
   win on a narrow screen and clear the wrong cards. */
@media (min-width: 901px) {
	.nna-mp-grid--cols-1 > .nna-mp-card:last-child,
	.nna-mp-grid--cols-2 > .nna-mp-card:nth-child(2n + 1):nth-last-child(-n + 2),
	.nna-mp-grid--cols-2 > .nna-mp-card:nth-child(2n + 1):nth-last-child(-n + 2) ~ .nna-mp-card,
	.nna-mp-grid--cols-3 > .nna-mp-card:nth-child(3n + 1):nth-last-child(-n + 3),
	.nna-mp-grid--cols-3 > .nna-mp-card:nth-child(3n + 1):nth-last-child(-n + 3) ~ .nna-mp-card,
	.nna-mp-grid--cols-4 > .nna-mp-card:nth-child(4n + 1):nth-last-child(-n + 4),
	.nna-mp-grid--cols-4 > .nna-mp-card:nth-child(4n + 1):nth-last-child(-n + 4) ~ .nna-mp-card {
		border-bottom: 0;
	}
}

/* Tablet and phone: every grid collapses to two columns, so recompute the last
   row. One range covers both because both are two columns — if the phone
   breakpoint ever goes back to a single column it needs its own rule again,
   since this one would clear two cards instead of one. */
@media (max-width: 900px) {
	.nna-mp-grid > .nna-mp-card:nth-child(2n + 1):nth-last-child(-n + 2),
	.nna-mp-grid > .nna-mp-card:nth-child(2n + 1):nth-last-child(-n + 2) ~ .nna-mp-card {
		border-bottom: 0;
	}
}

/* The sidebar eats ~250px, so the cards have less room than the viewport
   suggests. These blocks re-derive the column count from the space actually
   left beside the sidebar — and re-derive the last-row divider with it, since
   the two must always agree. */
@media (min-width: 861px) {
	.nna-mp-directory--sidebar .nna-mp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nna-mp-directory--sidebar .nna-mp-grid > .nna-mp-card {
		border-bottom: 1px solid var(--nna-mp-border);
	}
	.nna-mp-directory--sidebar .nna-mp-grid > .nna-mp-card:nth-child(2n + 1):nth-last-child(-n + 2),
	.nna-mp-directory--sidebar .nna-mp-grid > .nna-mp-card:nth-child(2n + 1):nth-last-child(-n + 2) ~ .nna-mp-card {
		border-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.nna-mp-directory--sidebar .nna-mp-grid--cols-3,
	.nna-mp-directory--sidebar .nna-mp-grid--cols-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.nna-mp-directory--sidebar .nna-mp-grid--cols-3 > .nna-mp-card,
	.nna-mp-directory--sidebar .nna-mp-grid--cols-4 > .nna-mp-card {
		border-bottom: 1px solid var(--nna-mp-border);
	}
	.nna-mp-directory--sidebar .nna-mp-grid--cols-3 > .nna-mp-card:nth-child(3n + 1):nth-last-child(-n + 3),
	.nna-mp-directory--sidebar .nna-mp-grid--cols-3 > .nna-mp-card:nth-child(3n + 1):nth-last-child(-n + 3) ~ .nna-mp-card,
	.nna-mp-directory--sidebar .nna-mp-grid--cols-4 > .nna-mp-card:nth-child(3n + 1):nth-last-child(-n + 3),
	.nna-mp-directory--sidebar .nna-mp-grid--cols-4 > .nna-mp-card:nth-child(3n + 1):nth-last-child(-n + 3) ~ .nna-mp-card {
		border-bottom: 0;
	}
}
.nna-mp-card__photo a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.nna-mp-card__name-link {
	color: inherit;
	text-decoration: none;
}
.nna-mp-card__name-link:hover { text-decoration: underline; }
.nna-mp-card__org-link {
	color: inherit;
	text-decoration: none;
}
.nna-mp-card__org-link:hover { text-decoration: underline; }
/* The photo fills its column so every card shows the same size image. Only the
   single-column layout caps it, where a full-width photo would be absurd. */
.nna-mp-card__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 0.9rem;
	overflow: hidden;
	background: #eef1f5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nna-mp-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nna-mp-card__initials {
	font-size: 3rem;
	font-weight: 700;
	color: var(--nna-mp-muted);
	text-transform: uppercase;
}
/* Member-supplied text can be a single unbroken token — "Bookkeeping/Payroll/
   Consulting", a long domain, a hyphen-free company name — which by default
   refuses to wrap and spills across the neighbouring card. Allow a break
   anywhere as a last resort; normal words still wrap on spaces first. */
.nna-mp-card__name,
.nna-mp-card__org,
.nna-mp-card__title,
.nna-mp-cat__header,
.nna-mp-cat__desc,
.nna-mp-catlist__link {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word; /* Older Safari, which lacks `anywhere`. */
}

.nna-mp-card__name {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}
.nna-mp-card__org {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1.35;
}
.nna-mp-card__title {
	margin: 0;
	color: var(--nna-mp-muted);
	line-height: 1.35;
}

/* ---- Empty state ---- */
.nna-mp-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--nna-mp-muted);
	border: 1px dashed var(--nna-mp-border);
	border-radius: var(--nna-mp-radius);
}

/* ---- Single profile ---- */
.nna-mp-single,
.nna-mp-account {
	--nna-mp-brand: var(--e-global-color-primary, #E89B3C);
	--nna-mp-ink: var(--e-global-color-text, #1C1C1C);
	--nna-mp-muted: rgba(0, 0, 0, 0.6);
	--nna-mp-border: rgba(0, 0, 0, 0.10);
	--nna-mp-field-border: rgba(0, 0, 0, 0.16);
	font-family: var(--e-global-typography-text-font-family, "Figtree"), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 16px);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.5em);
}
.nna-mp-single {
	max-width: 1120px;
	margin: 0 auto 4rem;
	color: var(--nna-mp-ink);
}
.nna-mp-single__back { margin: 0 0 1.35rem; }
.nna-mp-single__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--nna-mp-muted);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}
.nna-mp-single__back a:hover { color: var(--nna-mp-brand); text-decoration: underline; }
.nna-mp-single__hero {
	overflow: hidden;
	border-radius: 18px;
	background: var(--e-global-color-secondary, #2D2D2D);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.09);
}
.nna-mp-single__header {
	display: flex;
	gap: 2rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	color: #fff;
}
.nna-mp-single__photo {
	width: 156px;
	height: 180px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	flex: 0 0 156px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
}
.nna-mp-single__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nna-mp-single__photo .nna-mp-card__initials { color: rgba(255, 255, 255, 0.9); font-size: 4rem; }
.nna-mp-single__intro { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.nna-mp.nna-mp-single a,
.nna-mp.nna-mp-account a {
	font-family: var(--e-global-typography-text-font-family, "Figtree"), sans-serif;
}
.nna-mp-single__category {
	display: inline-block;
	margin: 1rem 0 0;
	padding: 0.35rem 0.7rem;
	border: 1px solid color-mix(in srgb, var(--nna-mp-brand) 55%, transparent);
	border-radius: 5px;
	color: var(--nna-mp-brand);
	font-size: 0.8rem;
	line-height: 1.5;
}
.nna-mp-single__eyebrow {
	margin: 0 0 0.85rem;
	color: var(--nna-mp-brand);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.nna-mp .nna-mp-single__name {
	margin: 0 0 0.65rem;
	color: #fff;
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	font-size: clamp(1.9rem, 3.7vw, 3.15rem);
	font-weight: var(--e-global-typography-primary-font-weight, 600);
	line-height: 1.15;
	letter-spacing: -0.025em;
}
.nna-mp-single__title { margin: 0 0 0.4rem; color: rgba(255, 255, 255, 0.9); font-size: 1.02rem; font-weight: 500; line-height: 1.5; }
.nna-mp-single__org { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 1rem; line-height: 1.5; }
.nna-mp-single__logo {
	flex: 0 1 175px;
	min-width: 100px;
	max-width: 210px;
	padding: 1.25rem;
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
}
.nna-mp-single__logo img { display: block; width: 100%; height: auto; max-height: 115px; object-fit: contain; }
.nna-mp-single__contact {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0.6rem 1rem;
	background: var(--e-global-color-background, #FDFBF7);
}
.nna-mp-single__contact li { flex: 1 1 190px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.nna-mp-single__contact a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.18rem 0.6rem;
	padding: 1rem 1.25rem;
	color: var(--nna-mp-ink);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	overflow-wrap: anywhere;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}
.nna-mp-single__contact a:hover { color: var(--nna-mp-ink); background: color-mix(in srgb, var(--nna-mp-brand) 12%, transparent); }
.nna-mp-single__contact-label { grid-column: 1; color: var(--nna-mp-muted); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.nna-mp-single__contact-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.15rem; color: var(--nna-mp-brand); }
.nna-mp-single__section { padding: 2.5rem 0 0; }
.nna-mp .nna-mp-single__section-title { margin: 0 0 1rem; color: var(--nna-mp-ink); font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif; font-size: 1.4rem; font-weight: var(--e-global-typography-primary-font-weight, 600); line-height: 1.3; }
.nna-mp-single__bio { max-width: 82ch; color: var(--nna-mp-ink); line-height: var(--e-global-typography-text-line-height, 1.5em); overflow-wrap: anywhere; }
.nna-mp-single__bio > :last-child { margin-bottom: 0; }
.nna-mp-single .nna-mp-acf-details { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.nna-mp-single .nna-mp-acf-detail { border-color: var(--nna-mp-border); padding: 1rem 0; }
.nna-mp-single .nna-mp-acf-detail dt { color: var(--nna-mp-ink); font-size: 0.9rem; }
.nna-mp-single .nna-mp-acf-detail dd { color: var(--nna-mp-muted); }
.nna-mp-single a:focus-visible { outline: 3px solid var(--nna-mp-brand); outline-offset: 4px; }

@media (max-width: 860px) {
	.nna-mp-single__header { flex-wrap: wrap; gap: 1.5rem; }
	.nna-mp-single__photo { width: 132px; height: 154px; flex-basis: 132px; }
	.nna-mp-single__intro { flex-basis: calc(100% - 156px); }
	.nna-mp-single__logo { flex-basis: 165px; margin-left: 156px; }
}
@media (max-width: 560px) {
	.nna-mp-single { margin-bottom: 2.5rem; }
	.nna-mp-single__hero { border-radius: 13px; }
	.nna-mp-single__header { padding: 1.4rem; align-items: flex-start; gap: 1.1rem; }
	.nna-mp-single__photo { width: 92px; height: 108px; flex-basis: 92px; border-radius: 9px; }
	.nna-mp-single__intro { flex-basis: calc(100% - 112px); align-self: center; }
	.nna-mp .nna-mp-single__name { font-size: clamp(1.4rem, 6vw, 2rem); }
	.nna-mp-single__eyebrow { margin-bottom: 0.55rem; font-size: 0.6rem; letter-spacing: 0.1em; }
	.nna-mp-single__title, .nna-mp-single__org { font-size: 0.87rem; }
	.nna-mp-single__logo { margin-left: 0; flex-basis: 155px; padding: 0.9rem; }
	.nna-mp-single__contact { padding: 0.35rem 0.5rem; }
	.nna-mp-single__contact li { flex-basis: 100%; }
	.nna-mp-single__contact a { padding: 0.8rem 1rem; }
	.nna-mp-single__section { padding-top: 1.75rem; }
	.nna-mp-single .nna-mp-acf-details { grid-template-columns: 1fr; }
}

/* ---- Forms (login + edit) ---- */
/* Same reasoning as the login card: leave room before the footer. */
/* ---- Edit profile ----
   Presented as a centred card like the login screen rather than fields spanning
   the full page width, which at 1200px+ leaves inputs far wider than anything
   typed into them. */
.nna-mp-edit {
	max-width: 44rem;
	margin: 0 auto;
}
.nna-mp-form {
	margin-bottom: 3.5rem;
	padding: 2rem;
	background: var(--nna-mp-field-bg, #fff);
	border: 1px solid var(--nna-mp-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.05);
}
/* Inside the account area the panel already supplies the card, so the form
   drops its own or the two nest into a box-in-a-box. */
.nna-mp-account__panel .nna-mp-form {
	margin-bottom: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.nna-mp-form .nna-mp-field {
	margin: 0 0 1.25rem;
	display: block;
}
/* Field labels take the kit's text font, not its display font: the display
   face has an ascent taller than its em box, so uppercase text in it sits
   proud of the line box and the tops of the capitals look shaved. Scoped under
   .nna-mp to outrank the kit's own element-level heading and label rules. */
.nna-mp .nna-mp-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nna-mp-muted);
}

/* ---- Account area (profile / change password) ---- */
.nna-mp-account {
	display: grid;
	grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	/* The page template puts nothing between this and the footer, so the
	   breathing room has to come from here. */
	margin-bottom: 4rem;
}
.nna-mp-account__nav {
	position: sticky;
	top: 2rem;
	padding: 0.4rem;
	background: var(--nna-mp-field-bg, #fff);
	border: 1px solid var(--nna-mp-border);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.nna-mp-account__nav-title {
	margin: 0;
	padding: 1rem 0.85rem 0.65rem;
	color: var(--nna-mp-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.nna-mp-accountnav,
.nna-mp-accountnav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Scoped under .nna-mp: themes style bare `a` with underlines at a specificity
   a lone class cannot beat on source order. */
.nna-mp .nna-mp-accountnav__link {
	position: relative;
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: 8px;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--nna-mp-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.nna-mp .nna-mp-accountnav__link:hover,
.nna-mp .nna-mp-accountnav__link:focus-visible {
	background-color: rgba(0, 0, 0, 0.045);
	text-decoration: none;
}

/* Active panel: a brand tint plus a left marker, so the current section reads
   at a glance rather than resting on a faint grey alone. */
.nna-mp .nna-mp-accountnav__link.is-active {
	font-weight: 600;
	background-color: color-mix(in srgb, var(--nna-mp-brand) 14%, transparent);
}
.nna-mp .nna-mp-accountnav__link.is-active::before {
	content: "";
	position: absolute;
	top: 0.45rem;
	bottom: 0.45rem;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--nna-mp-brand);
}

/* Log out sits apart — it leaves the account area rather than switching panel.
   The rule lives on the list item so it spans the full menu width. */
.nna-mp-accountnav__sep {
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px solid var(--nna-mp-border);
}
.nna-mp .nna-mp-accountnav__link--logout {
	color: var(--nna-mp-muted);
}
.nna-mp .nna-mp-accountnav__link--logout:hover {
	color: var(--nna-mp-ink);
}

.nna-mp-account__panel {
	min-width: 0;
	padding: 2rem;
	background: var(--nna-mp-field-bg, #fff);
	border: 1px solid var(--nna-mp-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.nna-mp-account__heading { margin: 0 0 2rem; }
.nna-mp .nna-mp-account__heading h2 {
	margin: 0 0 0.5rem;
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	font-size: 1.8rem;
	font-weight: var(--e-global-typography-primary-font-weight, 600);
	line-height: 1.3;
	letter-spacing: -0.025em;
	color: var(--nna-mp-ink);
}
.nna-mp-account__heading p { margin: 0; font-size: 0.95rem; line-height: var(--e-global-typography-text-line-height, 1.5em); color: var(--nna-mp-muted); }
.nna-mp-account .nna-mp-form__section {
	min-width: 0;
	margin: 0 0 1.9rem;
	padding: 0;
	border: 0;
}
.nna-mp-account .nna-mp-form__section legend {
	float: none;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1.2rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--nna-mp-border);
	font: inherit;
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	font-size: 1rem;
	font-weight: var(--e-global-typography-primary-font-weight, 600);
	color: var(--nna-mp-ink);
}
.nna-mp-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.nna-mp-field--wide { grid-column: 1 / -1; }
.nna-mp-account .nna-mp-form label { color: var(--nna-mp-ink); font-size: 0.85rem; letter-spacing: normal; text-transform: none; }
.nna-mp-optional { color: var(--nna-mp-muted); font-weight: 400; font-size: 0.8rem; }
.nna-mp-account .nna-mp-form .nna-mp-upload {
	padding: 1rem;
	border: 1px solid var(--nna-mp-border);
	border-radius: 10px;
	background: var(--e-global-color-background, #FDFBF7);
}
.nna-mp-form__logo { display: block; max-width: 180px; max-height: 90px; width: auto; height: auto; object-fit: contain; padding: 0.6rem; background: #fff; border: 1px solid var(--nna-mp-border); border-radius: 6px; }
.nna-mp-account .nna-mp-form .nna-mp-field .nna-mp-hint { margin: 0.5rem 0 0; font-size: 0.76rem; line-height: 1.55; }
.nna-mp-account .nna-mp-form .nna-mp-remove-logo { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0; font-weight: 400; }
.nna-mp-remove-logo input { margin: 0; accent-color: var(--nna-mp-brand); }
.nna-mp-account__resources { min-width: 0; overflow-wrap: anywhere; }
.nna-mp-account__resources img { max-width: 100%; }
.nna-mp-account .nna-mp-form__thumb { background: rgba(0, 0, 0, 0.04); }
.nna-mp-account .nna-mp-btn { font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif; }
.nna-mp-account input[type="file"]::file-selector-button { background: rgba(0, 0, 0, 0.035); }
.nna-mp-account input[type="file"]::file-selector-button:hover { background: rgba(0, 0, 0, 0.07); }

@media (max-width: 760px) {
	.nna-mp-account {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.nna-mp-account__nav {
		position: static;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
	.nna-mp-account__nav-title { padding: 0 0 0.65rem; }
	/* Horizontal on a phone so the menu doesn't push the form off screen. */
	.nna-mp-accountnav {
		display: flex;
		flex-wrap: wrap;
		gap: 0.375rem;
	}
	.nna-mp .nna-mp-accountnav__link {
		padding: 0.45rem 0.9rem;
		font-size: 0.875rem;
		border: 1px solid var(--nna-mp-field-border);
		border-radius: 999px;
		background: var(--nna-mp-field-bg, #fff);
	}
	.nna-mp .nna-mp-accountnav__link.is-active {
		border-color: var(--nna-mp-brand);
	}
	/* The left marker belongs to the vertical menu only. */
	.nna-mp .nna-mp-accountnav__link.is-active::before {
		content: none;
	}
	/* Chips sit in a row, so the divider rule would cut across them. */
	.nna-mp-accountnav__sep {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
	.nna-mp-account__panel {
		padding: 1.5rem 1.25rem;
	}
}
@media (max-width: 560px) {
	.nna-mp-form__grid { grid-template-columns: 1fr; gap: 0; }
	.nna-mp-account__heading { margin-bottom: 1.6rem; }
	.nna-mp .nna-mp-account__heading h2 { font-size: 1.5rem; }
	.nna-mp-account .nna-mp-form .nna-mp-upload { padding: 0.85rem; }
	.nna-mp-form__logo { max-width: 145px; }
}
.nna-mp-form input[type="text"],
.nna-mp-form input[type="url"],
.nna-mp-form input[type="tel"],
.nna-mp-form input[type="number"],
.nna-mp-form input[type="email"],
.nna-mp-form input[type="password"],
.nna-mp-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0.9rem;
	height: var(--nna-mp-field-h);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--nna-mp-ink);
	background: var(--nna-mp-field-bg, #fff);
	border: 1px solid var(--nna-mp-field-border);
	border-radius: var(--nna-mp-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nna-mp-form textarea {
	height: auto;
	padding: 0.7rem 0.9rem;
	line-height: 1.5;
	resize: vertical;
}
.nna-mp-form input:focus-visible,
.nna-mp-form textarea:focus-visible {
	outline: none;
	border-color: var(--nna-mp-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 28%, transparent);
}

/* Photo: square to match how it appears on the directory card, beside its
   file input rather than stacked, so the row stays compact. */
.nna-mp-form__photo {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.nna-mp-form__thumb {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--nna-mp-border);
	background: #eef1f5;
}
.nna-mp-form input[type="file"] {
	flex: 1 1 16rem;
	min-width: 0;
	font-size: 0.875rem;
	color: var(--nna-mp-muted);
}
.nna-mp-form input[type="file"]::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--nna-mp-ink);
	background: #f3f4f6;
	border: 1px solid var(--nna-mp-field-border);
	border-radius: 8px;
	cursor: pointer;
}
.nna-mp-form input[type="file"]::file-selector-button:hover {
	background: #e9ebee;
}

.nna-mp-form .nna-mp-hint {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--nna-mp-muted);
}
.nna-mp-field--checkbox label {
	font-weight: 400;
	font-size: inherit;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}

/* Actions row: primary save, quiet log-out. */
.nna-mp-form__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--nna-mp-border);
}
.nna-mp .nna-mp-btn {
	height: var(--nna-mp-field-h);
	padding: 0 1.6rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: var(--nna-mp-brand);
	border: 1px solid var(--nna-mp-brand);
	border-radius: var(--nna-mp-radius);
	cursor: pointer;
	transition: filter 0.15s ease;
}
.nna-mp .nna-mp-btn:hover {
	filter: brightness(0.93);
	color: #fff;
	background-color: var(--nna-mp-brand);
}
.nna-mp-link {
	margin-left: 0;
	font-size: 0.9375rem;
	color: var(--nna-mp-muted);
}

@media (max-width: 560px) {
	.nna-mp-form {
		padding: 1.25rem;
	}
}

.nna-mp-notice {
	padding: 0.7rem 0.9rem;
	border-radius: var(--nna-mp-radius);
	margin-bottom: 1rem;
	/* Smaller than body copy: a validation message is a hint, not a headline. */
	font-size: 0.875rem;
	line-height: 1.45;
}
.nna-mp-notice--success { background: #e6f4ea; color: #1e5631; }
.nna-mp-notice--error { background: #fbeaea; color: #7a271a; }

/* Inline validation, shown under the field it belongs to. */
.nna-mp-fielderror {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 400;
	color: #b3261e;
}
.nna-mp-login input.is-invalid,
.nna-mp-form input.is-invalid {
	border-color: #b3261e;
}
.nna-mp-login input.is-invalid:focus-visible,
.nna-mp-form input.is-invalid:focus-visible {
	outline: none;
	border-color: #b3261e;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.22);
}

.nna-mp-gate { max-width: 420px; margin: 2rem auto; text-align: center; }
.nna-mp-gate__msg { margin-bottom: 1rem; }
/* Centre the page heading on login / lost-password / reset screens so it sits
   over the centred card instead of hanging off to one side. Scoped to the body
   class the plugin adds, so no other page is affected. The selectors cover the
   usual theme markup; a theme naming its header differently simply keeps its
   own alignment. */
.nna-mp-login-page .page-header,
.nna-mp-login-page .entry-header,
.nna-mp-login-page .entry-title,
.nna-mp-login-page .page-title {
	text-align: center;
}

/* The theme sets 1.2 on this heading, which is a tight line box for a font
   with ascenders as tall as Poppins' — at 40px the caps look shaved off the
   top. Scoped to these pages so the rest of the site keeps the theme's
   rhythm. */
.nna-mp-login-page .entry-title,
.nna-mp-login-page .page-title {
	line-height: 1.35;
	padding-bottom: 0.05em;
}

/* ---- Login ----
   wp_login_form() emits WordPress's own markup (p.login-username, #wp-submit,
   …), so the card is built by styling that rather than replacing it — the form
   keeps core's field names, nonce handling and autocomplete hints. */
.nna-mp-login {
	max-width: 27rem;
	/* Bottom margin keeps the card off whatever follows it — on a short page
	   that is usually the footer, which otherwise butts straight against it. */
	margin: 0 auto 3.5rem;
	padding: 2rem;
	background: var(--nna-mp-field-bg, #fff);
	border: 1px solid var(--nna-mp-border);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.05);
}

.nna-mp-login #loginform p,
.nna-mp-login__form p {
	margin: 0 0 1.1rem;
}
.nna-mp-login__hint {
	font-size: 0.875rem;
	color: var(--nna-mp-muted);
}
/* Same treatment as the other field labels: the kit's text font rather than
   its display face, which has an ascent taller than its em box and leaves
   uppercase text overflowing the line box. */
.nna-mp-login #loginform label,
.nna-mp-login__form label,
.nna-mp-login label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nna-mp-muted);
}


.nna-mp-login input[type="text"],
.nna-mp-login input[type="password"] {
	width: 100%;
	height: var(--nna-mp-field-h);
	box-sizing: border-box;
	padding: 0 0.9rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--nna-mp-ink);
	background-color: #fff;
	border: 1px solid var(--nna-mp-field-border);
	border-radius: var(--nna-mp-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nna-mp-login input[type="text"]:focus-visible,
.nna-mp-login input[type="password"]:focus-visible {
	outline: none;
	border-color: var(--nna-mp-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 30%, transparent);
}

/* "Remember Me" is a checkbox + inline text, so it opts out of the block
   label styling above. */
/* "Remember Me" is a checkbox with inline text, so it opts out of the
   uppercase label treatment above. */
.nna-mp-login #loginform .login-remember label {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	cursor: pointer;
}
.nna-mp-login #rememberme {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--nna-mp-brand);
}

/* Scoped under .nna-mp for the same reason as the directory button: themes
   reset bare `[type="submit"]` at equal specificity and win on source order. */
.nna-mp-login #wp-submit {
	width: 100%;
	height: var(--nna-mp-field-h);
	padding: 0 1.25rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: var(--nna-mp-brand);
	border: 1px solid var(--nna-mp-brand);
	border-radius: var(--nna-mp-radius);
	cursor: pointer;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.nna-mp-login #wp-submit:hover {
	filter: brightness(0.93);
	color: #fff;
	background-color: var(--nna-mp-brand);
}
.nna-mp-login #wp-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand) 35%, transparent);
}
.nna-mp-login #wp-submit:active {
	transform: translateY(1px);
}

.nna-mp-login #loginform .login-submit {
	margin-bottom: 0;
}

.nna-mp-login__lost {
	margin: 1.1rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--nna-mp-border);
	font-size: 0.9rem;
	text-align: center;
}
.nna-mp-login__lost a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.nna-mp-login__lost a:hover {
	color: var(--nna-mp-brand);
}

@media (max-width: 560px) {
	.nna-mp-login {
		padding: 1.5rem 1.25rem;
	}
}

/* ---- Grouped (category) layout ---- */
.nna-mp-cat { margin: 0 0 3rem; }
/* Category banner.
   Typography is taken straight from the site kit's global styles — the same
   "Heading M" and "Text" tokens the hand-built Elementor sections used — so
   the generated banner is typographically identical to the original and keeps
   following the theme if those globals are ever retuned. Square-cornered on
   purpose; the original had no radius. */
.nna-mp-cat__header {
	display: block;
	background: var(--nna-mp-cat-color, #333);
	color: var(--nna-mp-ink, #1c1c1c);
	margin: 0 0 1.125rem;
	padding: 0.28em 0.32em;
	border-radius: 0;
	font-family: var(--e-global-typography-heading-m-font-family, inherit), sans-serif;
	font-size: var(--e-global-typography-heading-m-font-size, 2rem);
	font-weight: var(--e-global-typography-heading-m-font-weight, 600);
	line-height: var(--e-global-typography-heading-m-line-height, 1.2em);
	letter-spacing: var(--e-global-typography-heading-m-letter-spacing, normal);
	word-spacing: var(--e-global-typography-heading-m-word-spacing, normal);
}
.nna-mp-cat__desc {
	margin: 0 0 2rem;
	max-width: none;
	color: var(--nna-mp-ink, inherit);
	font-family: var(--e-global-typography-text-font-family, inherit), sans-serif;
	font-size: var(--e-global-typography-text-font-size, 1rem);
	font-weight: var(--e-global-typography-text-font-weight, 400);
	line-height: var(--e-global-typography-text-line-height, 1.5em);
	letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
}
/* Phone: the banner inherits "Heading M" from the site kit, which is sized for
   a full-width desktop section. At 375px that runs to three lines and a 133px
   slab of colour before a single member is visible, so the heading is capped
   here. The family, weight and colour still come from the theme globals — only
   the size and spacing are overridden. */
@media (max-width: 560px) {
	.nna-mp-cat__header {
		margin-bottom: 0.875rem;
		padding: 0.35em 0.5em;
		font-size: 1.375rem;
		line-height: 1.25;
	}
	.nna-mp-cat__desc {
		margin-bottom: 1.5rem;
		font-size: 0.95rem;
	}
	.nna-mp-cat {
		margin-bottom: 2.25rem;
	}
}

.nna-mp-controls__clear {
	align-self: center;
	font-size: 0.9rem;
	text-decoration: underline;
}

/* ---- Admin list ---- */
.nna-mp-admin-table .nna-mp-col-handle { width: 30px; cursor: move; text-align: center; color: #888; }
.nna-mp-admin-table .nna-mp-col-photo { width: 52px; }
.nna-mp-admin-table img { border-radius: 50%; object-fit: cover; }
.nna-mp-admin-noimg {
	display: inline-flex;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: #eef1f5;
	font-weight: 700; color: #667;
	text-transform: uppercase;
}
.nna-mp-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.nna-mp-badge--active { background: #e6f4ea; color: #1e5631; }
.nna-mp-badge--hidden { background: #f0f0f1; color: #666; }
#nna-mp-sortable tr.nna-mp-dragging { background: #fffbe5; }

/* Category admin */
.nna-mp-swatch {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 3px;
	vertical-align: middle;
	border: 1px solid rgba(0,0,0,0.15);
}
.nna-mp-cats-layout { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem; }
.nna-mp-cats-form { flex: 0 0 380px; max-width: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0.5rem 1.25rem 1.25rem; }
.nna-mp-cats-list { flex: 1 1 420px; }
.nna-mp-danger { color: #b32d2e; }
.nna-mp-cats-form input[type="color"] { width: 60px; height: 34px; padding: 0; border: 1px solid #ccc; }

/* ---- Admin: members list filters ---- */
.nna-mp-admin-filters {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 0 0.75rem;
}
.nna-mp-admin-filters input[type="search"] {
	min-width: 18rem;
}
/* The drag column collapses when reordering is off, so the row doesn't keep
   an empty gutter. */
.nna-mp-admin-table .nna-mp-col-handle:empty {
	width: 0;
	padding: 0;
}

/* ---- Password reveal ----
   The button sits inside the field, so the input gets right padding to keep
   typed text clear of it. */
.nna-mp-pwwrap {
	position: relative;
	/* Flex, not block: an inline input leaves ~23px of line-box leading below
	   itself, which would make the wrapper taller than the field and drop the
	   centred toggle below the field's real middle. */
	display: flex;
	align-items: center;
}
.nna-mp-pwwrap input[type="password"],
.nna-mp-pwwrap input[type="text"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	padding-right: 2.9rem;
}
.nna-mp .nna-mp-pwtoggle {
	/* Explicitly clears the theme's button styling — hello-elementor gives
	   every bare button a border and colour at the same specificity. */
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	position: absolute;
	top: 50%;
	right: 0.35rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	color: var(--nna-mp-muted, rgba(0, 0, 0, 0.6));
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.nna-mp .nna-mp-pwtoggle:hover {
	color: var(--nna-mp-ink, #1c1c1c);
	background: rgba(0, 0, 0, 0.05);
}
.nna-mp .nna-mp-pwtoggle:focus-visible {
	outline: none;
	color: var(--nna-mp-ink, #1c1c1c);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nna-mp-brand, #e89b3c) 35%, transparent);
}
/* Chrome/Edge add their own reveal control; two would be confusing. */
.nna-mp-pwwrap input::-ms-reveal,
.nna-mp-pwwrap input::-ms-clear {
	display: none;
}

/* -----------------------------------------------------------------------------
 * Elementor member profile template
 *
 * /member-profile/ is built from ordinary Elementor widgets bound to this
 * plugin's Member dynamic tags, so an admin can restructure it freely. Layout,
 * colour and type all live in the editor; only the handful of things Elementor
 * has no control for are here. The hooks below are each widget's or
 * container's own CSS Classes setting, so clearing one in Elementor clears the
 * rule with it.
 *
 * Most members have only a name, role, organisation, category, website and
 * photo. Elementor already drops a Heading, Text Editor or Image whose dynamic
 * value is empty; these rules take the surrounding panel with it, so a sparse
 * profile shows no empty cards, headings or gutters.
 * -------------------------------------------------------------------------- */

/* A Button renders from its text, so unlike the other widgets it survives an
   empty value. Elementor adds .elementor-button-link only once the URL
   resolves, so its absence is what identifies a member with no website. */
.nna-mp-tpl-website .elementor-button:not(.elementor-button-link) { display: none; }
.nna-mp-tpl-contact:not(:has(.elementor-button-link)) { display: none; }

/* No bio: no About card, rather than a card holding a lone heading. */
.nna-mp-tpl-about:not(:has(.nna-mp-tpl-bio)) { display: none; }

/* No photo: no Image widget, so the column would otherwise stay behind as an
   empty gutter indenting the name. */
.nna-mp-tpl-photocol:not(:has(.elementor-widget)) { display: none; }

/* The category reads as a tag rather than another line of text. Elementor has
   no control for this: a Heading's background would span the whole column,
   where a pill has to hug its own text. */
.nna-mp-tpl-category .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	padding: 0.42em 0.9em;
	border-radius: 999px;
	background: rgba(232, 155, 60, 0.16);
	background: color-mix(in srgb, var(--e-global-color-primary, #e89b3c) 16%, transparent);
}

/* Masked rather than a background image, so the glyph follows the text colour
   the admin picks in Elementor. */
.nna-mp-tpl-category .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.45em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm0 4h4V4h-4v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2zm0 4h4V4h-4v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A text link, not a button, so it needs the affordance back on hover. */
.nna-mp-tpl-back .elementor-button:hover { text-decoration: underline; }

/* Long member-supplied values must fit the editable Elementor layout.
   Visual settings remain in Elementor, including its responsive controls. */
.nna-mp-editable .e-con, .nna-mp-editable .elementor-widget { min-width: 0; }
.nna-mp-editable .elementor-heading-title,
.nna-mp-editable .elementor-button-text { overflow-wrap: anywhere; }

/* -----------------------------------------------------------------------------
 * Members list: the Delete row action
 *
 * Delete sits one click from Edit and cannot be undone, so it does not get to
 * look like the safe actions beside it. WordPress styles .submitdelete red on
 * its own screens but not here, since these actions are the plugin's own
 * markup rather than core's row-actions component.
 * -------------------------------------------------------------------------- */
.nna-mp-admin .nna-mp-delete { color: #b32d2e; }
.nna-mp-admin .nna-mp-delete:hover,
.nna-mp-admin .nna-mp-delete:focus { color: #8a2424; }

/* Keep "View | Edit | Hide | Delete" on one line rather than wrapping the
   most dangerous one onto its own. */
.nna-mp-admin td:last-child { white-space: nowrap; }

/* Additional ACF member fields. */
.nna-mp-acf-fields { margin: 1.5rem 0; border: 1px solid #e3e6e9; border-radius: 8px; overflow: hidden; }
.nna-mp-acf-fields .acf-field { padding: 16px; }
.nna-mp-acf-fields .acf-label label { font-weight: 600; }
.nna-mp-acf-details { margin: 1.5rem 0; }
.nna-mp-acf-detail { padding: 1rem 0; border-bottom: 1px solid #e3e6e9; overflow-wrap: anywhere; }
.nna-mp-acf-detail dt { font-weight: 600; margin-bottom: .35rem; }
.nna-mp-acf-detail dd { margin: 0; }
.nna-mp-acf-detail dd > :last-child { margin-bottom: 0; }