/* PACCC Member Directory — frontend styles. */

/* jsVectorMap appends its state-hover tooltip directly to <body>, outside
   .paccc-directory-wrap, so its background color can only be overridden via
   this global custom property (declared at :root by assets/vendor/jsvectormap.min.css,
   default #337FFA) rather than being scoped to the directory wrapper. */
:root {
	--jvm-tooltip-bg-color: #622467;
	/* Paw-print replacement for the browser's default pointing-hand cursor,
	   used on every clickable control across both the directory shortcode
	   (pagination, quick view toggle, state map) and the single member page
	   (Get Directions). Declared at :root, not .paccc-directory-wrap, because
	   those two are separate page wrappers, not nested. #5C2461 fill with a
	   2px #FECA38 outline; canvas is 36x36 (2px inset all round for the
	   outline), so 18 18 centers the hotspot on the main pad. */
	--paccc-cursor-paw: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDIpIj48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNGRUNBMzgiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMjMiIHJ4PSI5IiByeT0iNy41Ii8+PGVsbGlwc2UgY3g9IjYiIGN5PSIxNCIgcng9IjMuNiIgcnk9IjQuNiIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1IDYgMTQpIi8+PGVsbGlwc2UgY3g9IjExLjUiIGN5PSI3LjMiIHJ4PSIzLjgiIHJ5PSI0LjgiIHRyYW5zZm9ybT0icm90YXRlKC02IDExLjUgNy4zKSIvPjxlbGxpcHNlIGN4PSIyMC41IiBjeT0iNy4zIiByeD0iMy44IiByeT0iNC44IiB0cmFuc2Zvcm09InJvdGF0ZSg2IDIwLjUgNy4zKSIvPjxlbGxpcHNlIGN4PSIyNiIgY3k9IjE0IiByeD0iMy42IiByeT0iNC42IiB0cmFuc2Zvcm09InJvdGF0ZSgxNSAyNiAxNCkiLz48L2c+PGcgZmlsbD0iIzVDMjQ2MSI+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMjMiIHJ4PSI5IiByeT0iNy41Ii8+PGVsbGlwc2UgY3g9IjYiIGN5PSIxNCIgcng9IjMuNiIgcnk9IjQuNiIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1IDYgMTQpIi8+PGVsbGlwc2UgY3g9IjExLjUiIGN5PSI3LjMiIHJ4PSIzLjgiIHJ5PSI0LjgiIHRyYW5zZm9ybT0icm90YXRlKC02IDExLjUgNy4zKSIvPjxlbGxpcHNlIGN4PSIyMC41IiBjeT0iNy4zIiByeD0iMy44IiByeT0iNC44IiB0cmFuc2Zvcm09InJvdGF0ZSg2IDIwLjUgNy4zKSIvPjxlbGxpcHNlIGN4PSIyNiIgY3k9IjE0IiByeD0iMy42IiByeT0iNC42IiB0cmFuc2Zvcm09InJvdGF0ZSgxNSAyNiAxNCkiLz48L2c+PC9nPjwvc3ZnPg==") 18 18, pointer;

	/* Warm palette. Deliberately no pure #000 anywhere: plum-ink instead of
	   black, cream instead of neutral gray, soft tan instead of hard rules --
	   pure black strokes and mid-grays are what made this read as a form. */
	--paccc-ink: #33203A;
	--paccc-ink-soft: #6B5570;
	--paccc-purple: #622467;
	--paccc-gold: #FECA38;
	--paccc-gold-pale: #FDE5A6;
	--paccc-gold-deep: #edad00;
	--paccc-cream: #FBF5EC;
	--paccc-line: #E3D5C8;
	--paccc-card-shadow: 0 2px 10px rgba(51, 32, 58, 0.07);
	--paccc-paw-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzYyMjQ2NyI+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMjMiIHJ4PSI5IiByeT0iNy41Ii8+PGVsbGlwc2UgY3g9IjYiIGN5PSIxNCIgcng9IjMuNiIgcnk9IjQuNiIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1IDYgMTQpIi8+PGVsbGlwc2UgY3g9IjExLjUiIGN5PSI3LjMiIHJ4PSIzLjgiIHJ5PSI0LjgiIHRyYW5zZm9ybT0icm90YXRlKC02IDExLjUgNy4zKSIvPjxlbGxpcHNlIGN4PSIyMC41IiBjeT0iNy4zIiByeD0iMy44IiByeT0iNC44IiB0cmFuc2Zvcm09InJvdGF0ZSg2IDIwLjUgNy4zKSIvPjxlbGxpcHNlIGN4PSIyNiIgY3k9IjE0IiByeD0iMy42IiByeT0iNC42IiB0cmFuc2Zvcm09InJvdGF0ZSgxNSAyNiAxNCkiLz48L3N2Zz4=");
}

