/* Section
========================================================================== */

.country-profiles-section {
	--country-highlight: var(--navy);
}

html[data-contrast="1"] .country-profiles-section {
	--country-highlight: #006EB6;
}

/*--------------------------------------------------------------
# Items
--------------------------------------------------------------*/

.country-profile-items {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	pointer-events: auto;
	gap: 1px;
}

.country-profile-item a {
	display: block;
	padding: var(--margin-m) min(var(--margin-l), var(--pad-vx));
	color: var(--white);
	background: var(--blue);
}

.country-profile-item a:focus-visible {
	outline-offset: -4px;
	background: var(--country-highlight);
}

.country-profile-item:first-child a {
	border-top-left-radius: var(--radius-small);
	border-top-right-radius: var(--radius-small);
}

.country-profile-item:last-child a {
	border-bottom-right-radius: var(--radius-small);
	border-bottom-left-radius: var(--radius-small);
}


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

.country-profiles-map-container {
	display: none;
	grid-column: span 2;
}


.country-profiles-map svg {
	width: 100%;
	max-height: 100%;
	object-fit: contain;
}

svg .profile-country {
	fill: var(--blue);
	stroke: var(--beige);
	stroke-width: 0.5;
	paint-order: stroke fill;
}

.country-profiles-map svg a {
	outline: none !important;
}


@media screen and (min-width: 64rem) {

	.country-profiles-map-container {
		display: block;
	}

	.country-profiles-map {
		position: sticky !important;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100dvh;
		padding: 1rem 0;
	}
}

@media screen and (min-width: 78rem) {
	.country-profiles-map-container {
		grid-column: span 3;
	}
}


@media screen and (min-width: 34rem) and (max-width: 63.99rem) {
	.country-profile-items {
		grid-column: span 2;
	}
}

@media screen and (min-width: 38rem) and (max-width: 63.99rem) {
	.country-profile-items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.25rem;
	}

	.country-profile-item a {
		border-radius: var(--radius-small);
	}
}


@media (hover: hover) {
	.country-profiles-map svg a:hover .profile-country {
		fill: var(--country-highlight)
	}

	.country-profile-item a:hover {
		background: var(--country-highlight);
	}
}