/* =============================================================================
   META SEARCH — ricerca a tutto schermo (pulsante + overlay)
   Plugin standalone: NON dipende da nessuna variabile del tema.

   Tutto vive sotto .mms-overlay / .mms-trigger e ogni proprietà tipografica è
   dichiarata a mano. Motivo concreto: il sito gira su Elementor + tema Liquid,
   che ha regole globali su h2/h3/a/button/svg (h2 = Oswald 46px con margini).
   Un titolo di sezione senza font-size esplicito diventerebbe alto 46px dentro
   l'overlay.

   UNA CLASSE SOLA NON BASTA — misurato sul sito vero il 06/08/2026, ed è il
   motivo per cui "i colori non funzionano" anche dopo aver sistemato tutto il
   resto. Il Kit globale di Elementor del sito stila OGNI bottone della pagina:

     .elementor-kit-6 button, … { color: var(--e-global-color-primary);
       border-color: …; border-radius: 50em; padding: 10px 20px 10px 10px; }

   È classe + elemento = (0,1,1), e batte qualunque classe singola (0,1,0).
   Risultato misurato sul pulsante nell'header: colore #19402D (il verde del
   tema) invece del bianco, bordo nero al 5% invece del bianco, e un padding
   asimmetrico che spostava la lente di 5px a sinistra nel cerchio. Stessa cosa
   per la X di chiusura, il "cancella tutto", le chip: tutti <button>.

   Da qui la regola di questo file: **ogni elemento che è un <button> o una <a>
   si dichiara a (0,2,0) o più**, mai a classe singola.
     - dentro l'overlay → si antepone l'antenato: `.mms-overlay .mms-chip`
     - il pulsante, che vive nell'header e non ha antenati nostri → si raddoppia
       la classe: `.mms-trigger.mms-trigger` (stesso elemento, specificità 0,2,0;
       è la scorciatoia standard quando non c'è un antenato da usare)
   Attenzione a tenere allineati i blocchi @media: se una regola base sale a
   (0,2,0) e la sua variante per telefono resta a (0,1,0), la variante smette di
   valere in silenzio.

   I colori sono TUTTI variabili CSS: il PHP le stampa in un <style> inline dai
   valori scelti nel widget Elementor.

   PERCHÉ I DEFAULT STANNO SU :root E NON SU .mms-overlay (corretto il
   06/08/2026 — era IL motivo per cui i colori del widget "non si prendevano").
   Una variabile dichiarata su .mms-overlay è dichiarata SULL'ELEMENTO stesso, e
   una dichiarazione sull'elemento batte sempre un valore ereditato, comunque sia
   scritta la regola che lo eredita: la specificità non c'entra, l'ereditarietà
   entra in gioco solo quando sull'elemento non c'è nessuna dichiarazione. Finché
   questo blocco era `.mms-overlay { --mms-card-ink: … }`, QUALUNQUE regola su
   :root — comprese quelle che Elementor genera dai `selectors` del widget —
   veniva scavalcata in silenzio: il valore c'era, sull'<html>, ma l'overlay non
   lo vedeva mai. Con i default su :root l'overlay li EREDITA, quindi una
   dichiarazione più mirata (v. sotto) può davvero sostituirli.

   L'ordine di forza voluto, dal più debole al più forte:
     1. :root qui sotto                         → i default di fabbrica
     2. html .mms-overlay dal widget Elementor  → anteprima viva nell'editor
     3. html .mms-overlay stampato in wp_footer → la garanzia sul sito pubblicato
   2 e 3 hanno la stessa specificità (0,1,1): vince 3 perché arriva dopo nel
   documento. Nell'editor di Elementor il n.3 non si stampa apposta, altrimenti
   congelerebbe l'anteprima sui valori dell'ultimo caricamento.

   Il DEFAULT è navy, come l'header sopra l'hero. La variante chiara esiste in
   .mms-overlay--light. La tavolozza è misurata sul sito vero (04/08/2026):
     #262857 navy · #402657 prugna · #E5E6FF lavanda chiara · #C8B5E5 lavanda
     #FAF8FF bianco lavanda · #69727D grigio testo · ombra navy 8px 25px .06
============================================================================= */

