/* La mappa dei rifugi (/rifugi/mappa). Linkato SOLO da questa pagina: rifugio.css lo condividono
   le 876 schede, e un foglio in piu' lì cambierebbe 876 pagine per una che lo usa.
   Nessun url() verso altri host, nessun @import: la prova statica li cerca.
   L'attribuzione di OpenStreetMap (.leaflet-control-attribution) NON si nasconde: sta in alto a
   destra (la sposta il JavaScript, perche' in basso la barra del consenso la copriva): la policy delle tessere vieta di tenerla «sotto l'interfaccia o dietro un interruttore». */

/* Senza JavaScript i controlli sono `hidden` dal generatore; `hidden` non deve perdere contro
   un `display` scritto qui sotto. */
.rm [hidden] { display: none !important; }

.rm-intro-nota { margin-bottom: 24px; }
.rm-salta { display: inline-block; padding-block: 12px; margin-bottom: 8px; text-decoration: underline; text-underline-offset: 4px; font-size: .95rem; }

.rm-filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px 24px; max-width: 760px; margin-bottom: 12px; }
.rm-campo label { display: block; margin-bottom: 8px; font-size: .875rem; color: var(--bs-ink-2); }
.rm-campo select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid rgba(27,24,20,.28); border-radius: var(--bs-radius-md);
  background: var(--bs-surface); color: var(--bs-ink); font: inherit; font-size: 1rem; }
.rm-campo select:focus-visible { outline: 3px solid var(--bs-primary-dark); outline-offset: 2px; }

.rm-conteggio { margin: 16px 0 8px; font-weight: 650; }

