/*
 * Die Karte in der Sprache von Spieldetailseite, „Alle Spiele", „Sportarten"
 * und Startseite: dieselben Farben, dieselbe Schrift für Zahlen und Namen.
 * Die Landkarte selbst tritt in Grau zurück, damit nur die Grounds Farbe
 * tragen: die Fahnen der Länder, in denen gehoppt wurde. Die Versprechen stehen in specs/grounds.md.
 */

.map-page {
    --mp-night: #253032;
    --mp-grass: #2e7d32;
    --mp-paper: #eef2ef;
    --mp-paper-hover: #e3eae5;
    --mp-ink: #1e2629;
    --mp-muted: #5c6b66;
    --mp-numeral: 'Barlow Semi Condensed', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Vorspann: der Kasten aus intro-text.md, in der ruhigen Form von „Sportarten". */

.map-page .collection-intro {
    margin: 4px 0 18px;
    background: transparent;
    border: 0;
}

.map-page .collection-intro .card-header {
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--mp-numeral);
    font-weight: 700;
    font-size: 22px;
    color: var(--mp-night);
}

.map-page .collection-intro .card-body {
    padding: 4px 0 0;
    font-style: normal;
    font-size: 16px;
    line-height: 1.55;
    color: var(--mp-ink);
}

.map-page .collection-intro .card-body a {
    color: var(--mp-grass);
}

.map-page .collection-numbers {
    display: block;
    margin-top: 6px;
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 17px;
    color: var(--mp-muted);
    font-variant-numeric: tabular-nums;
}

/* Die Sportart-Reiter: Schilder auf Papier, der gewählte in Nachtfarbe. Der
   Baustein ist mit „Grounds" geteilt; hier wird er nur für die Karte umgezogen. */

.map-filter {
    scroll-margin-top: 12px;
}

.map-page .map-filter > .btn-group {
    gap: 6px;
    margin-bottom: 16px !important;
}

.map-page .map-filter .btn-group .btn {
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-radius: 6px;
    background: var(--mp-paper);
    color: var(--mp-night);
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
}

.map-page .map-filter .btn-group .btn:hover {
    background: var(--mp-paper-hover);
}

.map-page .map-filter .btn-group .btn.selected {
    background: var(--mp-night);
    color: #fff;
}

.map-page .map-filter .btn-group .btn:focus-visible {
    outline: 2px solid var(--mp-night);
    outline-offset: 2px;
    box-shadow: none;
}

.map-page .map-filter .dropdown-item {
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 16px;
    color: var(--mp-night);
}

/* Die Karte */

.map-frame {
    padding: 6px;
    background: var(--mp-paper);
    border-radius: 8px;
}

#map {
    height: min(760px, 78vh);
    width: 100%;
    border-radius: 5px;
    background: #cfd1d0;
}

/* Auf dem Telefon verschiebt ein Wischen über der Karte die Karte, nicht die
   Seite. Eine Karte, die den ganzen Bildschirm füllt, ließe sich deshalb nicht
   mehr verlassen — darüber und darunter muss Seite zum Wischen bleiben. */
@media (max-width: 767.98px) {
    #map {
        height: min(440px, 55vh);
    }
}

.map-page .leaflet-tile-pane {
    filter: grayscale(1) contrast(.88) brightness(1.06);
}

.map-page .leaflet-bar a,
.map-page .leaflet-bar a:hover {
    color: var(--mp-night);
}

.map-page .leaflet-control-attribution {
    font-size: 11px;
}

/* Ein Ground: die Fahne seines Landes — auf einen Blick, in welchen Ländern
   schon gehoppt wurde. Ein weißer Rand trennt Fahnen, die übereinanderliegen.
   Die Fläche um sie ist größer als die Fahne, damit sie auch mit dem Finger
   zu treffen ist. */

.map-flag {
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-flag img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #fff, 0 1px 3px rgba(37, 48, 50, .45);
}

.map-flag--square img {
    width: 15px;
}

.map-flag:hover img,
.map-flag:focus-visible img {
    box-shadow: 0 0 0 2px var(--mp-night);
}

.map-flag:focus-visible {
    outline: none;
}

/* Ein Ground ohne erfasstes Land: ein Punkt statt einer Fahne. */
.map-flag--none::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--mp-night);
}

/* Aus der Ferne liegen Hunderte Grounds auf wenigen Millimetern Deutschland.
   Dort werden die Fahnen kleiner, damit aus ihnen ein Teppich wird und kein
   Klumpen. */
.map--far .map-flag img {
    width: 15px;
    height: 10px;
    border-radius: 1px;
    box-shadow: 0 0 0 .5px rgba(37, 48, 50, .5);
}

.map--far .map-flag--square img {
    width: 10px;
}

/* Das Feld zu einem Ground: Fahne und Stadt, darunter der Name — dieselbe
   Reihenfolge wie auf den Kacheln der Spiele. */

.map-popup .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(37, 48, 50, .25);
}

.map-popup .leaflet-popup-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 10px 14px 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--mp-ink);
}

.map-popup__place {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--mp-muted);
}

.map-popup__flag {
    max-width: 22px;
    max-height: 14px;
}

.map-popup__name {
    font-family: var(--mp-numeral);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--mp-night);
}

a.map-popup__name {
    color: var(--mp-grass);
    text-decoration: none;
}

a.map-popup__name:hover {
    text-decoration: underline;
}

.map-popup .coming-soon-badge {
    align-self: flex-start;
    margin-top: 4px;
}