:root {
	/* Fondo: rgba GIÀ COMPOSTO, non un colore + un'opacità da fondere in CSS.
	   color-mix() è supportato ma non viene dipinto da tutti i motori
	   (verificato: il fondo restava trasparente e l'overlay si leggeva sopra la
	   pagina). Colore e opacità restano due campi separati in bacheca — è il PHP
	   a comporli in rgba, dove non può sbagliare. */
	--mms-backdrop: rgba(27, 29, 63, .96);
	--mms-blur: 18px;

	/* Vetro del guscio: chiusura, "cancella tutto", bordo delle chip al
	   passaggio. Resta scuro-trasparente qui: questi elementi stanno DIRETTAMENTE
	   sul fondo navy, non su una scheda bianca. */
	--mms-card: rgba(255, 255, 255, .06);
	--mms-card-line: rgba(255, 255, 255, .12);
	--mms-card-bg-on: rgba(255, 255, 255, .11);
	--mms-card-line-on: rgba(200, 181, 229, .55);

	/* LA SCHEDA (rev. 01/09/2026, secondo disegno — card.svg). Un foglio bianco
	   e basta: a dividere "quello che si legge" da "quello che si usa" è una
	   riga grigia, non più una fascia colorata. Restano questi colori in
	   entrambi i preset — la scheda è un'isola chiara sopra il fondo, mai un
	   vetro scuro.
	   I default qui devono restare uguali a mms_get_defaults()['colors'] in
	   meta-search.php: sono gli stessi valori scritti due volte, e servono
	   entrambi (il CSS regge anche senza il <style> del footer). */
	--mms-card-surface: #ffffff;
	--mms-card-surface-line: rgba(64, 38, 87, 0);
	--mms-card-surface-on: #ffffff;
	--mms-card-surface-line-on: rgba(64, 38, 87, 0);
	/* La riga sotto la descrizione e i filetti fra una sede e l'altra: stesso
	   grigio, perché fanno lo stesso mestiere. */
	--mms-card-rule: #e1e1e1;
	--mms-card-ink: #402657;
	/* Nome e descrizione hanno lo stesso colore: li distinguono taglia e peso.
	   È la reference, ed è giusto — sono la stessa voce che dice due cose. */
	--mms-card-desc: #402657;
	--mms-card-city: #513b6e;
	/* Goccia LILLA col buco BIANCO: accanto a un testo di 10px, una goccia
	   scura di 9px diventa un punto nero e basta. */
	--mms-card-pin: #c8b3e2;
	--mms-card-pin-dot: #ffffff;

	/* Il bottone: pieno con la freccia bianca, e più scuro al passaggio. */
	--mms-card-go-bg: #513b6e;
	--mms-card-go-line: #edebf2;
	--mms-card-go-ink: #ffffff;
	--mms-card-go-bg-on: #402657;
	--mms-card-go-line-on: #402657;
	--mms-card-go-ink-on: #ffffff;

	/* Quante righe di descrizione prima del taglio. Numero puro: entra in
	   -webkit-line-clamp, che non accetta unità. */
	--mms-card-lines: 2;

	/* Misure regolabili dalla bacheca: dipendono da quanto è larga la griglia
	   sul sito e da quanto sono lunghi i nomi degli esami, due cose che dal
	   codice non si vedono. Cerchio e freccia sono separati perché è il
	   RAPPORTO fra loro a fare il bottone. */
	--mms-card-pad: 20px;
	--mms-card-title: 20px;
	--mms-card-go-size: 22px;
	--mms-card-go-icon: 14px;

	/* Inchiostri del resto del guscio (campo, titoli di sezione, chiusura):
	   questi SÌ stanno sul fondo navy, quindi restano chiari. */
	--mms-ink: #ffffff;
	--mms-ink-2: rgba(229, 230, 255, .72);
	--mms-ink-3: rgba(229, 230, 255, .45);
	--mms-accent: #c8b5e5;

	/* Campo di ricerca */
	--mms-line: rgba(255, 255, 255, .18);
	--mms-line-on: #c8b5e5;

	/* Freccia della scheda: sta sulla superficie bianca, quindi scura */

	/* Chip delle città (filtro) */
	--mms-chip-ink: rgba(229, 230, 255, .72);
	--mms-chip-bg: transparent;
	--mms-chip-line: rgba(255, 255, 255, .20);
	--mms-chip-ink-on: #262857;
	--mms-chip-bg-on: #e5e6ff;

	/* Etichette della scheda (quelle che scrivi tu: "SSN", "Senza appuntamento") */
	--mms-tag-ink: #262857;
	--mms-tag-bg: #e5e6ff;

	/* Evidenziazione del testo trovato: sta nel titolo, sulla superficie
	   bianca — testo scuro su lavanda chiara, non testo bianco su lavanda
	   trasparente. */
	--mms-mark-ink: #402657;
	--mms-mark-bg: #e5e6ff;

	/* Forma e profondità */
	--mms-radius: 16px;
	--mms-radius-pill: 999px;
	--mms-shadow: 0 8px 30px rgba(0, 0, 0, .35);
	--mms-shadow-soft: 0 8px 30px rgba(0, 0, 0, .22);

	/* Caratteri: già caricati dal tema, qui solo nominati — il plugin non
	   scarica niente da Google.
	   Montserrat su tutte e tre le variabili (rev. 01/09/2026): la ricerca
	   parla con la voce del sito, non con tre voci sue. Restano tre variabili
	   distinte apposta, per poter cambiare un solo pezzo dalla bacheca senza
	   toccare gli altri.
	   La catena di ripiego NON è la stessa per tutte: -title e -display
	   ricadono su --mms-font, così cambiando il solo "Testo corrente" cambia
	   davvero tutto, come ci si aspetta. */
	--mms-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mms-font-title: "Montserrat", var(--mms-font);
	--mms-font-display: "Montserrat", var(--mms-font-title);

	/* Tempi */
	--mms-t: 220ms;
	--mms-ease: cubic-bezier(.4, 0, .2, 1);
	--mms-z: 100000;
}

/* Variante chiara: l'overlay si apre bianco come il corpo del sito invece che
   navy come l'header. Questo blocco dichiara SULL'elemento, quindi batte i
   default ereditati da :root — è voluto. Le regole del widget e del footer
   (html .mms-overlay, 0,1,1) restano comunque più forti: chi sceglie un colore
   a mano vince sempre sul preset. */
