/**
 * GCF Country Maps — frontend styles
 *
 * Covers:
 *  - .gcf-interactive-map  block wrapper
 *  - .gcf-world-labels     SVG/HTML leader-line overlay (world archive view)
 *  - .gcf-map-tooltip      hover tooltip
 */

/* ── Map block wrapper ────────────────────────────────────────────────────── */
.gcf-interactive-map {
	position: relative;
	width: 100%;
}

.gcf-interactive-map__canvas {
	width: 100%;
	display: block;
}

/* ── World-view label overlay ─────────────────────────────────────────────── */

.gcf-world-labels {
	/* set by JS; declared here for documentation */
}

/*
 * Each label group: a country name + jurisdiction list.
 * .gcf-world-label--ltr  → label anchored to its LEFT  edge (country to the right of line)
 * .gcf-world-label--rtl  → label anchored to its RIGHT edge (country to the left  of line)
 */
.gcf-world-label {
	pointer-events: auto;
	background: rgba(18, 24, 40, 0.82);
	border-radius: 4px;
	padding: 5px 8px;
	min-width: 90px;
	max-width: 160px;
	line-height: 1.35;
	backdrop-filter: blur(2px);
}

.gcf-world-label--ltr {
	border-left: 2px solid #58d0e8;
}

.gcf-world-label--rtl {
	border-right: 2px solid #58d0e8;
	text-align: right;
}

/* Country name — uppercase, lime, bold */
.gcf-world-label__country {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #c8e850;
	text-decoration: none;
	margin-bottom: 3px;
}
.gcf-world-label__country:hover {
	color: #58d0e8;
	text-decoration: underline;
}

/* Jurisdiction list */
.gcf-world-label__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcf-world-label__list li {
	margin: 0;
	padding: 0;
}

.gcf-world-label__list a {
	display: block;
	font-size: 10px;
	color: #d8e4ee;
	text-decoration: none;
	padding: 1px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gcf-world-label__list a:hover {
	color: #58d0e8;
	text-decoration: underline;
}

/* GCF Founding Member star */
.gcf-world-label__star {
	color: #f068a8;
	font-size: 9px;
	margin-left: 2px;
	vertical-align: middle;
}

/* ── Mobile fallback list (world view, <640px) ────────────────────────────
 *
 * Leader-line labels are hidden on narrow viewports because they can't fit.
 * Below the map we render a plain linked list of every partner nation and
 * its member jurisdictions, so mobile users still get the same navigation
 * affordance the label overlay provides on desktop.
 */

.gcf-world-mobile-list {
	display: none;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: #121828;
	border: 1px solid #2a3450;
	border-radius: 6px;
	color: #d8e4ee;
	font-size: 14px;
	line-height: 1.5;
}

.gcf-world-mobile-list__country + .gcf-world-mobile-list__country {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #2a3450;
}

.gcf-world-mobile-list__country-heading {
	margin: 0 0 0.25rem 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gcf-world-mobile-list__country-heading a {
	color: #c8e850;
	text-decoration: none;
}

.gcf-world-mobile-list__country-heading a:hover,
.gcf-world-mobile-list__country-heading a:focus-visible {
	color: #58d0e8;
	text-decoration: underline;
}

.gcf-world-mobile-list__jurisdictions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gcf-world-mobile-list__jurisdictions li {
	margin: 0;
	padding: 2px 0;
}

.gcf-world-mobile-list__jurisdictions a {
	color: #d8e4ee;
	text-decoration: none;
	display: inline-block;
	padding: 4px 0;
}

.gcf-world-mobile-list__jurisdictions a:hover,
.gcf-world-mobile-list__jurisdictions a:focus-visible {
	color: #58d0e8;
	text-decoration: underline;
}

/* Hide labels on narrow viewports (phones); the below-map list takes over */
@media (max-width: 640px) {
	.gcf-world-labels,
	.gcf-world-labels + svg {
		display: none;
	}

	.gcf-world-mobile-list {
		display: block;
	}
}

/* ── Archive-page map section ─────────────────────────────────────────────── */

.gcf-archive-map {
	margin-bottom: 2.5rem;
}

.gcf-archive-map .gcf-interactive-map__canvas {
	border-radius: 6px;
	overflow: hidden;
}

/* ── Layer toggle button ──────────────────────────────────────────────────── */
/*
 * Docked via MapLibre's IControl API into the top-left corner, vertically
 * aligned with the top of the zoom button stack on the opposite side.
 * The wrapper intentionally omits .maplibregl-ctrl-group so the white pill
 * background is not inherited — the button itself carries the dark styling.
 */

.gcf-map-toggle-ctrl {
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.gcf-map-toggle {
	display: block;
	width: auto;
	min-width: 118px;
	background: rgba(18, 24, 40, 0.88);
	border: 1px solid #2a3450;
	color: #c8e850;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	backdrop-filter: blur(4px);
	text-align: center;
	border-radius: 4px;
}

.gcf-map-toggle:hover {
	background: rgba(26, 34, 56, 0.95);
	border-color: #58d0e8;
	color: #58d0e8;
}

.gcf-map-toggle--active {
	border-color: #c8e850;
}

.gcf-map-toggle:not(.gcf-map-toggle--active) {
	color: #8899aa;
	border-color: #2a3450;
}

/* ── Legend footer: Founding Member key ──────────────────────────────────── */

.gcf-interactive-map__legend-key {
	margin: 0.75rem 0 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid #2a3450;
	font-size: 12px;
	color: #d8e4ee;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.gcf-interactive-map__legend-star {
	color: #f068a8;
	font-size: 14px;
	line-height: 1;
}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */

.gcf-map-tooltip {
	position: absolute;
	z-index: 10;
	background: #1a2238;
	border: 1px solid #58d0e8;
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	max-width: 200px;
}