/**
 * Member States and National Nodes hub ([bbmri_national_nodes], see
 * includes/national-nodes.php and assets/js/national-nodes.js).
 *
 * Without JS (.bbmri-nodes without .is-enhanced) the map is hidden and every
 * node profile is listed under the country index. With JS the map and the
 * panel sit side by side and the panel shows one profile at a time.
 */

.bbmri-nodes {
	--bb-nodes-member: var(--bb-navy);
	--bb-nodes-member-hover: #1d4f8f;
	--bb-nodes-observer: #98a6cc;
	--bb-nodes-observer-hover: #8193c2;
	--bb-nodes-land: #d9dee6;
	--bb-nodes-sea: var(--bb-surface-alt);

	display: flex;
	flex-direction: column;
	gap: var(--bb-space-4);
	margin-block: var(--bb-space-4);
	color: var(--bb-text);
}

/* ---------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------ */

.bbmri-nodes__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bb-space-3);
}

.bbmri-nodes:not(.is-enhanced) .bbmri-nodes__index {
	order: -1;
}

.bbmri-nodes:not(.is-enhanced) .bbmri-nodes__map,
.bbmri-nodes__map[data-state="error"] {
	display: none;
}

@media (min-width: 1000px) {
	.bbmri-nodes.is-enhanced .bbmri-nodes__stage:has(.bbmri-nodes__map:not([data-state="error"])) {
		grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
		align-items: stretch;
	}

	/* The panel takes the map's height and scrolls inside it. */
	.bbmri-nodes.is-enhanced .bbmri-nodes__map:not([data-state="error"]) + .bbmri-nodes__panel {
		contain: size;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ---------------------------------------------------------------------------
 * Map
 * ------------------------------------------------------------------------ */

.bbmri-nodes__map {
	position: relative;
	overflow: hidden;
	border-radius: var(--bb-radius-lg);
	background: var(--bb-nodes-sea);
	aspect-ratio: 960 / 820;
}

.bbmri-nodes__map[data-state="loading"] {
	background: linear-gradient(100deg, var(--bb-nodes-sea) 30%, var(--bb-surface) 50%, var(--bb-nodes-sea) 70%) 0 0 / 300% 100%;
	animation: bbmri-nodes-shimmer 1.4s linear infinite;
}

@keyframes bbmri-nodes-shimmer {
	to {
		background-position: -150% 0;
	}
}

.bbmri-nodes .bbmri-map__country.is-member {
	fill: var(--bb-nodes-member);
}

.bbmri-nodes .bbmri-map__country.is-observer {
	fill: var(--bb-nodes-observer);
}

.bbmri-nodes .bbmri-map__country.is-member:hover {
	fill: var(--bb-nodes-member-hover);
}

.bbmri-nodes .bbmri-map__country.is-observer:hover {
	fill: var(--bb-nodes-observer-hover);
}

.bbmri-nodes .has-selection .bbmri-map__country.is-node:not(.is-selected) {
	opacity: 0.55;
}

.bbmri-nodes__marker:focus-visible {
	stroke: var(--bb-orange);
	stroke-width: 3;
	outline: none;
}

/* Lines from the HQ to each node */
.bbmri-nodes__links line {
	stroke: var(--bb-orange-300);
	stroke-width: 0.8;
	opacity: 0.75;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.bbmri-nodes__links line.is-selected {
	stroke: var(--bb-orange);
	stroke-width: 2;
	opacity: 1;
}

.bbmri-nodes__biobank circle {
	fill: var(--bb-orange-300);
	stroke: #fff;
	stroke-width: 0.6;
	cursor: pointer;
}

.bbmri-nodes__biobank:hover circle {
	fill: var(--bb-orange);
}

/* Outside any National Node (Directory node EXT) */
.bbmri-nodes__biobank.is-external circle {
	fill: var(--bb-green);
	stroke: var(--bb-navy-900);
}

/* Hovered in the panel list */
.bbmri-nodes__biobank.is-marked circle {
	fill: var(--bb-orange);
	stroke: var(--bb-navy-900);
	stroke-width: 1.6;
	r: 6;
}

.bbmri-nodes__marker {
	cursor: pointer;
	outline: none;
}

.bbmri-nodes__marker rect {
	fill: var(--bb-orange);
	stroke: #fff;
	stroke-width: 1.5;
	transition: transform var(--bb-dur) var(--bb-ease);
}

.bbmri-nodes__marker:hover rect,
.bbmri-nodes__marker.is-selected rect {
	transform: scale(1.35);
}

.bbmri-nodes__marker.is-hq {
	cursor: default;
}

.bbmri-nodes__ring {
	fill: rgba(152, 166, 204, 0.55);
	stroke: var(--bb-nodes-observer);
	stroke-width: 2;
}

.bbmri-nodes__marker text {
	fill: var(--bb-ink);
	font: 700 15px var(--bb-font-text);
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 3px;
}

/* Legend */
.bbmri-nodes__legend {
	position: absolute;
	left: var(--bb-space-2);
	top: var(--bb-space-2);
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0.75rem 0.9rem;
	list-style: none;
	border-radius: var(--bb-radius-sm);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--bb-shadow-sm);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.bbmri-nodes__legend li,
.bbmri-nodes__legend label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.bbmri-nodes__legend label {
	cursor: pointer;
}

.bbmri-nodes__legend input {
	margin: 0;
	accent-color: var(--bb-navy);
}

.bbmri-nodes__swatch {
	flex: none;
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
}

.bbmri-nodes__swatch.is-member {
	background: var(--bb-nodes-member);
}

.bbmri-nodes__swatch.is-observer {
	background: var(--bb-nodes-observer);
}

.bbmri-nodes__swatch.is-hq {
	width: 11px;
	height: 11px;
	margin-inline: 1.5px;
	border-radius: 0;
	background: var(--bb-orange);
}

.bbmri-nodes__swatch.is-biobank {
	width: 9px;
	height: 9px;
	margin-inline: 2.5px;
	border-radius: 50%;
	background: var(--bb-orange-300);
}

.bbmri-nodes__swatch.is-external {
	width: 7px;
	height: 7px;
	margin-inline: 3.5px;
	border-radius: 50%;
	background: var(--bb-green);
	box-shadow: 0 0 0 0.6px var(--bb-navy-900);
}

@media (max-width: 640px) {
	.bbmri-nodes__legend {
		position: static;
		grid-template-columns: repeat(2, auto);
		justify-content: start;
		column-gap: var(--bb-space-2);
		margin-top: var(--bb-space-1);
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.bbmri-nodes__map {
		overflow: visible;
		aspect-ratio: auto;
		background: none;
	}

	.bbmri-nodes__canvas {
		overflow: hidden;
		border-radius: var(--bb-radius);
		background: var(--bb-nodes-sea);
		aspect-ratio: 960 / 820;
	}
}

/* ---------------------------------------------------------------------------
 * Panel
 * ------------------------------------------------------------------------ */

.bbmri-nodes__panel {
	min-width: 0;
	padding: var(--bb-space-3);
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-lg);
	background: var(--bb-surface);
	box-shadow: var(--bb-shadow-sm);
	scroll-margin-top: 120px;
}

.bbmri-nodes__panel :focus:not(:focus-visible) {
	outline: none;
}

.bbmri-nodes__panel-nav {
	position: sticky;
	top: calc(-1 * var(--bb-space-3));
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: calc(-1 * var(--bb-space-3)) calc(-1 * var(--bb-space-3)) var(--bb-space-2);
	padding: 0.6rem var(--bb-space-3);
	border-bottom: 1px solid var(--bb-line);
	background: rgba(255, 255, 255, 0.96);
}

.bbmri-nodes__panel-nav[hidden] {
	display: none;
}

.bbmri-nodes__panel-nav button {
	min-height: 36px;
	padding: 0.3rem 0.7rem;
	border: 1px solid transparent;
	border-radius: var(--bb-radius-pill);
	background: none;
	color: var(--bb-navy);
	font: 600 var(--bb-text-sm) var(--bb-font-text);
	cursor: pointer;
}

.bbmri-nodes__panel-nav button:hover {
	background: var(--bb-navy-tint);
}

.bbmri-nodes__panel-nav button:focus-visible {
	outline: 2px solid var(--bb-orange);
}

.bbmri-nodes__panel-nav span button {
	min-width: 36px;
	font-size: 1.25rem;
	line-height: 1;
}

.bbmri-nodes__eyebrow {
	margin: 0 0 var(--bb-space-1);
	color: var(--bb-green-800);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bbmri-nodes__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: var(--bb-space-2);
	margin: 0 0 var(--bb-space-3);
}

.bbmri-nodes__stats div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end; /* reversed axis: keeps the numbers at the top of the row */
	padding: var(--bb-space-2);
	border-radius: var(--bb-radius);
	background: var(--bb-navy-tint);
}

.bbmri-nodes__stats dt {
	color: var(--bb-muted);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.bbmri-nodes__stats dd {
	margin: 0;
	color: var(--bb-navy);
	font-family: var(--bb-font-display);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
}

.bbmri-nodes__hint {
	color: var(--bb-muted);
}

/* One profile at a time once JS runs */
.bbmri-nodes.is-enhanced .bbmri-node {
	display: none;
}

.bbmri-nodes.is-enhanced .bbmri-node.is-active {
	display: block;
	animation: bbmri-nodes-in 240ms var(--bb-ease);
}

@keyframes bbmri-nodes-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbmri-nodes.is-enhanced .bbmri-node.is-active,
	.bbmri-nodes__map[data-state="loading"] {
		animation: none;
	}
}

.bbmri-nodes:not(.is-enhanced) .bbmri-node {
	padding-top: var(--bb-space-4);
	margin-top: var(--bb-space-4);
	border-top: 1px solid var(--bb-line);
}

/* ---------------------------------------------------------------------------
 * Node profile
 * ------------------------------------------------------------------------ */

.bbmri-node {
	font-size: var(--bb-text-sm);
	line-height: var(--bb-leading);
}

.bbmri-node p {
	margin: 0 0 0.85em;
}

.bbmri-node__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bb-space-2);
	margin-bottom: var(--bb-space-2);
}