.mms-overlay--light {
	--mms-backdrop: rgba(250, 248, 255, .97);
	--mms-card: #ffffff;
	--mms-card-line: rgba(38, 40, 87, .10);
	--mms-card-bg-on: #ffffff;
	--mms-card-line-on: rgba(38, 40, 87, .24);
	/* --mms-card-surface* e --mms-card-ink* non si ridichiarano qui: sono
	   identiche al default (la scheda è chiara in entrambi i preset), quindi
	   restano quelle della dichiarazione base su .mms-overlay. */
	--mms-ink: #262857;
	--mms-ink-2: #69727d;
	--mms-ink-3: #9aa0b4;
	--mms-accent: #402657;
	--mms-line: rgba(38, 40, 87, .14);
	--mms-line-on: #262857;
	--mms-chip-ink: #69727d;
	--mms-chip-bg: #ffffff;
	--mms-chip-line: rgba(38, 40, 87, .14);
	--mms-chip-ink-on: #ffffff;
	--mms-chip-bg-on: #262857;
	--mms-tag-ink: #402657;
	--mms-tag-bg: #e5e6ff;
	--mms-mark-ink: #402657;
	--mms-mark-bg: #e5e6ff;
	--mms-shadow: 0 8px 25px rgba(38, 40, 87, .10);
	--mms-shadow-soft: 0 8px 25px rgba(38, 40, 87, .06);
}

/* box-sizing dichiarato in casa: se il tema lo perdesse, i padding di campo e
   schede sfonderebbero le larghezze. Non si eredita una scelta altrui. */
.mms-overlay,
.mms-overlay *,
.mms-overlay *::before,
.mms-overlay *::after,
.mms-trigger,
.mms-trigger * {
	box-sizing: border-box;
}

/* ============================ 1. IL PULSANTE ============================ */
/* Due varianti, scelte nel widget:
     a. mms-trigger--icon  → solo il cerchio con la lente
     b. mms-trigger--text  → lente E POI il testo ("Cerca un servizio")
   L'icona sta SEMPRE per prima: nel markup e nell'ordine visivo, senza order
   invertiti, così è prima anche per chi legge con la tastiera o lo screen reader.

   Due stati di colore, perché il pulsante vive nell'header sopra l'hero scuro e
   poi in un header appiccicato in alto che diventa chiaro:
     normale  → --mms-trig-*
     sticky   → --mms-trig-*-stuck
   Ogni istanza del widget stampa le proprie variabili: due pulsanti nella
   stessa pagina possono avere colori diversi. */

/* Default del 06/08/2026, per richiesta esplicita: "bianco, contenuto bianco,
   bordi bianchi, tutto quanto, senza sfondo, nell'header quando è normale;
   sticky invece deve prendere #262857". Quindi NESSUN fondo in entrambi gli
   stati — il pulsante è un contorno che cambia colore, non una pastiglia piena.
   Il fondo trasparente si scrive rgba(…,0) e non `transparent`: il valore passa
   anche dal color picker di Elementor, che su `transparent` mostrerebbe uno
   swatch vuoto invece di un colore con alpha 0 da poter alzare. */
.mms-trigger.mms-trigger,
.mms-trigger.mms-trigger:focus {
	--mms-trig-ink: #ffffff;
	--mms-trig-bg: rgba(255, 255, 255, 0);
	--mms-trig-line: #ffffff;
	--mms-trig-ink-hover: #ffffff;
	--mms-trig-bg-hover: rgba(255, 255, 255, .14);
	--mms-trig-line-hover: #ffffff;

	--mms-trig-ink-stuck: #262857;
	--mms-trig-bg-stuck: rgba(38, 40, 87, 0);
	--mms-trig-line-stuck: #262857;
	--mms-trig-ink-stuck-hover: #262857;
	--mms-trig-bg-stuck-hover: rgba(38, 40, 87, .08);
	--mms-trig-line-stuck-hover: #262857;

	--mms-trig-size: 44px;      /* diametro del cerchio / altezza della pillola */
	--mms-trig-icon: 18px;
	--mms-trig-radius: 999px;
	--mms-trig-gap: 10px;
	--mms-trig-font: 14px;

	display: inline-flex;
	align-items: center;
	gap: var(--mms-trig-gap);

	/* IL PULSANTE NON SI FA STIRARE. Vive dentro contenitori che non sono suoi
	   (un header del Theme Builder è una catena di flex, e da appiccicato in
	   alto cambia larghezze e manda i figli a capo): senza queste quattro
	   righe, un contenitore che allinea i figli in "stretch" lo allarga per
	   tutta la riga e la pillola diventa una barra da un bordo all'altro —
	   difetto visto sul sito il 06/08/2026. `inline-flex` da solo NON basta:
	   un figlio di flex o di grid viene stirato lo stesso, perché lì decide
	   align-self/justify-self, non il display.

	   `flex: 0 1 auto` e non `0 0 auto`: quello che serve è il GROW a zero (non
	   allargarsi), non lo shrink a zero. Un pulsante che si rifiuta di
	   stringersi, in una riga di header che sta finendo lo spazio, non fa altro
	   che andare a capo prima — cioè scambierebbe un difetto con un altro. */
	flex: 0 1 auto;
	align-self: center;
	/* `width: fit-content` e NON `justify-self: start`: servono entrambi a non
	   farsi allargare da una griglia, ma justify-self SPOSTA anche l'elemento
	   (in una grid lo incolla a sinistra della sua cella), e un pulsante che si
	   sposta da solo è un difetto peggiore di uno che si allarga. Con una
	   larghezza definita, `justify-self: stretch` non ha più niente da stirare e
	   l'allineamento resta quello deciso dal contenitore. */
	width: fit-content;
	max-width: 100%;

	/* ...E NON MANDA A CAPO LA RIGA. È l'altra metà dello stesso problema, e
	   quella che ha continuato a dare fastidio dopo la prima correzione: un
	   elemento flex non scende MAI sotto la propria larghezza minima di
	   contenuto, e per una pillola "icona + Cerca un servizio" quella minima è
	   ~192px. Se alla riga dell'header restano meno di 192px — ed è quello che
	   succede quando si stacca in alto e si stringe — il contenitore che ospita
	   il widget non può stringersi e va a capo, portandosi dietro il pulsante,
	   che finisce fuori dal box dell'header. Nessuna regola sul pulsante può
	   impedirlo, perché la decisione la prende il contenitore.
	   Con `min-width: 0` qui e un'etichetta che sa accorciarsi (sotto), la
	   larghezza minima crolla da ~192px a ~68px: il contenitore ha di nuovo
	   spazio per stringersi e la riga non va più a capo. Quando lo spazio è
	   davvero poco il testo si accorcia con i puntini, che è un degrado
	   ordinato — al posto di un pulsante che salta su un'altra riga. */
	min-width: 0;

	margin: 0;
	border: 1px solid var(--mms-trig-line);
	border-radius: var(--mms-trig-radius);
	background: var(--mms-trig-bg);
	color: var(--mms-trig-ink);
	font-family: "Montserrat", "Inter", system-ui, sans-serif;
	font-size: var(--mms-trig-font);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--mms-t) var(--mms-ease),
		border-color var(--mms-t) var(--mms-ease),
		color var(--mms-t) var(--mms-ease),
		box-shadow var(--mms-t) var(--mms-ease);
}

