/* Impaginazione della mappa del mondo.
 *
 * Nel sito attuale queste misure le imposta il JavaScript di Datamaps mentre disegna;
 * qui sono dichiarate nel foglio di stile, così la mappa è già al suo posto alla prima
 * pittura della pagina, senza attese e senza sobbalzi.
 *
 * Il contenitore ha il rapporto 16:9 (56,25%) e lascia sbordare il disegno, che è più
 * largo: a tagliarlo è la fascia che lo contiene, larga quanto la finestra, e per questo
 * si vede anche la costa americana fuori dal contenitore. La posizione del disegno è quella
 * dichiarata nel bundle del sito attuale, translate([larghezza/2.3, altezza/1.9]) con la
 * proiezione centrata su 10°E 10°N; gli scostamenti in pixel sono le coordinate di quel
 * punto dentro il disegno, e li scrive la vista perché derivano da config/world_map.yml.
 */
/* Circoscritte a .map: lo stesso identificativo #map-container è usato anche dal globo
   nella testata delle schede paese, che ha impaginazione propria nel foglio di stile del
   sito. Senza questo vincolo le due mappe si pestano i piedi. */
.map #map-container {
    position: relative;
    padding-bottom: 56.25%;
}

.map #map-container > svg.datamap {
    position: absolute;
}

/* Riempimento dei paesi: il gradiente è dichiarato nella pagina (#linear). */
.datamaps-subunit {
    fill: url(#linear);
    stroke: #fdfdfd;
}

.datamaps-bubble {
    stroke: #47cc82;
    stroke-width: 3;
    stroke-opacity: 1;
    fill: #ffffff;
    fill-opacity: 1;
}

/* I paesi in cui COOPI ha lavorato in passato compaiono solo su richiesta,
   con il pulsante dedicato. */
.datamaps-bubble.is-inactive {
    display: none;
}

/* Lo spessore dei confini non segue l'ingrandimento del disegno: sulla mappina della
   scheda paese il riquadro mostra una porzione di mondo molto piccola — un ventesimo di
   quella del planisfero, sul Gambia — e senza questo i confini diventerebbero larghi
   quanto un paese. È una delle regole che nel sito attuale inietta Datamaps. */
.datamap path:not(.datamaps-arc),
.datamap circle,
.datamap line {
    vector-effect: non-scaling-stroke;
}

/* Riquadro che compare al passaggio del mouse su una bolla. Anche queste nel sito attuale
   le inietta Datamaps; app.css poi le sovrascrive quasi tutte, ma senza di esse il
   riquadro resterebbe visibile e senza sfondo. */
.datamaps-hoverover {
    display: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hoverinfo {
    padding: 4px;
    border-radius: 1px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #cccccc;
    font-size: 12px;
    border: 1px solid #cccccc;
}