/*
 * SDG Importer & Filter: frontend styles.
 *
 * Fonts and colours come from the theme unless overridden in Projects > Settings, which sets the
 * custom properties below on :root. The values after the commas are the design defaults.
 */

.pfb {
	font-family: var(--pfb-font, inherit);
	color: var(--pfb-text, #1d1c1a);
	box-sizing: border-box;
}

.pfb *,
.pfb *::before,
.pfb *::after {
	box-sizing: inherit;
}

/* Themes (Divi included) style bare headings and lists inside content areas. Reset them here so the
   components look the same everywhere; every component sets its own sizes below. */
.pfb h2,
.pfb h3 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
}

/* !important: Divi sets list styles with an ID selector (#left-area ul), which nothing else can beat. */
.pfb ul[class],
.pfb ol[class] {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pfb ul[class] > li,
.pfb ol[class] > li {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.pfb p[class] {
	padding: 0 !important;
}

/* Icons are inlined SVG; they take the text colour and scale with the font size. */
.pfb .pfb-icon {
	display: inline-block;
	height: 1.5em;
	width: auto;
	flex: none;
	vertical-align: middle;
}

.pfb .pfb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------------------------
 * Project list: filters on the left, two columns of cards, numbered pagination.
 * ------------------------------------------------------------------------------------------- */

.pfb-projects {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	font-size: 16px;
	line-height: 1.4;
}

.pfb-projects a {
	color: inherit;
	text-decoration: none;
}

/* Filters */

.pfb-filters {
	border: 1px solid var(--pfb-border, #1d1c1a);
	padding: 8px 8px 20px;
	background: transparent;
}

.pfb-filters__panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pfb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pfb-field > label,
.pfb-field__label {
	font-weight: 700;
	text-transform: uppercase;
}

.pfb-field input[type="search"],
.pfb-field select,
.pfb-multi > summary {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--pfb-border, #1d1c1a);
	border-radius: 0;
	background-color: #fff;
	color: inherit;
	font: inherit;
	font-weight: 400;
	box-shadow: none;
}

.pfb-field select,
.pfb-multi > summary {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%231d1c1a' stroke-width='1.5'%3E%3Cpath d='M6 1v11M2 8l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 14px;
	padding-right: 32px;
}

.pfb-multi > summary {
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
}

.pfb-multi > summary::-webkit-details-marker {
	display: none;
}

.pfb-multi {
	position: relative;
}

.pfb-multi__list {
	box-sizing: border-box;
	max-height: 260px;
	overflow-y: auto;
	margin-top: -1px;
	padding: 8px 12px;
	border: 1px solid var(--pfb-border, #1d1c1a);
	background: #fff;
}

.pfb-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
	font-weight: 400;
	cursor: pointer;
}

.pfb-check input {
	margin-top: 4px;
}

.pfb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfb-chip {
	display: inline-block;
	padding: 2px 14px;
	border-radius: 14px;
	background: var(--pfb-hover-bg, #cceaff);
	font-size: 0.875em;
	font-weight: 700;
}

.pfb-filters__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
}

.pfb-filters__actions .pfb-button {
	flex: 1 1 100px;
	min-width: 0;
}

.pfb-button {
	display: inline-block;
	min-width: 120px;
	padding: 10px 24px;
	border: 1px solid var(--pfb-button-bg, #1d1c1a);
	border-radius: 0;
	background: var(--pfb-button-bg, #1d1c1a);
	color: #fff !important;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.pfb-button:hover,
.pfb-button:focus-visible {
	background: var(--pfb-accent, #53a2d9);
	border-color: var(--pfb-accent, #53a2d9);
}

.pfb-filters__toggle {
	display: none;
}

/* Cards */

.pfb-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pfb-card {
	margin: 0;
	border: 1px solid var(--pfb-border, #1d1c1a);
	background: transparent;
	transition: background-color 0.15s ease;
}

.pfb-card:hover,
.pfb-card:focus-within {
	background: var(--pfb-hover-bg, #cceaff);
}

.pfb-card__link {
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	padding: 20px;
}

.pfb-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.pfb-card__country,
.pfb-card__year {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pfb-card__year {
	margin-left: auto;
}

.pfb-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--pfb-accent, #53a2d9);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
}

.pfb-card:hover .pfb-card__title,
.pfb-card:focus-within .pfb-card__title {
	color: var(--pfb-text, #1d1c1a);
}

.pfb-card__sdgs {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfb-card__sdg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	white-space: nowrap;
}

.pfb-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--pfb-border, #1d1c1a);
}

.pfb-empty a {
	text-decoration: underline;
}

/* Pagination */

.pfb-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 32px 0 8px;
}

.pfb-pagination__page,
.pfb-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid var(--pfb-border, #1d1c1a);
	font-weight: 700;
	line-height: 1;
}

.pfb-pagination__gap {
	font-weight: 400;
}

.pfb-pagination__page.is-current {
	background: var(--pfb-button-bg, #1d1c1a);
	color: #fff;
}

.pfb-pagination a.pfb-pagination__page:hover,
.pfb-pagination a.pfb-pagination__page:focus-visible {
	background: var(--pfb-hover-bg, #cceaff);
}

.pfb-pagination__prev,
.pfb-pagination__next {
	font-size: 1.5em;
	line-height: 1;
}

/* Narrow screens: one column of cards, smaller type (14 / 16 / 14 in the design). */

@media (max-width: 782px) {
	.pfb-projects {
		grid-template-columns: minmax(0, 1fr);
		font-size: 14px;
	}

	.pfb-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.pfb-card__link {
		padding: 14px;
		gap: 14px;
	}

	.pfb-card__title {
		font-size: 1.15em;
	}

	.pfb-card__sdgs {
		justify-content: flex-start;
		gap: 20px;
	}

	.pfb-filters {
		padding: 0;
	}

	.pfb-filters__panel {
		padding: 12px 8px 16px;
	}
}

/* With live filtering on wide screens the dropdown lists float over the content instead of pushing it
   down. Without JavaScript they expand in place, so an open list never hides the Apply button. */
@media (min-width: 783px) {
	.pfb-js .pfb-multi__list {
		position: absolute;
		z-index: 20;
		left: 0;
		right: 0;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	}
}

/* Live filtering (added by the script): the Apply button is not needed, results dim while loading. */
.pfb-js .pfb-filters__apply {
	display: none;
}

.pfb-js .pfb-filters__actions {
	justify-content: stretch;
}

.pfb-results.is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

@media (max-width: 782px) {
	.pfb-js .pfb-filters__toggle {
		display: block;
		width: 100%;
		margin: 0;
		padding: 10px 12px;
		border: 0;
		border-radius: 0;
		background: var(--pfb-hover-bg, #cceaff);
		color: var(--pfb-text, #1d1c1a);
		font: inherit;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
	}

	.pfb-js .pfb-filters__toggle[aria-expanded="true"] {
		position: relative;
		background: var(--pfb-button-bg, #1d1c1a);
		color: #fff;
	}

	.pfb-js .pfb-filters__toggle[aria-expanded="true"]::after {
		content: "\00d7";
		position: absolute;
		right: 14px;
	}

	.pfb-filters.is-collapsed .pfb-filters__panel {
		display: none;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Developer list: search and letter grid on the left, two columns of cards, numbered pagination.
 * ------------------------------------------------------------------------------------------- */

.pfb-people {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	font-size: 16px;
	line-height: 1.4;
}

.pfb-people a {
	color: inherit;
	text-decoration: none;
}

.pfb-letters {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px 8px;
	margin: 8px 0;
}

.pfb-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border: 1px solid var(--pfb-border, #1d1c1a);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

a.pfb-letter:hover,
a.pfb-letter:focus-visible,
.pfb-letter.is-current {
	background: var(--pfb-hover-bg, #cceaff);
}

.pfb-letter.is-empty {
	opacity: 0.3;
}

.pfb-people__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pfb-person {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--pfb-border, #1d1c1a);
	transition: background-color 0.15s ease;
}

.pfb-person:hover,
.pfb-person:focus-within {
	background: var(--pfb-hover-bg, #cceaff);
}

.pfb-person p,
.pfb-person ul {
	margin: 0;
}

.pfb-person__label {
	font-weight: 700;
	text-transform: uppercase;
}

.pfb-person .pfb-person__label--projects {
	margin-top: 16px;
}

.pfb-person__name {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
}

.pfb-person__projects {
	padding: 0;
	list-style: none;
}

/* Each project stays on one line; the rest is cut with an ellipsis. */
.pfb-person__projects li {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--pfb-accent, #53a2d9);
	font-weight: 700;
}

.pfb-person__projects a:hover,
.pfb-person__projects a:focus-visible {
	color: var(--pfb-text, #1d1c1a);
}

.pfb-person__linkedin {
	display: inline-flex;
	align-self: flex-start;
	margin-top: 16px;
}

.pfb-person__linkedin:hover,
.pfb-person__linkedin:focus-visible {
	color: var(--pfb-accent, #53a2d9);
}

@media (max-width: 782px) {
	.pfb-people {
		grid-template-columns: minmax(0, 1fr);
		font-size: 14px;
	}

	.pfb-people__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.pfb-person {
		padding: 14px;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Project detail: back button, meta row, title, description, goals, link, people.
 * Desktop 16 / 20 / 15, phone 14 / 17 / 14 (design).
 * ------------------------------------------------------------------------------------------- */

.pfb-project {
	display: flex;
	flex-direction: column;
	gap: 28px;
	font-size: 15px;
	line-height: 1.6;
}

.pfb-project a {
	text-decoration: none;
}

.pfb-project p,
.pfb-project ul,
.pfb-project h2,
.pfb-project h3 {
	margin: 0;
}

.pfb-project__back {
	align-self: flex-start;
}

.pfb-project__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 100px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
}

.pfb-project__country,
.pfb-project__year,
.pfb-project__hub {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pfb-project__title {
	color: var(--pfb-accent, #53a2d9);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.pfb-project__description > * {
	margin: 0 0 1em;
}

.pfb-project__description > :last-child {
	margin-bottom: 0;
}

.pfb-project .pfb-project__sdgs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	padding: 0;
	list-style: none;
}

.pfb-project__sdg {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.pfb-project__sdg-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.pfb-project__sdg-number {
	font-weight: 700;
}

.pfb-project__sdg-name {
	font-weight: 400;
}

.pfb-project__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pfb-project .pfb-project__label {
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.pfb-project .pfb-project__links {
	padding: 0;
	list-style: none;
}

.pfb-project__links a {
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.pfb-project__links a:hover,
.pfb-project__links a:focus-visible {
	color: var(--pfb-accent, #53a2d9);
}

.pfb-project .pfb-project__people {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 36px;
	padding: 0;
	list-style: none;
}

.pfb-project__people .pfb-chip {
	display: inline-block;
	padding: 14px 24px;
	border: 1px solid var(--pfb-border, #1d1c1a);
	border-radius: 0;
	background: var(--pfb-hover-bg, #cceaff);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.pfb-project__people a.pfb-chip:hover,
.pfb-project__people a.pfb-chip:focus-visible {
	background: var(--pfb-accent, #53a2d9);
	color: #fff;
}

@media (max-width: 782px) {
	.pfb-project {
		font-size: 14px;
		gap: 22px;
	}

	.pfb-project__meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
		font-size: 14px;
	}

	.pfb-project__title {
		font-size: 17px;
	}

	.pfb-project .pfb-project__sdgs {
		gap: 16px 28px;
	}

	.pfb-project .pfb-project__people {
		flex-direction: column;
		align-items: flex-start;
	}

	.pfb-project__people .pfb-chip {
		padding: 12px 20px;
	}
}