.bbmri-node__name {
	margin: 0 0 0.35rem;
	color: var(--bb-navy);
	font-family: var(--bb-font-display);
	font-size: var(--bb-h3);
	line-height: 1.15;
	scroll-margin-top: 140px;
}

.bbmri-node__name:focus {
	outline: none;
}

.bbmri-node .bbmri-node__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0;
	font-size: 0.8125rem;
}

.bbmri-node__badge {
	padding: 0.15rem 0.6rem;
	border-radius: var(--bb-radius-pill);
	font-weight: 700;
}

.bbmri-node__badge.is-member {
	background: var(--bb-navy);
	color: #fff;
}

.bbmri-node__badge.is-observer {
	background: #e6eaf5;
	color: #34477a;
}

.bbmri-node__count {
	color: var(--bb-muted);
}

.bbmri-node__logo {
	width: auto;
	max-width: 170px;
	height: 46px;
	object-fit: contain;
}

.bbmri-node__section {
	margin: var(--bb-space-2) 0;
	border-top: 1px solid var(--bb-line);
}

.bbmri-node__section summary {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.85rem 0 0.6rem;
	color: var(--bb-navy);
	font-size: 1.0625rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.bbmri-node__section summary::-webkit-details-marker {
	display: none;
}

.bbmri-node__section summary::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--bb-dur) var(--bb-ease);
}