.rm-avvia { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; padding: 12px 26px; margin-top: 8px;
  border: 0; border-radius: var(--bs-radius-pill); background: var(--bs-primary-dark); color: #fff; font: 700 1rem var(--bs-body); cursor: pointer; }
.rm-avvia:hover { background: var(--bs-forest-dark); }
.rm-avvia:focus-visible { outline: 3px solid var(--bs-forest-dark); outline-offset: 3px; }
.rm-avvia:disabled { opacity: .75; cursor: progress; }
/* Vuoto resta nel documento (una zona `aria-live` deve esserci prima che le si scriva dentro: se
   la si toglie con display:none l'annuncio non parte), ma senza occupare spazio. */
.rm-messaggio { margin: 12px 0 0; font-weight: 650; }
.rm-messaggio:empty { margin: 0; }
.rm-tocco { margin: 16px 0 8px; font-size: .875rem; color: var(--bs-ink-2); }

/* Il riquadro: mai sotto 320 px di altezza. `isolation` tiene i livelli di Leaflet (z-index fino a
   1000) dentro la mappa: senza, i comandi passerebbero sopra l'intestazione fissa del sito. */
.rm-mappa { position: relative; isolation: isolate; width: 100%; height: min(70vh, 560px); min-height: 320px; margin: 12px 0 8px;
  border-radius: var(--bs-radius-md); overflow: hidden; background: #e9ede7; }
.rm-mappa:focus-visible { outline: 3px solid var(--bs-primary-dark); outline-offset: 3px; }
.rf .rm-mappa .leaflet-control-attribution a { color: #0b4f8a; text-decoration: underline; }
.rm-mappa .leaflet-control-attribution { font-size: 12px; }
.rm-mappa .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }

/* Un punto: 44 px di area da toccare, 18 px di disco.
   Il selettore parte da .rm-mappa per battere leaflet.css, che dichiara .leaflet-marker-icon con
   una classe sola (oggi il nostro foglio e' linkato dopo, ma non si deve dipendere dall'ordine). Il disco e' centrato con le coordinate e
   non con un layout flex, cosi' non dipende da quale `display` vinca. */
.rm-mappa .rm-punto, .rm-mappa .rm-gruppo { background: none; border: 0; }
.rm-mappa .rm-punto::before { content: ''; display: block; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--bs-forest-dark); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(27,24,20,.45), 0 2px 6px rgba(27,24,20,.4); }
.rm-mappa .rm-punto:focus-visible::before, .rm-mappa .rm-punto:hover::before { background: var(--bs-primary-dark); }
.rm-mappa .rm-punto:focus-visible { outline: 3px solid var(--bs-primary-dark); outline-offset: -6px; border-radius: 50%; }

.rm-mappa .rm-gruppo__corpo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; margin: 2px; border-radius: 50%;
  background: var(--bs-primary-dark); border: 3px solid #fff; color: #fff; box-shadow: 0 0 0 1px rgba(27,24,20,.45), 0 2px 6px rgba(27,24,20,.4); }
.rm-mappa .rm-gruppo__cifra { font: 700 .95rem/1 var(--bs-body); font-variant-numeric: tabular-nums; }
.rm-mappa .rm-gruppo:focus-visible { outline: 3px solid var(--bs-forest-dark); outline-offset: -4px; border-radius: 50%; }

/* Testo per chi legge con lo screen reader, non per la vista. */
.rm-solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Il riquadro di un punto. I colori e i margini dicono «sono io» a Leaflet, che ne ha di suoi. */
.rm-riquadro { min-width: 180px; }
.rf .rm-riquadro p { margin: 4px 0 0; line-height: 1.5; }
.rf .rm-riquadro .rm-riquadro__nome { display: block; font: 650 1.05rem/1.3 var(--bs-display); color: var(--bs-ink); text-decoration: underline; text-underline-offset: 3px; }
.rf .rm-riquadro .rm-riquadro__quota { font-variant-numeric: tabular-nums; }
.rf .rm-riquadro .rm-riquadro__zona { color: var(--bs-ink-2); font-size: .9rem; }
.rf .rm-riquadro .rm-riquadro__apri { display: inline-block; margin-top: 8px; padding-block: 8px; color: var(--bs-primary-dark); font-weight: 700; }

/* L'elenco: lo stesso contenuto della mappa, in testo. */
.rm-elenco-sezione { padding-top: 24px; }
.rm-regione { border-top: 1px solid var(--bs-line); }
.rm-regione:last-of-type { border-bottom: 1px solid var(--bs-line); }
.rm-regione > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 8px; cursor: pointer; font-weight: 650; list-style: none; }
.rm-regione > summary::-webkit-details-marker { display: none; }
.rm-regione > summary::before { content: ''; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.rm-regione[open] > summary::before { transform: rotate(90deg); }
.rm-regione > summary:focus-visible { outline: 3px solid var(--bs-primary-dark); outline-offset: 2px; }
.rm-voci { list-style: none; margin: 0 0 16px; padding: 0; columns: 2 280px; column-gap: 32px; }
.rm-voci li { break-inside: avoid; padding-block: 2px; }
.rm-voci a { display: inline-block; padding-block: 8px; text-decoration: underline; text-underline-offset: 4px; }
.rm-voci .rm-dove { color: var(--bs-ink-2); font-size: .875rem; }

@media (max-width: 560px) {
  .rm-avvia { width: 100%; }
  .rm-voci { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-mappa *, .rm-mappa { transition: none !important; animation: none !important; }
}

/* La mappa sta subito sotto il titolo (richiesta del founder, 08/10): il titolo su una riga sola, i
   filtri stretti, e l'altezza della mappa e' quella che resta nella prima schermata meno una
   fascia che lascia vedere l'inizio del testo sotto, cosi' si capisce che la pagina continua.
   100svh e non 100vh: sul telefono la barra degli indirizzi non deve far uscire la mappa. */
.rf-breadcrumb.rm-briciola { margin-block: 20px 4px; }
.rm-titolo { margin-bottom: 12px; }
.rm-titolo h1 { margin-block: 8px 0; font-size: clamp(2rem, 3.4vw, 3rem); }
.rm-titolo h1 br { display: none; }
.rm-sotto { margin-top: 24px; }
.rf .rm .rm-salta { padding-block: 6px; margin-bottom: 4px; }
.rm-filtri { margin-bottom: 4px; }
.rm-conteggio { margin: 8px 0 0; }
.rm-mappa { height: clamp(320px, calc(100svh - 480px), 640px); }
@media (max-width: 560px) {
  .rm-filtri { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .rm-campo label { margin-bottom: 4px; }
  .rm-campo select { min-height: 44px; padding: 8px 10px; font-size: .95rem; }
  .rm-mappa { height: clamp(260px, calc(100svh - 500px), 420px); min-height: 260px; }
}