/* CountryMapWidget: a choropleth of Europe in the brand wine colour, darkest = most. Each tier
   class sets its colour once: the map fills a country with it, a list beside the map colours its
   swatches with it. Tier 5 stays clearly pink, so a country with a few experiences never reads as
   one with none (the grey). */
.country-map-t1 { --country-map-tier: #911351; }
.country-map-t2 { --country-map-tier: #a8426f; }
.country-map-t3 { --country-map-tier: #c27494; }
.country-map-t4 { --country-map-tier: #d89fb9; }
.country-map-t5 { --country-map-tier: #e8c3d4; }
.country-map {
    margin: 0;
}
.country-map-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.country-map-sea {
    fill: #dde8ee;
}
.country-map-svg path {
    fill: #f1efec;
    stroke: #fff;
    stroke-width: 0.8;
    stroke-linejoin: round;
}
.country-map-svg path[class^="country-map-t"] {
    fill: var(--country-map-tier);
}
.country-map-svg path[class^="country-map-t"]:hover {
    stroke: #5e0c35;
    stroke-width: 1.6;
}
.country-map-label {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    fill: #3a0820;
    stroke: #fff;
    stroke-width: 5px;
    stroke-linejoin: round;
    paint-order: stroke;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}
.country-map-inset-box {
    fill: #fff;
    stroke: #d9d0d4;
}

.country-map-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: -2px;
    background: var(--country-map-tier);
}

/* On a phone the map is a third of its desktop size: larger figures, so they stay readable. */
@media (max-width: 767px) {
    .country-map-label {
        font-size: 40px;
        stroke-width: 8px;
    }
}