.bbmri-node__section[open] summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.bbmri-node__section summary:focus-visible {
	outline: 2px solid var(--bb-orange);
	outline-offset: 2px;
}

.bbmri-node__kicker {
	color: var(--bb-green-800);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bbmri-node__top3 {
	margin: 0 0 var(--bb-space-1);
	padding: 0;
	list-style: none;
	counter-reset: bbmri-top3;
}

.bbmri-node__top3 li {
	position: relative;
	margin: 0 0 0.85rem;
	padding-left: 2.25rem;
	counter-increment: bbmri-top3;
}

.bbmri-node__top3 li::before {
	content: counter(bbmri-top3);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--bb-green);
	color: var(--bb-navy-900);
	font-size: 0.8125rem;
	font-weight: 700;
}

.bbmri-node__top3 strong {
	color: var(--bb-ink);
}

.bbmri-node .bbmri-node__note {
	color: var(--bb-muted);
	font-size: 0.8125rem;
	font-style: italic;
}

.bbmri-node__subhead {
	margin: var(--bb-space-3) 0 var(--bb-space-2);
	padding-top: 0.85rem;
	border-top: 1px solid var(--bb-line);
	color: var(--bb-navy);
	font-family: var(--bb-font-text);
	font-size: 1.0625rem;
	font-weight: 700;
}