.paccc-directory-wrap {
	max-width: 960px;
	margin: 0 auto;
	color: var(--paccc-ink);
}

/* State landing heading -- shown when the directory is scoped to one state
   (via /paccc-certified-members/{state}/ or the live filter). Hidden on the full
   directory so the default view is unchanged. */
.paccc-state-heading {
	margin: 0 0 1.25rem;
	text-align: center;
	color: var(--paccc-purple);
}

.paccc-state-heading[hidden] {
	display: none;
}

/* Prominent intro line. Borrows the theme's heading font (published at runtime
   by frontend.js as --paccc-heading-font / --paccc-heading-weight, so it tracks
   any later theme font change) rather than the body font. */
.paccc-state-intro {
	margin: -0.25rem 0 1.5rem;
	text-align: center;
	color: var(--paccc-ink);
	font-family: var(--paccc-heading-font, var(--wp--preset--font-family--heading, inherit));
	font-weight: var(--paccc-heading-weight, 600);
	font-size: 1.25em;
	line-height: 1.3;
}

.paccc-state-intro[hidden] {
	display: none;
}

/* Crawlable "Browse by state" links -- primary discovery path for the
   per-state URLs, and a handy footer index for visitors. */
.paccc-state-links {
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.35rem;
	background: var(--paccc-cream);
	border-radius: 16px;
}

.paccc-state-links-heading {
	margin: 0 0 0.85rem;
	font-size: 1em;
	color: var(--paccc-purple);
}

.paccc-state-links-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.35rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.paccc-state-links-list a {
	color: var(--paccc-purple);
	text-decoration: none;
}

.paccc-state-links-list a:hover,
.paccc-state-links-list a:focus-visible {
	text-decoration: underline;
}

.paccc-state-links-count {
	color: var(--paccc-ink-soft);
	font-size: 0.85em;
}

/* Map (jsVectorMap fills its container; container defines the size) */
.paccc-map {
	width: 100%;
	aspect-ratio: 1.6 / 1;
	min-height: 260px;
	margin: 0 auto 2rem;
	background: var(--paccc-cream);
	border-radius: 16px;
}

/* Offshore Northeast state names render just outside the drawn map bounds */
.paccc-map,
.paccc-map svg {
	overflow: visible;
}

/* The map needs width for 51 full state names to stay legible, so it's
   hidden at 1000px and below. The dropdown remains the filter on small
   screens. */
@media (max-width: 1000px) {
	.paccc-map {
		display: none;
	}
}

/* Panel holding the state filter, member list, and pagination.
   White background so the section reads independently of the theme's
   page background. */
.paccc-directory-panel {
	background: #fff;
	padding: 24px;
	border: 1px solid var(--paccc-line);
	border-radius: 16px;
	box-shadow: var(--paccc-card-shadow);
}

/* State filter dropdown */
.paccc-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.75rem;
	padding-bottom: 8px;
}

.paccc-controls label {
	font-weight: 700;
}

.paccc-controls select {
	font: inherit;
	color: var(--paccc-ink);
	background: #fff;
	border: 1px solid var(--paccc-line);
	border-radius: 10px;
	padding: 0.5rem 0.7rem;
	max-width: 100%;
}

/* Link to the selected state's own page, beside the dropdown. Filled purple
   pill so it reads as the primary action once a state is chosen. */
