/* plgn-gestmappe: stili delle mappe nel sito. L'altezza del riquadro la dà il tema ([id^="mappa"], [id^="map-canvas"]):
   qui solo ciò che il plugin disegna da sé. */

/* Mappa Google incorporata: riempie il riquadro; senza altezza dal tema resta alta 400px */
.mappa-container .mappa-google-incorporata {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
}

/* Icona del navigatore accanto al nome del punto, nel controllo delle carte di Leaflet (l'immagine è 60x40) */
.mappa-container .leaflet-control-layers .navigatore {
    display: inline-block;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
}

.mappa-container .leaflet-control-layers .navigatore .pngnavigator {
    display: block;
    width: 24px;
    height: auto;
}

/* Testo e immagine del punto nel fumetto del marker: template-tre li nascondeva con «span.poi-testo { display: none; }»,
   e il fumetto restava vuoto */
.mappa-container .leaflet-popup-content .poi-testo,
.mappa-container .leaflet-popup-content .poi-immagine {
    display: block;
}

.mappa-container .leaflet-popup-content .poi-immagine img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 6px;
}

/* Su schermi stretti il percorso della navigazione non copre tutta la mappa */
@media (max-width: 575px) {
    .mappa-container .leaflet-routing-container {
        max-width: calc(100vw - 60px);
        max-height: 200px;
        overflow-y: auto;
    }
}