.mms-trigger__icon {
	flex: 0 0 auto;
	display: block;
	width: var(--mms-trig-icon);
	height: var(--mms-trig-icon);
}

.mms-trigger__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* L'etichetta è il pezzo che deve cedere quando lo spazio finisce: senza
   min-width:0 un figlio flex si rifiuta di scendere sotto il proprio contenuto
   e tutta la catena resta larga 192px (v. la nota qui sopra). */
.mms-trigger__label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* a. solo icona: cerchio perfetto, come i bottoni tondi del sito */
.mms-trigger.mms-trigger--icon {
	width: var(--mms-trig-size);
	height: var(--mms-trig-size);
	padding: 0;
	justify-content: center;
}

/* b. icona + testo: pillola. Il padding a sinistra è più stretto che a destra
   perché l'icona ha aria propria dentro il glifo: con padding simmetrico
   sembrerebbe spostata verso il centro. */
.mms-trigger.mms-trigger--text {
	min-height: var(--mms-trig-size);
	padding: 0 22px 0 18px;
}

.mms-trigger.mms-trigger:hover {
	border-color: var(--mms-trig-line-hover);
	background: var(--mms-trig-bg-hover);
	color: var(--mms-trig-ink-hover);
}

.mms-trigger.mms-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --- stato "header appiccicato in alto" ---
   Due strade, e vale la prima che si avvera:
   1. le classi che i costruttori di header mettono sull'ANTENATO quando lo
      header si stacca (Elementor Pro, tema Liquid) — LETTE, mai scritte da
      noi: ".is-stuck" qui sotto è la classe vera del tema Liquid sull'header,
      non qualcosa che scriviamo noi.
   2. ".mms-is-stuck", che il JS del plugin mette SUL PULSANTE dopo N pixel di
      scorrimento — per gli header che non annunciano il proprio stato con una
      classe. La soglia è un'impostazione.
   Se scattano entrambe non cambia nulla: è lo stesso stato.

   ERRORE VERO trovato il 06/08/2026 sul sito pubblicato: questa classe SCRITTA
   dal JS si chiamava anche lei ".is-stuck" — identica per coincidenza a una
   classe GLOBALE del tema (hub-elementor-addons/theme-elementor.min.css) con
   `position:fixed;left:0;right:0;...`, pensata per l'header, non scoped a
   niente. Il pulsante la ereditava e veniva strappato dal suo contenitore e
   fissato altrove nella pagina — sembrava "va a capo da solo", non c'entrava
   il flex-wrap. Rinominata in ".mms-is-stuck": mai un nome di classe generico
   su un elemento che vive dentro il markup di un tema che non controlliamo. */
.elementor-sticky--effects .mms-trigger.mms-trigger,
.is-stuck .mms-trigger.mms-trigger,
.lqd-is-stuck .mms-trigger.mms-trigger,
.header-is-stuck .mms-trigger.mms-trigger,
.mms-trigger.mms-trigger.mms-is-stuck {
	border-color: var(--mms-trig-line-stuck);
	background: var(--mms-trig-bg-stuck);
	color: var(--mms-trig-ink-stuck);
}

.elementor-sticky--effects .mms-trigger.mms-trigger:hover,
.is-stuck .mms-trigger.mms-trigger:hover,
.lqd-is-stuck .mms-trigger.mms-trigger:hover,
.header-is-stuck .mms-trigger.mms-trigger:hover,
.mms-trigger.mms-trigger.mms-is-stuck:hover {
	border-color: var(--mms-trig-line-stuck-hover);
	background: var(--mms-trig-bg-stuck-hover);
	color: var(--mms-trig-ink-stuck-hover);
}

/* ============================ 2. L'OVERLAY ============================ */
/* position:fixed + inset:0 su un nodo figlio di <body> (stampato in wp_footer):
   così nessun contenitore Elementor con transform può trasformarlo in un
   position:absolute relativo a sé — è la trappola classica del full-screen
   dentro una sezione. */