.paccc-view-state {
	display: inline-flex;
	align-items: center;
	background: var(--paccc-purple);
	color: var(--paccc-gold-pale);
	border: 1px solid var(--paccc-purple);
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font-size: 0.9em;
	text-decoration: none;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paccc-view-state:hover,
.paccc-view-state:focus-visible {
	background: var(--paccc-gold);
	color: var(--paccc-purple);
	text-decoration: none;
}

.paccc-view-state[hidden] {
	display: none;
}

/* A-Z name filter: sits on its own line under the state dropdown. Buttons
   wrap on narrow screens and are sized as comfortable touch targets. */
.paccc-alpha-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0 0 0.75rem;
	padding-bottom: 8px;
}

.paccc-alpha-label {
	font-weight: 700;
	margin-right: 0.25rem;
}

.paccc-alpha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	font: inherit;
	font-size: 0.9em;
	line-height: 1;
	color: var(--paccc-ink);
	background: var(--paccc-cream);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.paccc-alpha:hover,
.paccc-alpha:focus-visible {
	background: var(--paccc-gold-pale);
	transform: translateY(-1px);
}

/* Active letter: filled purple, and it keeps that fill on hover so the
   selection stays obvious. */
.paccc-alpha-current,
.paccc-alpha-current:hover,
.paccc-alpha-current:focus-visible {
	background: var(--paccc-purple);
	color: #fff;
	border-color: var(--paccc-purple);
}

.paccc-status {
	margin: 0 0 1rem;
	font-size: 0.95em;
	padding-bottom: 8px;
}

/* Country chips — non-US members, shown under the map as a visual cue and a
   quick country-level filter (the dropdown handles province/city drill-down). */
.paccc-country-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 1.25rem;
	max-width: 760px;
	text-align: center;
}

.paccc-country-chips-label {
	font-weight: 600;
	color: var(--paccc-ink-soft);
	font-size: 0.95em;
}

.paccc-country-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border: 1px solid var(--paccc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--paccc-purple);
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.paccc-country-chip:hover,
.paccc-country-chip:focus-visible {
	background: var(--paccc-gold-pale);
	border-color: var(--paccc-gold-deep);
}

.paccc-country-chip-current,
.paccc-country-chip-current:hover,
.paccc-country-chip-current:focus-visible {
	background: var(--paccc-purple);
	border-color: var(--paccc-purple);
	color: #fff;
}

.paccc-country-chip-count {
	opacity: 0.75;
	font-weight: 500;
}

/* Per-country province map, lazy-loaded under the chips when a country with a
   map is selected. Capped at 600px wide and centered in the content column. */
.paccc-country-map {
	width: min(600px, 96vw);
	margin: 0 auto 1.25rem;
}

.paccc-country-map[hidden] {
	display: none;
}

/* The container's aspect-ratio is set inline per country (from the map's
   dimensions) so it has a real height for jsVectorMap to size into. */
.paccc-country-map .jvm-container,
.paccc-country-map svg {
	width: 100%;
	height: 100%;
}

/* Pagination */
.paccc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 1.25rem 0 0;
}

.paccc-pagination[hidden] {
	display: none;
}

.paccc-page {
	font: inherit;
	font-size: 0.9em;
	color: var(--paccc-ink);
	background: #fff;
	border: 1px solid var(--paccc-line);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	cursor: var(--paccc-cursor-paw);
}

.paccc-page:hover:not(:disabled),
.paccc-page:focus-visible:not(:disabled) {
	background: var(--paccc-gold-pale);
}

.paccc-page:disabled {
	opacity: 0.4;
	cursor: default;
}

.paccc-page-current {
	background: var(--paccc-gold);
	font-weight: 700;
}

.paccc-page-gap {
	padding: 0 0.15rem;
}

/* Member list */
.paccc-members {
	border-top: 1px solid var(--paccc-line);
	padding: 10px;
}

.paccc-member {
	border-bottom: 1px solid var(--paccc-line);
	padding: 5px 0;
	transition: background-color 0.15s ease;
}

.paccc-member-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.9rem 0;
}

/* Semantically a heading (document outline / SEO), styled as body text so
   the visual design is unchanged. */
