/**
 * Interaktiv klode ("Hvor de tog hen"). Canvas-baseret (D3 orthographic),
 * tegnet i globe.js. Ingen skygger.
 */

.world-globe {
	position: relative;
	margin-top: var(--tc-space-8);
	text-align: center;
}

.world-globe__canvas {
	display: inline-block;
	cursor: grab;
	touch-action: none; /* tillad drag uden at scrolle på touch */
}

.world-globe__canvas:active {
	cursor: grabbing;
}

.world-globe__tip {
	position: absolute;
	transform: translate(-50%, -130%);
	white-space: nowrap;
	background: var(--tc-ink);
	color: var(--tc-white);
	font-size: var(--tc-fs-xs);
	font-weight: 700;
	padding: var(--tc-space-1) var(--tc-space-2);
	border-radius: var(--tc-radius-sm);
	pointer-events: none;
	z-index: 2;
}

/* Hjemme-markør: Middelfart Sparekasse-logoet ved Danmark. Positioneres af globe.js,
   følger kloden og skjules på bagsiden. Ikke klikbar, ingen skygge. Logoet svæver
   OVER punktet (så Danmark stadig ses), og en lille rød prik markerer selve stedet. */
.world-globe__home {
	position: absolute;
	transform: translate(-50%, -100%); /* prikken (nederst) sidder på Danmark */
	pointer-events: none;
	z-index: 2;
	text-align: center;
	will-change: left, top;
}

.world-globe__home[hidden] {
	display: none;
}

.world-globe__home-logo {
	display: block;
	width: 72px;
	height: auto;
	margin: 0 auto 6px; /* luft ned til prikken, så landet ikke dækkes */
}

.world-globe__home-pin {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--tc-red);
	border: 2px solid var(--tc-white);
}

@media (max-width: 560px) {
	.world-globe__home-logo {
		width: 56px;
	}
}

/* Fallback-liste (uden JS / skærmlæser). Skjules når kloden er aktiv. */
.world-globe__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tc-space-2) var(--tc-space-6);
	list-style: none;
	margin: var(--tc-space-6) 0 0;
	padding: 0;
}

.world-globe__list[hidden] {
	display: none;
}

.world-globe__list a {
	color: var(--tc-red);
	font-weight: 700;
	text-decoration: none;
}

.world-globe__list a:hover {
	color: var(--tc-ink);
	text-decoration: none;
}