/*
 * ASAE CAE Roster — public shortcode styles.
 *
 * Layout: side-by-side photo + body above 1200px, stacked below.
 * Colors tuned for WCAG 2.2 AA contrast on a white page background;
 * themes that change the page background should override .asae-cae-roster.
 *
 * Color scheme: primary accent comes from `--nv-primary-accent` when
 * the active theme is Neve (so the plugin matches the site brand —
 * e.g. ASAE's rust orange #bd491e), and falls back to WP-admin blue
 * #2271b1 elsewhere. Inline text links (Clear) drop their explicit
 * color and inherit the theme's link styling. Hover states use
 * `filter: brightness(...)` so darkening works regardless of base
 * color.
 */

.asae-cae-roster {
	color: var(--nv-text-color, #2b2b2b);
	font-size: 16px;
	line-height: 1.5;
}

/* Focus rings: only on genuinely interactive elements. Earlier versions
 * used `.asae-cae-roster *:focus-visible`, which was wide enough that
 * themes adding focus styling to the region wrapper or the search form
 * (or a browser briefly focusing them on form submit) caused the entire
 * widget to appear outlined after navigating between letters or running
 * a search. */
.asae-cae-roster a:focus-visible,
.asae-cae-roster button:focus-visible,
.asae-cae-roster input:focus-visible,
.asae-cae-roster select:focus-visible,
.asae-cae-roster textarea:focus-visible {
	outline: 3px solid var(--nv-primary-accent, #bd491e);
	outline-offset: 2px;
}

/* Defensive: make sure neither the region wrapper nor the search form
 * ever shows a focus ring around the entire widget — these elements
 * aren't interactive themselves, so a focus indicator on them gives
 * misleading feedback. !important is required because the typical
 * culprit is a theme-level `[tabindex="-1"]:focus` rule (themes add
 * tabindex="-1" to landmark regions for skip-link targeting). The
 * [tabindex] selector here covers the case where our wrapper picks
 * up that attribute via the theme. */
.asae-cae-roster:focus,
.asae-cae-roster:focus-visible,
.asae-cae-roster:focus-within,
.asae-cae-roster[tabindex]:focus,
.asae-cae-roster[tabindex]:focus-visible,
.asae-cae-search:focus,
.asae-cae-search:focus-visible,
.asae-cae-search:focus-within,
.asae-cae-search[tabindex]:focus,
.asae-cae-search[tabindex]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Search form. Each filter input lives in a flex column so the label sits
 * directly above its input (more usable than label-on-the-side once we
 * have three filters). The form wraps to multiple rows on narrow widths. */
.asae-cae-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em 1em;
	margin-bottom: 1em;
}
.asae-cae-search-field {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	flex: 1 1 200px;
	min-width: 160px;
}
.asae-cae-search-field label {
	font-weight: 600;
	font-size: 0.95em;
}
.asae-cae-search input[type="search"],
.asae-cae-search input[type="text"],
.asae-cae-search select {
	min-height: 2.4em;
	padding: 0.3em 0.6em;
	border: 1px solid var(--asae-border-control, #767676);
	border-radius: var(--asae-radius-sm, 2px);
	font: inherit;
	background: var(--nv-site-bg, #fff);
}

/* State / Province dropdown: country options render in italic and a slightly
 * muted (still WCAG-AA contrast) grey to visually mark them as group
 * headings amongst their states/provinces. The primary cross-browser
 * hierarchy comes from the leading NBSP indent baked into state labels by
 * get_active_locations(); this CSS is reinforcement for browsers that
 * honor styling on <option> elements (Chrome/Edge fully; Firefox color
 * only; Safari mostly ignored). */
.asae-cae-search select option.asae-cae-loc-country {
	font-style: italic;
	color: var(--asae-text-muted, #595959); /* 7.0:1 on white — exceeds WCAG AA */
}
.asae-cae-search-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
}
.asae-cae-search-submit {
	padding: 0.4em 1em;
	border: 1px solid var(--nv-primary-accent, #bd491e);
	background: var(--nv-primary-accent, #bd491e);
	color: #fff;
	border-radius: var(--asae-radius-sm, 2px);
	cursor: pointer;
	font: inherit;
}
.asae-cae-search-submit:hover,
.asae-cae-search-submit:focus {
	/* Theme-agnostic darken — works regardless of the brand color
	 * that the variable resolves to.
	 *
	 * Uses a translucent black layer rather than `filter: brightness()`: a
	 * filter applies to everything the element paints, including its own white
	 * label, so it greyed the text while darkening the button and lowered
	 * contrast instead of raising it. The overlay darkens only the background
	 * and keeps the same theme-agnostic property. */
	background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
}
.asae-cae-search-clear {
	/* Inherit theme link color rather than forcing one. */
	text-decoration: underline;
}

/* Letter navigation. */
.asae-cae-letters ul {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	border-bottom: 1px solid var(--asae-border-subtle, #dddddd);
	padding-bottom: 0.5em;
}
.asae-cae-letters li {
	margin: 0;
}
.asae-cae-letters a,
.asae-cae-letters span {
	display: inline-block;
	min-width: 2em;
	padding: 0.4em 0.6em;
	text-align: center;
	border-radius: var(--asae-radius-sm, 2px);
	font-weight: 600;
}
.asae-cae-letters a {
	color: var(--nv-primary-accent, #bd491e);
	text-decoration: none;
}
.asae-cae-letters a:hover,
.asae-cae-letters a:focus {
	filter: brightness(0.95);
	text-decoration: underline;
}
.asae-cae-letters .is-current span {
	background: var(--nv-primary-accent, #bd491e);
	color: #fff;
}
.asae-cae-letters .is-disabled span {
	color: var(--asae-text-muted, #595959); /* AA on white */
	cursor: not-allowed;
}

/* Unified results summary line — "Showing X - Y of Z results in <nav>" /
 * "matching <search>". Rendered both above the listing and above the
 * pagination (when there's more than one page). Centered so it visually
 * spans the full width of the listing grid. */
.asae-cae-results-summary {
	margin: 1em 0;
	text-align: center;
	color: var(--asae-text-muted, #595959);
	font-style: italic;
}

.asae-cae-empty {
	margin: 1.5em 0;
	font-style: italic;
}

/* Card list — two-up grid above the breakpoint, single column below. */
.asae-cae-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25em;
}
@media (max-width: 1199px) {
	.asae-cae-list {
		grid-template-columns: 1fr;
	}
}

.asae-cae-card {
	display: flex;
	gap: 1em;
	padding: 1em;
	border: 1px solid var(--asae-border-subtle, #dddddd);
	border-radius: var(--asae-radius, 3px);
	background: var(--nv-site-bg, #fff);
}
@media (max-width: 1199px) {
	.asae-cae-card {
		flex-direction: column; /* stack photo above body, per _start.md */
		align-items: center;
		text-align: center;
	}
	/* When profile images are turned off (admin Settings -> Profile images),
	 * there's no photo to anchor centered text against — switch back to
	 * natural left-aligned reading flow on narrow widths. */
	.asae-cae-card.is-no-photo {
		flex-direction: row;
		align-items: stretch;
		text-align: left;
	}
}

.asae-cae-card-photo {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--asae-surface, #f7f7f7);
}
.asae-cae-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.asae-cae-card-photo.is-empty {
	background: repeating-linear-gradient(
		45deg,
		var(--asae-surface, #f7f7f7),
		var(--asae-surface, #f7f7f7) 8px,
		var(--nv-light-bg, #ededed) 8px,
		var(--nv-light-bg, #ededed) 16px
	);
}

.asae-cae-card-body {
	flex: 1;
	min-width: 0;
}
.asae-cae-card-name {
	margin: 0 0 0.25em;
	font-size: 1.05em;
}
.asae-cae-card-suffix {
	color: var(--asae-text-muted, #595959);
	font-weight: 400;
}
.asae-cae-card-title,
.asae-cae-card-org,
.asae-cae-card-loc {
	margin: 0.15em 0;
	color: var(--nv-text-color, #2b2b2b);
}
.asae-cae-card-loc {
	color: var(--asae-text-muted, #595959);
}

/* Pagination — same visual rhythm as letter nav. */
.asae-cae-pagination {
	margin-top: 1.5em;
}
.asae-cae-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	justify-content: center;
}
.asae-cae-pagination li {
	margin: 0;
}
.asae-cae-pagination a,
.asae-cae-pagination span {
	display: inline-block;
	min-width: 2.4em;
	padding: 0.4em 0.7em;
	text-align: center;
	border-radius: var(--asae-radius-sm, 2px);
	font-weight: 600;
}
.asae-cae-pagination a {
	color: var(--nv-primary-accent, #bd491e);
	text-decoration: none;
}
.asae-cae-pagination a:hover,
.asae-cae-pagination a:focus {
	filter: brightness(0.95);
	text-decoration: underline;
}
.asae-cae-pagination .is-current span {
	background: var(--nv-primary-accent, #bd491e);
	color: #fff;
}
.asae-cae-pagination .is-disabled span {
	color: var(--asae-text-muted, #595959);
	cursor: not-allowed;
}
.asae-cae-pagination .is-ellipsis span {
	min-width: 1.2em;
	padding: 0.4em 0.3em;
	color: var(--asae-text-muted, #595959);
}