.paccc-member-line {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.paccc-view-toggle {
	flex-shrink: 0;
	background: #fff;
	color: var(--paccc-ink);
	border: 1px solid var(--paccc-line);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.9em;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease;
}

.paccc-view-toggle::after {
	content: "\25BE"; /* ▾ */
	display: inline-block;
	margin-left: 0.45em;
	transition: transform 0.15s ease;
}

/* Actions row sits under the certification pills (not floated to the far
   right of the row), so the controls stay visually tied to their member. */
.paccc-member-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.85rem;
}

/* "View Member Page" -- the primary action -- as a filled purple button, so
   it reads as more prominent than the white "Quick view" toggle beside it. */
.paccc-member-page-btn {
	display: inline-flex;
	align-items: center;
	background: var(--paccc-purple);
	color: var(--paccc-gold-pale);
	border: 1px solid var(--paccc-purple);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.9em;
	text-decoration: none;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paccc-member-page-btn:hover,
.paccc-member-page-btn:focus-visible {
	background: var(--paccc-gold);
	color: var(--paccc-purple);
	text-decoration: none;
}

.paccc-view-toggle:hover,
.paccc-view-toggle:focus-visible {
	background: var(--paccc-gold-pale);
}

.paccc-open .paccc-view-toggle::after {
	transform: rotate(180deg);
}

/* Expanded panel */
.paccc-member-panel {
	padding: 0 0 1.4rem;
}

.paccc-member-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4rem 1.6rem;
	margin: 0 0 1rem;
}

.paccc-member-details > div {
	display: contents;
}

.paccc-member-details dt {
	font-weight: 700;
}

.paccc-member-details dd {
	margin: 0;
}

/* Optional website / email links in the detail list. Word-break so a long
   URL can't overflow the grid column on narrow screens. */
.paccc-member-contact {
	color: var(--paccc-purple);
	word-break: break-word;
}

/* "Get Directions" sits under the address lines */
.paccc-directions {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--paccc-purple);
	font-size: 0.9em;
	font-weight: 700;
	text-decoration: underline;
}

.paccc-directions:hover,
.paccc-directions:focus-visible {
	background: var(--paccc-gold-pale);
	text-decoration: none;
}

/* Most themes define this, but don't count on it. */
.paccc-directory-wrap .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.paccc-map-embed iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

/* Row highlighted when reached via a unique link */
.paccc-linked {
	background: var(--paccc-gold-pale);
	transition: background-color 0.6s ease;
}

.paccc-empty {
	padding: 2.25rem 0;
	text-align: center;
	color: var(--paccc-ink-soft);
}

/* A paw instead of a blank shrug -- the empty state is the moment the page
   most needs a little warmth. */
.paccc-empty::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin: 0 auto 0.7rem;
	background: var(--paccc-paw-icon) center / contain no-repeat;
	opacity: 0.4;
}

