/**
 * YPNE EU Partners Map - Frontend-Styles
 *
 * Alle Farben kommen aus CSS-Variablen, die der Block pro Instanz inline setzt
 * (siehe ypne_eu_map_render() in ypne-eu-partners-map.php).
 *
 * @package YPNE_EU_Partners_Map
 */

.ypne-eu-map {
	--ypne-map-base: #3a4c96;
	--ypne-map-active: #ffde59;
	--ypne-map-stroke: #cdd6ff;
	--ypne-map-stroke-width: 0.8;
	--ypne-map-max-width: 900px;

	box-sizing: border-box;
	display: block;
	margin-inline: auto;
	max-width: var(--ypne-map-max-width);
	overflow: visible;
}

.ypne-eu-map__canvas {
	display: block;
	min-height: 2rem;
}

.ypne-eu-map__canvas svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Laender */
.ypne-eu-map__svg path,
.ypne-eu-map__svg polygon {
	fill: var(--ypne-map-base);
	fill-opacity: 1;
	stroke: var(--ypne-map-stroke);
	stroke-width: var(--ypne-map-stroke-width);
	stroke-linejoin: round;
	pointer-events: auto;
	shape-rendering: geometricPrecision; /* scharfe Kanten */
	transition: filter 200ms ease;
}

/* Laender, in denen wir bereits aktiv sind */
.ypne-eu-map__svg .is-ypne-partner,
.ypne-eu-map__svg .is-ypne-partner path,
.ypne-eu-map__svg .is-ypne-partner polygon {
	fill: var(--ypne-map-active);
}

.ypne-eu-map__svg path:hover,
.ypne-eu-map__svg polygon:hover,
.ypne-eu-map__svg .is-ypne-partner:focus-visible {
	filter: brightness(1.5) saturate(1.3);
	cursor: pointer;
	outline: none;
}

.ypne-eu-map__svg .is-ypne-partner:focus-visible {
	stroke-width: calc(var(--ypne-map-stroke-width) * 3);
}

/* Fallback-/SEO-Liste der Partnerlinks */
.ypne-eu-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	justify-content: center;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: 0.9rem;
}

.ypne-eu-map__legend--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Tooltip (wird ans <body> gehaengt) */
.ypne-eu-map__tooltip {
	position: fixed;
	z-index: 9999;
	display: none;
	opacity: 0;
	padding: 12px 16px;
	min-width: 260px;
	max-width: 320px;
	color: #111;
	font-size: 14px;
	line-height: 1.4;
	white-space: normal;
	overflow: visible;
	pointer-events: none;
	border-radius: 30px 30px 30px 6px;
	box-shadow: 0 20px 30px #00000055;
	transform-origin: left bottom;
	transition: opacity 120ms ease;
}

.ypne-eu-map__tt-title {
	display: block;
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}

.ypne-eu-map__tooltip a {
	display: block;
	width: 100%;
	text-align: center;
}

.ypne-eu-map__tt-logo {
	display: block;
	margin: 0 auto;
	max-height: 72px;
	max-width: 240px;
	object-fit: contain;
	border-radius: 6px;
}

.ypne-eu-map__tt-extra {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	opacity: 0.95;
	color: inherit;
}

/* Mobil: etwas kompakteres Tooltip */
@media (max-width: 480px) {
	.ypne-eu-map__tooltip {
		padding: 10px 12px;
		max-width: 280px;
		min-width: 200px;
		font-size: 13px;
	}

	.ypne-eu-map__tt-title {
		margin-bottom: 8px;
		font-size: 14px;
	}

	.ypne-eu-map__tt-logo {
		max-height: 56px;
		max-width: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ypne-eu-map__svg path,
	.ypne-eu-map__tooltip {
		transition: none;
	}
}