/* CHI SCORRE (rev. 11/09/2026): non l'overlay, ma il solo .mms-overlay__body.
   Prima l'overlay intero aveva overflow-y:auto e sul sito pubblicato, con un
   elenco lungo, la rotella e il dito muovevano la PAGINA SOTTO e non l'elenco.
   Due cause possibili e la correzione le copre entrambe: overflow:hidden sul
   body che iOS non rispetta (ora il body è anche position:fixed, v. sotto) e
   un tema che fa scorrere la pagina via JS ascoltando wheel/touch sulla
   finestra (ora il JS ferma la propagazione di quegli eventi dentro l'overlay,
   v. meta-search.js sezione 8). In più era una richiesta: campo e chip fermi,
   scorrono solo le schede. Da qui la colonna flex: testa fissa, corpo scroller. */
.mms-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--mms-z);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mms-backdrop);
	-webkit-backdrop-filter: blur(var(--mms-blur)) saturate(1.08);
	backdrop-filter: blur(var(--mms-blur)) saturate(1.08);
	font-family: var(--mms-font);
	color: var(--mms-ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mms-t) var(--mms-ease);
}

.mms-overlay[hidden] { display: none; }

.mms-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Il blocco del fondo si fa sull'html, non solo sul body: con il tema Liquid il
   body ha già overflow-x:hidden e un secondo overflow sullo stesso nodo non
   ferma lo scroll di iOS. La posizione salvata la ripristina il JS. */
html.mms-lock,
html.mms-lock body {
	overflow: hidden;
	touch-action: none;
}

/* Sul body anche position:fixed (rev. 11/09/2026): è l'unico blocco che iOS
   rispetta davvero, overflow:hidden da solo lì non ferma il dito. La pagina
   resta ferma alla riga in cui era: il JS le mette un top negativo pari allo
   scorrimento salvato e alla chiusura toglie tutto e rimette la posizione.
   L'overlay non ne risente: è fixed anche lui, rispetto alla finestra. */
html.mms-lock body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* Il contenuto entra con 10px di salita: dice "questo strato è arrivato ora",
   senza far muovere niente a ogni tasto premuto. */
.mms-overlay__inner {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(88px, 12vw, 132px) 24px 0;
	transform: translateY(10px);
	transition: transform 320ms var(--mms-ease);
}

.mms-overlay.is-open .mms-overlay__inner { transform: none; }

.mms-overlay__head { flex: none; }

/* min-height:0: senza, un figlio flex non scende sotto l'altezza del suo
   contenuto e l'overflow non scatta mai. Il margine negativo più il padding
   uguale lasciano 4px di aria ai bordi: l'anello di focus delle schede
   (outline-offset 2px) altrimenti verrebbe tagliato dallo scroller. Il
   padding in basso è quello che prima stava sull'inner: l'ultima scheda non
   deve toccare il bordo dello schermo. overscroll-behavior:contain: arrivati
   in fondo all'elenco lo scorrimento si ferma, non passa a nessun altro. */
.mms-overlay__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 4px 4px 96px;
}

/* Chiusura: fissa in alto a destra, resta visibile anche scorrendo i risultati. */
.mms-overlay .mms-overlay__close,
.mms-overlay .mms-overlay__close:focus {
	position: fixed;
	top: 20px;
	right: 24px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--mms-card-line);
	border-radius: var(--mms-radius-pill);
	background: var(--mms-card);
	box-shadow: var(--mms-shadow-soft);
	color: var(--mms-ink);
	cursor: pointer;
	transition: background var(--mms-t) var(--mms-ease), border-color var(--mms-t) var(--mms-ease);
}

.mms-overlay .mms-overlay__close:hover {
	background: var(--mms-card-bg-on);
	border-color: var(--mms-card-line-on);
}

.mms-overlay .mms-overlay__close:focus-visible {
	outline: 2px solid var(--mms-line-on);
	outline-offset: 2px;
}

.mms-overlay .mms-overlay__close svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

/* ============================ 3. IL CAMPO ============================ */
/* Scatola relativa: dentro ci stanno la lente, l'input e il "cancella tutto".
   Il padding orizzontale dell'input è simmetrico perché il testo è centrato —
   con padding solo a destra sembrerebbe spostato a sinistra. */

.mms-field {
	position: relative;
	max-width: 660px;
	margin: 0 auto 26px;
}

.mms-field__glyph {
	position: absolute;
	left: 6px;
	bottom: 14px;
	width: 20px;
	height: 20px;
	color: var(--mms-ink-3);
	pointer-events: none;
}

.mms-field__glyph svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.mms-overlay .mms-field__input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px 46px;
	border: 0;
	border-bottom: 1px solid var(--mms-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mms-ink);
	font-family: var(--mms-font-title);
	font-size: clamp(1.2rem, 2.6vw, 1.7rem);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--mms-t) var(--mms-ease);
}

.mms-overlay .mms-field__input:focus {
	outline: none;
	border-bottom-color: var(--mms-line-on);
	box-shadow: 0 1px 0 0 var(--mms-line-on); /* "2px" senza spostare di 1px il testo */
}

.mms-overlay .mms-field__input::placeholder {
	color: var(--mms-ink-3);
	opacity: 1; /* Firefox lo sbiadisce di suo */
}