@media (max-width: 600px) {
	.paccc-member-summary {
		flex-direction: row;
		align-items: flex-start;
	}

	.paccc-member-avatar {
		width: 38px;
		height: 38px;
		margin-right: 0.7rem;
		font-size: 1em;
	}

	.paccc-view-toggle {
		align-self: flex-start;
	}

	.paccc-member-details {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}

	.paccc-member-details dt {
		margin-top: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.paccc-view-toggle,
	.paccc-view-toggle::after,
	.paccc-linked,
	.paccc-member-page-btn,
	.paccc-view-state,
	.paccc-alpha,
	.paccc-back-link a,
	.paccc-member-single .paccc-directions {
		transition: none;
	}
}

/* ---- Single member page ---- */
.paccc-member-single {
	margin-top: 1.5rem;
}

/* White card grouping the credentials, details, and map -- mirrors
   .paccc-directory-panel so the profile reads as one designed unit instead
   of bare text on the theme's page background. */
.paccc-member-card {
	background: #fff;
	padding: 32px;
	border: 1px solid var(--paccc-line);
	border-radius: 16px;
	box-shadow: var(--paccc-card-shadow);
}

/* Member logo / photo -- capped at 100px tall, natural width, wherever it
   appears (single page, quick-view panel, directory row). */
.paccc-member-image {
	margin: 0 0 1.5rem;
}

.paccc-member-image img,
.paccc-member-panel-image img,
.paccc-member-logo img {
	display: block;
	max-height: 100px;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.paccc-member-panel-image {
	margin: 0 0 1rem;
}

/* Directory-row logo (shown only when the member has an image). */
.paccc-member-logo {
	flex: 0 0 auto;
	margin-right: 0.9rem;
}

/* Certification pills sit in the value column of their own "Certification(s)"
   row, matching every other detail row. Reset the list's default top margin so
   the pills align with the label beside them. */
.paccc-member-card .paccc-member-details .paccc-cert-list {
	margin: 0;
}

.paccc-member-card .paccc-member-details {
	margin-bottom: 1.5rem;
}

/* Field labels take the theme's heading font and the brand purple; the values
   sit in a softer dark gray, so each row reads as a label/value pair rather
   than a wall of uniform body text.

   The --paccc-heading-* values are set at runtime by assets/single.js: CSS
   can't inherit another element's styles, so the script measures a real
   heading and publishes its family/weight/style/spacing/transform here. Size
   is intentionally not copied -- these are small labels, not section
   headings. Each var() has a fallback for when the script hasn't run. */
.paccc-member-single .paccc-member-details dt {
	font-family: var(--paccc-heading-font, var(--wp--preset--font-family--heading, inherit));
	font-weight: var(--paccc-heading-weight, 700);
	font-style: var(--paccc-heading-style, normal);
	letter-spacing: var(--paccc-heading-spacing, normal);
	text-transform: var(--paccc-heading-transform, none);
	color: #622467;
}

.paccc-member-single .paccc-member-details dd {
	color: #444444;
}

/* Breathing room under each label/value pair. The row wrappers are
   display:contents (so dt/dd land directly on the grid), which means there's
   no row box to pad -- the spacing goes on the cells themselves. */
.paccc-member-single .paccc-member-details dt,
.paccc-member-single .paccc-member-details dd {
	padding-bottom: 10px;
}

/* Business name treated as the card's headline: hide the label and promote the
   value to a full-width, brand-purple heading with a gold accent bar. The high-
   specificity selector is required so the zeroed vertical padding beats the
   generic dd padding-bottom above; margin (outside the border) keeps the gap
   below without lengthening the accent bar, and line-height keeps the bar to
   the text height. */
/* The card's heading row: the member's (person's) name. .paccc-member-heading-row
   is the current class; .paccc-member-business-name-row is kept on the same row
   so any existing custom CSS aimed at the old heading keeps working. */
.paccc-member-heading-row dt,
.paccc-member-business-name-row dt {
	display: none;
}

.paccc-member-single .paccc-member-details .paccc-member-heading-row dd,
.paccc-member-single .paccc-member-details .paccc-member-business-name-row dd {
	grid-column: 1 / -1;
	font-family: var(--paccc-heading-font, inherit);
	font-size: 1.7em;
	font-weight: 700;
	line-height: 1.1;
	color: var(--paccc-purple);
	border-left: 4px solid #FECA38;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0.6rem;
	margin-bottom: 1.5rem;
}

/* Member Number is an internal registry ID, not something a public visitor
   needs first -- de-emphasized rather than removed, since it's still useful
   for e.g. a member cross-checking their own certificate. */
.paccc-member-number-row dt,
.paccc-member-number-row dd {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--paccc-ink-soft);
}

.paccc-map-label {
	margin: 0 0 0.5rem;
	font-size: 1em;
	font-weight: 700;
	color: var(--paccc-purple);
}

.paccc-member-card .paccc-map-embed {
	border: 1px solid var(--paccc-line);
	border-radius: 12px;
	overflow: hidden;
}

/* "Get Directions" as a real button (matching pagination/view-toggle
   chrome) rather than an easy-to-miss inline text link, since it's the
   primary action a visitor takes on this page. Sits on its own line below
   the address (a <br> in the markup forces the break, since inline-flex
   doesn't wrap to a new line on its own). */
.paccc-member-single .paccc-directions {
	display: inline-flex;
	align-items: center;
	margin-top: 0.6rem;
	padding: 0.4rem 0.9rem;
	background: var(--paccc-purple);
	color: var(--paccc-gold-pale);
	border: 1px solid var(--paccc-purple);
	border-radius: 999px;
	text-decoration: none;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paccc-member-single .paccc-directions:hover,
.paccc-member-single .paccc-directions:focus-visible {
	background: var(--paccc-gold);
	color: #fff;
}

/* Breadcrumb above the card, so the way back is the first thing on the page
   rather than something to find below a tall map embed. */

.paccc-back-link a {
	background: #7d2d84;
	color: #fff;
}

.paccc-back-link a:hover {
	background: #FDE5A6;
	color: #622467;
}
.paccc-back-link {
	margin: 0 0 1.3rem;
	font-size: 0.9em;
	color: var(--paccc-ink-soft);
}

/* White button with a gold outline, matching the plugin's button system. */
.paccc-back-link a {
	display: inline-flex;
	align-items: center;
	background: #7d2d84;
	color: #fff;
	border: 1px solid #DB8B49;
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paccc-back-link a:hover,
.paccc-back-link a:focus-visible {
	background: var(--paccc-gold-pale);
	color: #7d2d84;
	text-decoration: none;
}

/* Business name links to the member's own page */
.paccc-member-line a {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
}

.paccc-member-line a:hover,
.paccc-member-line a:focus-visible {
	background: var(--paccc-accent, #ffe399);
}

.paccc-member-permalink {
	margin: 0.75rem 0 0;
	font-size: 0.9em;
}

/* ---- Single member page container ---- */
.paccc-single-wrap {
	width: 1334px;
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ---- Map hint ---- */
.paccc-map-hint {
	margin: -1rem 0 1.5rem;
	font-size: 0.9em;
	text-align: center;
	color: var(--paccc-ink-soft);
}

.paccc-map-hint::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 0.45em;
	vertical-align: -0.28em;
	background: var(--paccc-paw-icon) center / contain no-repeat;
	opacity: 0.55;
}

@media (max-width: 1000px) {
	.paccc-map-hint { display: none; }
}

/* ---- Certification legend ---- */
/* Certification key — a white credential card, not a gray notice. */
.paccc-legend {
	margin: 0 0 1.5rem;
	padding: 1.15rem 1.35rem;
	background: var(--paccc-cream);
	border: 1px solid var(--paccc-line);
	border-radius: 16px;
}

.paccc-legend-heading {
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--paccc-purple);
}

/* Horizontal band: three credentials read as a set, not a to-do list. */
.paccc-legend-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.75rem 1.25rem;
	margin: 0;
	padding: 0;
}

.paccc-legend-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.paccc-legend-term {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 400;
}

.paccc-legend-def {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.45;
	color: var(--paccc-ink-soft);
}

/* ---- Member rows ---- */
.paccc-member-summary {
	align-items: flex-start;
	padding: 1.15rem 0;
}

.paccc-member-identity { flex: 1 1 auto; }

/* Monogram avatar: a list of names reads as data; giving each row a "face"
   is the single cheapest way to make it feel like people, not records. */
.paccc-member-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-right: 0.9rem;
	background: var(--paccc-purple);
	color: var(--paccc-gold-pale);
	border-radius: 999px;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	user-select: none;
}

/* When a member has an image it fills the avatar circle instead of the initial. */
.paccc-member-avatar-img {
	padding: 0;
	overflow: hidden;
	background: none;
}

.paccc-member-avatar-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
}