.bbmri-node__contacts {
	display: grid;
	gap: var(--bb-space-2);
	margin: 0 0 var(--bb-space-3);
	padding: 0;
	list-style: none;
}

.bbmri-node__contact {
	display: flex;
	align-items: flex-start;
	gap: var(--bb-space-2);
	margin: 0;
}

.bbmri-node__contact img {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
}

.bbmri-node__contact p {
	margin: 0 0 0.3rem;
	overflow-wrap: anywhere;
}

.bbmri-node .bbmri-node__more {
	margin: 0;
	font-weight: 700;
}

.bbmri-node__more a {
	color: var(--bb-navy);
}

/* Biobanks of the node, from the Directory */
.bbmri-node__biobank-count {
	padding: 0.05rem 0.5rem;
	border-radius: var(--bb-radius-pill);
	background: var(--bb-navy-tint);
	font-size: 0.8125rem;
	font-weight: 600;
}

.bbmri-node__biobank-filter {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-sm);
	font: inherit;
	font-size: var(--bb-text-sm);
}

.bbmri-node__biobank-filter:focus-visible {
	outline: 2px solid var(--bb-orange);
	outline-offset: 1px;
}

.bbmri-node__biobank-list {
	margin: 0 0 var(--bb-space-1);
	padding: 0;
	list-style: none;
	font-size: var(--bb-text-sm);
	line-height: 1.35;
}

.bbmri-node__biobank-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	padding: 0.4rem 0.5rem;
	border-radius: var(--bb-radius-sm);
}

.bbmri-node__biobank-list li[hidden] {
	display: none;
}

.bbmri-node__biobank-list li:hover,
.bbmri-node__biobank-list li.is-marked {
	background: var(--bb-navy-tint);
}

.bbmri-node__biobank-list a {
	color: var(--bb-navy);
}

.bbmri-node__biobank-flag {
	color: var(--bb-muted);
	font-size: 0.75rem;
}

.bbmri-node .bbmri-node__biobank-empty {
	color: var(--bb-muted);
	font-size: var(--bb-text-sm);
}

.bbmri-node .bbmri-node__biobank-more {
	margin: 0 0 var(--bb-space-1);
	font-size: var(--bb-text-sm);
}

.bbmri-node__biobank-more a {
	color: var(--bb-navy);
}

/* ---------------------------------------------------------------------------
 * Country index
 * ------------------------------------------------------------------------ */

.bbmri-nodes__index {
	display: grid;
	gap: var(--bb-space-3);
}

@media (min-width: 1000px) {
	.bbmri-nodes__index {
		grid-template-columns: 2.6fr 1fr;
	}

	.bbmri-nodes__group.is-other {
		grid-column: 1 / -1;
	}
}

.bbmri-nodes__group-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--bb-space-1);
	color: var(--bb-navy);
	font-family: var(--bb-font-text);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bbmri-nodes__group-title::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--bb-nodes-member);
}

.bbmri-nodes__group.is-observer .bbmri-nodes__group-title::before {
	background: var(--bb-nodes-observer);
}

.bbmri-nodes__group.is-other .bbmri-nodes__group-title::before {
	background: var(--bb-nodes-land);
}

.bbmri-nodes__group ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbmri-nodes__group li {
	margin: 0;
}

.bbmri-nodes__group a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius-pill);
	background: var(--bb-surface);
	color: var(--bb-navy);
	font-size: var(--bb-text-sm);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--bb-dur) var(--bb-ease), border-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}

.bbmri-nodes__group a:hover {
	border-color: var(--bb-navy);
	background: var(--bb-navy-tint);
}

.bbmri-nodes__group a:focus-visible {
	outline: 2px solid var(--bb-orange);
	outline-offset: 2px;
}

.bbmri-nodes__group a[aria-current] {
	border-color: var(--bb-navy);
	background: var(--bb-navy);
	color: #fff;
}

.bbmri-nodes__group.is-observer a[aria-current] {
	border-color: #34477a;
	background: #34477a;
}