/* Mappe del sito: contenitore, pin di marca, tinta sui tile.
   Sta fuori da style.min.css di proposito: il foglio principale nasce dal LESS
   in compile/ e si carica su ogni pagina, mentre questo serve solo alle tre
   pagine che hanno una mappa. */

.bv-map {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    z-index: 5;
    background: #f2f2f2;
}

/* altezze per contesto: la lista ha bisogno di respiro, la sidebar no */
.bv-map--lista  { height: 400px; }
.bv-map--scheda { height: 300px; }
.bv-map--luogo  { height: 260px; }

@media (min-width: 768px) {
    .bv-map--scheda { height: 380px; }
    .bv-map--luogo  { height: 300px; }
}

.bv-map .leaflet-container {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    font: inherit;
}

/* Tinta di marca.
   Il filtro va sul pane dei tile e SOLO su quello: se lo si mette sul
   contenitore vira anche .leaflet-marker-pane e i pin rosa diventano blu
   come il resto. Il duotone e' un filtro SVG (stampato dal partial) perche'
   i filtri CSS non sanno mappare la luminanza su una rampa di colori.
   La rampa non e' inventata: prende i colori della cartina d'Italia che il
   sito mostra gia' nella barra laterale (images/mappa_italia.jpg) e nel suo
   canvas di hover, cosi' le due mappe stanno bene una accanto all'altra.
   Mare #c1daf8, terra #f2f2f2, inchiostro #6671a9, bordo pin #e84f95. */
.bv-map .leaflet-tile-pane {
    filter: url(#bv-map-tinta);
}

/* Pin */
.bv-map-pin {
    background: none;
    border: 0;
}
.bv-map-pin__img {
    display: block;
    width: 30px;
    height: 39px;
    /* drop-shadow e non box-shadow: segue la sagoma del logo, non il riquadro */
    filter: drop-shadow(0 1px 3px rgba(18, 30, 93, .45));
}
.bv-map--etichette-hover .bv-map-pin__label {
    opacity: 0;
    transition: opacity .12s ease-out;
    pointer-events: none;
}
.bv-map--etichette-hover .bv-map-pin:hover .bv-map-pin__label,
.bv-map--etichette-hover .bv-map-pin:focus-within .bv-map-pin__label {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .bv-map--etichette-hover .bv-map-pin__label { transition: none; }
}

.bv-map-pin__label {
    position: absolute;
    top: 41px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #e84f95;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    padding: 2px 6px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(18, 30, 93, .3);
}

/* Leaflet mette i popup con un font suo: riportiamoli a quello del sito */
.bv-map .leaflet-popup-content {
    margin: 10px 14px;
    font-size: 14px;
    font-weight: 600;
}
.bv-map .leaflet-popup-content a { color: #121e5c; }

.bv-map .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, .75);
}

/* Il riquadro con l'iframe Google, ripiego per le strutture senza coordinate */
.bv-map-iframe {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}
.bv-map-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (min-width: 768px) {
    .bv-map-iframe { height: 380px; }
}

/* Link alle indicazioni stradali sotto la mappa delle localita' */
.bv-map-indicazioni {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}