/*
 * Meta Map Puglia — il foglio di stile della mappa.
 *
 * REGOLE DELLA CASA, tutte per lo stesso motivo: questa roba vive dentro un
 * contenitore di Elementor, in mezzo al CSS di un tema che non conosciamo.
 *
 * 1. NIENTE unita' di viewport. Niente 100vw, niente 100vh: la larghezza di
 *    riferimento e' quella del contenitore, non quella della finestra. Una vw
 *    dentro una colonna stretta manda la nuvoletta fuori pagina e fa comparire
 *    la barra di scorrimento orizzontale su tutto il sito.
 * 2. NIENTE position:fixed e nessun elemento stampato fuori dal contenitore.
 * 3. Tutto sotto .mmp. Nessun selettore che possa toccare qualcos'altro.
 * 4. !important solo dove i temi picchiano davvero, cioe' sui <button>:
 *    bordo, sfondo, padding, line-height, min-height. Sul resto no.
 * 5. I default stanno sulla classe .mmp. I controlli del widget Elementor
 *    scrivono su "{{WRAPPER}} .mmp", che e' piu' specifico e quindi vince
 *    sempre — senza bisogno di !important e senza dipendere dall'ordine dei
 *    fogli di stile in <head>.
 */

.mmp {
	--mmp-max: 750px;
	--mmp-land: #e9e4f2;
	--mmp-land-line: #dad1ea;
	--mmp-land-line-w: 2.5;
	--mmp-pin: #513b6e;
	--mmp-pin-hover: #402657;
	--mmp-pin-ring: #ffffff;
	--mmp-pin-size: 20px;
	/* Quanto puo' rimpicciolire il puntino quando la mappa e' piccola, in
	   percentuale della larghezza della mappa (non della finestra). Vale come
	   TETTO insieme a --mmp-pin-size: vince il piu' piccolo dei due. Senza,
	   dentro una colonna stretta di Elementor si vedono dodici bottoni da 16px
	   su una Puglia da 289px, e il Salento diventa un grappolo. */
	--mmp-pin-fluid: 4cqw;
	/* La misura che il puntino ha DAVVERO. Qui e' quella fissa; il blocco
	   @supports piu' sotto la ricalcola col tetto fluido. Tutto il resto
	   (l'area sensibile, la distanza della nuvoletta) guarda questa. */
	--mmp-pin-real: var(--mmp-pin-size);
	/* Stesso discorso per l'anello: su un puntino da 12px un anello da 3
	   lascerebbe un nocciolo da 6, e il colore della sede sparisce. */
	--mmp-pin-ring-real: min(var(--mmp-pin-ring-w), calc(var(--mmp-pin-real) / 5));
	--mmp-pin-ring-w: 3px;
	--mmp-pin-halo: rgba(81, 59, 110, .16);
	--mmp-bubble-bg: #ffffff;
	--mmp-bubble-line: rgba(64, 38, 87, .10);
	--mmp-bubble-radius: 12px;
	--mmp-bubble-max: 260px;
	--mmp-bubble-shadow: rgba(38, 24, 58, .18);
	--mmp-name-ink: #402657;
	--mmp-name-size: 15px;
	--mmp-city-ink: #513b6e;
	--mmp-city-size: 12px;
	--mmp-address-ink: #6b5c7d;
	--mmp-address-size: 12px;
	--mmp-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Di quanto il JavaScript sposta la nuvoletta per non farla uscire dal
	   contenitore. Sta qui a 0 cosi' il calcolo funziona anche senza JS. */
	--mmp-shift: 0px;

	display: block;
	width: 100%;
	/* Dentro un contenitore in direzione «riga» un elemento flessibile non
	   scende sotto la propria larghezza minima di contenuto: senza questo
	   sfonderebbe la colonna invece di rimpicciolire. */
	min-width: 0;
	font-family: var(--mmp-font);

	/* LO SMUSSO SI EREDITA.
	 *
	   Il raggio degli angoli quasi sempre lo mette Elementor sul widget
	   (Avanzate → Bordo → Raggio), insieme a uno sfondo. Ma il disegno e' un
	   SVG, e un SVG taglia il proprio contenuto su un RETTANGOLO: dove la
	   terra arriva al bordo, l'angolo resta vivo e sborda dallo sfondo
	   smussato — «non tutti gli angoli si smussano», e sono proprio quelli
	   dove c'e' la terra invece del mare.
	 *
	   border-radius:inherit porta lo smusso del genitore giu' per la catena
	   fino all'SVG, che con overflow:hidden ci taglia dentro. Funziona da
	   solo, senza nessuna manopola: si mette il raggio dove si e' sempre
	   messo e la mappa lo segue. */
	border-radius: inherit;
}