/* La "X" nativa di <input type="search"> è del browser (blu, stile di sistema):
   fuori dal design. Al suo posto c'è .mms-field__clear, stesso glifo del resto. */
.mms-overlay .mms-field__input::-webkit-search-cancel-button,
.mms-overlay .mms-field__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.mms-overlay .mms-field__clear,
.mms-overlay .mms-field__clear:focus {
	position: absolute;
	right: 2px;
	bottom: 6px;
	width: 36px;
	height: 36px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--mms-radius-pill);
	background: none;
	color: var(--mms-ink-2);
	cursor: pointer;
	transition: background var(--mms-t) var(--mms-ease), color var(--mms-t) var(--mms-ease);
}

/* [hidden] perderebbe contro display:grid della classe. */
.mms-overlay .mms-field__clear[hidden] { display: none; }

.mms-overlay .mms-field__clear:hover {
	background: var(--mms-card-bg-on);
	color: var(--mms-ink);
}

.mms-overlay .mms-field__clear svg {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

/* ====================== 4. LE CHIP DELLE CITTÀ ====================== */
/* Compaiono solo quando si è scritto qualcosa: filtrano una ricerca già fatta.
   Nove città non stanno su una riga sul telefono: là scorrono in orizzontale con
   una sfumatura sul bordo destro che dice "ce n'è ancora", invece di andare a
   capo su tre righe mangiando mezzo schermo prima dei risultati. */

.mms-chips {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.mms-chips[hidden] { display: none; }

.mms-overlay .mms-chip,
.mms-overlay .mms-chip:focus {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--mms-chip-line);
	border-radius: var(--mms-radius-pill);
	background: var(--mms-chip-bg);
	color: var(--mms-chip-ink);
	font-family: var(--mms-font-title);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--mms-t) var(--mms-ease),
		border-color var(--mms-t) var(--mms-ease),
		color var(--mms-t) var(--mms-ease);
}

.mms-overlay .mms-chip:hover {
	border-color: var(--mms-card-line-on);
	color: var(--mms-ink);
}

.mms-overlay .mms-chip.is-active,
.mms-overlay .mms-chip.is-active:focus {
	background: var(--mms-chip-bg-on);
	border-color: var(--mms-chip-bg-on);
	color: var(--mms-chip-ink-on);
}

.mms-overlay .mms-chip:focus-visible {
	outline: 2px solid var(--mms-line-on);
	outline-offset: 2px;
}

/* Contatore dei risultati: piccolo, allineato al titolo di sezione. È anche il
   nodo aria-live, quindi esiste sempre nel DOM (anche vuoto). */
.mms-count {
	margin: 0 0 14px;
	color: var(--mms-ink-2);
	font-family: var(--mms-font);
	font-size: 13px;
	line-height: 1.4;
}

/* ====================== 5. SEZIONI E GRIGLIA ====================== */

.mms-section { margin: 0 0 32px; }
.mms-section[hidden] { display: none; }

/* Oswald 600 come tutti i titoli del sito, con la parola d'accento in lavanda:
   è la firma di Meta Medical, e ripete il "I più cercati" di Mixer. */
.mms-section__title {
	margin: 0 0 14px;
	padding: 0;
	color: var(--mms-ink);
	font-family: var(--mms-font-display);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .01em;
	text-align: left;
	text-transform: none;
}

.mms-section__title em {
	color: var(--mms-accent);
	font-style: italic;
	font-weight: 600;
}

/* Schede a RIGA, unica variante. Contenuto di solo testo: l'occhio scorre una
   colonna di nomi. Una scacchiera di riquadri costringe a leggere a zig-zag. */
.mms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mms-grid__item { margin: 0; }

/* ====================== 6. LA SCHEDA ====================== */
/* Una scheda = una PAGINA del sito. Secondo disegno, 01/09/2026 (card.svg,
   397 x 153, raggio 15) — e il cambio è una SOTTRAZIONE:

     prima   foglio bianco + FASCIA lilla, sedi in pastiglie, bottone bianco
     ora     un foglio bianco solo, una RIGA grigia, sedi come testo, bottone pieno

   La fascia separava bene le due zone, ma su una griglia di venti schede erano
   venti rettangoli colorati: il colore finiva per pesare più dei nomi, che sono
   la cosa che si legge. Ora a dividere "quello che si legge" da "quello che si
   usa" basta un filo di grigio, e l'unico colore pieno rimasto è il bottone —
   un punto, non una fascia.

   Le misure vengono dalla reference e sono tutte manopole di bacheca: margine
   interno 20, nome 20/700, descrizione 13/1.25, cerchio 22, freccia 6. */

.mms-overlay .mms-card,
.mms-overlay .mms-card:focus {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* 14 e 15 e non i 15/16 letti sulla reference: il BORDO di 1px conta, e il
	   margine si misura dal bordo esterno della scheda. Con 15/16 la scheda
	   veniva alta 155,5 invece di 153 — misurato in
	   preview/card-vs-reference.html, non stimato.
	   Ai lati niente: il margine laterale lo mettono i figli, perché la riga di
	   separazione deve arrivare esattamente fino a --mms-card-pad. Con un
	   padding sul contenitore sarebbe sempre più corta del testo. */
	padding: 14px 0 15px;
	border: 1px solid var(--mms-card-surface-line);
	border-radius: var(--mms-radius);
	background: var(--mms-card-surface);
	color: var(--mms-card-ink);
	text-decoration: none;
	transition: transform var(--mms-t) var(--mms-ease),
		background var(--mms-t) var(--mms-ease),
		border-color var(--mms-t) var(--mms-ease);
}

