/**
 * EAAP Member Map
 *
 * Le variabili sono dichiarate sul contenitore e non su :root per non
 * interferire con il resto del tema.
 */

.eaap-map {
	--eaap-map-member: #438094;
	--eaap-map-member-hover: #2f6376;
	--eaap-map-other: #e9edf0;
	--eaap-map-border: #ffffff;
	--eaap-map-border-other: #d8dfe4;
	--eaap-map-focus: #12333f;
	--eaap-map-panel-bg: #ffffff;
	--eaap-map-panel-text: #2a3b42;

	position: relative;
	margin: 0 auto;
	max-width: 1100px;
}

.eaap-map__title {
	margin: 0 0 0.5em;
	text-align: center;
}

.eaap-map__stage {
	position: relative;
}

.eaap-map__figure svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Aree della mappa ------------------------------------------------------- */

.eaap-map__area {
	fill: var(--eaap-map-other);
	stroke: var(--eaap-map-border-other);
	stroke-width: 0.6;
	stroke-linejoin: round;
	pointer-events: none;
}

.eaap-map__area--member {
	fill: var(--eaap-map-member);
	stroke: var(--eaap-map-border);
	stroke-width: 0.8;
	pointer-events: auto;
	cursor: pointer;
	transition: fill 120ms ease-out;
}

.eaap-map__area--member:hover,
.eaap-map__area--member.is-active {
	fill: var(--eaap-map-member-hover);
}

/* Il contorno di default del browser scompare dietro i tracciati adiacenti:
   si usa lo stroke, che segue la forma del paese. */
.eaap-map__area--member:focus {
	outline: none;
}

.eaap-map__area--member:focus-visible {
	stroke: var(--eaap-map-focus);
	stroke-width: 2.5;
	paint-order: stroke;
}

/* Tooltip ---------------------------------------------------------------- */

.eaap-map__tooltip {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	max-width: 16em;
	padding: 0.4em 0.65em;
	border-radius: 3px;
	background: rgba(18, 51, 63, 0.94);
	color: #fff;
	font-size: 0.82rem;
	line-height: 1.35;
	pointer-events: none;
	opacity: 0;
	transition: opacity 120ms ease-out;
}

.eaap-map__tooltip.is-visible {
	opacity: 1;
}

.eaap-map__tooltip b {
	display: block;
	font-weight: 700;
}

/* Balloon ---------------------------------------------------------------- */

.eaap-map__balloon {
	position: absolute;
	z-index: 10;
	width: min(20em, 80%);
	padding: 1em 2.2em 1em 1.1em;
	border-radius: 4px;
	background: var(--eaap-map-panel-bg);
	color: var(--eaap-map-panel-text);
	box-shadow: 0 2px 18px rgba(18, 51, 63, 0.25);
}

.eaap-map__balloon[hidden] {
	display: none;
}

.eaap-map__close {
	position: absolute;
	top: 0.15em;
	right: 0.3em;
	padding: 0.1em 0.3em;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.eaap-map__close:hover {
	color: var(--eaap-map-member);
}

.eaap-map__balloon-body p {
	margin: 0 0 0.4em;
}

.eaap-map__balloon-body .eaap-map__country {
	font-size: 1.05rem;
	font-weight: 700;
}

.eaap-map__balloon-body .eaap-map__org {
	font-style: italic;
	line-height: 1.4;
}

.eaap-map__balloon-body .eaap-map__link {
	margin-bottom: 0;
}

.eaap-map__notice {
	margin-top: 0.6em;
	text-align: center;
	font-style: italic;
}

/* Schermi stretti: il balloon diventa una barra sotto la mappa, perché
   sovrapposto coprirebbe gran parte della cartina. */
@media (max-width: 600px) {
	.eaap-map__balloon {
		position: static;
		width: auto;
		margin-top: 0.8em;
		box-shadow: 0 1px 6px rgba(18, 51, 63, 0.18);
	}

	.eaap-map__tooltip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eaap-map__area--member,
	.eaap-map__tooltip {
		transition: none;
	}
}