.mmp--left  .mmp__wrap { margin-inline: 0 auto; }
.mmp--right .mmp__wrap { margin-inline: auto 0; }

.mmp__wrap {
	position: relative;

	/* LARGHEZZA VERA, NON UNA PERCENTUALE. Sembra un dettaglio ed e' invece il
	   motivo per cui il 02/09/2026 la mappa su metamedical.it/contatti non si
	   vedeva affatto: era larga zero.
	 *
	   Il contenitore di Elementor che la ospita e' in colonna con «allinea:
	   inizio», e in quel caso il widget NON viene stirato — prende la
	   larghezza del proprio contenuto. Ma un contenuto fatto solo di
	   percentuali (width:100%) al calcolo del contenuto contribuisce ZERO:
	   il widget diventa largo 0, e con lui il riquadro e il disegno. Nessun
	   errore, nessun avviso, semplicemente il nulla.
	 *
	   Con una larghezza in pixel c'e' qualcosa da misurare, e max-width:100%
	   la fa comunque rimpicciolire quando la colonna e' piu' stretta. Le due
	   proprieta' vanno lette insieme: e' quella coppia a reggere sia il caso
	   normale sia quello che si stringe al contenuto. */
	width: var(--mmp-max);
	max-width: 100%;
	margin-inline: auto;
	border-radius: inherit;
	/* Serve a --mmp-pin-fluid: le cqw sono percentuali di QUESTO riquadro. */
	container-type: inline-size;
	/* NIENTE aspect-ratio qui. L'altezza la porta l'SVG, che sta nel flusso e
	   si dimensiona col proprio viewBox: un riquadro che prende l'altezza da
	   un aspect-ratio resta alto zero appena quel valore non si capisce, e la
	   mappa sparisce senza un errore. */
}

.mmp__map {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/* I due insieme, non uno solo: il raggio disegna l'angolo, overflow lo
	   fa TAGLIARE anche al contenuto dell'SVG. */
	border-radius: inherit;
	/* Tagliato, non sbordato: con lo zoom la finestra (il viewBox) si stringe
	   e quello che resta fuori deve sparire. E' l'SVG a tagliarlo, quindi il
	   riquadro puo' restare senza overflow:hidden — che taglierebbe anche le
	   nuvolette, che devono poter uscire. */
	overflow: hidden;
}

.mmp__land {
	fill: var(--mmp-land);
	stroke: var(--mmp-land-line);
	stroke-width: var(--mmp-land-line-w);
	stroke-linejoin: round;
}

/* Quando il raggio si sceglie dal pannello del widget invece che da Elementor.
   Sta sul riquadro, e l'SVG se lo eredita come sopra. */
.mmp--radius .mmp__wrap {
	border-radius: var(--mmp-radius);
}

/* === I punti === */

/* Il contenitore del punto e' grande zero e sta esattamente sulla coordinata:
   il pallino e la nuvoletta gli crescono intorno. Fatto cosi', il :hover sul
   contenitore copre tutti e due — e' il modo piu' semplice di rispettare il
   criterio 1.4.13 (la nuvoletta non deve sparire se ci porti sopra il mouse). */
.mmp__point {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	width: 0;
	height: 0;
}

.mmp__point:hover,
.mmp__point:focus-within,
.mmp__point.is-open {
	z-index: 9;
}