.paccc-member:hover { background: var(--paccc-cream); }

.paccc-member-name {
	margin: 0 0 0.2rem;
	padding: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

.paccc-member-name a {
	color: var(--paccc-purple);
	text-decoration: none;
}

.paccc-member-name a:hover,
.paccc-member-name a:focus-visible {
	text-decoration: underline;
}

.paccc-member-meta {
	margin: 0;
	font-size: 0.92em;
	color: var(--paccc-ink-soft);
}

.paccc-member-person + .paccc-member-location::before {
	content: "\00b7";
	margin: 0 0.45em;
}

/* Certification pills */
.paccc-cert-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

/* One pill definition, used by both the member rows and the legend, so the
   key visually matches the badges it explains. Gold fill with deep-purple
   text: gold is the directory's "interactive / data" color (member states on
   the map), so the credentials read in that same language. */
.paccc-cert,
.paccc-cert-badge {
	display: inline-block;
	margin: 0;
	padding: 0.12rem 0.5rem;
	background: #FDE5A6;
	color: #622467;
	border: 1px solid #edad00;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.paccc-legend .paccc-cert-badge {
	font-size: 0.72em;
}

.paccc-cert abbr {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	cursor: help;
}

/* CEU pills on the single member page. Outlined purple (vs. the gold-filled
   certification pills) so continuing-education units read as a distinct kind
   of credential. Names are free text, so they wrap rather than stay on one
   line. */
.paccc-ceu-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.paccc-ceu {
	display: inline-block;
	padding: 0.12rem 0.6rem;
	background: #fff;
	color: var(--paccc-purple);
	border: 1px solid var(--paccc-purple);
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.5;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
	.paccc-controls { display: block; }

	.paccc-controls select {
		width: 100%;
		min-height: 44px;
		margin-top: 0.35rem;
	}

	.paccc-view-toggle {
		min-height: 44px;
		margin-top: 0.6rem;
	}
}

/* ---- Member portal ---- */
.paccc-portal {
	background: #fff;
	padding: 24px;
	border: 1px solid var(--paccc-line);
	border-radius: 16px;
	box-shadow: var(--paccc-card-shadow);
	color: var(--paccc-ink);
}

.paccc-portal-image {
	margin: 0 0 1.1rem;
}

.paccc-portal-imglabel {
	display: block;
	font-weight: 700;
	color: var(--paccc-purple);
	margin-bottom: 0.35rem;
}

.paccc-portal-image-preview {
	display: block;
	max-height: 100px;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-bottom: 0.6rem;
	border-radius: 8px;
}

.paccc-portal-imgdelete {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9em;
}

.paccc-portal-notice-error {
	background: #fdecec;
}

.paccc-portal-heading {
	margin: 0 0 1rem;
	color: var(--paccc-purple);
}

.paccc-portal-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--paccc-line);
	font-size: 0.95em;
}