/* Nome e descrizione. flex:1 e non un'altezza fissa: in una griglia le schede
   si allungano fino all'altezza della più alta della riga, e a crescere deve
   essere questa parte — la riga delle sedi resta in fondo, alla sua altezza. */
.mms-card__sheet {
	flex: 1 1 auto;
	min-width: 0; /* senza questo il line-clamp non taglia in grid */
	padding: 0 var(--mms-card-pad);
}

/* Hover e "riga selezionata da tastiera" sono lo stesso stato: chi usa le
   frecce deve vedere esattamente quello che vede chi usa il mouse.
   Due pixel in su e basta (richiesta del 01/09/2026, "basta lieve movimento"):
   nessuna ombra, nessun cambio di fondo. Il colore lo cambia solo il bottone. */
.mms-overlay .mms-card:hover,
.mms-overlay .mms-card.is-active {
	transform: translateY(-2px);
	background: var(--mms-card-surface-on);
	border-color: var(--mms-card-surface-line-on);
}

.mms-overlay .mms-card:focus-visible {
	outline: 2px solid var(--mms-line-on);
	outline-offset: 2px;
}

.mms-card__title {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--mms-card-ink);
	font-family: var(--mms-font-title);
	font-size: var(--mms-card-title);
	font-weight: 700;
	/* Il titolo NON è tagliato a due righe: un nome di esame lungo va a capo e
	   la scheda si allunga, che è meglio di "Risonanza magnetica dell'addome…"
	   con la parte utile mangiata dai puntini. In griglia le vicine si allungano
	   con lei. */
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* La parola trovata: <mark> è l'elemento giusto (lo annuncia anche lo screen
   reader), ma il suo giallo di default va spento. */
.mms-card__title mark {
	background: var(--mms-mark-bg);
	color: var(--mms-mark-ink);
	font-weight: 700;
	border-radius: 3px;
	padding: 0 1px;
}

/* La descrizione: il primo H3 della pagina, letto da solo (v.
   includes/class-auto.php). Tagliata a --mms-card-lines righe — una scheda deve
   restare alta uguale alle sue vicine, e chi vuole leggere tutto apre la pagina. */
.mms-card__desc {
	display: -webkit-box;
	margin: 10px 0 0;
	padding: 0;
	color: var(--mms-card-desc);
	font-family: var(--mms-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mms-card-lines);
	overflow-wrap: anywhere;
}

.mms-card__desc mark {
	background: var(--mms-mark-bg);
	color: var(--mms-mark-ink);
	font-weight: 600;
	border-radius: 3px;
	padding: 0 1px;
}

/* LA RIGA IN FONDO: sedi a sinistra, bottone a destra, e sopra il filo grigio.
   Il filo è un border-top su QUESTO elemento, che ha il margine laterale: così
   parte e finisce esattamente dove comincia e finisce il testo sopra. Messo sul
   contenitore andrebbe da bordo a bordo, che è un'altra cosa e si vede. */
.mms-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px var(--mms-card-pad) 0;
	padding-top: 15px;
	border-top: 1px solid var(--mms-card-rule);
}

/* Segnaposto + sedi. In FLUSSO e non in position:absolute: una sede dal nome
   lungo finirebbe sopra il bottone e lo coprirebbe. Se non ci stanno, vanno a
   capo e la riga cresce. */