.mmp__pin {
	position: absolute;
	left: 0;
	top: 0;
	display: block !important;
	width: var(--mmp-pin-real) !important;
	height: var(--mmp-pin-real) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: var(--mmp-pin-ring-real) solid var(--mmp-pin-ring) !important;
	border-radius: 999px !important;
	background: var(--mmp-pin) !important;
	box-shadow: none !important;
	line-height: 0 !important;
	font-size: 0 !important;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

/* Il puntino rimpicciolisce con la mappa. In un blocco @supports a parte
   cosi' un browser che non conosce le container query si tiene la misura
   fissa di sopra invece di ritrovarsi una larghezza che non sa calcolare. */
@supports (container-type: inline-size) {
	/* Si dichiara sul PUNTO e non sul riquadro: le unita' cqw non si possono
	   usare sull'elemento che fa da contenitore alle query — li' dentro non
	   avrebbero un contenitore da misurare. */
	.mmp__point {
		--mmp-pin-real: min(var(--mmp-pin-size), var(--mmp-pin-fluid));
	}
}

/* L'area sensibile e' 44x44 anche se il pallino ne misura 16: e' il minimo del
   criterio 2.5.8 (Target Size), e sul telefono e' la differenza fra centrare
   la sede e centrare il mare. Sta su uno pseudo-elemento e non sul pulsante
   perche' il pallino deve restare piccolo a vedersi. */
.mmp__pin::before {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	content: "";
	transform: translate(-50%, -50%);
}

.mmp__point:hover .mmp__pin,
.mmp__pin:focus-visible {
	background: var(--mmp-pin-hover) !important;
	box-shadow: 0 0 0 8px var(--mmp-pin-halo) !important;
	transform: translate(-50%, -50%) scale(1.12);
}

.mmp__pin:focus-visible {
	outline: 2px solid var(--mmp-pin-hover) !important;
	outline-offset: 4px;
}

/* Il tocco sul telefono: nessun :hover, comanda la classe messa dal JS. */
.mmp__point.is-open .mmp__pin {
	background: var(--mmp-pin-hover) !important;
	box-shadow: 0 0 0 8px var(--mmp-pin-halo) !important;
	transform: translate(-50%, -50%) scale(1.12);
}

/* === La nuvoletta === */

.mmp__bubble {
	position: absolute;
	left: 0;
	bottom: calc(var(--mmp-pin-real) / 2 + 14px);
	z-index: 3;
	box-sizing: border-box;
	width: max-content;
	max-width: var(--mmp-bubble-max);
	padding: 11px 13px;
	border: 1px solid var(--mmp-bubble-line);
	border-radius: var(--mmp-bubble-radius);
	background: var(--mmp-bubble-bg);
	box-shadow: 0 14px 34px -12px var(--mmp-bubble-shadow);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(calc(-50% + var(--mmp-shift)), 4px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.mmp__point:hover .mmp__bubble,
.mmp__point:focus-within .mmp__bubble,
.mmp__point.is-open .mmp__bubble {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(calc(-50% + var(--mmp-shift)), 0);
	transition-delay: 0s;
}

/* Ripiego senza JavaScript per i punti attaccati al bordo (Gargano, Leuca,
   Tremiti): la nuvoletta si aggancia col fianco invece che col centro. Appena
   il JS parte misura i pixel veri e scrive --mmp-shift, che e' piu' preciso. */
.mmp__point--left  .mmp__bubble { transform: translate(calc(-14px + var(--mmp-shift)), 4px); }
.mmp__point--right .mmp__bubble { transform: translate(calc(-100% + 14px + var(--mmp-shift)), 4px); }
.mmp__point--left:hover  .mmp__bubble,
.mmp__point--left:focus-within  .mmp__bubble,
.mmp__point--left.is-open  .mmp__bubble { transform: translate(calc(-14px + var(--mmp-shift)), 0); }
.mmp__point--right:hover .mmp__bubble,
.mmp__point--right:focus-within .mmp__bubble,
.mmp__point--right.is-open .mmp__bubble { transform: translate(calc(-100% + 14px + var(--mmp-shift)), 0); }

/* Punto troppo in alto: la nuvoletta va sotto, altrimenti esce dal riquadro. */
.mmp__point--below .mmp__bubble {
	bottom: auto;
	top: calc(var(--mmp-pin-real) / 2 + 14px);
	transform: translate(calc(-50% + var(--mmp-shift)), -4px);
}
.mmp__point--below.mmp__point--left  .mmp__bubble { transform: translate(calc(-14px + var(--mmp-shift)), -4px); }
.mmp__point--below.mmp__point--right .mmp__bubble { transform: translate(calc(-100% + 14px + var(--mmp-shift)), -4px); }
.mmp__point--below:hover .mmp__bubble,
.mmp__point--below:focus-within .mmp__bubble,
.mmp__point--below.is-open .mmp__bubble { transform: translate(calc(-50% + var(--mmp-shift)), 0); }
.mmp__point--below.mmp__point--left:hover .mmp__bubble,
.mmp__point--below.mmp__point--left:focus-within .mmp__bubble,
.mmp__point--below.mmp__point--left.is-open .mmp__bubble { transform: translate(calc(-14px + var(--mmp-shift)), 0); }
.mmp__point--below.mmp__point--right:hover .mmp__bubble,
.mmp__point--below.mmp__point--right:focus-within .mmp__bubble,
.mmp__point--below.mmp__point--right.is-open .mmp__bubble { transform: translate(calc(-100% + 14px + var(--mmp-shift)), 0); }

/* La codina. Sta su uno pseudo-elemento suo (e non sul ::after della
   nuvoletta) perche' deve poter scorrere in orizzontale quando il JS sposta la
   nuvoletta: la punta resta puntata sul pallino anche se il corpo si e'
   spostato per non uscire dal contenitore. */
.mmp__tail {
	position: absolute;
	/* --mmp-tail lo scrive il JavaScript in pixel, gia' bloccato dentro i
	   bordi della nuvoletta; il calc e' il valore prima che il JS parta. */
	left: var(--mmp-tail, calc(50% - var(--mmp-shift)));
	bottom: -6px;
	width: 12px;
	height: 12px;
	border-right: 1px solid var(--mmp-bubble-line);
	border-bottom: 1px solid var(--mmp-bubble-line);
	background: var(--mmp-bubble-bg);
	transform: translateX(-50%) rotate(45deg);
}
.mmp__point--left  .mmp__tail { left: calc(14px - var(--mmp-shift)); }
.mmp__point--right .mmp__tail { left: calc(100% - 14px - var(--mmp-shift)); }
.mmp__point--below .mmp__tail {
	bottom: auto;
	top: -6px;
	border: 0;
	border-left: 1px solid var(--mmp-bubble-line);
	border-top: 1px solid var(--mmp-bubble-line);
}

/* === Il contenuto della nuvoletta === */

.mmp__sede + .mmp__sede {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--mmp-bubble-line);
}

.mmp__name,
.mmp__city,
.mmp__address {
	display: block;
	font-family: var(--mmp-font);
}

.mmp__name {
	margin: 0 0 3px;
	color: var(--mmp-name-ink);
	font-size: var(--mmp-name-size);
	font-weight: 700;
	line-height: 1.2;
}

.mmp__city {
	color: var(--mmp-city-ink);
	font-size: var(--mmp-city-size);
	font-weight: 600;
	line-height: 1.35;
}

.mmp__address {
	margin-top: 1px;
	color: var(--mmp-address-ink);
	font-size: var(--mmp-address-size);
	font-weight: 400;
	line-height: 1.35;
}

/* Testo che leggono solo i lettori di schermo: il nome del centro dentro il
   pulsante (che altrimenti sarebbe un pulsante senza nome) e la descrizione
   agganciata con aria-describedby. Deve restare nell'albero di accessibilita'
   anche a nuvoletta chiusa, quindi si nasconde col ritaglio e non con
   display:none o visibility:hidden. */
.mmp-sr-only {
	position: absolute !important;
	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;
}

@media (prefers-reduced-motion: reduce) {
	.mmp__pin,
	.mmp__bubble {
		transition-duration: .01ms;
	}
	.mmp__point:hover .mmp__pin,
	.mmp__pin:focus-visible,
	.mmp__point.is-open .mmp__pin {
		transform: translate(-50%, -50%);
	}
}


/* ==========================================================================
   LA MAPPA VERA (MapLibre)

   Il riquadro e' lo stesso di sempre; dentro ci sta la tela di MapLibre e,
   sotto, la sagoma della Puglia che fa da RIPIEGO finche' la mappa non e'
   arrivata (e per sempre, se non arriva mai: v. assets/meta-map-live.js).
   ========================================================================== */

.mmp__live {
	position: relative;
	width: var(--mmp-max);
	max-width: 100%;
	height: var(--mmp-h, 460px);
	margin-inline: auto;
	overflow: hidden;
	border-radius: inherit;
}

.mmp--radius .mmp__live {
	border-radius: var(--mmp-radius);
}

/* Il ripiego riempie esattamente il riquadro: la finestra del disegno e' gia'
   calcolata sulla stessa forma (v. mmp_view()), quindi combaciano. */
.mmp__live > .mmp__wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	margin: 0;
}

.mmp__live > .mmp__wrap .mmp__map {
	width: 100%;
	height: 100%;
}

/* Il segnaposto di MapLibre: il pallino e' lo stesso .mmp__pin del disegno,
   ma qui a posizionarlo e' MapLibre, quindi il nostro left/top non serve. */
.mmp__mk {
	position: relative;
	width: 0;
	height: 0;
}

.mmp__mk .mmp__pin {
	left: 0;
	top: 0;
}

/* La nuvoletta dentro il popup di MapLibre: il contenuto e' lo stesso markup
   del disegno, il guscio di MapLibre lo spogliamo. Ad aprire, chiudere e
   girare la nuvoletta quando non c'e' spazio ci pensa MapLibre. */
.mmp-pop .maplibregl-popup-content {
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.mmp-pop .maplibregl-popup-tip { display: none; }

.mmp-pop .mmp__bubble {
	position: static;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: none;
}

.mmp-pop .mmp__tail { display: none; }

/* L'elenco che leggono solo i lettori di schermo. Una mappa WebGL per loro non
   esiste: senza questo, l'informazione «dove sono le sedi» sparirebbe. */
.mmp__elenco-sr { margin: 0; padding: 0; list-style: none; }