.paccc-portal-bar a {
	color: var(--paccc-purple);
}

.paccc-portal-notice {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	background: var(--paccc-gold-pale);
	border-radius: 8px;
	color: var(--paccc-ink);
}

.paccc-portal-field {
	margin: 0 0 0.85rem;
}

.paccc-portal-field label {
	display: block;
	font-weight: 700;
	color: var(--paccc-purple);
	margin-bottom: 0.25rem;
}

.paccc-portal-field input,
.paccc-portal-field select {
	width: 100%;
	max-width: 460px;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--paccc-line);
	border-radius: 8px;
	font: inherit;
	color: var(--paccc-ink);
	background: #fff;
}

.paccc-portal-readonly {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: var(--paccc-cream);
	border-radius: 12px;
}

.paccc-portal-readonly p {
	margin: 0 0 0.4rem;
}

.paccc-portal-rolabel {
	display: inline-block;
	min-width: 140px;
	font-weight: 700;
	color: var(--paccc-purple);
}

.paccc-portal-note {
	margin-top: 0.75rem;
	font-size: 0.9em;
	color: var(--paccc-ink-soft);
}

.paccc-portal-submit {
	display: inline-flex;
	align-items: center;
	background: var(--paccc-purple);
	color: var(--paccc-gold-pale);
	border: 1px solid var(--paccc-purple);
	border-radius: 999px;
	padding: 0.5rem 1.3rem;
	font: inherit;
	font-weight: 600;
	cursor: var(--paccc-cursor-paw);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.paccc-portal-submit:hover,
.paccc-portal-submit:focus-visible {
	background: var(--paccc-gold);
	color: var(--paccc-purple);
}