.mms-card__places {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 0;
	min-width: 0;
	color: var(--mms-card-city);
	font-family: var(--mms-font);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

.mms-card__pin {
	flex: 0 0 auto;
	display: block;
	/* width:auto e non una misura: il viewBox è 24x30, l'altezza comanda e la
	   larghezza viene da sé nel rapporto giusto. */
	width: auto;
	height: 9px;
	margin-right: 6px;
}

.mms-card__city,
.mms-card__tag {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Il filetto fra una sede e l'altra. Su un ::before e non su un border-left
   perché deve essere alto 11px esatti come nella reference: un bordo prenderebbe
   l'altezza della riga di testo, che cambia col corpo del carattere. */
.mms-card__city + .mms-card__city::before,
.mms-card__city + .mms-card__tag::before,
.mms-card__tag + .mms-card__tag::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 6px;
	background: var(--mms-card-rule);
	vertical-align: -2px;
}

/* Le etichette scritte a mano restano distinguibili dalle sedi: stesso rigo e
   stesso filetto, ma maiuscoletto spaziato. Sono un'altra cosa e non devono
   sembrare una sede in più. */
.mms-card__tag {
	color: var(--mms-tag-ink);
	font-family: var(--mms-font-title);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* IL BOTTONE. Pieno da fermo, con la freccia bianca; al passaggio scurisce. È
   l'unico elemento della scheda che cambia colore — tutto il resto si limita ad
   alzarsi di due pixel — così l'occhio ha un punto solo dove guardare per
   capire che la scheda è viva e cliccabile.

   Non è un <button>: è dentro un <a> che copre tutta la scheda, e un bottone
   dentro un link è markup non valido oltre che una trappola per la tastiera
   (due fermate per una scheda sola). Qui è uno <span> che si comporta da
   bottone solo di aspetto — il clic lo prende il link, che è tutta la scheda. */
.mms-card__go {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--mms-card-go-size);
	height: var(--mms-card-go-size);
	border: 1px solid var(--mms-card-go-line);
	border-radius: 999px;
	background: var(--mms-card-go-bg);
	color: var(--mms-card-go-ink);
	transition: background var(--mms-t) var(--mms-ease),
		border-color var(--mms-t) var(--mms-ease),
		color var(--mms-t) var(--mms-ease),
		transform var(--mms-t) var(--mms-ease);
}

.mms-card__go svg {
	display: block;
	width: var(--mms-card-go-icon);
	height: var(--mms-card-go-icon);
	fill: none;
	stroke: currentColor;
	/* 2,3 unità in un viewBox da 24, con la geometria fra 5 e 19: a 14px sullo
	   schermo fanno l'1,34px della reference, e NIENTE finisce fuori dal
	   viewBox — un tratto che sborda viene ritagliato dall'<svg> e la freccia
	   si trasforma in un cuneo sfocato (difetto del 01/09/2026).
	   Scritto in unità del viewBox e non in px proprio perché la freccia è
	   regolabile: il tratto si rimpicciolisce insieme a lei invece di
	   ingrossarsi quando la si riduce. */
	stroke-width: 2.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mms-overlay .mms-card:hover .mms-card__go,
.mms-overlay .mms-card.is-active .mms-card__go,
.mms-overlay .mms-card:focus-visible .mms-card__go {
	border-color: var(--mms-card-go-line-on);
	background: var(--mms-card-go-bg-on);
	color: var(--mms-card-go-ink-on);
}


/* ====================== 7. NESSUN RISULTATO ====================== */
/* Ordine voluto: il messaggio sta SOPRA, "I più cercati" resta sotto come rete
   di sicurezza — mai un vicolo cieco. In più, su un sito di sanità, chi non
   trova deve poter chiedere a una persona: da qui i due bottoni di contatto,
   che sono gli stessi che il sito usa già in ogni pagina. */

.mms-empty {
	padding: 8px 0 28px;
	text-align: center;
}

.mms-empty[hidden] { display: none; }

.mms-empty__title {
	margin: 0 0 6px;
	color: var(--mms-ink);
	font-family: var(--mms-font-display);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
}

.mms-empty__sub {
	margin: 0;
	color: var(--mms-ink-2);
	font-family: var(--mms-font);
	font-size: 14px;
	line-height: 1.5;
}

.mms-empty__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

.mms-overlay .mms-empty__btn,
.mms-overlay .mms-empty__btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--mms-radius-pill);
	background: var(--mms-chip-bg-on);
	color: var(--mms-chip-ink-on);
	font-family: var(--mms-font-title);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: opacity var(--mms-t) var(--mms-ease), box-shadow var(--mms-t) var(--mms-ease);
}

.mms-overlay .mms-empty__btn--ghost {
	background: transparent;
	border-color: var(--mms-line);
	color: var(--mms-ink);
}

.mms-overlay .mms-empty__btn:hover { box-shadow: var(--mms-shadow); }
.mms-overlay .mms-empty__btn:focus-visible { outline: 2px solid var(--mms-line-on); outline-offset: 2px; }

.mms-overlay .mms-empty__btn svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Suggerimento di correzione ("Cercavi ecografia?"). */
.mms-hint {
	margin: 0 0 14px;
	color: var(--mms-ink-2);
	font-family: var(--mms-font);
	font-size: 13px;
	line-height: 1.4;
}

.mms-hint[hidden] { display: none; }

.mms-overlay .mms-hint button,
.mms-overlay .mms-hint button:focus {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mms-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* ====================== 8. TELEFONO ====================== */

@media (max-width: 700px) {
	.mms-overlay__inner { padding: 76px 16px 0; }
	.mms-overlay__body { padding-bottom: 64px; }
	.mms-overlay .mms-overlay__close { top: 12px; right: 14px; }

	.mms-field { margin-bottom: 20px; }
	.mms-overlay .mms-field__input { padding: 10px 40px; font-size: 1.1rem; }
	.mms-field__glyph { left: 2px; bottom: 12px; width: 18px; height: 18px; }

	/* Le chip non vanno a capo: scorrono. I margini negativi le fanno arrivare
	   fino al bordo dello schermo, così si capisce che la fila continua. */
	.mms-chips {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin: 0 -16px 22px;
		padding: 2px 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
	}

	.mms-chips::-webkit-scrollbar { display: none; }

	.mms-grid { grid-template-columns: 1fr; }
}

/* ====================== 9. MOTO RIDOTTO ====================== */
/* Nessun transform e nessuna transizione. Il contenuto NON deve restare a
   translateY(10px), altrimenti resterebbe spostato per sempre. */
@media (prefers-reduced-motion: reduce) {
	.mms-overlay,
	.mms-overlay__inner,
	.mms-overlay .mms-card,
	.mms-card__sheet,
	.mms-card__go,
	.mms-overlay .mms-chip,
	.mms-trigger.mms-trigger {
		transition: none;
	}

	.mms-overlay__inner { transform: none; }
	.mms-overlay .mms-card:hover,
	.mms-overlay .mms-card.is-active { transform: none; }
	/* Il CAMBIO DI COLORE del pulsante resta anche qui: è l'unico segnale che
	   dice "questa scheda è quella scelta". A sparire è solo lo spostamento —
	   moto ridotto vuol dire senza movimento, non senza risposta. */
	.mms-overlay .mms-card:hover .mms-card__go,
	.mms-overlay .mms-card.is-active .mms-card__go,
	.mms-overlay .mms-card:focus-visible .mms-card__go { transform: none; }
}
